/* ============ VARIABLES ============ */
:root{
--sand:#F5E6D3;
--sand-light:#FFF8F0;
--terracotta:#C1694F;
--terra-dark:#A0513A;
--brick:#8B3A2A;
--cream:#FFFBF5;
--gold:#D4A853;
--dark:#2C1810;
--warm-gray:#6B5B50;
--white:#FFFFFF;
--red:#E01E2B;
--shadow-sm:0 2px 8px rgba(44,24,16,0.06);
--shadow-md:0 6px 24px rgba(44,24,16,0.08);
--shadow-lg:0 12px 40px rgba(44,24,16,0.1);
--radius:16px;
--radius-lg:24px;
}
/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--dark);overflow-x:hidden}
/* ============ TOP BAR ============ */
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:38px;background:var(--dark);color:rgba(255,255,255,0.7);font-size:12px;position:fixed;top:0;left:0;right:0;z-index:110;transition:transform 0.3s}
.top-bar.hidden{transform:translateY(-100%)}
.top-contacts{display:flex;gap:20px;align-items:center}
.top-contacts a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color 0.2s;font-weight:500}
.top-contacts a:hover{color:#fff}
.top-socials a{width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,0.6);font-size:11px;font-weight:700;transition:all 0.2s}
.top-socials a:hover{background:var(--terracotta);color:#fff}
.topbar-help-btn{background:var(--red);color:#fff;padding:3px 12px;border-radius:12px;font-weight:700;font-size:11px;text-decoration:none}
.help-text{}
/* ============ NAV ============ */
nav{display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:100px;background:rgba(255,251,245,0.97);backdrop-filter:blur(12px);position:fixed;top:38px;left:0;right:0;z-index:100;border-bottom:1px solid rgba(193,105,79,0.1);transition:top 0.3s;box-shadow:var(--shadow-sm)}
nav.stuck{top:0;box-shadow:var(--shadow-md)}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo svg{transition:transform 0.3s}
.logo:hover svg{transform:scale(1.03)}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--warm-gray);font-weight:600;font-size:13px;transition:color 0.3s}
.nav-links a:hover{color:var(--red)}
.nav-r{display:flex;align-items:center;gap:12px}
.nav-search{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(107,91,80,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--warm-gray)}
.lang{display:flex;gap:2px;background:var(--sand);border-radius:16px;padding:2px}
.lang button{border:none;background:transparent;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;border-radius:14px;color:var(--warm-gray);transition:all 0.2s}
.lang button.active{background:var(--terracotta);color:#fff}
/* ============ DROPDOWN NAV ============ */
.nav-dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--white);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px 0;min-width:200px;z-index:200;border:1px solid rgba(193,105,79,0.08)}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 20px;font-size:13px;font-weight:500;color:var(--warm-gray);text-decoration:none;transition:all 0.2s}
.dropdown-menu a:hover{background:var(--sand-light);color:var(--red)}
/* ============ BURGER ============ */
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:201}
.burger span{display:block;width:24px;height:2.5px;background:var(--dark);margin:5px 0;border-radius:2px;transition:all 0.3s}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
/* ============ HERO ============ */
.hero{min-height:70vh;padding:160px 48px 80px;display:flex;align-items:center;position:relative;overflow:hidden;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,248,240,0.92),rgba(255,248,240,0.7))}
.hero-inner{max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:1}
.hero-left{max-width:650px}
.hero h1{font-family:'Inter';font-size:56px;line-height:1.08;font-weight:800;letter-spacing:-1px;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{font-size:19px;line-height:1.8;color:var(--warm-gray);max-width:500px}
/* ============ HOME SECTIONS ============ */
.home-section{padding:60px 48px;max-width:1200px;margin:0 auto}
.home-section--sand{background:var(--sand-light);max-width:100%;padding:60px 48px}
.home-section--sand>*{max-width:1200px;margin-left:auto;margin-right:auto}
.section-title{font-family:'Inter';font-size:40px;font-weight:800;margin-bottom:20px;letter-spacing:-0.5px}
.section-title em{font-style:normal;color:var(--red)}
.section-sub{font-size:17px;color:var(--warm-gray);text-align:center;margin-bottom:32px}
.muted{color:var(--warm-gray);font-size:14px}
.link-arrow{color:var(--red);font-weight:700;font-size:14px;text-decoration:none;display:inline-block;margin-top:12px}
.link-arrow:hover{text-decoration:underline}
/* ============ BLOG + CHECKLIST ============ */
.home-grid-2{display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px;align-items:start}
.blog-card{background:var(--sand-light);border-radius:var(--radius);padding:20px;margin-bottom:14px;border-left:4px solid var(--red);box-shadow:var(--shadow-sm);transition:transform 0.2s}
.blog-card:hover{transform:translateX(4px)}
.blog-card .pain{font-weight:700;font-size:16px;color:var(--brick);margin-bottom:6px}
.blog-card .answer{font-size:14px;color:var(--warm-gray);line-height:1.7}
/* Checklist card */
.checklist-card{background:linear-gradient(135deg,var(--red),var(--brick));border-radius:var(--radius-lg);padding:36px;color:#fff;position:relative;overflow:hidden}
.checklist-card::before{content:'';position:absolute;top:-40px;right:-30px;width:150px;height:150px;border:30px solid rgba(255,255,255,0.06);border-radius:50%}
.checklist-icon{font-size:40px;margin-bottom:16px}
.checklist-card h3{font-size:22px;font-weight:700;line-height:1.3;margin-bottom:12px}
.checklist-card p{font-size:15px;opacity:0.9;line-height:1.7;margin-bottom:20px}
.btn-checklist{display:inline-block;background:#fff;color:var(--red);padding:12px 28px;border-radius:28px;font-weight:700;font-size:15px;text-decoration:none;transition:all 0.3s}
.btn-checklist:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
/* ============ COUNTERS ============ */
.counters-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
.counter-item{background:var(--white);border-radius:var(--radius);padding:28px;text-align:center;box-shadow:var(--shadow-md)}
.counter-num{font-family:'Inter';font-size:40px;font-weight:800;color:var(--red)}
.counter-label{font-size:14px;color:var(--warm-gray);margin-top:4px;font-weight:500}
/* ============ ABOUT BRIEF ============ */
.about-brief{margin-bottom:32px;font-size:17px;line-height:1.8;color:var(--warm-gray)}
/* ============ JOIN BLOCK ============ */
.join-block{display:grid;grid-template-columns:1.3fr 0.7fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.join-form{background:var(--white);padding:36px}
.join-form h3{font-family:'Inter';font-size:28px;font-weight:800;margin-bottom:20px}
.join-form form{display:flex;flex-direction:column;gap:12px}
.join-form input,.join-form select{padding:12px 16px;border:1.5px solid var(--sand);border-radius:12px;font-size:15px;font-family:'Inter';background:var(--cream);outline:none;width:100%}
.join-form input:focus,.join-form select:focus{border-color:var(--red)}
.join-form .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.join-form button{background:var(--red);color:#fff;border:none;padding:14px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter';transition:all 0.3s}
.join-form button:hover{background:var(--brick)}
.msg-success{background:#d4edda;border:1px solid #c3e6cb;border-radius:12px;padding:12px;margin-bottom:12px;color:#155724;font-size:14px}
.join-tg{background:linear-gradient(135deg,var(--red),var(--brick));padding:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;text-decoration:none;transition:all 0.3s}
.join-tg:hover{opacity:0.95}
.tg-icon-big{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;border:2px solid rgba(255,255,255,0.2)}
.join-tg h3{font-family:'Inter';font-size:24px;font-weight:700;margin-bottom:8px}
.join-tg p{font-size:15px;opacity:0.85;margin-bottom:20px}
.btn-tg-white{background:#fff;color:var(--red);padding:12px 28px;border-radius:28px;font-weight:700;font-size:14px;display:inline-block}
/* ============ MAP ============ */
.map-s{padding:60px 48px;max-width:1200px;margin:0 auto}
.sec-h{text-align:center;margin-bottom:48px}
.sec-h h2{font-family:'Inter';font-size:44px;font-weight:800;margin-bottom:12px;letter-spacing:-0.5px}
.sec-h h2 em{font-style:normal;color:var(--red)}
.sec-h p{font-size:17px;color:var(--warm-gray);max-width:500px;margin:0 auto}
.map-box{position:relative;background:var(--dark);border-radius:20px;overflow:hidden;padding:20px}
.map-box img{width:100%;display:block;border-radius:12px;opacity:0.9}
.map-pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;text-align:center;z-index:5}
.pin-dot{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFD54F,#E9A820);border:3px solid #fff;box-shadow:0 0 0 3px rgba(233,168,32,0.25),0 2px 8px rgba(0,0,0,0.3);margin:0 auto;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.pin:hover .pin-dot{transform:scale(1.5)}
.pin--planned .pin-dot{background:radial-gradient(circle at 40% 35%,#ccc,#999);box-shadow:0 0 0 3px rgba(150,150,150,0.2),0 2px 6px rgba(0,0,0,0.2)}
.pin-name{font-size:11px;font-weight:700;color:#fff;margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,0.8);white-space:nowrap;pointer-events:none}
.pin--planned .pin-name{opacity:0.6}
#mapTooltip{display:none;position:absolute;background:rgba(44,24,16,0.95);backdrop-filter:blur(10px);color:#fff;padding:14px 18px;border-radius:12px;font-size:13px;line-height:1.5;z-index:20;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,0.3);max-width:280px}
#mapTooltip strong{font-size:15px;display:block;margin-bottom:6px;color:var(--gold)}
#mapTooltip .tt-line{margin-bottom:3px;opacity:0.85}
#mapTooltip .tt-status{margin-top:6px;font-size:11px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
/* ============ HYMN VIDEO ============ */
.hymn{padding:60px 48px;max-width:1200px;margin:0 auto}
.hymn-video{position:relative;border-radius:200px 200px 40px 40px;overflow:hidden;background:var(--dark);box-shadow:var(--shadow-lg),0 20px 60px rgba(44,24,16,0.15);max-width:800px;margin:0 auto 24px}
.hymn-video::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(44,24,16,0.5));z-index:1;pointer-events:none}
.hymn-video::after{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border-radius:196px 196px 36px 36px;border:1px solid rgba(255,255,255,0.08);pointer-events:none;z-index:1}
.play-btn{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;border:2px solid rgba(255,255,255,0.3);cursor:pointer;z-index:2;transition:all 0.4s}
.play-btn:hover{background:var(--red);border-color:var(--red);transform:translate(-50%,-50%) scale(1.12)}
.hymn-label{position:absolute;bottom:24px;left:0;right:0;text-align:center;z-index:2;color:#fff}
.hymn-label h3{font-family:'Inter';font-size:22px;opacity:0.9;font-weight:700}
.hymn-label p{font-size:13px;opacity:0.5;margin-top:4px}
/* ============ PARTNERS ============ */
.partners{padding:60px 48px;background:var(--sand-light)}
.partners .inner{max-width:1200px;margin:0 auto}
.partner-grid{display:flex;gap:40px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
.partner-logo{width:220px;height:100px;background:var(--white);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:16px;border:1px solid rgba(193,105,79,0.06);transition:all 0.3s;box-shadow:var(--shadow-sm);text-decoration:none}
.partner-logo:hover{box-shadow:var(--shadow-md)}
.partner-logo img{max-height:70px;max-width:180px;filter:grayscale(20%);opacity:0.85;transition:all 0.3s}
.partner-logo:hover img{filter:grayscale(0%);opacity:1}
/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:-40px auto 0;position:relative;z-index:10;background:var(--dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.stat{padding:36px;text-align:center;border-right:1px solid rgba(255,255,255,0.08);color:#fff}
.stat:last-child{border:none}
.stat-n{font-family:'Inter';font-size:44px;font-weight:800;color:var(--gold)}
.stat-l{font-size:14px;margin-top:6px;opacity:0.7;font-weight:500}
/* ============ QUIZ ============ */
.quiz-wrapper{background:var(--white);border-radius:var(--radius-lg);padding:48px;box-shadow:var(--shadow-lg);border:1px solid rgba(193,105,79,0.06);text-align:center;max-width:700px;margin:0 auto}
.quiz-start-icon{font-size:56px;margin-bottom:16px}
.btn-quiz-start{background:var(--red);color:#fff;border:none;padding:14px 36px;border-radius:28px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter';transition:all 0.3s}
.btn-quiz-start:hover{background:var(--brick);transform:translateY(-2px)}
.quiz-progress{height:6px;background:var(--sand);border-radius:3px;margin-bottom:32px;overflow:hidden}
.quiz-progress-bar{height:100%;background:var(--red);border-radius:3px;transition:width 0.4s ease;width:0}
.quiz-question{font-size:24px;font-weight:700;margin-bottom:28px;line-height:1.4}
.quiz-answers{display:flex;flex-direction:column;gap:12px}
.quiz-answer-btn{background:var(--sand-light);border:2px solid var(--sand);border-radius:var(--radius);padding:16px 24px;font-size:16px;font-weight:500;cursor:pointer;text-align:left;transition:all 0.2s;font-family:'Inter';color:var(--dark)}
.quiz-answer-btn:hover{border-color:var(--red);background:rgba(224,30,43,0.04);transform:translateX(4px)}
.quiz-result{text-align:center}
.quiz-result h2{font-family:'Inter';font-size:32px;font-weight:800;color:var(--red);margin-bottom:12px}
.quiz-result p{font-size:17px;line-height:1.7;color:var(--warm-gray);margin-bottom:20px}
.quiz-result-rec{background:var(--sand-light);border-radius:var(--radius);padding:20px;margin-bottom:24px;font-size:15px;line-height:1.7;color:var(--warm-gray);border-left:4px solid var(--red)}
.quiz-result-img img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:4px solid var(--sand)}
/* ============ ACCORDION ============ */
.accordion-item{background:var(--white);border-radius:var(--radius-lg);margin-bottom:16px;border:1px solid rgba(193,105,79,0.06);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:box-shadow 0.3s}
.accordion-item:hover{box-shadow:var(--shadow-md)}
.accordion-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px}
.accordion-header h2{font-family:'Inter';font-size:28px;font-weight:800;color:var(--dark);margin:0}
.accordion-arrow{font-size:14px;color:var(--warm-gray);transition:transform 0.3s}
.accordion-item.active .accordion-arrow{transform:rotate(180deg)}
.accordion-body{max-height:0;overflow:hidden;padding:0 32px;transition:max-height 0.4s ease,padding 0.3s ease}
.accordion-item.active .accordion-body{max-height:3000px;padding:0 32px 32px}
/* ============ TEAM CARDS ============ */
.team-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(193,105,79,0.06);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.team-card img{width:100%;height:320px;object-fit:cover}
.team-card-info{padding:24px}
.team-card-info h3{font-size:20px;font-weight:700;margin-bottom:6px}
.team-position{font-size:14px;color:var(--red);font-weight:600;margin-bottom:10px}
.team-bio{font-size:14px;color:var(--warm-gray);line-height:1.7}
.team-card-sm{background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(193,105,79,0.06);text-align:center;padding-bottom:20px;box-shadow:var(--shadow-sm)}
.team-card-sm img{width:100%;height:240px;object-fit:cover}
.team-avatar{width:100%;height:240px;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:48px}
.team-card-sm h4{font-size:16px;margin-top:14px;font-weight:700;padding:0 16px}
.team-card-sm p{font-size:13px;color:var(--red);margin-top:4px;padding:0 16px}
/* ============ FOOTER ============ */
footer{background:var(--dark);color:#fff;padding:56px 48px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:48px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;max-width:1200px;margin:0 auto 32px}
.f-brand{font-family:'Inter';font-size:20px;font-weight:700}
.f-brand span{display:block;font-size:10px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.f-brand p{font-size:13px;color:rgba(255,255,255,0.5);margin-top:12px;line-height:1.7;font-weight:400}
.f-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;color:var(--gold)}
.f-col a{display:block;color:rgba(255,255,255,0.6);text-decoration:none;font-size:13px;margin-bottom:8px;transition:color 0.2s}
.f-col a:hover{color:#fff}
.f-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,0.3)}
.mob-only{display:none!important}
@media(max-width:1100px){
.nav-links.open .mob-only{display:flex!important}
}
/* ============ RESPONSIVE — TABLET ============ */
@media(max-width:1100px){
.burger{display:block;position:fixed;top:46px;right:16px;z-index:301;background:var(--white);border-radius:8px;padding:8px}
nav.stuck .burger{top:8px}
.nav-r{display:none}
.nav-links{
display:none;
position:fixed;
top:0;left:0;right:0;bottom:0;
width:100%;
height:100vh;
height:100dvh;
background:var(--white);
flex-direction:column;
padding:0;
gap:0;
z-index:300;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.nav-links.open{display:flex}
.nav-links::before{
content:'';
display:block;
height:60px;
flex-shrink:0;
}
.nav-links>li{
border-bottom:1px solid var(--sand);
margin:0 20px;
}
.nav-links>li>a{
display:block;
padding:16px 0;
font-size:18px;
font-weight:700;
color:var(--dark);
}
.dropdown-menu{
position:static;
box-shadow:none;
border:none;
border-radius:0;
padding:0 0 12px 0;
display:none;
min-width:auto;
background:transparent;
}
.nav-dropdown.mob-open .dropdown-menu{display:block}
.nav-dropdown:hover .dropdown-menu{display:none}
.nav-dropdown.mob-open:hover .dropdown-menu{display:block}
.dropdown-menu a{
padding:10px 16px;
font-size:15px;
color:var(--warm-gray);
border-left:3px solid var(--sand);
margin-left:4px;
}
.dropdown-menu a:hover{
border-left-color:var(--red);
color:var(--red);
background:transparent;
}
.home-grid-2{grid-template-columns:1fr}
.join-block{grid-template-columns:1fr}
.f-grid{grid-template-columns:1fr 1fr}
.hymn-video{height:380px;border-radius:160px 160px 32px 32px}
.hymn-video::after{border-radius:156px 156px 28px 28px}
}
/* ============ RESPONSIVE — SMALL TABLET ============ */
@media(max-width:768px){
.counters-row{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr)}
.f-grid{grid-template-columns:1fr}
nav{padding:0 16px}
}
/* ============ RESPONSIVE — MOBILE ============ */
@media(max-width:640px){
/* Top bar */
.top-bar{padding:4px 12px;height:auto;min-height:34px;flex-wrap:nowrap;gap:4px;justify-content:center}
.top-contacts{gap:8px;font-size:11px;flex-wrap:nowrap}
.top-contacts span{display:none}
.top-socials{display:none}
.top-bar .top-contacts a[style*="background"]{font-size:0;padding:3px 8px}
.top-bar .top-contacts a[style*="background"]::before{content:"✈";font-size:12px}
.help-text{display:none}
.topbar-help-btn{padding:4px 8px;font-size:14px}
/* Nav */
nav{padding:0 12px;height:56px;top:34px}
nav.stuck{top:0}
.logo svg{max-width:130px!important}
.nav-r{gap:6px}
.lang button{padding:3px 6px;font-size:9px}
.nav-search{width:26px;height:26px;font-size:11px}
/* Hero */
.hero{padding:100px 16px 40px;min-height:auto}
.hero h1{font-size:30px;letter-spacing:-0.5px}
.hero p{font-size:15px}
/* Sections */
.home-section{padding:32px 16px}
.home-section--sand{padding:32px 16px}
.section-title{font-size:26px}
.sec-h h2{font-size:28px}
/* Blog */
.blog-card{padding:14px}
.blog-card .pain{font-size:14px}
.blog-card .answer{font-size:12px}
/* Checklist */
.checklist-card{padding:24px}
.checklist-card h3{font-size:17px}
.checklist-card p{font-size:13px}
/* Counters */
.counters-row{gap:10px}
.counter-item{padding:16px 10px}
.counter-num{font-size:26px}
.counter-label{font-size:11px}
/* Join */
.join-form{padding:20px 16px}
.join-form h3{font-size:20px}
.join-form .fg-row{grid-template-columns:1fr}
.join-form input,.join-form select{font-size:14px;padding:10px 12px}
.join-tg{padding:24px 16px}
.join-tg h3{font-size:18px}
.join-tg p{font-size:13px}
.tg-icon-big{width:48px;height:48px;font-size:20px;margin-bottom:12px}
.btn-tg-white{padding:10px 20px;font-size:13px}
/* Stats */
.stats{margin:0 16px;border-radius:var(--radius)}
.stat{padding:16px 10px}
.stat-n{font-size:26px}
.stat-l{font-size:11px}
/* Map */
.map-s{padding:24px 16px}
/* Hymn */
.hymn{padding:24px 16px}
.hymn-video{height:280px;border-radius:120px 120px 24px 24px}
.hymn-video::after{border-radius:116px 116px 20px 20px}
.hymn-label h3{font-size:16px}
.play-btn{width:56px;height:56px;font-size:22px}
/* Partners */
.partners{padding:32px 16px}
.partner-grid{gap:12px}
.partner-logo{width:140px;height:60px;padding:8px}
.partner-logo img{max-height:40px;max-width:120px}
/* Quiz */
.quiz-wrapper{padding:20px 16px}
.quiz-question{font-size:17px;margin-bottom:20px}
.quiz-answer-btn{font-size:14px;padding:12px 14px}
.quiz-result h2{font-size:24px}
/* Accordion */
.accordion-header{padding:14px 16px}
.accordion-header h2{font-size:18px}
.accordion-item.active .accordion-body{padding:0 16px 16px}
/* Footer */
footer{padding:28px 16px;border-radius:var(--radius) var(--radius) 0 0}
.f-bottom{flex-direction:column;gap:4px;text-align:center}
}
/* ===== TOP BAR: кнопка «Получить помощь» крупнее ===== */
.topbar-help-btn{
background:var(--red);
color:#fff;
padding:6px 18px;
border-radius:16px;
font-weight:700;
font-size:13px;
text-decoration:none;
letter-spacing:0.3px;
transition:transform 0.2s, background 0.2s;
}
.topbar-help-btn:hover{
background:#fff;
color:var(--red);
transform:translateY(-1px);
}
.top-bar{height:42px}
/* ===== NAV: увеличенный шрифт меню ===== */
.nav-links a{
font-size:15px;
font-weight:600;
}
.nav-links{gap:24px}
/* ===== HERO SLIDER ===== */
.hero-slider{
position:relative;
min-height:78vh;
padding:160px 48px 80px;
display:flex;
align-items:center;
overflow:hidden;
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 1.2s ease-in-out;
}
.hero-slide.active{opacity:1}
/* =============================================================
HERO SLIDER — фото общества (![]()
вместо background-image,
чтобы object-position управлялся из админки)
============================================================= */
.hero-slide__img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center; /* перебивается inline-стилем из админки */
display:block;
}
.hero-slider .hero-overlay{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(
100deg,
rgba(255,248,240,0.94) 0%,
rgba(255,248,240,0.78) 45%,
rgba(44,24,16,0.35) 100%
);
}
.hero-slider .hero-inner{
max-width:1200px;
margin:0 auto;
width:100%;
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:48px;
align-items:center;
}
.hero-arrow{
position:absolute;
right:32px;
top:50%;
transform:translateY(-50%);
z-index:5;
width:56px;
height:56px;
border-radius:50%;
background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);
border:1.5px solid rgba(193,105,79,0.2);
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:var(--red);
cursor:pointer;
font-weight:300;
transition:all 0.3s;
box-shadow:var(--shadow-md);
}
.hero-arrow:hover{
background:var(--red);
color:#fff;
transform:translateY(-50%) scale(1.05);
}
/* ===== SUCCESS STORIES on HERO ===== */
.story-item{
position:absolute;
inset:0;
opacity:0;
transform:translateY(8px);
transition:opacity 0.5s, transform 0.5s;
pointer-events:none;
}
.story-item.active{
opacity:1;
transform:translateY(0);
pointer-events:auto;
position:relative;
}
.story-avatar{
width:54px;
height:54px;
border-radius:50%;
object-fit:cover;
margin-bottom:12px;
border:3px solid var(--sand);
}
.story-avatar--ph{
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--red),var(--brick));
color:#fff;
font-weight:800;
font-size:22px;
font-family:'Inter',sans-serif;
}
.story-text{
font-size:14.5px;
line-height:1.6;
color:var(--dark);
margin:0 0 12px;
}
.story-author{
font-size:13px;
font-weight:700;
color:var(--red);
}
.story-dot{
width:8px;
height:8px;
border-radius:50%;
border:none;
background:rgba(193,105,79,0.25);
cursor:pointer;
padding:0;
transition:all 0.2s;
}
.story-dot.active{background:var(--red);width:22px;border-radius:4px}
/* ===== HOME GRID — две колонки: блог + чек-лист/тест ===== */
.home-grid-main{
display:grid;
grid-template-columns:1.3fr 0.85fr;
gap:32px;
align-items:start;
}
.col-blog{}
.col-right{display:flex;flex-direction:column;gap:20px}
.quiz-card-inline{
background:var(--white);
border-radius:var(--radius-lg);
padding:28px 24px;
box-shadow:var(--shadow-md);
border:1px solid rgba(193,105,79,0.08);
text-align:center;
}
.quiz-card-inline .quiz-start-icon{font-size:42px;margin-bottom:10px}
.quiz-card-inline h3{
font-family:'Inter';
font-size:19px;
font-weight:800;
margin-bottom:10px;
line-height:1.3;
}
.quiz-card-desc{
font-size:13.5px;
color:var(--warm-gray);
margin-bottom:18px;
line-height:1.55;
}
.quiz-card-inline .btn-quiz-start{
padding:12px 28px;
font-size:14px;
}
.quiz-card-inline .quiz-question{font-size:18px;margin-bottom:20px}
.quiz-card-inline .quiz-answer-btn{font-size:14px;padding:12px 16px}
/* ===== JOIN CTA — большая кнопка по центру под счётчиками ===== */
.join-cta-wrap{
display:flex;
justify-content:center;
margin-top:8px;
}
.join-cta{
display:inline-flex;
align-items:center;
gap:14px;
background:linear-gradient(135deg,var(--red),var(--brick));
color:#fff;
text-decoration:none;
padding:18px 64px;
border-radius:40px;
font-size:18px;
font-weight:700;
letter-spacing:0.3px;
box-shadow:0 8px 24px rgba(224,30,43,0.25);
transition:all 0.3s;
min-width:340px;
justify-content:center;
}
.join-cta:hover{
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(224,30,43,0.35);
}
.join-cta-icon{
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,0.18);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
}
/* =============================================================
NEWS BLOCK — Tengri-style — full width
============================================================= */
.news-block{
background:var(--dark);
color:#fff;
padding:0;
margin:60px 0;
}
.news-block-inner{
max-width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:1.55fr 1fr;
gap:0;
min-height:560px;
}
/* LEFT: главная новость с картинкой на фоне */
.news-main{
position:relative;
display:flex;
align-items:flex-end;
background-color:#1a0f08;
background-size:cover;
background-position:center;
text-decoration:none;
color:#fff;
overflow:hidden;
min-height:560px;
transition:transform 0.5s;
}
.news-main:hover{transform:scale(1.005)}
.news-main-overlay{
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(0,0,0,0) 30%,
rgba(0,0,0,0.5) 65%,
rgba(0,0,0,0.92) 100%
);
z-index:1;
}
.news-main-content{
position:relative;
z-index:2;
padding:36px 40px;
width:100%;
}
.news-main-cat{
display:inline-block;
background:#23a455;
color:#fff;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
padding:5px 12px;
border-radius:4px;
margin-bottom:14px;
}
.news-main-title{
font-family:'Inter',sans-serif;
font-size:32px;
font-weight:800;
line-height:1.18;
letter-spacing:-0.5px;
margin:0 0 14px;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,0.5);
max-width:90%;
}
.news-main-excerpt{
font-size:15px;
line-height:1.55;
color:rgba(255,255,255,0.85);
margin:0 0 16px;
max-width:80%;
text-shadow:0 1px 6px rgba(0,0,0,0.4);
}
.news-main-meta{
display:flex;
align-items:center;
gap:16px;
font-size:13px;
font-weight:500;
color:rgba(255,255,255,0.85);
}
.news-main-date{
font-weight:600;
}
.news-main--empty{
background:linear-gradient(135deg,#2c1810,#1a0f08);
align-items:center;
justify-content:center;
}
.news-main--empty .news-main-content{
text-align:center;
padding:60px 40px;
}
.news-main--empty .news-main-title{
font-size:22px;
opacity:0.5;
text-shadow:none;
}
/* RIGHT: панель с табами */
.news-panel{
background:#231811;
display:flex;
flex-direction:column;
}
.news-tabs{
display:flex;
background:#1a0f08;
flex-shrink:0;
}
.news-tab{
flex:1;
background:transparent;
border:none;
color:rgba(255,255,255,0.55);
padding:18px 20px;
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:700;
cursor:pointer;
text-transform:none;
letter-spacing:0.2px;
transition:all 0.2s;
position:relative;
border-bottom:3px solid transparent;
}
.news-tab:hover{color:rgba(255,255,255,0.85)}
.news-tab.active{
color:#fff;
background:#23a455; /* зелёный как у Tengri */
border-bottom-color:#23a455;
}
/* List of news rows in the right panel */
.news-tab-pane{
display:none;
flex:1;
overflow-y:auto;
padding:8px 0;
}
.news-tab-pane.active{display:block}
/* кастомный скроллбар */
.news-tab-pane::-webkit-scrollbar{width:6px}
.news-tab-pane::-webkit-scrollbar-track{background:transparent}
.news-tab-pane::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}
.news-tab-pane::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}
.news-row{
display:block;
padding:18px 24px;
text-decoration:none;
color:#fff;
border-bottom:1px solid rgba(255,255,255,0.06);
transition:background 0.2s;
}
.news-row:last-child{border-bottom:none}
.news-row:hover{background:rgba(255,255,255,0.04)}
.news-row-title{
font-family:'Inter',sans-serif;
font-size:14.5px;
font-weight:700;
line-height:1.4;
color:#fff;
margin-bottom:8px;
}
.news-row:hover .news-row-title{color:#23a455}
.news-row-meta{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:rgba(255,255,255,0.5);
font-weight:500;
}
.news-row-date{color:#23a455;font-weight:600}
.news-row-dot{opacity:0.4}
.news-row-cat{}
.news-empty{
padding:40px 24px;
text-align:center;
color:rgba(255,255,255,0.4);
font-size:13px;
}
.news-block-foot{
background:#1a0f08;
padding:16px 0;
text-align:center;
border-top:1px solid rgba(255,255,255,0.05);
}
.news-all-btn{
display:inline-block;
color:#23a455;
text-decoration:none;
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
padding:6px 24px;
transition:opacity 0.2s;
}
.news-all-btn:hover{opacity:0.8}
/* ===== HYMN — прямоугольная форма ===== */
.hymn-video--rect{
border-radius:var(--radius-lg) !important;
height:480px;
max-width:960px;
}
.hymn-video--rect::after{
border-radius:calc(var(--radius-lg) - 4px) !important;
}
/* ===== FLOATING TELEGRAM ===== */
.tg-floating{
position:fixed;
right:24px;
bottom:24px;
z-index:300;
display:flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,var(--red),var(--brick));
color:#fff;
text-decoration:none;
padding:14px 22px;
border-radius:50px;
box-shadow:0 8px 28px rgba(224,30,43,0.4);
font-weight:700;
font-size:14px;
transition:all 0.3s;
animation:tgPulse 2.4s ease-in-out infinite;
}
.tg-floating:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 14px 36px rgba(224,30,43,0.5);
animation:none;
}
.tg-floating__icon{
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
flex-shrink:0;
}
.tg-floating__text{white-space:nowrap}
@keyframes tgPulse{
0%,100%{box-shadow:0 8px 28px rgba(224,30,43,0.4),0 0 0 0 rgba(224,30,43,0.4)}
50%{box-shadow:0 8px 28px rgba(224,30,43,0.4),0 0 0 14px rgba(224,30,43,0)}
}
/* ===== RESPONSIVE — TABLET ===== */
@media(max-width:1100px){
.hero-slider .hero-inner{
grid-template-columns:1fr;
gap:32px;
}
.hero-arrow{display:none}
.home-grid-main{
grid-template-columns:1fr;
}
.nav-links a{font-size:14px}
/* News block: на планшете главная сверху, панель снизу */
.news-block-inner{
grid-template-columns:1fr;
min-height:auto;
}
.news-main{min-height:380px}
.news-panel{min-height:auto}
.news-tab-pane{max-height:500px}
}
/* ===== RESPONSIVE — SMALL TABLET ===== */
@media(max-width:768px){
.hymn-video--rect{height:340px}
.join-cta{min-width:auto;width:100%;padding:16px 24px;font-size:16px}
.news-main{min-height:300px}
.news-main-content{padding:24px 20px}
.news-main-title{font-size:24px}
}
/* ===== RESPONSIVE — MOBILE ===== */
@media(max-width:640px){
.hero-slider{padding:100px 16px 40px;min-height:auto}
.topbar-help-btn{padding:5px 12px;font-size:12px}
.join-cta{padding:14px 20px;font-size:15px;min-width:auto;width:100%}
.join-cta-icon{width:26px;height:26px;font-size:14px}
.hymn-video--rect{height:240px;border-radius:var(--radius) !important}
.tg-floating{right:14px;bottom:14px;padding:12px 16px;font-size:13px}
.tg-floating__text{display:none}
.tg-floating__icon{width:28px;height:28px;font-size:14px}
/* News block mobile */
.news-block{margin:32px 0}
.news-main{min-height:240px}
.news-main-content{padding:20px 16px}
.news-main-title{font-size:20px}
.news-main-meta{font-size:12px;gap:10px}
.news-tab{padding:14px 12px;font-size:13px}
.news-row{padding:14px 16px}
.news-row-title{font-size:13.5px}
.news-row-meta{font-size:11px;flex-wrap:wrap}
}
/* =============================================================
КАРТА ФИЛИАЛОВ — финальная версия
• Светлый фон #d3d5c4
• Толстые белые границы
• 3D-тень под картой через drop-shadow
• При hover: регион перекрашивается, поднимается
============================================================= */
:root{
--map-bg: #d3d5c4;
--map-bg-deep: #c4c8b4;
--map-region: #a3aa8c;
--map-region-hover: #c5272b;
--map-text: #3a4030;
}
.branches-map-section{
max-width:1400px;
margin:80px auto;
padding:0 24px;
position:relative;
}
/* === HEADER === */
.branches-map-header{
text-align:center;
margin:0 0 32px;
opacity:0;
transform:translateY(20px);
transition:opacity 0.8s ease, transform 0.8s ease;
}
.is-visible .branches-map-header{opacity:1;transform:none}
.branches-map-pretitle{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
color:var(--red);
margin-bottom:12px;
position:relative;
padding:0 20px;
}
.branches-map-pretitle::before,
.branches-map-pretitle::after{
content:'';
position:absolute;
top:50%;
width:14px;
height:1px;
background:var(--red);
opacity:0.6;
}
.branches-map-pretitle::before{right:100%}
.branches-map-pretitle::after{left:100%}
.branches-map-title{
font-family:'Inter',sans-serif;
font-size:48px;
font-weight:800;
letter-spacing:-1px;
margin:0 0 12px;
color:var(--dark);
line-height:1.1;
}
.branches-map-title em{font-style:normal;color:var(--red)}
.branches-map-subtitle{
font-size:16px;
color:var(--warm-gray);
max-width:520px;
margin:0 auto;
line-height:1.6;
}
/* === COUNTERS === */
.branches-map-counts{
display:flex;
justify-content:center;
align-items:stretch;
gap:0;
margin:0 0 40px;
opacity:0;
transition:opacity 0.6s ease 0.3s;
}
.is-visible .branches-map-counts{opacity:1}
.bcount{
text-align:center;
padding:0 32px;
position:relative;
}
.bcount__num{
font-family:'Inter',sans-serif;
font-size:54px;
font-weight:800;
line-height:1;
letter-spacing:-2px;
margin-bottom:6px;
}
.bcount--active .bcount__num{color:var(--red)}
.bcount--planned .bcount__num{color:var(--gold)}
.bcount__label{
font-size:13px;
font-weight:600;
color:var(--warm-gray);
letter-spacing:0.5px;
text-transform:lowercase;
}
.bcount__divider{
width:1px;
background:linear-gradient(
to bottom,
transparent,
rgba(193,105,79,0.25) 30%,
rgba(193,105,79,0.25) 70%,
transparent
);
}
/* === КОНТЕЙНЕР КАРТЫ === */
.branches-map-wrap{
position:relative;
background:#fffbf5;
border-radius:24px;
padding:40px 32px 32px;
box-shadow:
0 24px 48px -12px rgba(58,64,48,0.32),
0 8px 16px rgba(58,64,48,0.18),
inset 0 2px 0 rgba(255,255,255,0.45),
inset 0 -2px 0 rgba(58,64,48,0.08);
border:1px solid rgba(193,105,79,0.15);
/* ВАЖНО: overflow visible — чтобы регионы при hover могли вылезать за края.
Декоративный фон-точки сделаем псевдо-элементом ::before внутри. */
overflow:visible;
}
/* Декоративная сетка-фон */
.branches-map-wrap::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(rgba(193,105,79,0.08) 1px, transparent 1px);
background-size:22px 22px;
pointer-events:none;
opacity:0.6;
border-radius:24px;
}
.branches-map-svg{
display:block;
width:100%;
height:auto;
position:relative;
z-index:1;
/* Чтобы при hover регион не обрезался по краям SVG */
overflow:visible;
}
/* === Группа карты с 3D-тенью === */
/* Это ключевая правка: drop-shadow создаёт тень "под картой",
как будто она лежит над поверхностью. */
.kz-map-group{
filter:
drop-shadow(0 14px 18px rgba(58,64,48,0.30))
drop-shadow(0 6px 8px rgba(58,64,48,0.22))
drop-shadow(0 2px 3px rgba(58,64,48,0.18));
}
/* Fallback если SVG ещё не подгрузился inline (отображается как ) */
.kz-map-image{
filter:drop-shadow(0 8px 12px rgba(58,64,48,0.25));
}
/* =============================================================
РЕГИОНЫ — с толстыми белыми границами и эффектом приподнятия
============================================================= */
.kz-region{
fill:var(--map-region);
/* Белые жирные границы — как ты просил */
stroke:#ffffff;
stroke-width:3;
stroke-linejoin:round;
stroke-linecap:round;
cursor:pointer;
transform-origin:center center;
transform-box:fill-box;
transition:
fill 0.25s ease,
stroke 0.25s ease,
stroke-width 0.25s ease,
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.35s ease;
}
/* Hover: красный + приподнятие + красная тень */
.kz-region:hover{
fill:var(--map-region-hover);
stroke:#ffffff;
stroke-width:3.5;
transform:translateY(-6px) scale(1.04);
filter:
drop-shadow(0 14px 20px rgba(197, 39, 43, 0.45))
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
/* =============================================================
ФЛАЖКИ
============================================================= */
.branch-pin{
cursor:pointer;
transform-box:fill-box;
opacity:0;
}
.is-visible .branch-pin{
animation:pinFadeIn 0.6s ease var(--delay, 0ms) forwards;
}
@keyframes pinFadeIn{
0% { opacity:0; }
100% { opacity:1; }
}
.branch-pin:hover,
.branch-pin:focus{outline:none}
.branch-pin__flag-group{
transform-origin:0 -18px;
transform-box:fill-box;
animation:flagWave 4s ease-in-out infinite;
}
.branch-pin:nth-of-type(2n) .branch-pin__flag-group{animation-delay:-1.5s}
.branch-pin:nth-of-type(3n) .branch-pin__flag-group{animation-delay:-2.8s}
@keyframes flagWave{
0%,100%{transform:skewX(0deg) scaleX(1)}
50% {transform:skewX(-6deg) scaleX(0.96)}
}
.branch-pin__pole{
stroke:#1a0f08;
stroke-width:2;
stroke-linecap:round;
}
.branch-pin__flag{
stroke:#1a0f08;
stroke-width:1.4;
stroke-linejoin:round;
filter:drop-shadow(0 2px 1.5px rgba(0,0,0,0.4));
transition:filter 0.3s ease;
}
.branch-pin--active .branch-pin__flag{fill:var(--red)}
.branch-pin--planned .branch-pin__flag{fill:#e8d5a8}
.branch-pin__base{fill:#1a0f08}
.branch-pin__base-dot{fill:#fff;opacity:0.85}
.branch-pin__shadow{fill:rgba(58,64,48,0.3)}
.branch-pin__halo{
fill:var(--red);
opacity:0.35;
transform-origin:center;
transform-box:fill-box;
animation:haloPulse 2.5s ease-in-out infinite;
pointer-events:none;
}
.branch-pin__halo--planned{
fill:#e8d5a8;
opacity:0.5;
animation-duration:3.5s;
}
@keyframes haloPulse{
0%,100%{transform:scale(0.5);opacity:0.5}
50% {transform:scale(1.6);opacity:0}
}
.branch-pin:hover .branch-pin__flag,
.branch-pin:focus .branch-pin__flag{
filter:drop-shadow(0 0 8px rgba(224,30,43,0.55)) drop-shadow(0 2px 1.5px rgba(0,0,0,0.4));
}
.branch-pin--planned:hover .branch-pin__flag,
.branch-pin--planned:focus .branch-pin__flag{
filter:drop-shadow(0 0 8px rgba(232,213,168,0.9)) drop-shadow(0 2px 1.5px rgba(0,0,0,0.4));
}
.branch-pin:hover .branch-pin__halo,
.branch-pin:focus .branch-pin__halo{
opacity:0.65;
animation-duration:1.2s;
}
/* =============================================================
ТУЛТИПЫ — позиционируются JS через SVG CTM
============================================================= */
.branch-tips{
position:absolute;
inset:0; /* контейнер на весь wrap, тултипы сами позиционируются в px */
pointer-events:none;
z-index:5;
}
.branch-tip{
position:absolute;
/* left/top назначаются из JS в пикселях относительно .branches-map-wrap */
transform:translate(-50%, calc(-100% - 26px));
opacity:0;
visibility:hidden;
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0s linear 0.22s;
pointer-events:none;
z-index:1;
width:max-content;
min-width:90px;
max-width:220px;
}
.branch-tip.is-shown{
opacity:1;
visibility:visible;
transform:translate(-50%, calc(-100% - 32px));
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0s;
z-index:10;
}
.branch-tip__inner{
position:relative;
background:#fffdf8;
color:#1a0f08;
padding:9px 14px;
border-radius:10px;
font-family:'Inter',sans-serif;
font-size:13px;
font-weight:600;
line-height:1.35;
text-align:center;
white-space:normal;
word-wrap:break-word;
hyphens:auto;
box-shadow:
0 8px 20px rgba(58,64,48,0.22),
0 2px 4px rgba(58,64,48,0.12),
inset 0 0 0 1px rgba(193,105,79,0.18);
}
.branch-tip__inner::before{
content:'';
position:absolute;
top:0; left:14px; right:14px;
height:2px;
border-radius:2px;
background:var(--red);
}
.branch-tip--planned .branch-tip__inner::before{
background:#d4a853;
}
.branch-tip__inner::after{
content:'';
position:absolute;
bottom:-6px;
left:50%;
transform:translateX(-50%) rotate(45deg);
width:10px;
height:10px;
background:#fffdf8;
box-shadow:2px 2px 4px rgba(58,64,48,0.10);
border-right:1px solid rgba(193,105,79,0.18);
border-bottom:1px solid rgba(193,105,79,0.18);
}
@media(max-width:640px){
.branch-tip{
max-width:170px;
min-width:70px;
}
.branch-tip__inner{
font-size:12px;
padding:7px 11px;
}
}
/* === Подвал карты === */
.branches-map-foot{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin-top:24px;
opacity:0;
transition:opacity 0.6s ease 0.6s;
}
.is-visible .branches-map-foot{opacity:1}
.branches-map-foot__line{
flex:1;
max-width:120px;
height:1px;
background:linear-gradient(to right, transparent, rgba(193,105,79,0.4), transparent);
}
.branches-map-foot__text{
font-size:12px;
font-weight:600;
color:var(--warm-gray);
letter-spacing:1px;
text-transform:uppercase;
}
/* === ВИЗУАЛЬНЫЙ ПИКЕР (для разработки координат пинов) === */
.branches-map-picker{
position:absolute;
top:32px;
left:32px;
background:rgba(58,64,48,0.95);
color:#fff;
padding:14px 18px;
border-radius:12px;
font-family:'Inter',sans-serif;
font-size:13px;
z-index:10;
box-shadow:0 8px 24px rgba(0,0,0,0.3);
min-width:200px;
}
.bm-picker-info{font-size:11px;opacity:0.7;margin-bottom:8px;line-height:1.4}
.bm-picker-out{font-family:monospace;font-size:14px;line-height:1.6}
.bm-picker-out b{color:#ffd54f}
.bm-picker-out button{
margin-top:8px;
background:#fff;
color:#1a0f08;
border:none;
border-radius:6px;
padding:4px 8px;
cursor:pointer;
}
/* =============================================================
МОДАЛЬНОЕ ОКНО
============================================================= */
.branch-modal{position:fixed;inset:0;z-index:1000;display:none}
.branch-modal.is-open{display:block}
.branch-modal__overlay{
position:absolute;inset:0;
background:rgba(20,10,4,0.65);
backdrop-filter:blur(6px);
animation:fadeIn 0.25s ease;
}
.branch-modal__box{
position:relative;
max-width:560px;
margin:5vh auto;
background:#fff;
border-radius:24px;
box-shadow:0 24px 80px rgba(0,0,0,0.4);
overflow:hidden;
max-height:90vh;
display:flex;
flex-direction:column;
animation:slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{
from{opacity:0;transform:translateY(30px) scale(0.95)}
to {opacity:1;transform:none}
}
.branch-modal__close{
position:absolute;
top:14px;right:14px;
width:36px;height:36px;
border-radius:50%;
background:rgba(255,255,255,0.92);
border:none;
cursor:pointer;
font-size:24px;font-weight:300;
color:#1a0f08;
z-index:5;
display:flex;align-items:center;justify-content:center;
transition:all 0.2s;
}
.branch-modal__close:hover{background:#fff;transform:rotate(90deg)}
.branch-modal__body{overflow-y:auto;padding:0 0 20px}
.bm-head{
padding:28px 32px 22px;
background:linear-gradient(135deg, var(--red), var(--brick));
color:#fff;
position:relative;
overflow:hidden;
}
.bm-head--planned{background:linear-gradient(135deg, #e8d5a8, #b39661)}
.bm-head::before{
content:'';
position:absolute;
top:-30px;right:-30px;
width:140px;height:140px;
border:30px solid rgba(255,255,255,0.08);
border-radius:50%;
}
.bm-status{
display:inline-block;
background:rgba(255,255,255,0.22);
padding:4px 12px;
border-radius:14px;
font-size:11px;font-weight:700;
letter-spacing:0.5px;
text-transform:uppercase;
margin-bottom:10px;
position:relative;
}
.bm-city{
font-family:'Inter',sans-serif;
font-size:32px;font-weight:800;
margin:0;
letter-spacing:-0.5px;
position:relative;
}
.bm-photo{height:220px;overflow:hidden}
.bm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bm-head-block{
display:flex;gap:16px;align-items:center;
padding:20px 32px;
border-bottom:1px solid rgba(193,105,79,0.1);
}
.bm-head-photo{
width:60px;height:60px;border-radius:50%;
object-fit:cover;flex-shrink:0;
border:3px solid var(--sand);
}
.bm-head-name{font-size:17px;font-weight:700;color:var(--dark)}
.bm-head-pos{font-size:13px;color:var(--warm-gray);margin-top:2px}
.bm-contacts{padding:18px 32px;border-bottom:1px solid rgba(193,105,79,0.1)}
.bm-line{
display:flex;align-items:center;gap:12px;
font-size:14px;color:var(--dark);margin-bottom:10px;line-height:1.5;
}
.bm-line:last-child{margin-bottom:0}
.bm-line a{color:var(--red);text-decoration:none;font-weight:600}
.bm-line a:hover{text-decoration:underline}
.bm-desc{padding:18px 32px;font-size:14px;line-height:1.7;color:var(--warm-gray)}
.bm-actions{
padding:18px 32px;
text-align:center;
background:linear-gradient(135deg, var(--sand-light), #fff);
border-top:1px solid rgba(193,105,79,0.1);
}
.bm-more{
display:inline-block;
background:var(--red);color:#fff;
padding:14px 32px;
border-radius:28px;
text-decoration:none;
font-weight:700;font-size:14px;
letter-spacing:0.3px;
transition:all 0.25s;
box-shadow:0 4px 12px rgba(224,30,43,0.25);
}
.bm-more:hover{
background:var(--brick);
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(224,30,43,0.35);
}
.branch-modal__loader{padding:60px 20px;text-align:center;color:var(--warm-gray)}
/* =============================================================
АДАПТИВ
============================================================= */
@media(max-width:900px){
.branches-map-title{font-size:36px}
.branches-map-subtitle{font-size:14px;padding:0 16px}
.bcount__num{font-size:42px}
.bcount{padding:0 20px}
.branches-map-wrap{padding:30px 16px 20px;border-radius:16px}
/* На планшете уменьшаем границы */
.kz-region{stroke-width:2.4}
.kz-region:hover{stroke-width:2.8;transform:translateY(-4px) scale(1.03)}
}
@media(max-width:640px){
.branches-map-section{margin:48px auto;padding:0 12px}
.branches-map-title{font-size:28px}
.branches-map-pretitle{font-size:10px;letter-spacing:2px}
.branches-map-counts{margin-bottom:24px}
.bcount__num{font-size:34px}
.bcount__label{font-size:11px}
.bcount{padding:0 16px}
.branches-map-wrap{padding:20px 12px 14px}
.branches-map-foot{margin-top:16px;gap:10px}
.branches-map-foot__text{font-size:10px;letter-spacing:0.5px}
.branches-map-foot__line{max-width:60px}
.branch-modal__box{margin:2vh 12px;max-height:96vh;border-radius:18px}
.bm-head{padding:20px 22px}
.bm-city{font-size:24px}
.bm-photo{height:180px}
.bm-head-block,.bm-contacts,.bm-desc,.bm-actions{padding-left:22px;padding-right:22px}
.branches-map-picker{top:14px;left:14px;font-size:11px;padding:10px}
/* На мобиле — самые тонкие границы и слабый эффект */
.kz-region{stroke-width:1.8}
.kz-region:hover{stroke-width:2.2;transform:translateY(-3px) scale(1.02)}
}
/* =============================================================
ДЕТАЛЬНАЯ СТРАНИЦА ФИЛИАЛА
============================================================= */
.branch-detail-section{
background:linear-gradient(180deg, var(--sand-light) 0%, var(--cream) 200px);
padding:150px 24px 80px;
min-height:80vh;
}
.branch-detail-container{
max-width:1100px;
margin:0 auto;
}
/* Кнопка возврата к карте */
.branch-back{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:600;
color:var(--warm-gray);
text-decoration:none;
padding:8px 14px;
border-radius:20px;
background:rgba(255,255,255,0.7);
border:1px solid rgba(193,105,79,0.15);
margin-bottom:24px;
transition:all 0.2s;
}
.branch-back:hover{
background:#fff;
color:var(--red);
border-color:rgba(193,105,79,0.35);
transform:translateX(-3px);
}
/* HERO — шапка страницы филиала */
.branch-hero{
background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color:#fff;
padding:48px 40px;
border-radius:24px;
margin-bottom:32px;
position:relative;
overflow:hidden;
box-shadow:0 12px 36px rgba(22,163,74,0.25);
}
.branch-hero--planned{
background:linear-gradient(135deg, #e6b933 0%, #b8881e 100%);
box-shadow:0 12px 36px rgba(184,136,30,0.25);
}
.branch-hero::before{
content:'';
position:absolute;
top:-60px;right:-60px;
width:240px;height:240px;
border:40px solid rgba(255,255,255,0.07);
border-radius:50%;
pointer-events:none;
}
.branch-hero::after{
content:'';
position:absolute;
bottom:-40px;right:80px;
width:120px;height:120px;
border:20px solid rgba(255,255,255,0.05);
border-radius:50%;
pointer-events:none;
}
.branch-hero__status{
display:inline-block;
background:rgba(255,255,255,0.22);
padding:5px 14px;
border-radius:14px;
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:16px;
position:relative;
z-index:1;
}
.branch-hero__city{
font-family:'Inter',sans-serif;
font-size:48px;
font-weight:800;
letter-spacing:-1px;
line-height:1.1;
margin:0 0 8px;
position:relative;
z-index:1;
}
.branch-hero__region{
font-size:16px;
opacity:0.85;
position:relative;
z-index:1;
}
/* СЕТКА — основной контент + сайдбар */
.branch-grid{
display:grid;
grid-template-columns:1fr 320px;
gap:32px;
align-items:start;
}
/* ОСНОВНАЯ КОЛОНКА */
.branch-main{
display:flex;
flex-direction:column;
gap:24px;
}
.branch-photo-block{
border-radius:20px;
overflow:hidden;
background:var(--sand);
box-shadow:var(--shadow-md);
}
.branch-photo-block img{
width:100%;
display:block;
height:auto;
max-height:480px;
object-fit:cover;
}
.branch-block{
background:#fff;
border-radius:20px;
padding:32px;
box-shadow:var(--shadow-sm);
border:1px solid rgba(193,105,79,0.06);
}
.branch-block__title{
font-family:'Inter',sans-serif;
font-size:24px;
font-weight:800;
margin:0 0 20px;
color:var(--dark);
letter-spacing:-0.3px;
position:relative;
padding-bottom:14px;
}
.branch-block__title::after{
content:'';
position:absolute;
bottom:0;left:0;
width:48px;
height:3px;
background:var(--red);
border-radius:2px;
}
.branch-desc{
font-size:15px;
line-height:1.75;
color:var(--warm-gray);
}
.branch-desc p{margin:0 0 12px}
.branch-desc p:last-child{margin-bottom:0}
/* МЕРОПРИЯТИЯ ФИЛИАЛА */
.branch-events-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:16px;
}
.branch-event-card{
display:block;
background:var(--sand-light);
border-radius:14px;
overflow:hidden;
text-decoration:none;
color:inherit;
transition:all 0.25s;
border:1px solid rgba(193,105,79,0.08);
}
.branch-event-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
border-color:rgba(193,105,79,0.2);
}
.branch-event-card img{
width:100%;
height:140px;
object-fit:cover;
display:block;
}
.branch-event-info{padding:14px 16px}
.branch-event-date{
font-size:11px;
font-weight:700;
color:var(--red);
letter-spacing:0.5px;
text-transform:uppercase;
margin-bottom:6px;
}
.branch-event-card h3{
font-size:15px;
font-weight:700;
line-height:1.4;
margin:0;
color:var(--dark);
}
/* САЙДБАР — карточки */
.branch-side{
display:flex;
flex-direction:column;
gap:20px;
position:sticky;
top:100px;
}
.branch-card{
background:#fff;
border-radius:20px;
padding:24px;
box-shadow:var(--shadow-sm);
border:1px solid rgba(193,105,79,0.06);
}
.branch-card__title{
font-family:'Inter',sans-serif;
font-size:13px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--red);
margin:0 0 16px;
}
/* Карточка руководителя */
.branch-card--head{
text-align:center;
}
.branch-card--head .branch-card__title{margin-bottom:18px}
.branch-head-photo{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin:0 auto 14px;
display:block;
border:4px solid var(--sand);
box-shadow:0 4px 14px rgba(44,24,16,0.1);
}
.branch-head-name{
font-size:18px;
font-weight:700;
color:var(--dark);
margin-bottom:4px;
}
.branch-head-pos{
font-size:13px;
color:var(--warm-gray);
font-weight:500;
}
/* Контакты */
.branch-line{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
color:var(--dark);
margin-bottom:12px;
line-height:1.5;
}
.branch-line:last-child{margin-bottom:0}
.branch-line a{
color:var(--red);
text-decoration:none;
font-weight:600;
word-break:break-word;
}
.branch-line a:hover{text-decoration:underline}
.branch-empty{
font-size:13px;
color:var(--warm-gray);
font-style:italic;
margin:0;
}
/* =============================================================
АДАПТИВ
============================================================= */
@media(max-width:900px){
.branch-detail-section{padding:100px 16px 60px}
.branch-grid{
grid-template-columns:1fr;
gap:20px;
}
.branch-side{
position:static;
order:-1; /* на мобиле сайдбар над контентом */
}
.branch-hero{padding:32px 24px}
.branch-hero__city{font-size:36px}
.branch-block{padding:24px}
}
@media(max-width:640px){
.branch-detail-section{padding:88px 12px 48px}
.branch-hero{padding:24px 20px;border-radius:16px}
.branch-hero__city{font-size:28px}
.branch-hero__region{font-size:14px}
.branch-block{padding:20px;border-radius:16px}
.branch-block__title{font-size:20px}
.branch-card{padding:20px;border-radius:16px}
.branch-head-photo{width:100px;height:100px}
.branch-events-grid{grid-template-columns:1fr}
}
/* === Подпись под логотипом ============================================ */
.logo{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
flex-shrink:0;
}
.logo-tagline{
display:none; /* по умолчанию скрыта на маленьких экранах */
font-size:9.5px;
font-weight:600;
color:var(--warm-gray);
line-height:1.25;
letter-spacing:0.3px;
max-width:140px;
border-left:1.5px solid rgba(193,105,79,0.3);
padding-left:10px;
text-transform:uppercase;
}
@media(min-width:1280px){
.logo-tagline{display:block}
}
/* === HERO — единая цитата ============================================== */
.hero-slider .hero-inner{
max-width:1320px;
margin:0 auto;
width:100%;
position:relative;
z-index:2;
display:flex;
align-items:center;
min-height:60vh;
padding:40px 24px;
}
.hero-quote-block{
position:relative;
max-width:1100px;
width:100%;
margin:0;
padding:52px 64px 44px 88px;
/*background:rgba(255,251,245,0.88);*/
/*backdrop-filter:blur(14px);*/
border-left:6px solid var(--red);
border-radius:0 22px 22px 0;
box-shadow:0 18px 56px rgba(44,24,16,0.14);
}
.hero-quote-mark{
position:absolute;
top:-22px;
left:32px;
font-family:'Lora','Georgia',serif;
font-size:180px;
line-height:1;
font-weight:700;
color:var(--red);
opacity:0.22;
pointer-events:none;
user-select:none;
}
/* Текст цитаты — единый блок */
.hero-quote-text{
font-family:'Lora','Georgia',serif;
font-size:54px;
font-weight:600;
font-style:italic;
letter-spacing:-0.3px;
line-height:1.28;
color:var(--dark);
margin:0;
}
/* Подпись автора */
.hero-quote-author{
display:block;
margin-top:32px;
text-align:right;
font-family:'Lora','Georgia',serif;
font-style:normal;
font-size:22px;
font-weight:600;
letter-spacing:0.5px;
color:var(--red);
}
/* === Адаптив ============================================== */
@media(max-width:1200px){
.hero-quote-block{padding:40px 44px 32px 64px}
.hero-quote-text{font-size:42px}
.hero-quote-mark{font-size:140px;left:22px;top:-14px}
.hero-quote-author{font-size:20px}
}
@media(max-width:900px){
.hero-quote-block{padding:32px 28px 26px 48px;max-width:100%}
.hero-quote-text{font-size:32px;line-height:1.32}
.hero-quote-mark{font-size:108px;left:14px;top:-8px}
.hero-quote-author{font-size:18px;margin-top:24px}
}
@media(max-width:640px){
.hero-slider .hero-inner{padding:20px 14px;min-height:auto}
.hero-quote-block{
padding:24px 18px 22px 30px;
border-radius:0 16px 16px 0;
border-left-width:4px;
}
.hero-quote-text{font-size:22px;line-height:1.35}
.hero-quote-mark{font-size:78px;left:8px;top:-4px}
.hero-quote-author{font-size:15px;margin-top:18px}
}
/* === Футер: название одной строкой ============================================== */
.f-brand-name{
font-family:'Inter',sans-serif;
font-size:20px;
font-weight:700;
color:#fff;
letter-spacing:0.2px;
margin-bottom:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media(max-width:640px){
.f-brand-name{
font-size:17px;
white-space:normal;
}
}
/* убираем старое поведение f-brand если оно было через ::before/ */
.f-brand span{display:none}
/* =============================================================
УБИРАЕМ ЗЕЛЁНЫЙ — заменяем на фирменные цвета бренда
(терракотовый, красный, золотой)
Эти селекторы перебивают зелёные значения из старого CSS.
============================================================= */
/* --- Карта филиалов --- */
.bcount--active i{
background:var(--red) !important;
box-shadow:0 0 0 3px rgba(224,30,43,0.18) !important;
}
.bcount--active .bcount__num{
color:var(--red) !important;
}
/* Флажки на карте: действующие — красный, готовые — золотой/бежевый */
.branch-pin--active .branch-pin__flag{fill:var(--red) !important}
.branch-pin--planned .branch-pin__flag{fill:var(--gold) !important}
/* Свечение под пинами */
.branch-pin__halo{
fill:var(--red) !important;
}
.branch-pin__halo--planned{
fill:var(--gold) !important;
}
/* Hover-свечение */
.branch-pin:hover .branch-pin__flag,
.branch-pin:focus .branch-pin__flag{
filter:drop-shadow(0 0 8px rgba(224,30,43,0.55)) drop-shadow(0 2px 1px rgba(0,0,0,0.35)) !important;
}
.branch-pin--planned:hover .branch-pin__flag,
.branch-pin--planned:focus .branch-pin__flag{
filter:drop-shadow(0 0 8px rgba(212,168,83,0.7)) drop-shadow(0 2px 1px rgba(0,0,0,0.35)) !important;
}
/* --- Шапка модального окна филиала --- */
.bm-head{
background:linear-gradient(135deg, var(--red), var(--brick)) !important;
}
.bm-head--planned{
background:linear-gradient(135deg, var(--gold), #a0772b) !important;
}
/* --- Hero-страница филиала --- */
.branch-hero{
background:linear-gradient(135deg, var(--red) 0%, var(--brick) 100%) !important;
box-shadow:0 12px 36px rgba(224,30,43,0.22) !important;
}
.branch-hero--planned{
background:linear-gradient(135deg, var(--gold) 0%, #a0772b 100%) !important;
box-shadow:0 12px 36px rgba(212,168,83,0.25) !important;
}
/* --- Цвет даты в новостной панели (был зелёный #23a455) --- */
.news-row-date{color:var(--red) !important}
.news-tab.active{
background:var(--red) !important;
border-bottom-color:var(--red) !important;
}
.news-row:hover .news-row-title{color:var(--red) !important}
.news-all-btn{color:var(--red) !important}
.home-stack{
max-width:980px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:32px;
}
.stack-block{
width:100%;
}
/* Кнопка "все записи" под блоком */
.stack-block__more{
text-align:right;
margin-top:14px;
}
/* === Блог-психолога: внутренняя сетка ============================== */
/* Чтобы блог не превращался в одну гигантскую простыню при множестве
записей — внутри колонки используем мини-сетку из 2 колонок */
.blog-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
margin-top:18px;
}
@media(max-width:680px){
.blog-grid{grid-template-columns:1fr}
}
/* === Чек-лист WIDE — горизонтальный лэйаут =========================== */
.checklist-card-wide{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:28px;
background:linear-gradient(135deg, var(--red), var(--brick));
border-radius:var(--radius-lg);
padding:32px 36px;
color:#fff;
position:relative;
overflow:hidden;
}
.checklist-card-wide::before{
content:'';
position:absolute;
top:-40px;
right:-30px;
width:160px;
height:160px;
border:30px solid rgba(255,255,255,0.06);
border-radius:50%;
pointer-events:none;
}
.checklist-card-wide__icon{
font-size:54px;
flex-shrink:0;
position:relative;
z-index:1;
}
.checklist-card-wide__body{
position:relative;
z-index:1;
}
.checklist-card-wide__body h3{
font-family:'Inter',sans-serif;
font-size:22px;
font-weight:700;
line-height:1.3;
margin:0 0 8px;
}
.checklist-card-wide__body p{
font-size:15px;
line-height:1.6;
opacity:0.92;
margin:0;
}
.checklist-card-wide__cta{
flex-shrink:0;
position:relative;
z-index:1;
}
.checklist-card-wide .btn-checklist{
display:inline-block;
background:#fff;
color:var(--red);
padding:14px 32px;
border-radius:30px;
font-weight:700;
font-size:15px;
text-decoration:none;
transition:all 0.25s;
white-space:nowrap;
}
.checklist-card-wide .btn-checklist:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.18);
}
/* === Тест WIDE — увеличенный, по центру ============================== */
.quiz-card-wide{
background:#fff;
border-radius:var(--radius-lg);
padding:48px 32px;
box-shadow:var(--shadow-md);
border:1px solid rgba(193,105,79,0.08);
text-align:center;
}
.quiz-card-wide__icon{
font-size:54px;
margin-bottom:14px;
}
.quiz-card-wide .section-title{
font-size:32px;
margin-bottom:14px;
}
.quiz-card-wide__desc{
font-size:16px;
color:var(--warm-gray);
margin:0 auto 24px;
max-width:520px;
line-height:1.6;
}
.quiz-card-wide .btn-quiz-start{
padding:14px 36px;
font-size:16px;
}
.quiz-card-wide .quiz-question{
font-size:22px;
max-width:680px;
margin:0 auto 28px;
}
.quiz-card-wide .quiz-answers{
max-width:680px;
margin:0 auto;
}
.quiz-card-wide .quiz-answer-btn{
font-size:16px;
}
/* === Адаптив ======================================================= */
@media(max-width:768px){
.home-stack{gap:24px}
.checklist-card-wide{
grid-template-columns:1fr;
text-align:center;
padding:24px 22px;
gap:14px;
}
.checklist-card-wide__icon{font-size:42px}
.checklist-card-wide__body h3{font-size:18px}
.checklist-card-wide__body p{font-size:14px}
.checklist-card-wide .btn-checklist{padding:12px 26px;font-size:14px;width:100%}
.quiz-card-wide{padding:32px 20px}
.quiz-card-wide .section-title{font-size:24px}
.quiz-card-wide__desc{font-size:14px}
}
.home-trio{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:1.1fr 0.9fr 0.95fr;
gap:28px;
align-items:start;
}
.trio-col{
display:flex;
flex-direction:column;
gap:14px;
}
.trio-title{
font-family:'Inter',sans-serif;
font-size:22px;
font-weight:800;
color:var(--dark);
margin:0 0 6px;
letter-spacing:-0.3px;
position:relative;
padding-bottom:10px;
border-bottom:2px solid var(--red);
}
.trio-all{
display:inline-block;
margin-top:8px;
font-size:13px;
font-weight:700;
color:var(--red);
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.5px;
}
.trio-all:hover{text-decoration:underline}
/* === КОЛОНКА 1 === */
.trio-col--blog .blog-card{
background:var(--sand-light);
border-radius:var(--radius);
padding:16px 18px;
border-left:4px solid var(--red);
box-shadow:var(--shadow-sm);
margin:0;
transition:transform 0.2s;
}
.trio-col--blog .blog-card:hover{transform:translateX(3px)}
.trio-col--blog .blog-card .pain{
font-weight:700;
font-size:14.5px;
color:var(--brick);
margin-bottom:6px;
line-height:1.4;
}
.trio-col--blog .blog-card .answer{
font-size:13.5px;
color:var(--warm-gray);
line-height:1.6;
}
/* === КОЛОНКА 2 === */
/* Чек-лист — компактнее под третью часть ширины */
.trio-col--cards .checklist-card{
background:linear-gradient(135deg, var(--red), var(--brick));
border-radius:var(--radius-lg);
padding:24px;
color:#fff;
position:relative;
overflow:hidden;
}
.trio-col--cards .checklist-card::before{
content:'';
position:absolute;
top:-30px;
right:-20px;
width:110px;
height:110px;
border:24px solid rgba(255,255,255,0.06);
border-radius:50%;
pointer-events:none;
}
.trio-col--cards .checklist-icon{
font-size:32px;
margin-bottom:10px;
position:relative;
z-index:1;
}
.trio-col--cards .checklist-card h3{
font-size:17px;
font-weight:700;
line-height:1.35;
margin:0 0 8px;
position:relative;
z-index:1;
}
.trio-col--cards .checklist-card p{
font-size:13.5px;
line-height:1.55;
margin:0 0 16px;
opacity:0.92;
position:relative;
z-index:1;
}
.trio-col--cards .btn-checklist{
display:inline-block;
background:#fff;
color:var(--red);
padding:10px 20px;
border-radius:22px;
font-weight:700;
font-size:13px;
text-decoration:none;
transition:transform 0.2s;
position:relative;
z-index:1;
}
.trio-col--cards .btn-checklist:hover{transform:translateY(-2px)}
/* Тест — компактный */
.trio-col--cards .quiz-card-inline{
background:#fff;
border-radius:var(--radius-lg);
padding:24px;
box-shadow:var(--shadow-sm);
border:1px solid rgba(193,105,79,0.08);
text-align:center;
}
.trio-col--cards .quiz-start-icon{font-size:34px;margin-bottom:8px}
.trio-col--cards .quiz-card-inline h3{
font-size:17px;
font-weight:800;
line-height:1.3;
margin:0 0 8px;
}
.trio-col--cards .quiz-card-desc{
font-size:12.5px;
color:var(--warm-gray);
margin:0 0 14px;
line-height:1.5;
}
.trio-col--cards .btn-quiz-start{
background:var(--red);
color:#fff;
border:none;
padding:10px 22px;
border-radius:22px;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:background 0.2s;
}
.trio-col--cards .btn-quiz-start:hover{background:var(--brick)}
/* === КОЛОНКА 3 — НОВОСТИ === */
/* Главная новость — с большой картинкой сверху */
.news-mini-main{
display:flex;
flex-direction:column;
text-decoration:none;
color:inherit;
background:#fff;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow-sm);
border:1px solid rgba(193,105,79,0.08);
transition:all 0.25s;
}
.news-mini-main:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.news-mini-main__photo{
width:100%;
height:170px;
overflow:hidden;
background:var(--sand);
}
.news-mini-main__photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.4s;
}
.news-mini-main:hover .news-mini-main__photo img{transform:scale(1.05)}
.news-mini-main__body{
padding:14px 16px 16px;
}
.news-mini-main__cat{
display:inline-block;
font-size:10px;
font-weight:800;
color:var(--red);
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:6px;
}
.news-mini-main__title{
font-family:'Inter',sans-serif;
font-size:15px;
font-weight:700;
line-height:1.4;
color:var(--dark);
margin:0 0 8px;
}
.news-mini-main:hover .news-mini-main__title{color:var(--red)}
.news-mini-main__date{
font-size:11.5px;
color:var(--warm-gray);
font-weight:600;
}
/* Список из 4 строк */
.news-mini-list{
display:flex;
flex-direction:column;
gap:0;
background:#fff;
border-radius:var(--radius);
border:1px solid rgba(193,105,79,0.08);
overflow:hidden;
box-shadow:var(--shadow-sm);
}
.news-mini-row{
display:grid;
grid-template-columns:38px 1fr;
gap:10px;
padding:12px 14px;
text-decoration:none;
color:inherit;
border-bottom:1px solid rgba(193,105,79,0.08);
transition:background 0.2s;
align-items:start;
}
.news-mini-row:last-child{border-bottom:none}
.news-mini-row:hover{background:var(--sand-light)}
.news-mini-row__date{
font-size:11px;
font-weight:700;
color:var(--red);
letter-spacing:0.3px;
padding-top:2px;
white-space:nowrap;
}
.news-mini-row__title{
font-size:13px;
font-weight:600;
line-height:1.45;
color:var(--dark);
}
.news-mini-row:hover .news-mini-row__title{color:var(--red)}
/* === АДАПТИВ === */
@media(max-width:1100px){
.home-trio{grid-template-columns:1fr 1fr;gap:24px}
.trio-col--news{grid-column:1 / -1}
}
@media(max-width:680px){
.home-trio{grid-template-columns:1fr;gap:24px}
.trio-col--news{grid-column:auto}
.news-mini-main__photo{height:200px}
}
/* === ХАБ С КАРТОЧКАМИ ============================================ */
.about-hub{
padding:150px 24px 80px;
background:linear-gradient(180deg, var(--sand-light) 0%, #fff 240px);
min-height:80vh;
}
.about-hub-inner{
max-width:1200px;
margin:0 auto;
}
.about-hub-head{
text-align:center;
margin-bottom:48px;
}
.about-hub-pretitle{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
color:var(--red);
margin-bottom:14px;
}
.about-hub-title{
font-family:'Inter',sans-serif;
font-size:54px;
font-weight:800;
letter-spacing:-1.5px;
margin:0 0 14px;
color:var(--dark);
line-height:1.1;
}
.about-hub-sub{
font-size:16px;
line-height:1.65;
color:var(--warm-gray);
max-width:620px;
margin:0 auto;
}
.about-hub-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:20px;
}
.hub-card{
display:block;
background:#fff;
border-radius:20px;
padding:28px 26px;
text-decoration:none;
color:inherit;
position:relative;
border:1px solid rgba(193,105,79,0.08);
box-shadow:var(--shadow-sm);
transition:all 0.3s;
overflow:hidden;
}
.hub-card::before{
content:'';
position:absolute;
top:-30px;right:-30px;
width:100px;height:100px;
border:20px solid rgba(224,30,43,0.04);
border-radius:50%;
transition:all 0.3s;
}
.hub-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-lg);
border-color:rgba(224,30,43,0.2);
}
.hub-card:hover::before{
border-color:rgba(224,30,43,0.1);
transform:scale(1.4);
}
.hub-card__icon{
font-size:38px;
margin-bottom:14px;
position:relative;
z-index:1;
}
.hub-card h3{
font-family:'Inter',sans-serif;
font-size:20px;
font-weight:800;
margin:0 0 8px;
color:var(--dark);
letter-spacing:-0.3px;
position:relative;
z-index:1;
}
.hub-card p{
font-size:14px;
color:var(--warm-gray);
line-height:1.55;
margin:0 0 14px;
position:relative;
z-index:1;
}
.hub-card__arrow{
display:inline-block;
font-size:20px;
font-weight:700;
color:var(--red);
transition:transform 0.25s;
position:relative;
z-index:1;
}
.hub-card:hover .hub-card__arrow{transform:translateX(6px)}
/* === ПОДСТРАНИЦЫ =================================================== */
.about-subpage{
padding:150px 24px 80px;
background:linear-gradient(180deg, var(--sand-light) 0%, #fff 280px);
min-height:80vh;
}
.about-subpage-inner{
max-width:980px;
margin:0 auto;
}
.about-subpage-inner--narrow{
max-width:780px;
}
.subpage-back{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:600;
color:var(--warm-gray);
text-decoration:none;
padding:8px 14px;
border-radius:20px;
background:rgba(255,255,255,0.7);
border:1px solid rgba(193,105,79,0.15);
margin-bottom:28px;
transition:all 0.2s;
}
.subpage-back:hover{
background:#fff;
color:var(--red);
border-color:rgba(193,105,79,0.35);
transform:translateX(-3px);
}
.subpage-head{
text-align:center;
margin-bottom:48px;
}
.subpage-head__icon{
font-size:54px;
margin-bottom:14px;
}
.subpage-head h1{
font-family:'Inter',sans-serif;
font-size:46px;
font-weight:800;
letter-spacing:-1px;
color:var(--dark);
margin:0 0 12px;
line-height:1.1;
}
.subpage-head__intro{
font-size:17px;
line-height:1.6;
color:var(--warm-gray);
max-width:600px;
margin:0 auto;
}
.subpage-body{
background:#fff;
border-radius:20px;
padding:48px 56px;
box-shadow:var(--shadow-sm);
border:1px solid rgba(193,105,79,0.06);
}
/* Текстовый контент */
.prose{
font-size:16px;
line-height:1.85;
color:var(--dark);
}
.prose p{margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.member-guide-prose{
font-size:16px;
line-height:1.9;
}
/* Изображение логотипа на странице "Значение логотипа" */
.logo-meaning-image{
text-align:center;
margin:0 auto 36px;
padding:24px;
background:var(--sand-light);
border-radius:14px;
}
.logo-meaning-image img{
max-width:280px;
height:auto;
display:inline-block;
}
/* =============================================================
ДОСТИЖЕНИЯ — компактные карточки одной высоты + раскрытие
============================================================= */
.subpage-body--ach{
margin-bottom:64px;
}
.ach-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
align-items:start; /* карточки не растягиваются друг под друга */
}
.ach-card{
background:#fff;
border:1px solid rgba(193,105,79,0.14);
border-radius:18px;
overflow:hidden;
box-shadow:0 4px 16px rgba(193,105,79,0.06);
transition:transform .25s, box-shadow .25s;
display:flex;
flex-direction:column;
}
.ach-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(193,105,79,0.13);
}
/* Обложка (если есть) */
.ach-card__photo{
height:170px;
overflow:hidden;
background:var(--sand);
}
.ach-card__photo img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.ach-card__body{
padding:22px 24px 24px;
display:flex;
flex-direction:column;
flex:1;
}
/* Год — аккуратный бейдж */
.ach-card__year{
align-self:flex-start;
font-family:'Inter',sans-serif;
font-size:13px;
font-weight:800;
color:#fff;
background:var(--red);
padding:3px 12px;
border-radius:20px;
letter-spacing:0.5px;
margin-bottom:12px;
}
.ach-card__title{
font-family:'Inter',sans-serif;
font-size:18px;
font-weight:800;
line-height:1.35;
color:var(--dark);
margin:0 0 12px;
letter-spacing:-0.3px;
}
/* Описание — свёрнуто по умолчанию, плавно раскрывается */
.ach-card__desc{
font-size:14.5px;
line-height:1.7;
color:var(--warm-gray);
max-height:120px;
overflow:hidden;
position:relative;
transition:max-height .4s ease;
}
.ach-card__desc::after{
/* мягкое затухание текста в свёрнутом виде */
content:'';
position:absolute;
left:0;right:0;bottom:0;
height:48px;
background:linear-gradient(transparent, #fff);
pointer-events:none;
transition:opacity .3s;
}
.ach-card.is-open .ach-card__desc{
max-height:1200px;
}
.ach-card.is-open .ach-card__desc::after{
opacity:0;
}
.ach-card__desc p{margin:0 0 10px}
.ach-card__desc p:last-child{margin-bottom:0}
/* Кнопка «Подробнее» */
.ach-card__toggle{
align-self:flex-start;
margin-top:14px;
background:none;
border:none;
padding:0;
color:var(--red);
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:opacity .2s;
}
.ach-card__toggle:hover{opacity:0.7;text-decoration:underline}
/* Планшет — 2 в ряд */
@media(max-width:900px){
.ach-grid{grid-template-columns:repeat(2, 1fr)}
}
/* Мобайл — 1 в ряд */
@media(max-width:560px){
.ach-grid{grid-template-columns:1fr}
}
/* === КОМАНДА — заголовки секций ==================================== */
.team-block-title{
font-family:'Inter',sans-serif;
font-size:24px;
font-weight:800;
color:var(--red);
margin:32px 0 20px;
padding-bottom:10px;
border-bottom:2px solid rgba(224,30,43,0.15);
}
.team-block-title:first-child{margin-top:0}
.team-grid{
display:grid;
gap:24px;
}
.team-grid--big{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}
.team-grid--small{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))}
/* === ИСТОРИИ УСПЕХА ================================================ */
.stories-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
gap:22px;
}
.story-card{
background:var(--sand-light);
border-radius:18px;
padding:24px;
border:1px solid rgba(193,105,79,0.08);
transition:all 0.25s;
position:relative;
}
.story-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
}
.story-card__head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
}
.story-card__avatar{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
border:2px solid var(--sand);
}
.story-card__avatar--ph{
background:linear-gradient(135deg, var(--red), var(--brick));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:800;
}
.story-card__name{
font-size:15px;
font-weight:700;
color:var(--dark);
}
.story-card__city{
font-size:13px;
color:var(--warm-gray);
margin-top:2px;
}
.story-card__text{
font-size:14.5px;
line-height:1.7;
color:var(--dark);
margin:0;
padding:0;
font-style:italic;
}
/* === ПРОЕКТЫ С КАТЕГОРИЯМИ ========================================= */
.projects-page{
padding:150px 24px 80px;
background:linear-gradient(180deg, var(--sand-light) 0%, #fff 240px);
}
.projects-page-inner{
max-width:1200px;
margin:0 auto;
}
.projects-page-head{
text-align:center;
margin-bottom:48px;
}
.projects-page-pretitle{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
color:var(--red);
margin-bottom:12px;
}
.projects-page-head h1{
font-family:'Inter',sans-serif;
font-size:48px;
font-weight:800;
letter-spacing:-1px;
margin:0;
color:var(--dark);
}
.projects-page-sub{
font-size:17px;
color:var(--warm-gray);
line-height:1.6;
max-width:680px;
margin:16px auto 0;
text-align:center;
}
@media(max-width:640px){
.projects-page-sub{font-size:15px}
}
/* Категория */
.projects-category{
margin-bottom:56px;
background:#fff;
border-radius:24px;
padding:36px 32px;
border:1px solid rgba(193,105,79,0.08);
box-shadow:var(--shadow-sm);
position:relative;
overflow:hidden;
}
.projects-category::before{
content:'';
position:absolute;
top:0;left:0;
width:5px;height:100%;
background:linear-gradient(to bottom, var(--red), var(--brick));
}
.projects-category--general{
background:transparent;
border:none;
box-shadow:none;
padding:0;
}
.projects-category--general::before{display:none}
.projects-category__head{
margin-bottom:24px;
}
.projects-category__head h2{
font-family:'Inter',sans-serif;
font-size:28px;
font-weight:800;
color:var(--dark);
margin:0 0 6px;
letter-spacing:-0.5px;
}
.projects-category--general h2{color:var(--warm-gray)}
.projects-category__desc{
font-size:15px;
color:var(--warm-gray);
line-height:1.6;
margin:0;
}
.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:22px;
}
.project-card{
background:#fff;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(193,105,79,0.06);
box-shadow:var(--shadow-sm);
transition:all 0.25s;
}
.project-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
}
.project-card--cat{
border-color:rgba(224,30,43,0.15);
}
.project-card__photo{
height:180px;
overflow:hidden;
background:var(--sand);
}
.project-card__photo--ph{
background:linear-gradient(135deg, var(--sand), var(--sand-light));
}
.project-card__photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.project-card__body{padding:20px}
.project-card__cat-tag{
display:inline-block;
font-size:10px;
font-weight:800;
color:var(--red);
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:8px;
}
.project-card h3{
font-family:'Inter',sans-serif;
font-size:18px;
font-weight:700;
color:var(--dark);
margin:0 0 8px;
line-height:1.35;
}
.project-card p{
font-size:14px;
color:var(--warm-gray);
line-height:1.6;
margin:0;
}
/* === АДАПТИВ ======================================================= */
@media(max-width:768px){
.about-hub{padding:88px 16px 60px}
.about-hub-title{font-size:36px}
.about-hub-sub{font-size:14px}
.hub-card{padding:22px 20px}
.about-subpage{padding:88px 16px 60px}
.subpage-head h1{font-size:32px}
.subpage-head__icon{font-size:42px}
.subpage-head__intro{font-size:14px}
.subpage-body{padding:28px 22px;border-radius:16px}
.projects-page{padding:88px 16px 60px}
.projects-page-head h1{font-size:32px}
.projects-category{padding:24px 20px;border-radius:16px}
.projects-category__head h2{font-size:22px}
.stories-grid{grid-template-columns:1fr}
}
.experts-block{
margin-top:48px;
}
.experts-block__head{
text-align:center;
margin-bottom:28px;
}
.experts-block__head h2{
font-family:'Inter',sans-serif;
font-size:32px;
font-weight:800;
color:var(--dark);
margin:0 0 8px;
letter-spacing:-0.5px;
position:relative;
display:inline-block;
padding-bottom:10px;
}
.experts-block__head h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:48px;
height:3px;
background:var(--red);
border-radius:2px;
}
.experts-block__head p{
font-size:15px;
color:var(--warm-gray);
margin:14px 0 0;
line-height:1.6;
max-width:520px;
margin-left:auto;
margin-right:auto;
}
/* Горизонтальная лента сертификатов */
.cert-track{
display:flex;
gap:20px;
overflow-x:auto;
padding:8px 4px 18px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
/* Плавный скрытый скроллбар */
scrollbar-width:thin;
scrollbar-color:rgba(193,105,79,0.3) transparent;
}
.cert-track::-webkit-scrollbar{height:8px}
.cert-track::-webkit-scrollbar-track{background:transparent}
.cert-track::-webkit-scrollbar-thumb{
background:rgba(193,105,79,0.25);
border-radius:4px;
}
.cert-track::-webkit-scrollbar-thumb:hover{
background:rgba(193,105,79,0.5);
}
.cert-card{
flex-shrink:0;
width:240px;
margin:0;
scroll-snap-align:start;
cursor:zoom-in;
transition:transform 0.25s;
}
.cert-card:hover{
transform:translateY(-4px);
}
.cert-card__photo{
width:240px;
height:320px;
border-radius:14px;
overflow:hidden;
background:var(--sand);
border:1px solid rgba(193,105,79,0.1);
box-shadow:var(--shadow-sm);
transition:box-shadow 0.25s;
}
.cert-card:hover .cert-card__photo{
box-shadow:var(--shadow-md);
}
.cert-card__photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.cert-card__title{
margin:10px 0 0;
font-size:13.5px;
font-weight:600;
text-align:center;
color:var(--warm-gray);
line-height:1.4;
}
/* Адаптив */
@media(max-width:640px){
.experts-block{margin-top:32px}
.experts-block__head h2{font-size:24px}
.experts-block__head p{font-size:13px}
.cert-card{width:200px}
.cert-card__photo{width:200px;height:266px}
}
/* === СТРАНИЦА СПИСКА ============================================ */
.enl-page{
padding:150px 24px 80px;
background:linear-gradient(180deg, var(--sand-light) 0%, #fff 280px);
min-height:80vh;
}
.enl-page__inner{
max-width:1200px;
margin:0 auto;
}
.enl-page__head{
text-align:center;
margin-bottom:48px;
}
.enl-page__pretitle{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
color:var(--red);
margin-bottom:14px;
}
.enl-page__head h1{
font-family:'Inter',sans-serif;
font-size:54px;
font-weight:800;
letter-spacing:-1.5px;
margin:0 0 14px;
color:var(--dark);
line-height:1.1;
}
.enl-page__sub{
font-size:16px;
line-height:1.65;
color:var(--warm-gray);
max-width:580px;
margin:0 auto;
}
.enl-page__empty{
text-align:center;
padding:60px 20px;
}
/* === СЕТКА КАРТОЧЕК =============================================== */
.enl-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
gap:28px;
}
.enl-card{
display:flex;
flex-direction:column;
background:#fff;
border-radius:18px;
overflow:hidden;
text-decoration:none;
color:inherit;
border:1px solid rgba(193,105,79,0.08);
box-shadow:var(--shadow-sm);
transition:all 0.25s ease;
}
.enl-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-lg);
border-color:rgba(224,30,43,0.2);
}
.enl-card__photo{
width:100%;
height:200px;
overflow:hidden;
background:var(--sand);
}
.enl-card__photo--ph{
background:linear-gradient(135deg, var(--sand), var(--sand-light));
display:flex;
align-items:center;
justify-content:center;
}
.enl-card__photo--ph::after{
font-size:42px;
opacity:0.3;
}
.enl-card__photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.4s;
}
.enl-card:hover .enl-card__photo img{transform:scale(1.04)}
.enl-card__body{
padding:22px 22px 24px;
flex:1;
display:flex;
flex-direction:column;
}
.enl-card__date{
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:var(--red);
margin-bottom:10px;
}
.enl-card__title{
font-family:'Inter',sans-serif;
font-size:19px;
font-weight:700;
line-height:1.35;
color:var(--dark);
margin:0 0 10px;
letter-spacing:-0.2px;
/* clamp на 3 строки */
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.enl-card:hover .enl-card__title{color:var(--red)}
.enl-card__excerpt{
font-size:14px;
color:var(--warm-gray);
line-height:1.65;
margin:0 0 16px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.enl-card__more{
margin-top:auto;
font-size:13px;
font-weight:700;
color:var(--red);
letter-spacing:0.3px;
display:inline-flex;
align-items:center;
gap:4px;
transition:gap 0.2s;
}
.enl-card:hover .enl-card__more{gap:10px}
/* Малая карточка для блока "похожие" */
.enl-card--small .enl-card__photo{height:140px}
.enl-card--small .enl-card__body{padding:16px}
.enl-card--small .enl-card__title{font-size:15px;-webkit-line-clamp:2}
/* =============================================================
ДЕТАЛЬНАЯ СТРАНИЦА
============================================================= */
.enl-detail{
background:#fff;
padding-top:88px;
}
.enl-detail__crumbs{
max-width:980px;
margin:0 auto;
padding:24px 24px 0;
}
.enl-detail__crumbs a{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:600;
color:var(--warm-gray);
text-decoration:none;
padding:8px 14px;
border-radius:20px;
background:var(--sand-light);
border:1px solid rgba(193,105,79,0.15);
transition:all 0.2s;
}
.enl-detail__crumbs a:hover{
color:var(--red);
border-color:rgba(193,105,79,0.35);
transform:translateX(-3px);
}
/* HERO с обложкой */
.enl-detail__hero{
position:relative;
margin:24px auto 0;
max-width:1200px;
height:520px;
background-size:cover;
background-position:center;
border-radius:24px;
overflow:hidden;
display:flex;
align-items:flex-end;
}
@media(min-width:1248px){
.enl-detail__hero{margin-left:auto;margin-right:auto}
}
.enl-detail__hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(0,0,0,0) 30%,
rgba(0,0,0,0.55) 70%,
rgba(20,10,4,0.85) 100%
);
}
.enl-detail__hero-content{
position:relative;
z-index:2;
padding:48px;
color:#fff;
width:100%;
}
.enl-detail__date{
font-size:12px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
color:#fff;
opacity:0.85;
margin-bottom:14px;
}
.enl-detail__date--dark{color:var(--red);opacity:1}
.enl-detail__title{
font-family:'Inter',sans-serif;
font-size:46px;
font-weight:800;
line-height:1.15;
letter-spacing:-1px;
margin:0;
max-width:900px;
}
/* HERO без обложки — просто заголовок */
.enl-detail__head{
max-width:780px;
margin:32px auto 0;
padding:0 24px;
}
.enl-detail__title-plain{
font-family:'Inter',sans-serif;
font-size:42px;
font-weight:800;
line-height:1.15;
letter-spacing:-1px;
margin:14px 0 0;
color:var(--dark);
}
/* Тело статьи */
.enl-detail__body{
max-width:780px;
margin:0 auto;
padding:48px 24px 60px;
}
.enl-detail__lead{
font-size:20px;
line-height:1.55;
color:var(--dark);
font-weight:500;
margin:0 0 32px;
padding:0 0 24px;
border-bottom:1px solid rgba(193,105,79,0.15);
}
.enl-detail__prose{
font-size:17px;
line-height:1.85;
color:var(--dark);
}
.enl-detail__prose p{
margin:0 0 22px;
}
.enl-detail__prose p:last-child{margin-bottom:0}
/* Чтобы emoji в начале абзаца красиво смотрелись — задаём им фиксированный размер */
.enl-detail__prose p img.emoji{height:1.2em;vertical-align:-0.15em}
/* Похожие материалы */
.enl-related{
max-width:1200px;
margin:0 auto 80px;
padding:48px 24px 0;
border-top:1px solid rgba(193,105,79,0.12);
}
.enl-related__title{
font-family:'Inter',sans-serif;
font-size:28px;
font-weight:800;
margin:0 0 24px;
color:var(--dark);
}
.enl-related__grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:20px;
}
/* =============================================================
ПОПАП НА ГЛАВНОЙ
============================================================= */
.enl-popup{
position:fixed;
inset:0;
z-index:1100;
display:none;
pointer-events:none;
}
.enl-popup.is-open{
display:block;
pointer-events:auto;
}
body.has-enl-popup{overflow:hidden}
.enl-popup__overlay{
position:absolute;
inset:0;
background:rgba(20,10,4,0.7);
backdrop-filter:blur(6px);
animation:enlPopupFade 0.3s ease;
}
@keyframes enlPopupFade{from{opacity:0}to{opacity:1}}
.enl-popup__box{
position:relative;
max-width:520px;
margin:5vh auto;
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.5);
max-height:90vh;
display:flex;
flex-direction:column;
animation:enlPopupRise 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes enlPopupRise{
from{opacity:0;transform:translateY(40px) scale(0.92)}
to {opacity:1;transform:none}
}
.enl-popup__close{
position:absolute;
top:14px;right:14px;
width:40px;height:40px;
border-radius:50%;
background:rgba(255,255,255,0.95);
border:none;
cursor:pointer;
font-size:26px;
font-weight:300;
color:var(--dark);
z-index:5;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.enl-popup__close:hover{
background:#fff;
transform:rotate(90deg);
}
.enl-popup__photo{
width:100%;
height:200px;
overflow:hidden;
background:var(--sand);
}
.enl-popup__photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.enl-popup__body{
padding:28px 32px 32px;
overflow-y:auto;
}
.enl-popup__badge{
display:inline-block;
font-size:11px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--red);
background:rgba(224,30,43,0.08);
padding:5px 12px;
border-radius:14px;
margin-bottom:14px;
}
.enl-popup__title{
font-family:'Inter',sans-serif;
font-size:24px;
font-weight:800;
line-height:1.3;
color:var(--dark);
margin:0 0 12px;
letter-spacing:-0.4px;
}
.enl-popup__excerpt{
font-size:15px;
line-height:1.65;
color:var(--warm-gray);
margin:0 0 24px;
/* clamp 4 строки */
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.enl-popup__actions{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
}
.enl-popup__btn{
flex:1;
min-width:200px;
display:inline-block;
text-align:center;
background:var(--red);
color:#fff;
padding:14px 24px;
border-radius:30px;
text-decoration:none;
font-weight:700;
font-size:14px;
letter-spacing:0.3px;
transition:all 0.2s;
box-shadow:0 4px 14px rgba(224,30,43,0.3);
}
.enl-popup__btn:hover{
background:var(--brick);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(224,30,43,0.4);
}
.enl-popup__skip{
background:none;
border:none;
color:var(--warm-gray);
font-size:13px;
font-weight:600;
cursor:pointer;
padding:14px 16px;
border-radius:30px;
transition:color 0.2s, background 0.2s;
}
.enl-popup__skip:hover{
color:var(--dark);
background:var(--sand-light);
}
/* === АДАПТИВ ====================================================== */
@media(max-width:768px){
.enl-page{padding:88px 16px 60px}
.enl-page__head h1{font-size:36px}
.enl-page__sub{font-size:14px}
.enl-detail__hero{height:380px;border-radius:16px;margin:16px}
.enl-detail__hero-content{padding:28px 22px}
.enl-detail__title{font-size:30px}
.enl-detail__title-plain{font-size:30px}
.enl-detail__body{padding:32px 20px 48px}
.enl-detail__lead{font-size:17px}
.enl-detail__prose{font-size:16px;line-height:1.8}
.enl-related{padding:32px 16px 0;margin-bottom:48px}
.enl-related__title{font-size:22px}
.enl-popup__box{margin:2vh 12px;max-height:96vh;border-radius:18px}
.enl-popup__photo{height:160px}
.enl-popup__body{padding:22px 22px 24px}
.enl-popup__title{font-size:20px}
.enl-popup__excerpt{font-size:14px}
.enl-popup__actions{flex-direction:column}
.enl-popup__btn{width:100%;min-width:auto}
.enl-popup__skip{width:100%;text-align:center}
}
/* =============================================================
ПАРТНЁРЫ — по умолчанию СТАТИКА по центру (без анимации).
Прокрутка включается ТОЛЬКО если JS добавит .has-scroll
(когда партнёров реально много). Так нет мелькания.
============================================================= */
.partners-slider{
position:relative;
overflow:hidden;
}
/* По умолчанию: лента по центру, без анимации, дубль скрыт */
.partners-track{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
width:100%;
animation:none; /* НЕ крутится по умолчанию */
}
.partner-slide[aria-hidden="true"]{
display:none; /* дубль скрыт по умолчанию */
}
/* === Когда партнёров МНОГО: JS вешает .has-scroll === */
.partners-slider.has-scroll{
-webkit-mask-image:linear-gradient(to right,
transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
mask-image:linear-gradient(to right,
transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.partners-slider.has-scroll .partners-track{
justify-content:flex-start;
width:max-content;
animation:partnersScroll 40s linear infinite;
}
.partners-slider.has-scroll .partner-slide[aria-hidden="true"]{
display:flex; /* возвращаем дубль для бесшовной прокрутки */
}
.partners-slider.has-scroll:hover .partners-track{
animation-play-state:paused;
}
@keyframes partnersScroll{
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
/* Заголовок строго по центру */
.partners-slider-section .partners-slider-head{
text-align:center !important;
width:100% !important;
display:block !important;
padding:0 24px;
margin:0 auto 36px;
}
.partners-slider-section .partners-slider-title{
text-align:center !important;
display:block !important;
width:100% !important;
margin:0 auto !important;
}
@keyframes partnersScroll{
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
/* -50% потому что мы дублировали список — конец первой половины
совпадает с началом второй, прокрутка незаметная */
}
/* Карточка партнёра */
.partner-slide{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
height:80px;
min-width:160px;
padding:0 12px;
text-decoration:none;
filter:grayscale(0.4);
opacity:0.7;
transition:filter 0.3s, opacity 0.3s, transform 0.3s;
}
.partner-slide:hover{
filter:grayscale(0);
opacity:1;
transform:scale(1.06);
}
.partner-slide img{
max-width:160px;
max-height:64px;
width:auto;
height:auto;
display:block;
object-fit:contain;
}
.partner-slide__name{
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:700;
color:var(--warm-gray);
text-align:center;
white-space:nowrap;
}
/* Адаптив */
@media(max-width:768px){
.partners-slider-section{padding:48px 0 40px}
.partners-slider-title{font-size:26px}
.partners-track{gap:36px;animation-duration:30s}
.partner-slide{height:64px;min-width:120px}
.partner-slide img{max-width:120px;max-height:50px}
}
/* =============================================================
ПАРТНЁРЫ — финальный фикс
============================================================= */
/* Заголовок принудительно по центру */
.partners-slider-section .partners-slider-head{
text-align:center !important;
width:100% !important;
display:block !important;
padding:0 24px;
margin:0 auto 36px;
}
.partners-slider-section .partners-slider-title{
text-align:center !important;
display:block !important;
width:100% !important;
margin:0 auto !important;
}
/* Чтобы не мелькало 6→3 при загрузке: дубль-копию прячем СРАЗУ,
а JS покажет её обратно только если партнёров реально много */
.partner-slide[aria-hidden="true"]{
display:none;
}
/* Когда партнёров много — JS добавит .has-scroll, и дубль вернётся */
.partners-slider.has-scroll .partner-slide[aria-hidden="true"]{
display:flex;
}
/* === НЕКЛИКАБЕЛЬНЫЙ ТРИГГЕР DROPDOWN === */
/* "О нас" больше не ссылка, а просто span — выглядит как пункт меню,
но не реагирует на клик. Подменю выпадает только при наведении. */
.nav-dropdown__trigger{
display:inline-block;
cursor:default;
padding:0; /* унаследует размеры от .nav-links li > a */
color:inherit;
font:inherit;
user-select:none;
}
.nav-dropdown--inactive > .nav-dropdown__trigger{
/* Поведение как у обычной ссылки навбара (цвет, padding, hover-цвет),
но при клике ничего не делает. */
}
/* На мобильном — клик по триггеру открывает/закрывает подменю
(через JS в твоём навбаре), но не делает редирект */
/* === БОЛЬШИЕ СЧЁТЧИКИ ДЛЯ "МАСШТАБА" ВНУТРИ ДОСТИЖЕНИЙ === */
.counters-row--big{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:24px;
margin-top:8px;
}
.counters-row--big .counter-item{
background:#fff;
border-radius:18px;
padding:32px 20px;
text-align:center;
border:1px solid rgba(193,105,79,0.08);
box-shadow:var(--shadow-sm);
transition:all 0.25s;
}
.counters-row--big .counter-item:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
}
.counters-row--big .counter-num{
font-family:'Inter',sans-serif;
font-size:46px;
font-weight:800;
color:var(--red);
letter-spacing:-1.5px;
line-height:1;
margin-bottom:8px;
}
.counters-row--big .counter-label{
font-size:13px;
font-weight:600;
color:var(--warm-gray);
letter-spacing:0.5px;
text-transform:lowercase;
}
@media(max-width:900px){
.counters-row--big{grid-template-columns:repeat(2, 1fr)}
.counters-row--big .counter-num{font-size:36px}
}
@media(max-width:480px){
.counters-row--big{grid-template-columns:1fr;gap:14px}
.counters-row--big .counter-item{padding:22px 16px}
.counters-row--big .counter-num{font-size:32px}
}
/* === СЕКЦИИ ВНУТРИ "ДОСТИЖЕНИЙ" === */
.subpage-body--ach{
margin-bottom:48px;
}
.ach-section{
margin-top:48px;
background:#fff;
border-radius:20px;
padding:36px 40px;
border:1px solid rgba(193,105,79,0.06);
box-shadow:var(--shadow-sm);
}
.ach-section__head{
text-align:center;
margin-bottom:28px;
padding-bottom:20px;
border-bottom:1px solid rgba(193,105,79,0.1);
}
.ach-section__head h2{
font-family:'Inter',sans-serif;
font-size:30px;
font-weight:800;
color:var(--dark);
margin:0 0 8px;
letter-spacing:-0.5px;
}
.ach-section__head p{
font-size:14.5px;
color:var(--warm-gray);
margin:0;
line-height:1.6;
}
/* === БЛОК ФИЛИАЛОВ ВНУТРИ ДОСТИЖЕНИЙ === */
.branches-summary{
display:flex;
justify-content:center;
align-items:stretch;
gap:0;
margin-bottom:32px;
}
.branches-summary__item{
text-align:center;
padding:0 36px;
}
.branches-summary__num{
font-family:'Inter',sans-serif;
font-size:64px;
font-weight:800;
line-height:1;
letter-spacing:-2px;
margin-bottom:8px;
}
.branches-summary__item--active .branches-summary__num{color:var(--red)}
.branches-summary__item--planned .branches-summary__num{color:var(--gold)}
.branches-summary__label{
font-size:13px;
font-weight:600;
color:var(--warm-gray);
letter-spacing:0.5px;
}
.branches-summary__divider{
width:1px;
background:linear-gradient(
to bottom,
transparent,
rgba(193,105,79,0.25) 30%,
rgba(193,105,79,0.25) 70%,
transparent
);
}
.branches-cities{
background:var(--sand-light);
border-radius:14px;
padding:22px 24px;
margin-bottom:24px;
}
.branches-cities__title{
font-size:13px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:var(--red);
margin-bottom:12px;
}
.branches-cities__list{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.branches-cities__item{
display:inline-block;
background:#fff;
padding:7px 14px;
border-radius:14px;
font-size:14px;
font-weight:600;
color:var(--dark);
border:1px solid rgba(193,105,79,0.15);
}
.branches-cta{
text-align:center;
}
.branches-cta__btn{
display:inline-block;
background:var(--red);
color:#fff;
padding:14px 32px;
border-radius:30px;
text-decoration:none;
font-weight:700;
font-size:14px;
letter-spacing:0.3px;
transition:all 0.25s;
box-shadow:0 4px 14px rgba(224,30,43,0.25);
}
.branches-cta__btn:hover{
background:var(--brick);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(224,30,43,0.35);
}
@media(max-width:768px){
.ach-section{padding:24px 22px;border-radius:16px;margin-top:32px}
.ach-section__head h2{font-size:24px}
.branches-summary{margin-bottom:24px}
.branches-summary__item{padding:0 24px}
.branches-summary__num{font-size:48px}
.branches-cities{padding:18px}
}
/* =============================================================
КАРТА ФИЛИАЛОВ — финальные цвета (флаг РОО)
Песочные регионы · тёмный объёмный hover ·
коричневые действующие · зелёные готовые
Этот блок идёт ПОСЛЕ старой секции "КАРТА ФИЛИАЛОВ" и
перебивает её цвета.
============================================================= */
/* Регионы — песочные с белой обводкой */
.branches-map-section .kz-region{
fill:#F5E6D3 !important;
stroke:#ffffff !important;
stroke-width:3;
stroke-linejoin:round;
stroke-linecap:round;
cursor:pointer;
transform-origin:center center;
transform-box:fill-box;
transition:
fill 0.25s ease,
stroke 0.25s ease,
transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
filter 0.35s ease;
}
/* Hover региона — темнее песок + объёмный подъём (без красного) */
.branches-map-section .kz-region:hover{
fill:#E5D0B0 !important;
transform:translateY(-6px) scale(1.04);
filter:
drop-shadow(0 16px 22px rgba(74,55,32,0.40))
drop-shadow(0 5px 8px rgba(0,0,0,0.28));
}
/* Счётчики: действующие — коричневый, готовые — зелёный */
.branches-map-section .bcount--active .bcount__num{color:#c32130 !important}
.branches-map-section .bcount--planned .bcount__num{color:#3F9142 !important}
/* Hover-свечение под звёздами */
.branch-pin--active:hover .branch-pin__star,
.branch-pin--active:focus .branch-pin__star{filter:drop-shadow(0 0 8px rgba(139,90,43,0.55)) drop-shadow(0 2px 1.5px rgba(0,0,0,0.4))}
.branch-pin--planned:hover .branch-pin__star,
.branch-pin--planned:focus .branch-pin__star{filter:drop-shadow(0 0 8px rgba(63,145,66,0.6)) drop-shadow(0 2px 1.5px rgba(0,0,0,0.4))}
/* =============================================================
МИССИЯ — красивое оформление (стиль "Форма работы")
============================================================= */
.mission-prose{
display:flex;
flex-direction:column;
gap:22px;
max-width:920px;
margin:0 auto;
}
/* Вступительные абзацы — крупный мягкий текст */
.mission-prose .m-lead{
font-size:18px;
line-height:1.75;
color:var(--dark);
margin:0;
}
.mission-prose .m-lead--accent{
background:var(--sand-light);
border-radius:16px;
padding:24px 28px;
border-left:5px solid var(--red);
font-size:17px;
color:var(--warm-gray);
}
/* Карточка с инфо об учредителе */
.mission-prose .m-founder{
background:linear-gradient(135deg, var(--red), var(--brick));
color:#fff;
border-radius:20px;
padding:28px 32px;
position:relative;
overflow:hidden;
}
.mission-prose .m-founder::before{
content:'';
position:absolute;
top:-40px;right:-30px;
width:150px;height:150px;
border:30px solid rgba(255,255,255,0.08);
border-radius:50%;
pointer-events:none;
}
.mission-prose .m-founder p{
margin:0 0 10px;
font-size:15.5px;
line-height:1.7;
position:relative;
z-index:1;
}
.mission-prose .m-founder p:last-child{margin-bottom:0}
.mission-prose .m-founder b{color:#fff;font-weight:800}
/* Заголовок секции внутри миссии */
.mission-prose .m-section-title{
font-family:'Inter',sans-serif;
font-size:26px;
font-weight:800;
color:var(--dark);
margin:18px 0 4px;
letter-spacing:-0.4px;
}
/* Блок доктринальных принципов — нумерованные карточки */
.mission-principles{
counter-reset:mp;
display:flex;
flex-direction:column;
gap:16px;
}
.mission-principles .principle{
position:relative;
background:#fff;
border:1px solid rgba(193,105,79,0.12);
border-radius:18px;
padding:24px 28px 24px 92px;
box-shadow:0 4px 16px rgba(193,105,79,0.06);
transition:transform .25s, box-shadow .25s;
counter-increment:mp;
}
.mission-principles .principle:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(193,105,79,0.13);
}
.mission-principles .principle::before{
content:counter(mp);
position:absolute;
top:22px;left:22px;
width:52px;height:52px;
border-radius:50%;
background:linear-gradient(135deg, var(--terracotta), var(--red));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-family:'Inter',sans-serif;
font-size:22px;
font-weight:800;
box-shadow:0 6px 14px rgba(224,30,43,0.28);
}
.mission-principles .principle p{
font-size:15.5px;
line-height:1.7;
color:var(--dark);
margin:0;
}
.mission-principles .principle p b{color:var(--red)}
/* Заключительный акцент */
.mission-prose .m-conclusion{
background:var(--sand-light);
border-radius:16px;
padding:24px 28px;
font-size:17px;
line-height:1.7;
color:var(--dark);
text-align:center;
font-weight:500;
margin:0;
}
.mission-prose .m-conclusion b{color:var(--red)}
/* =============================================================
ЗНАЧЕНИЕ ЛОГОТИПА — 5 ценностей
============================================================= */
.logo-meaning{
background:linear-gradient(180deg, var(--cream), var(--sand-light));
border-radius:24px;
padding:44px 40px;
text-align:center;
border:1px solid rgba(193,105,79,0.1);
margin-top:8px;
}
.logo-meaning__title{
font-family:'Inter',sans-serif;
font-size:30px;
font-weight:800;
color:var(--dark);
margin:0 0 6px;
letter-spacing:-0.5px;
}
.logo-meaning__subtitle{
font-size:17px;
font-weight:700;
color:var(--red);
margin:0 0 8px;
letter-spacing:0.5px;
}
.logo-meaning__intro{
font-size:15px;
line-height:1.65;
color:var(--warm-gray);
max-width:560px;
margin:0 auto 32px;
}
.logo-meaning__grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:16px;
max-width:820px;
margin:0 auto 28px;
}
.logo-value{
background:#fff;
border-radius:16px;
padding:24px 16px;
border:1px solid rgba(193,105,79,0.1);
box-shadow:var(--shadow-sm);
transition:transform .25s, box-shadow .25s;
position:relative;
}
.logo-value:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.logo-value__num{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;height:34px;
border-radius:50%;
background:var(--sand);
color:var(--red);
font-family:'Inter',sans-serif;
font-weight:800;
font-size:15px;
margin-bottom:12px;
}
.logo-value__name{
font-family:'Inter',sans-serif;
font-size:15px;
font-weight:700;
color:var(--dark);
line-height:1.3;
}
.logo-meaning__outro{
font-size:15.5px;
line-height:1.7;
color:var(--warm-gray);
max-width:600px;
margin:0 auto;
font-style:italic;
}
@media(max-width:768px){
.mission-principles .principle{padding:80px 20px 22px}
.mission-principles .principle::before{top:20px;left:20px;width:46px;height:46px;font-size:19px}
.mission-prose .m-lead{font-size:16px}
.logo-meaning{padding:32px 22px}
.logo-meaning__title{font-size:24px}
.logo-meaning__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
.logo-meaning__grid{grid-template-columns:1fr}
}
/* =============================================================
МАНИФЕСТ — оформление в стиле "Форма работы"
============================================================= */
.manifesto-prose{
display:flex;
flex-direction:column;
gap:24px;
max-width:920px;
margin:0 auto;
}
/* Эпиграф-заголовок манифеста */
.manifesto-prose .mf-epigraph{
text-align:center;
background:linear-gradient(135deg, var(--red), var(--brick));
color:#fff;
border-radius:24px;
padding:48px 36px;
position:relative;
overflow:hidden;
}
.manifesto-prose .mf-epigraph::before{
content:'«»';
position:absolute;
top:-30px;left:50%;
transform:translateX(-50%);
font-family:'Lora','Georgia',serif;
font-size:160px;
opacity:0.1;
pointer-events:none;
}
.manifesto-prose .mf-epigraph h2{
font-family:'Lora','Georgia',serif;
font-size:38px;
font-weight:700;
font-style:italic;
margin:0;
position:relative;
z-index:1;
letter-spacing:-0.5px;
line-height:1.2;
}
/* Вступительные абзацы */
.manifesto-prose .mf-lead{
font-size:17.5px;
line-height:1.8;
color:var(--dark);
margin:0;
text-align:center;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
.manifesto-prose .mf-lead--accent{
font-size:20px;
font-weight:600;
color:var(--brick);
}
/* Сетка тезисов */
.manifesto-tenets{
counter-reset:mft;
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:18px;
margin-top:8px;
}
.manifesto-tenet{
position:relative;
background:#fff;
border:1px solid rgba(193,105,79,0.12);
border-radius:18px;
padding:28px 26px 26px;
box-shadow:0 4px 16px rgba(193,105,79,0.06);
transition:transform .25s, box-shadow .25s;
counter-increment:mft;
overflow:hidden;
}
.manifesto-tenet::after{
content:counter(mft);
position:absolute;
top:-10px;right:8px;
font-family:'Inter',sans-serif;
font-size:90px;
font-weight:800;
color:rgba(224,30,43,0.06);
line-height:1;
pointer-events:none;
}
.manifesto-tenet:hover{
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(193,105,79,0.14);
border-color:rgba(224,30,43,0.25);
}
.manifesto-tenet h3{
font-family:'Inter',sans-serif;
font-size:19px;
font-weight:800;
color:var(--red);
margin:0 0 12px;
line-height:1.3;
position:relative;
z-index:1;
padding-bottom:12px;
border-bottom:2px solid rgba(224,30,43,0.12);
}
.manifesto-tenet p{
font-size:14.5px;
line-height:1.7;
color:var(--warm-gray);
margin:0;
position:relative;
z-index:1;
}
/* Финальный блок "Наша позиция" */
.manifesto-position{
background:var(--dark);
color:#fff;
border-radius:24px;
padding:44px 40px;
text-align:center;
margin-top:8px;
position:relative;
overflow:hidden;
}
.manifesto-position::before{
content:'';
position:absolute;
top:-50px;right:-40px;
width:180px;height:180px;
border:36px solid rgba(255,255,255,0.04);
border-radius:50%;
pointer-events:none;
}
.manifesto-position h3{
font-family:'Inter',sans-serif;
font-size:28px;
font-weight:800;
margin:0 0 24px;
color:#fff;
letter-spacing:-0.5px;
position:relative;
z-index:1;
}
.manifesto-position__choices{
display:flex;
flex-direction:column;
gap:14px;
max-width:520px;
margin:0 auto 28px;
position:relative;
z-index:1;
}
.manifesto-choice{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
font-size:17px;
font-weight:600;
}
.manifesto-choice__yes{color:#fff}
.manifesto-choice__vs{
font-size:13px;
color:rgba(255,255,255,0.4);
font-weight:500;
font-style:italic;
}
.manifesto-choice__no{
color:rgba(255,255,255,0.4);
text-decoration:line-through;
}
.manifesto-position__final{
font-size:18px;
font-weight:700;
color:var(--gold);
margin:0;
position:relative;
z-index:1;
line-height:1.5;
}
@media(max-width:768px){
.manifesto-tenets{grid-template-columns:1fr}
.manifesto-prose .mf-epigraph{padding:32px 22px}
.manifesto-prose .mf-epigraph h2{font-size:26px}
.manifesto-prose .mf-lead{font-size:15.5px}
.manifesto-prose .mf-lead--accent{font-size:17px}
.manifesto-position{padding:32px 22px}
.manifesto-position h3{font-size:22px}
.manifesto-choice{font-size:15px;gap:8px}
}
/* =============================================================
АКТУАЛЬНЫЕ ВОПРОСЫ — карточки с номерами (стиль "Форма работы")
============================================================= */
.aq-prose{
max-width:920px;
margin:0 auto;
}
/* Вступление */
.aq-intro{
font-size:17.5px;
line-height:1.8;
color:var(--dark);
text-align:center;
max-width:760px;
margin:0 auto 36px;
background:var(--sand-light);
border-radius:16px;
padding:24px 28px;
border-left:5px solid var(--red);
}
/* Сетка вопросов */
.aq-grid{
counter-reset:aq;
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:18px;
}
.aq-card{
position:relative;
background:#fff;
border:1px solid rgba(193,105,79,0.12);
border-radius:18px;
padding:26px 26px 24px 76px;
box-shadow:0 4px 16px rgba(193,105,79,0.06);
transition:transform .25s, box-shadow .25s;
counter-increment:aq;
}
.aq-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(193,105,79,0.14);
border-color:rgba(224,30,43,0.25);
}
.aq-card::before{
content:counter(aq);
position:absolute;
top:24px;left:22px;
width:40px;height:40px;
border-radius:50%;
background:linear-gradient(135deg, var(--terracotta), var(--red));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-family:'Inter',sans-serif;
font-size:17px;
font-weight:800;
box-shadow:0 5px 12px rgba(224,30,43,0.26);
}
.aq-card h3{
font-family:'Inter',sans-serif;
font-size:17px;
font-weight:800;
color:var(--red);
margin:0 0 10px;
line-height:1.3;
}
.aq-card p{
font-size:14.5px;
line-height:1.7;
color:var(--warm-gray);
margin:0;
}
@media(max-width:768px){
.aq-grid{grid-template-columns:1fr}
.aq-intro{font-size:15.5px}
.aq-card{padding:24px 20px 22px 70px}
.aq-card::before{width:36px;height:36px;font-size:15px;top:22px;left:18px}
}
/* =============================================================
MEMBER GUIDE — путеводитель участника
============================================================= */
.mg-prose{
display:flex;
flex-direction:column;
gap:26px;
max-width:920px;
margin:0 auto;
}
/* Приветствие */
.mg-welcome{
text-align:center;
background:linear-gradient(135deg, var(--red), var(--brick));
color:#fff;
border-radius:24px;
padding:40px 36px;
position:relative;
overflow:hidden;
}
.mg-welcome::before{
content:'';
position:absolute;
top:-40px;right:-30px;
width:160px;height:160px;
border:32px solid rgba(255,255,255,0.08);
border-radius:50%;
pointer-events:none;
}
.mg-welcome h2{
font-family:'Inter',sans-serif;
font-size:28px;
font-weight:800;
margin:0 0 12px;
position:relative;
z-index:1;
letter-spacing:-0.5px;
}
.mg-welcome p{
font-size:16px;
line-height:1.7;
opacity:0.95;
margin:0;
max-width:620px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1;
}
/* Заголовок раздела */
.mg-section-title{
font-family:'Inter',sans-serif;
font-size:26px;
font-weight:800;
color:var(--dark);
text-align:center;
margin:8px 0;
letter-spacing:-0.4px;
}
/* Блоки "чем полезны" — нумерованные */
.mg-blocks{
counter-reset:mg;
display:flex;
flex-direction:column;
gap:18px;
}
.mg-block{
position:relative;
background:#fff;
border:1px solid rgba(193,105,79,0.12);
border-radius:18px;
padding:28px 30px 26px 92px;
box-shadow:0 4px 16px rgba(193,105,79,0.06);
transition:transform .25s, box-shadow .25s;
counter-increment:mg;
}
.mg-block:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(193,105,79,0.13);
}
.mg-block::before{
content:counter(mg);
position:absolute;
top:26px;left:24px;
width:52px;height:52px;
border-radius:50%;
background:linear-gradient(135deg, var(--terracotta), var(--red));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-family:'Inter',sans-serif;
font-size:22px;
font-weight:800;
box-shadow:0 6px 14px rgba(224,30,43,0.28);
}
.mg-block h3{
font-family:'Inter',sans-serif;
font-size:19px;
font-weight:800;
color:var(--red);
margin:0 0 14px;
line-height:1.3;
}
.mg-block ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:9px;
}
.mg-block li{
position:relative;
padding-left:24px;
font-size:15px;
line-height:1.6;
color:var(--warm-gray);
}
.mg-block li::before{
content:'';
position:absolute;
left:4px;top:9px;
width:8px;height:8px;
border-radius:50%;
background:var(--terracotta);
}
/* Цель — акцентный блок */
.mg-goal{
background:var(--sand-light);
border-radius:18px;
padding:28px 32px;
text-align:center;
}
.mg-goal__main{
font-size:20px;
font-weight:800;
color:var(--red);
margin:0 0 10px;
font-family:'Inter',sans-serif;
}
.mg-goal__sub{
font-size:15.5px;
line-height:1.7;
color:var(--warm-gray);
margin:0;
font-style:italic;
}
/* Счётчик участников */
.mg-count{
text-align:center;
font-size:17px;
line-height:1.6;
color:var(--dark);
margin:0;
}
.mg-count b{
color:var(--red);
font-size:22px;
font-weight:800;
}
/* Контакты */
.mg-contacts{
background:var(--dark);
border-radius:20px;
padding:32px 36px;
color:#fff;
}
.mg-contacts h3{
font-family:'Inter',sans-serif;
font-size:18px;
font-weight:700;
margin:0 0 18px;
color:var(--gold);
text-align:center;
}
.mg-contacts__list{
display:flex;
flex-direction:column;
gap:12px;
max-width:480px;
margin:0 auto;
}
.mg-contacts__item{
display:flex;
align-items:center;
gap:12px;
font-size:15px;
}
.mg-contacts__item a{
color:#fff;
text-decoration:none;
font-weight:600;
transition:color 0.2s;
word-break:break-all;
}
.mg-contacts__item a:hover{color:var(--gold)}
.mg-contacts__icon{
flex-shrink:0;
width:34px;height:34px;
border-radius:50%;
background:rgba(255,255,255,0.1);
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
}
@media(max-width:768px){
.mg-welcome{padding:30px 22px}
.mg-welcome h2{font-size:22px}
.mg-section-title{font-size:22px}
.mg-block{padding:80px 20px 22px}
.mg-block::before{top:22px;left:20px;width:46px;height:46px;font-size:19px}
.mg-goal__main{font-size:17px}
.mg-contacts{padding:24px 22px}
}
/* =============================================================
КОМАНДА — РУКОВОДСТВО: ГАРАНТИРОВАННО трое в ряд
(усиленная специфичность — перебивает любые --big/--small)
============================================================= */
.about-subpage .team-grid.team-grid--heads{
display:grid;
grid-template-columns:repeat(3, 1fr) !important;
gap:24px;
max-width:880px;
margin-left:auto;
margin-right:auto;
}
.about-subpage .team-grid--heads .team-card img{
height:260px;
}
.about-subpage .team-grid--heads .team-card-info{
padding:20px;
text-align:center;
}
.about-subpage .team-grid--heads .team-card-info h3{font-size:18px}
.about-subpage .team-grid--heads .team-position{font-size:13px}
.about-subpage .team-grid--heads .team-bio{font-size:13px;margin-top:8px}
@media(max-width:900px){
.about-subpage .team-grid.team-grid--heads{
gap:16px;
max-width:100%;
}
.about-subpage .team-grid--heads .team-card img{height:220px}
}
@media(max-width:600px){
.about-subpage .team-grid.team-grid--heads{
grid-template-columns:1fr !important;
max-width:340px;
}
.about-subpage .team-grid--heads .team-card img{height:300px}
}
/* =============================================================
СТРАНИЦА ЖАНАШЫР
============================================================= */
.jn-inner{
max-width:1100px;
margin:0 auto;
}
/* === Фраза сверху === */
.jn-top-phrase__text{
display:inline-block;
font-family:'Lora','Georgia',serif;
font-size:38px;
font-weight:700;
font-style:italic;
color:var(--dark);
line-height:1.3;
letter-spacing:-0.5px;
position:relative;
padding:0 0 18px;
}
.jn-top-phrase__text::after{
content:'';
position:absolute;
bottom:0;left:50%;
transform:translateX(-50%);
width:80px;height:4px;
background:var(--red);
border-radius:2px;
}
.jn-coordinator__photo{
width:200px;height:200px;
border-radius:50%;
object-fit:cover;
border:5px solid var(--sand);
box-shadow:var(--shadow-md);
margin:0 auto 16px;
display:block;
}
.jn-coordinator__name{
font-family:'Inter',sans-serif;
font-size:19px;
font-weight:800;
color:var(--dark);
margin-bottom:4px;
}
.jn-coordinator__pos{
font-size:14px;
color:var(--red);
font-weight:600;
margin-bottom:12px;
}
.jn-coordinator__insta{
display:inline-block;
font-size:13px;
font-weight:700;
color:var(--red);
text-decoration:none;
padding:6px 16px;
border:1.5px solid rgba(224,30,43,0.3);
border-radius:20px;
transition:all 0.2s;
}
.jn-coordinator__insta:hover{
background:var(--red);
color:#fff;
}
/* Цитата — стиль как на главной */
.jn-quote__mark{
position:absolute;
top:-10px;left:18px;
font-family:'Lora','Georgia',serif;
font-size:120px;
line-height:1;
font-weight:700;
color:var(--red);
opacity:0.18;
pointer-events:none;
}
.jn-quote__text{
font-family:'Lora','Georgia',serif;
font-size:26px;
font-weight:600;
font-style:italic;
line-height:1.4;
color:var(--dark);
margin:0;
}
.jn-quote__author{
display:block;
margin-top:18px;
text-align:right;
font-style:normal;
font-size:16px;
font-weight:700;
color:var(--red);
}
/* === Слайдер === */
.jn-slide.active{opacity:1}
.jn-slide img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.jn-slide__caption{
position:absolute;
bottom:0;left:0;right:0;
padding:32px 28px 20px;
background:linear-gradient(transparent, rgba(0,0,0,0.7));
color:#fff;
font-size:15px;
font-weight:600;
}
.jn-slider__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:48px;height:48px;
border-radius:50%;
background:rgba(255,255,255,0.85);
border:none;
cursor:pointer;
font-size:28px;
color:var(--red);
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
z-index:2;
}
.jn-slider__arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.jn-slider__arrow--prev{left:20px}
.jn-slider__arrow--next{right:20px}
.jn-slider__dots{
position:absolute;
bottom:18px;left:50%;
transform:translateX(-50%);
display:flex;
gap:8px;
z-index:2;
}
.jn-dot.active{background:#fff;width:26px;border-radius:5px}
/* === Доп. контент === */
.jn-content{
font-size:16px;
line-height:1.8;
color:var(--dark);
max-width:820px;
margin:0 auto 56px;
}
.jn-content p{margin:0 0 16px}
/* === Новости === */
.jn-news__title{
font-family:'Inter',sans-serif;
font-size:32px;
font-weight:800;
color:var(--dark);
text-align:center;
margin:0 0 32px;
letter-spacing:-0.5px;
}
.jn-news__grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
gap:24px;
}
.jn-news-card{
background:#fff;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(193,105,79,0.08);
box-shadow:var(--shadow-sm);
transition:transform 0.25s, box-shadow 0.25s;
}
.jn-news-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.jn-news-card__photo{
height:200px;
overflow:hidden;
background:var(--sand);
}
.jn-news-card__photo img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.jn-news-card__body{padding:20px 22px 24px}
.jn-news-card__date{
font-size:12px;
font-weight:700;
color:var(--red);
letter-spacing:0.5px;
margin-bottom:10px;
}
.jn-news-card__title{
font-family:'Inter',sans-serif;
font-size:18px;
font-weight:700;
line-height:1.35;
color:var(--dark);
margin:0 0 10px;
}
.jn-news-card__excerpt{
font-size:14px;
line-height:1.65;
color:var(--warm-gray);
margin:0;
}
/* === АДАПТИВ === */
@media(max-width:860px){
.jn-intro{
grid-template-columns:1fr;
gap:28px;
}
.jn-coordinator__photo{width:160px;height:160px}
.jn-quote{padding:28px 24px 24px 44px}
.jn-quote__text{font-size:21px}
}
@media(max-width:640px){
.jn-top-phrase__text{font-size:26px}
.jn-slides{height:300px}
.jn-slider__arrow{width:40px;height:40px;font-size:22px}
.jn-news__title{font-size:24px}
}
/* =============================================================
ЖАНАШЫР — HERO: слайдер на всю ширину + контент ПОВЕРХ
Удали старые .jn-hero, .jn-slider, .jn-slider__*, .jn-page padding-top.
Также .jn-top-phrase и .jn-intro переопределяются ниже под hero.
============================================================= */
/* Hero на ВСЮ ширину экрана (как на главной) */
.jn-hero{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw); /* выходим за пределы контейнера base */
margin-right:calc(50% - 50vw);
min-height:680px;
overflow:hidden;
background:#1a0f08;
display:flex;
align-items:center;
justify-content:center;
}
/* Слайдер фоном */
.jn-hero__slides{
position:absolute;
inset:0;
z-index:1;
}
.jn-hero__slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity 1.2s ease;
}
.jn-hero__slide.active{opacity:1}
.jn-hero__slide img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
/* Затемнение поверх фото — чтобы блок читался */
.jn-hero__overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(180deg, rgba(44,24,16,0.45) 0%, rgba(44,24,16,0.65) 100%),
radial-gradient(ellipse at center, rgba(44,24,16,0.2) 0%, rgba(44,24,16,0.6) 100%);
pointer-events:none;
}
/* Контент поверх слайдера */
.jn-hero__content{
position:relative;
z-index:3;
width:100%;
max-width:1400px;
padding:150px 32px 80px;
margin:0 auto;
}
/* Фраза сверху — теперь на белом фоне ПОВЕРХ слайдера */
.jn-hero .jn-top-phrase{
text-align:center;
margin-bottom:40px;
}
.jn-hero .jn-top-phrase__text{
display:inline-block;
font-family:'Lora','Georgia',serif;
font-size:42px;
font-weight:700;
font-style:italic;
color:#fff;
line-height:1.25;
letter-spacing:-0.5px;
padding:0 0 18px;
position:relative;
text-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.jn-hero .jn-top-phrase__text::after{
content:'';
position:absolute;
bottom:0;left:50%;
transform:translateX(-50%);
width:80px;height:4px;
background:var(--red);
border-radius:2px;
}
/* Блок координатор + цитата на стеклянной плашке */
.jn-hero .jn-intro{
display:grid;
grid-template-columns:280px 1fr;
gap:32px;
align-items:center;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(10px);
border-radius:24px;
padding:32px 36px;
box-shadow:0 30px 60px rgba(0,0,0,0.35);
margin:0;
}
/* Координатор — компактнее в hero */
.jn-hero .jn-coordinator{text-align:center}
.jn-hero .jn-coordinator__photo{
width:170px;height:170px;
border-radius:50%;
object-fit:cover;
border:4px solid var(--sand);
box-shadow:var(--shadow-md);
margin:0 auto 12px;
display:block;
}
.jn-hero .jn-coordinator__name{
font-family:'Inter',sans-serif;
font-size:17px;
font-weight:800;
color:var(--dark);
margin-bottom:4px;
}
.jn-hero .jn-coordinator__pos{
font-size:13px;
color:var(--red);
font-weight:600;
margin-bottom:10px;
line-height:1.35;
}
.jn-hero .jn-coordinator__insta{
display:inline-block;
font-size:12px;
font-weight:700;
color:var(--red);
text-decoration:none;
padding:5px 14px;
border:1.5px solid rgba(224,30,43,0.3);
border-radius:18px;
transition:all 0.2s;
}
.jn-hero .jn-coordinator__insta:hover{
background:var(--red);
color:#fff;
}
/* Цитата */
.jn-hero .jn-quote{
position:relative;
margin:0;
padding:0 0 0 28px;
border-left:5px solid var(--red);
}
.jn-hero .jn-quote__mark{
position:absolute;
top:-22px;left:14px;
font-family:'Lora','Georgia',serif;
font-size:90px;
line-height:1;
font-weight:700;
color:var(--red);
opacity:0.18;
pointer-events:none;
}
.jn-hero .jn-quote__text{
font-family:'Lora','Georgia',serif;
font-size:18px;
font-weight:500;
line-height:1.55;
color:var(--dark);
margin:0;
}
.jn-hero .jn-quote__author{
display:block;
margin-top:12px;
text-align:right;
font-style:normal;
font-size:14px;
font-weight:700;
color:var(--red);
}
/* Точки слайдера снизу */
.jn-hero__dots{
position:absolute;
bottom:24px;left:50%;
transform:translateX(-50%);
z-index:4;
display:flex;
gap:8px;
}
.jn-hero__dot{
width:10px;height:10px;
border-radius:50%;
border:none;
background:rgba(255,255,255,0.5);
cursor:pointer;
padding:0;
transition:all 0.2s;
}
.jn-hero__dot.active{background:#fff;width:26px;border-radius:5px}
/* Контент ниже hero — обычная страница с отступами */
.jn-page{
padding:64px 24px 80px;
background:#fff;
}
.jn-inner{
max-width:1100px;
margin:0 auto;
}
/* Адаптив */
@media(max-width:900px){
.jn-hero{min-height:auto}
.jn-hero__content{padding:70px 20px 70px}
.jn-hero .jn-top-phrase__text{font-size:28px}
.jn-hero .jn-intro{
grid-template-columns:1fr;
gap:20px;
padding:24px 22px;
}
.jn-hero .jn-coordinator__photo{width:140px;height:140px}
.jn-hero .jn-quote{
padding:0 0 0 18px;
border-left-width:4px;
}
.jn-hero .jn-quote__text{font-size:16px}
}
@media(max-width:480px){
.jn-hero .jn-top-phrase__text{font-size:22px}
}
/* =============================================================
ПРОСВЕЩЕНИЕ — блок ведущей рубрики (стиль как у Жанашыров)
============================================================= */
.enl-host{
display:grid;
grid-template-columns:260px 1fr;
gap:40px;
align-items:center;
background:#fff;
border-radius:24px;
padding:36px 40px;
box-shadow:var(--shadow-md);
border:1px solid rgba(193,105,79,0.08);
margin:0 auto 56px;
max-width:980px;
}
.enl-host__photo-wrap{
text-align:center;
}
.enl-host__photo{
width:220px;height:220px;
border-radius:50%;
object-fit:cover;
border:5px solid var(--sand);
box-shadow:var(--shadow-md);
display:block;
margin:0 auto;
}
.enl-host__name{
font-family:'Inter',sans-serif;
font-size:24px;
font-weight:800;
color:var(--dark);
margin-bottom:6px;
letter-spacing:-0.4px;
}
.enl-host__pos{
font-size:15px;
color:var(--red);
font-weight:700;
margin-bottom:16px;
}
.enl-host__bio{
font-size:15.5px;
line-height:1.75;
color:var(--warm-gray);
margin:0 0 16px;
}
.enl-host__bio p{margin:0 0 10px}
.enl-host__insta{
display:inline-block;
font-size:13px;
font-weight:700;
color:var(--red);
text-decoration:none;
padding:8px 18px;
border:1.5px solid rgba(224,30,43,0.3);
border-radius:22px;
transition:all 0.2s;
}
.enl-host__insta:hover{
background:var(--red);
color:#fff;
}
/* Заголовок секции материалов */
.enl-materials-title{
font-family:'Inter',sans-serif;
font-size:28px;
font-weight:800;
color:var(--dark);
text-align:center;
margin:0 0 32px;
letter-spacing:-0.5px;
}
@media(max-width:820px){
.enl-host{
grid-template-columns:1fr;
gap:24px;
text-align:center;
padding:28px 24px;
}
.enl-host__photo{width:170px;height:170px}
.enl-materials-title{font-size:23px}
}
/* =============================================================
СМИ О НАС — карточки публикаций
============================================================= */
.mentions-page{
padding:140px 24px 80px;
background:linear-gradient(180deg, var(--sand-light) 0%, #fff 260px);
min-height:70vh;
}
.mentions-inner{
max-width:920px;
margin:0 auto;
}
.mentions-head{
text-align:center;
margin-bottom:48px;
}
.mentions-head__pretitle{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
color:var(--red);
margin-bottom:10px;
}
.mentions-head h1{
font-family:'Inter',sans-serif;
font-size:42px;
font-weight:800;
color:var(--dark);
margin:0 0 12px;
letter-spacing:-0.8px;
}
.mentions-head__sub{
font-size:16px;
color:var(--warm-gray);
margin:0;
max-width:520px;
margin:0 auto;
}
.mentions-list{
display:flex;
flex-direction:column;
gap:20px;
}
/* Карточка публикации */
.mention-card{
display:grid;
grid-template-columns:220px 1fr;
gap:0;
background:#fff;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(193,105,79,0.1);
box-shadow:var(--shadow-sm);
text-decoration:none;
transition:transform 0.25s, box-shadow 0.25s;
}
.mention-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.mention-card__photo{
overflow:hidden;
background:var(--sand);
}
.mention-card__photo img{
width:100%;height:100%;
object-fit:cover;
display:block;
min-height:160px;
}
.mention-card__body{
padding:24px 28px;
display:flex;
flex-direction:column;
}
.mention-card__top{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}
.mention-card__source{
display:inline-block;
font-size:12px;
font-weight:800;
color:#fff;
background:var(--red);
padding:4px 12px;
border-radius:6px;
letter-spacing:0.3px;
}
.mention-card__date{
font-size:13px;
color:var(--warm-gray);
font-weight:600;
}
.mention-card__title{
font-family:'Inter',sans-serif;
font-size:19px;
font-weight:700;
line-height:1.35;
color:var(--dark);
margin:0 0 10px;
}
.mention-card__excerpt{
font-size:14.5px;
line-height:1.65;
color:var(--warm-gray);
margin:0 0 14px;
flex:1;
}
.mention-card__link{
font-size:14px;
font-weight:700;
color:var(--red);
transition:gap 0.2s;
}
.mention-card:hover .mention-card__link{
text-decoration:underline;
}
.mentions-empty{
text-align:center;
padding:60px 0;
}
/* Адаптив */
@media(max-width:680px){
.mentions-page{padding:100px 16px 60px}
.mentions-head h1{font-size:30px}
.mention-card{
grid-template-columns:1fr;
}
.mention-card__photo img{min-height:180px;max-height:220px}
.mention-card__body{padding:20px 22px}
.mention-card__title{font-size:17px}
}
/* Сетка 6 колонок: 3 карточки сверху (по 2 кол), 2 снизу по центру */
.logo-meaning__grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:16px;
max-width:760px;
margin:0 auto 28px;
}
/* Каждая карточка занимает 2 колонки → 3 в ряд */
.logo-value{
grid-column:span 2;
background:#fff;
border-radius:16px;
padding:26px 16px;
border:1px solid rgba(193,105,79,0.1);
box-shadow:var(--shadow-sm);
transition:transform .25s, box-shadow .25s;
position:relative;
text-align:center;
}
.logo-value:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
/* 4-я карточка (первая во втором ряду) — сдвигаем на 1 колонку вправо,
чтобы две нижние встали по центру: пустая колонка слева и справа */
.logo-value:nth-child(4){
grid-column:2 / span 2;
}
.logo-value:nth-child(5){
grid-column:4 / span 2;
}
/* Галочка цветом логотипа */
.logo-value__check{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;height:46px;
border-radius:50%;
background:rgba(224,30,43,0.1);
color:var(--red);
margin-bottom:14px;
}
.logo-value__check svg{
width:26px;height:26px;
}
.logo-value__name{
font-family:'Inter',sans-serif;
font-size:15px;
font-weight:700;
color:var(--dark);
line-height:1.3;
}
/* Планшет/мобайл — 2 в ряд, без хитрого центрирования */
@media(max-width:768px){
.logo-meaning__grid{
grid-template-columns:repeat(2, 1fr);
}
.logo-value,
.logo-value:nth-child(4),
.logo-value:nth-child(5){
grid-column:auto;
}
}
@media(max-width:420px){
.logo-meaning__grid{grid-template-columns:1fr}
}
/* =============================================================
ЖАНАШЫР — текст ПОВЕРХ слайдера (как на главной)
Заменяет старый .jn-slider блок. .jn-content больше не нужен.
============================================================= */
.jn-slider{
position:relative;
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow-lg);
margin-bottom:56px;
background:var(--dark);
}
.jn-slides{
position:relative;
height:520px;
}
.jn-slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity 0.8s ease;
}
.jn-slide.active{opacity:1}
.jn-slide img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
/* Текст в НИЖНЕЙ части слайдера */
.jn-slider__text p{
font-family:'Lora','Georgia',serif;
font-size:22px;
line-height:1.55;
font-weight:500;
margin:0 0 10px;
max-width:820px;
padding-left:20px;
border-left:4px solid var(--red);
text-shadow:0 2px 12px rgba(0,0,0,0.5);
}
.jn-slider__text p:last-child{margin-bottom:0}
.jn-slider__text h2,
.jn-slider__text h3{
font-family:'Inter',sans-serif;
font-weight:800;
margin:0 0 12px;
text-shadow:0 2px 12px rgba(0,0,0,0.5);
letter-spacing:-0.5px;
}
.jn-slider__text h2{font-size:32px}
.jn-slider__text h3{font-size:24px}
/* =============================================================
ЖАНАШЫР — блок ФОТО И ВИДЕО
============================================================= */
.jn-media{margin-bottom:56px}
.jn-media__title{
font-family:'Inter',sans-serif;
font-size:32px;
font-weight:800;
color:var(--dark);
text-align:center;
margin:0 0 32px;
letter-spacing:-0.5px;
}
.jn-media__grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:20px;
}
.jn-media-item{
position:relative;
border-radius:16px;
overflow:hidden;
background:var(--dark);
aspect-ratio:16/10;
cursor:pointer;
text-decoration:none;
box-shadow:var(--shadow-sm);
transition:transform 0.25s, box-shadow 0.25s;
display:block;
}
.jn-media-item:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.jn-media-item__thumb{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
.jn-media-item__video{
position:absolute;
inset:0;
width:100%;height:100%;
object-fit:cover;
}
.jn-media-item__play{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:64px;height:64px;
border-radius:50%;
background:rgba(224,30,43,0.9);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
padding-left:5px;
z-index:2;
transition:transform 0.2s, background 0.2s;
}
.jn-media-item:hover .jn-media-item__play{
transform:translate(-50%,-50%) scale(1.1);
background:var(--red);
}
.jn-media-item__cap{
position:absolute;
bottom:0;left:0;right:0;
padding:28px 16px 14px;
background:linear-gradient(transparent, rgba(0,0,0,0.75));
color:#fff;
font-size:14px;
font-weight:600;
z-index:2;
}
@media(max-width:640px){
.jn-slides{height:360px}
.jn-slider__text{padding:0 56px 28px 24px}
.jn-slider__text p{font-size:16px;padding-left:14px;border-left-width:3px}
.jn-slider__text h2{font-size:22px}
.jn-slider__text h3{font-size:19px}
.jn-media__title{font-size:24px}
.jn-media__grid{grid-template-columns:1fr 1fr;gap:12px}
.jn-media-item__play{width:48px;height:48px;font-size:18px}
}
/* =============================================================
СОЦСЕТИ В ТОПБАРЕ — SVG-иконки
============================================================= */
.top-socials{
display:flex;
align-items:center;
gap:8px;
}
.soc-ic svg{
width:17px;
height:17px;
display:block;
}
.soc-ic:hover{
color:#fff;
background:var(--red);
border-color:var(--red);
transform:translateY(-2px);
}
/* =============================================================
СОЦСЕТИ — цветные иконки в фирменных цветах
============================================================= */
.top-socials{
display:flex;
align-items:center;
gap:10px;
}
.soc-ic{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:transparent;
transition:transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
text-decoration:none;
overflow:hidden;
}
.soc-ic svg{
width:34px;
height:34px;
display:block;
border-radius:50%;
}
.soc-ic:hover{
transform:translateY(-3px);
}
/* Подсветка в фирменном цвете при наведении */
.soc-ic--ig:hover{box-shadow:0 6px 14px rgba(188,48,129,0.45)}
.soc-ic--tg:hover{box-shadow:0 6px 14px rgba(34,158,217,0.45)}
.soc-ic--yt:hover{box-shadow:0 6px 14px rgba(255,0,0,0.45)}
.soc-ic--fb:hover{box-shadow:0 6px 14px rgba(24,119,242,0.45)}
.soc-ic--tt:hover{box-shadow:0 6px 14px rgba(0,0,0,0.45)}
@media(max-width:1100px){
.soc-ic{width:32px;height:32px}
.soc-ic svg{width:32px;height:32px}
}
/* =============================================================
СОЦСЕТИ — крупный вариант (для страницы Контактов)
============================================================= */
.contacts-socials{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.soc-ic--lg{
width:52px;
height:52px;
border-radius:14px;
}
.soc-ic--lg svg{
width:52px;
height:52px;
border-radius:14px;
}
/* Тени при наведении в фирменных цветах (для крупных) */
.soc-ic--lg.soc-ic--ig:hover{box-shadow:0 10px 22px rgba(188,48,129,0.45)}
.soc-ic--lg.soc-ic--tg:hover{box-shadow:0 10px 22px rgba(34,158,217,0.45)}
.soc-ic--lg.soc-ic--yt:hover{box-shadow:0 10px 22px rgba(255,0,0,0.45)}
.soc-ic--lg.soc-ic--fb:hover{box-shadow:0 10px 22px rgba(24,119,242,0.45)}
.soc-ic--lg.soc-ic--tt:hover{box-shadow:0 10px 22px rgba(0,0,0,0.45)}
/* На тёмном фоне топбара (если он тёмный) — сделать иконки светлыми.
Если твой топбар светлый — этот блок не нужен, удали. */
.top-bar--dark .soc-ic{
color:rgba(255,255,255,0.8);
border-color:rgba(255,255,255,0.3);
}
.top-bar--dark .soc-ic:hover{
color:#fff;
background:var(--red);
border-color:var(--red);
}
@media(max-width:1100px){
/* в мобиле топбар-соцсети обычно скрыты — оставляем твою логику */
.soc-ic{width:30px;height:30px}
.soc-ic svg{width:16px;height:16px}
}
/* =============================================================
ПРОСВЕЩЕНИЕ — верх страницы: слева ведущая, справа видео
============================================================= */
.enl-top{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
align-items:stretch;
max-width:1100px;
margin:0 auto 56px;
}
/* Когда видео нет — ведущая по центру на всю ширину */
.enl-top:has(> .enl-host:only-child){
grid-template-columns:1fr;
max-width:780px;
}
/* В двухколоночной раскладке делаем .enl-host компактнее */
.enl-top .enl-host{
margin:0;
max-width:none;
grid-template-columns:1fr; /* фото сверху, текст снизу — компактнее */
text-align:center;
padding:30px 28px;
}
.enl-top .enl-host__photo{
width:170px;height:170px;
}
.enl-top .enl-host__name{font-size:20px}
.enl-top .enl-host__pos{font-size:14px}
.enl-top .enl-host__bio{
font-size:14.5px;
text-align:left;
margin-top:8px;
}
/* === Блок «Последнее видео» === */
.enl-video{
background:#fff;
border:1px solid rgba(193,105,79,0.1);
border-radius:24px;
padding:24px;
box-shadow:var(--shadow-md);
display:flex;
flex-direction:column;
gap:16px;
}
.enl-video__head{padding:0 4px}
.enl-video__label{
display:inline-block;
font-size:11px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
color:var(--red);
margin-bottom:8px;
}
.enl-video__title{
font-family:'Inter',sans-serif;
font-size:18px;
font-weight:800;
line-height:1.35;
color:var(--dark);
margin:0;
}
.enl-video__player{
position:relative;
border-radius:16px;
overflow:hidden;
background:#1a0f08;
aspect-ratio:16/9;
cursor:pointer;
flex:1;
min-height:240px;
}
.enl-video__thumb{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
.enl-video__file{
position:absolute;
inset:0;
width:100%;height:100%;
object-fit:cover;
}
.enl-video__play{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:72px;height:72px;
border-radius:50%;
background:rgba(224,30,43,0.92);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
padding-left:5px;
transition:transform 0.2s, background 0.2s;
z-index:2;
}
.enl-video__player:hover .enl-video__play{
transform:translate(-50%,-50%) scale(1.1);
background:var(--red);
}
/* Адаптив */
@media(max-width:900px){
.enl-top{
grid-template-columns:1fr;
gap:20px;
max-width:600px;
}
.enl-top .enl-host__photo{width:150px;height:150px}
.enl-video__player{min-height:auto}
}
/* =============================================================
ГИМН НА ГЛАВНОЙ — красивый заголовок «Сенімен Болашақ — Сенімді Болашақ»
============================================================= */
.hymn-section{
padding-top:24px;
}
.hymn-head{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin:0 auto 32px;
max-width:1000px;
padding:0 24px;
}
.hymn-head__line{
flex:1;
height:2px;
max-width:120px;
background:linear-gradient(90deg, transparent, var(--red), transparent);
border-radius:1px;
}
.hymn-head__title{
font-family:'Lora','Georgia',serif;
font-style:italic;
font-size:34px;
font-weight:700;
color:var(--dark);
margin:0;
text-align:center;
letter-spacing:-0.4px;
line-height:1.25;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:10px 14px;
}
.hymn-head__part{
white-space:nowrap;
}
.hymn-head__part--accent{
color:var(--red);
font-weight:800;
}
.hymn-head__dash{
color:var(--red);
font-weight:400;
font-style:normal;
font-size:32px;
opacity:0.7;
}
@media(max-width:760px){
.hymn-head{gap:10px;margin-bottom:24px}
.hymn-head__line{max-width:50px}
.hymn-head__title{font-size:22px;gap:6px 10px}
.hymn-head__dash{font-size:20px}
}
@media(max-width:420px){
.hymn-head__line{display:none}
.hymn-head__title{font-size:20px}
}
/* =============================================================
ДОСТИЖЕНИЯ — центрирование «висящих» карточек в последнем ряду
3 колонки сетки. Остаток 1 или 2 → центрируем.
============================================================= */
/* Остаток 1 карточка (всего 4, 7, 10, 13...) → последняя занимает среднюю колонку */
.ach-grid > .ach-card:last-child:nth-child(3n+1){
grid-column:2;
}
/* Остаток 2 карточки (всего 5, 8, 11...) → обе по центру:
предпоследняя сдвигается на полколонки вправо, последняя — тоже на полколонки */
.ach-grid > .ach-card:nth-last-child(2):nth-child(3n+1){
grid-column:1;
transform:translateX(calc(50% + 11px)); /* 11px = gap/2 (gap у нас 22px) */
}
.ach-grid > .ach-card:last-child:nth-child(3n+2){
grid-column:2;
transform:translateX(calc(50% + 11px));
}
/* Hover не должен ломать сдвиг — переопределяем transform с учётом сдвига */
.ach-grid > .ach-card:nth-last-child(2):nth-child(3n+1):hover,
.ach-grid > .ach-card:last-child:nth-child(3n+2):hover{
transform:translateX(calc(50% + 11px)) translateY(-4px);
}
/* Планшет (2 колонки) и мобайл (1 колонка) — сбрасываем сдвиги */
@media(max-width:900px){
.ach-grid > .ach-card:last-child:nth-child(3n+1),
.ach-grid > .ach-card:nth-last-child(2):nth-child(3n+1),
.ach-grid > .ach-card:last-child:nth-child(3n+2){
grid-column:auto;
transform:none;
}
.ach-grid > .ach-card:nth-last-child(2):nth-child(3n+1):hover,
.ach-grid > .ach-card:last-child:nth-child(3n+2):hover{
transform:translateY(-4px);
}
}
/* =============================================================
HERO для разделов «Наши проекты» и «Просвещение»
Аналогично Жанашыру: фото-подложка + блок координатор/цитата поверх
============================================================= */
.prj-hero{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
min-height:680px;
overflow:hidden;
background:#1a0f08;
display:flex;
align-items:center;
justify-content:center;
}
.prj-hero__bg{
position:absolute;
inset:0;
z-index:1;
background-size:cover;
background-position:center;
}
.prj-hero__bg--placeholder{
background:linear-gradient(135deg, var(--brick) 0%, var(--terracotta) 100%);
}
.prj-hero__overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(180deg, rgba(44,24,16,0.45) 0%, rgba(44,24,16,0.65) 100%),
radial-gradient(ellipse at center, rgba(44,24,16,0.2) 0%, rgba(44,24,16,0.6) 100%);
pointer-events:none;
}
.prj-hero__content{
position:relative;
z-index:3;
width:100%;
max-width:1100px;
padding:140px 32px 80px;
margin:0 auto;
}
/* Фраза сверху */
.prj-hero__phrase{
text-align:center;
margin-bottom:40px;
}
.prj-hero__phrase-text{
display:inline-block;
font-family:'Lora','Georgia',serif;
font-size:42px;
font-weight:700;
font-style:italic;
color:#fff;
line-height:1.25;
letter-spacing:-0.5px;
padding:0 0 18px;
position:relative;
text-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.prj-hero__phrase-text::after{
content:'';
position:absolute;
bottom:0;left:50%;
transform:translateX(-50%);
width:80px;height:4px;
background:var(--red);
border-radius:2px;
}
/* Карточка координатор + цитата */
.prj-hero__card{
display:grid;
grid-template-columns:280px 1fr;
gap:32px;
align-items:center;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(10px);
border-radius:24px;
padding:32px 36px;
box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.prj-hero__coord{text-align:center}
.prj-hero__photo{
width:170px;height:170px;
border-radius:50%;
object-fit:cover;
border:4px solid var(--sand);
box-shadow:var(--shadow-md);
margin:0 auto 12px;
display:block;
}
.prj-hero__name{
font-family:'Inter',sans-serif;
font-size:17px;
font-weight:800;
color:var(--dark);
margin-bottom:4px;
}
.prj-hero__pos{
font-size:13px;
color:var(--red);
font-weight:600;
margin-bottom:10px;
line-height:1.35;
}
.prj-hero__insta{
display:inline-block;
font-size:12px;
font-weight:700;
color:var(--red);
text-decoration:none;
padding:5px 14px;
border:1.5px solid rgba(224,30,43,0.3);
border-radius:18px;
transition:all 0.2s;
}
.prj-hero__insta:hover{
background:var(--red);
color:#fff;
}
/* Цитата */
.prj-hero__quote{
position:relative;
margin:0;
padding:0 0 0 28px;
border-left:5px solid var(--red);
}
.prj-hero__quote-mark{
position:absolute;
top:-22px;left:14px;
font-family:'Lora','Georgia',serif;
font-size:90px;
line-height:1;
font-weight:700;
color:var(--red);
opacity:0.18;
pointer-events:none;
}
.prj-hero__quote-text{
font-family:'Lora','Georgia',serif;
font-size:18px;
font-weight:500;
line-height:1.55;
color:var(--dark);
margin:0;
}
.prj-hero__quote-author{
display:block;
margin-top:12px;
text-align:right;
font-style:normal;
font-size:14px;
font-weight:700;
color:var(--red);
}
/* Контент ниже hero */
.prj-body{padding:64px 24px 80px;background:#fff}
.prj-body__inner{max-width:1100px;margin:0 auto}
/* === Карточки проектов === */
.prj-category{margin-bottom:56px}
.prj-category__head{margin-bottom:24px}
.prj-category__head h2{
font-family:'Inter',sans-serif;
font-size:30px;
font-weight:800;
color:var(--dark);
margin:0 0 8px;
letter-spacing:-0.5px;
}
.prj-category__head p{
color:var(--warm-gray);
font-size:15px;
margin:0;
}
.prj-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:24px;
}
.prj-card{
background:#fff;
border:1px solid rgba(193,105,79,0.1);
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:transform .25s, box-shadow .25s;
}
.prj-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
}
.prj-card__photo{
height:180px;
overflow:hidden;
background:var(--sand);
}
.prj-card__photo img{width:100%;height:100%;object-fit:cover}
.prj-card__body{padding:20px 22px}
.prj-card__title{
font-family:'Inter',sans-serif;
font-size:17px;
font-weight:800;
color:var(--dark);
margin:0 0 8px;
line-height:1.35;
}
.prj-card__desc{
font-size:14px;
line-height:1.6;
color:var(--warm-gray);
margin:0;
}
/* === Блок «Последнее видео» в Просвещении === */
.enl-latest-video{
background:#fff;
border:1px solid rgba(193,105,79,0.1);
border-radius:24px;
padding:24px;
box-shadow:var(--shadow-md);
margin-bottom:48px;
max-width:780px;
margin-left:auto;
margin-right:auto;
}
.enl-latest-video__head{padding:0 4px;margin-bottom:16px}
.enl-latest-video__label{
display:inline-block;
font-size:11px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
color:var(--red);
margin-bottom:8px;
}
.enl-latest-video__head h2{
font-family:'Inter',sans-serif;
font-size:22px;
font-weight:800;
color:var(--dark);
margin:0;
}
.enl-latest-video__player{
position:relative;
border-radius:16px;
overflow:hidden;
background:#1a0f08;
aspect-ratio:16/9;
cursor:pointer;
}
.enl-latest-video__thumb{
position:absolute;inset:0;
background-size:cover;background-position:center;
}
.enl-latest-video__file{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
}
.enl-latest-video__play{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:72px;height:72px;
border-radius:50%;
background:rgba(224,30,43,0.92);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:26px;padding-left:5px;
z-index:2;
transition:transform 0.2s;
}
.enl-latest-video__player:hover .enl-latest-video__play{
transform:translate(-50%,-50%) scale(1.1);
}
/* Адаптив */
@media(max-width:900px){
.prj-hero{min-height:auto}
.prj-hero__content{padding:70px 20px 70px}
.prj-hero__phrase-text{font-size:28px}
.prj-hero__card{
grid-template-columns:1fr;
gap:20px;
padding:24px 22px;
}
.prj-hero__photo{width:140px;height:140px}
.prj-hero__quote{padding:0 0 0 18px;border-left-width:4px}
.prj-hero__quote-text{font-size:16px}
.prj-category__head h2{font-size:24px}
}
@media(max-width:480px){
.prj-hero__phrase-text{font-size:22px}
}
/* =============================================================
КАРТОЧКА ПРОЕКТА — теперь это ссылка с мета-плашками
============================================================= */
.prj-card--link{
display:block;
text-decoration:none;
color:inherit;
}
.prj-card__meta{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;
}
.prj-card__meta-item{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:0.3px;
padding:3px 9px;
border-radius:6px;
background:rgba(193,105,79,0.12);
color:var(--brick);
}
.prj-card__meta-item--year{
background:var(--red);
color:#fff;
}
.prj-card__more{
display:inline-block;
margin-top:12px;
font-size:13px;
font-weight:700;
color:var(--red);
}
/* =============================================================
ДЕТАЛЬНАЯ СТРАНИЦА ПРОЕКТА
============================================================= */
.prj-detail{
padding:150px 24px 80px;
background:linear-gradient(180deg, var(--sand-light, #FAF4E8) 0%, #fff 320px);
min-height:70vh;
}
.prj-detail__inner{
max-width:880px;
margin:0 auto;
}
.prj-detail__back{
display:inline-block;
font-size:14px;
font-weight:700;
color:var(--red);
text-decoration:none;
margin-bottom:24px;
transition:opacity .2s;
}
.prj-detail__back:hover{opacity:0.7}
.prj-detail__head{margin-bottom:32px}
.prj-detail__badges{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}
.prj-badge{
display:inline-block;
font-size:12px;
font-weight:700;
padding:5px 14px;
border-radius:20px;
letter-spacing:0.3px;
}
.prj-badge--cat{
background:rgba(193,105,79,0.14);
color:var(--brick);
}
.prj-badge--region{
background:rgba(212,168,83,0.18);
color:#8a6a25;
}
.prj-badge--year{
background:var(--red);
color:#fff;
}
.prj-detail__title{
font-family:'Inter',sans-serif;
font-size:38px;
font-weight:800;
line-height:1.2;
color:var(--dark);
margin:0;
letter-spacing:-0.8px;
}
.prj-detail__cover{
margin-bottom:36px;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow-md);
background:var(--sand);
}
.prj-detail__cover img{
width:100%;
display:block;
max-height:520px;
object-fit:cover;
}
.prj-detail__body{
font-size:17px;
line-height:1.75;
color:var(--dark);
margin-bottom:64px;
}
.prj-detail__body p{margin:0 0 18px}
.prj-detail__body p:last-child{margin-bottom:0}
.prj-detail__related{
border-top:1px solid rgba(193,105,79,0.18);
padding-top:40px;
}
.prj-detail__related h2{
font-family:'Inter',sans-serif;
font-size:24px;
font-weight:800;
color:var(--dark);
margin:0 0 20px;
letter-spacing:-0.4px;
}
@media(max-width:680px){
.prj-detail{padding:40px 16px 60px}
.prj-detail__title{font-size:26px}
.prj-detail__body{font-size:15.5px}
}
/* =============================================================
НАША ПРОДУКЦИЯ — сетка 6 в ряд + раскрытие описания по клику
============================================================= */
.products-page{
padding:140px 32px 80px;
max-width:1280px;
margin:0 auto;
}
.products-head{margin-bottom:48px}
.products-head h1{
font-family:'Inter',sans-serif;
font-size:44px;
font-weight:800;
color:var(--dark);
margin:0 0 10px;
letter-spacing:-0.8px;
}
.products-head p{
font-size:17px;
color:var(--warm-gray);
margin:0;
}
.products-category{margin-bottom:56px}
.products-category__title{
font-size:26px;
font-weight:800;
color:var(--red);
margin:0 0 8px;
}
.products-category__desc{
font-size:15px;
color:var(--warm-gray);
margin:0 0 24px;
}
.products-grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:18px;
align-items:start;
}
.product-card{
position:relative;
background:#fff;
border:1px solid rgba(193,105,79,0.1);
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:transform .2s, box-shadow .2s;
display:flex;
flex-direction:column;
}
.product-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
}
.product-card.is-open{
grid-column:span 2;
}
.product-card__soon{
position:absolute;
top:8px;right:8px;
background:var(--gold);
color:#fff;
padding:3px 10px;
border-radius:14px;
font-size:10px;
font-weight:800;
z-index:2;
}
.product-card__photo{
aspect-ratio:1/1;
overflow:hidden;
background:var(--sand);
}
.product-card__photo img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.product-card__photo--soon img{filter:grayscale(40%);opacity:0.7}
.product-card__photo--ph{
display:flex;
align-items:center;
justify-content:center;
color:var(--warm-gray);
font-size:13px;
}
.product-card__body{
padding:12px 14px 16px;
display:flex;
flex-direction:column;
gap:6px;
min-height:104px;
}
.product-card__name{
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:700;
line-height:1.3;
color:var(--dark);
margin:0;
/* фиксируем 2 строки — карточки одной высоты */
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:36px;
}
.product-card__price{
display:flex;
align-items:baseline;
gap:3px;
min-height:22px;
}
.product-card__price-num{
font-size:18px;
font-weight:800;
color:var(--red);
}
.product-card__price-cur{
font-size:12px;
color:var(--warm-gray);
font-weight:600;
}
.product-card__toggle{
align-self:flex-start;
margin-top:2px;
background:none;
border:none;
padding:0;
color:var(--red);
font-family:'Inter',sans-serif;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:opacity .2s;
}
.product-card__toggle:hover{opacity:0.7;text-decoration:underline}
.product-card__details{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
}
.product-card.is-open .product-card__details{
max-height:600px;
margin-top:8px;
}
.product-card__desc{
font-size:13.5px;
line-height:1.65;
color:var(--warm-gray);
margin:0 0 12px;
}
.product-card__order{
display:inline-block;
background:var(--red);
color:#fff;
padding:9px 22px;
border-radius:22px;
font-weight:700;
font-size:13px;
text-decoration:none;
transition:background .2s;
}
.product-card__order:hover{background:var(--brick)}
@media(max-width:1100px){
.products-grid{grid-template-columns:repeat(4, 1fr)}
.product-card.is-open{grid-column:span 2}
}
@media(max-width:720px){
.products-page{padding:100px 16px 60px}
.products-grid{grid-template-columns:repeat(3, 1fr)}
.product-card.is-open{grid-column:span 3}
.products-head h1{font-size:30px}
}
@media(max-width:460px){
.products-grid{grid-template-columns:repeat(2, 1fr)}
.product-card.is-open{grid-column:span 2}
}
/* =============================================================
СМИ О НАС — баннер + карточки с фото на всю высоту (как референс)
============================================================= */
/* Баннер сверху */
.smi-banner{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw);
height:420px;
overflow:hidden;
display:flex;
align-items:center;
background:#1a0f08;
}
.smi-banner__bg{
position:absolute;inset:0;
background-size:cover;
background-position:center;
}
.smi-banner__bg--ph{
background:linear-gradient(135deg, var(--brick) 0%, var(--terracotta) 100%);
}
.smi-banner__overlay{
position:absolute;inset:0;
background:linear-gradient(90deg, rgba(20,12,8,0.55) 0%, rgba(20,12,8,0.15) 60%, rgba(20,12,8,0) 100%);
}
.smi-banner__inner{
position:relative;
z-index:2;
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 48px;
}
.smi-banner__title{
font-family:'Lora','Georgia',serif;
font-size:64px;
font-weight:400;
letter-spacing:6px;
color:#fff;
margin:0;
text-transform:uppercase;
text-shadow:0 4px 24px rgba(0,0,0,0.4);
}
.smi-page{
padding:64px 24px 80px;
background:#fff;
}
.smi-inner{max-width:1200px;margin:0 auto}
/* Сетка карточек 3 в ряд */
.smi-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
}
/* Карточка — фото на всю высоту, текст поверх снизу */
.smi-card{
position:relative;
display:block;
border-radius:4px;
overflow:hidden;
min-height:440px;
text-decoration:none;
background:#1a0f08;
transition:transform .25s, box-shadow .25s;
}
.smi-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,0.25);
}
.smi-card__bg{
position:absolute;inset:0;
background-size:cover;
background-position:center;
transition:transform .5s;
}
.smi-card:hover .smi-card__bg{transform:scale(1.05)}
.smi-card__bg--ph{
background:linear-gradient(135deg, var(--brick), var(--terracotta));
}
.smi-card__shade{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.88) 100%);
}
.smi-card__content{
position:absolute;
left:0;right:0;bottom:0;
z-index:2;
padding:28px 26px;
color:#fff;
}
.smi-card__date{
font-size:14px;
font-weight:600;
margin-bottom:12px;
opacity:0.95;
}
.smi-card__title{
font-family:'Inter',sans-serif;
font-size:18px;
font-weight:700;
line-height:1.35;
margin:0;
text-transform:uppercase;
letter-spacing:0.2px;
}
.smi-card__line{
display:block;
width:48px;height:3px;
background:#fff;
margin:16px 0 0;
transition:width .25s;
}
.smi-card:hover .smi-card__line{width:80px}
.smi-card__more{
display:none; /* показываем только при наведении */
margin-top:16px;
font-size:13px;
font-weight:800;
letter-spacing:1px;
border:1.5px solid rgba(255,255,255,0.6);
padding:12px 0;
text-align:center;
border-radius:2px;
transition:background .2s, color .2s;
}
.smi-card:hover .smi-card__more{display:block}
.smi-card__more:hover{background:#fff;color:var(--dark)}
/* Пагинация */
.smi-pagination{
display:flex;justify-content:center;align-items:center;
gap:6px;flex-wrap:wrap;margin-top:48px;
}
.smi-pg{
padding:8px 14px;border-radius:10px;
background:var(--sand);color:var(--warm-gray);
text-decoration:none;font-weight:600;font-size:14px;
min-width:40px;text-align:center;transition:background .18s;
}
.smi-pg:hover{background:#E5D0B0}
.smi-pg--cur{background:var(--red);color:#fff;font-weight:700}
.smi-pg--nav{color:var(--red)}
.smi-pg--off{color:rgba(0,0,0,0.25);background:transparent}
.smi-pg--dots{background:transparent;min-width:auto;padding:8px 4px}
.smi-empty{text-align:center;padding:60px 0}
/* Адаптив */
@media(max-width:980px){
.smi-grid{grid-template-columns:repeat(2, 1fr)}
.smi-banner__title{font-size:44px}
.smi-banner{height:320px}
}
@media(max-width:600px){
.smi-grid{grid-template-columns:1fr}
.smi-banner__title{font-size:32px;letter-spacing:3px}
.smi-banner{height:240px}
.smi-banner__inner{padding:0 24px}
.smi-card{min-height:380px}
}
/* =============================================================
МЕРОПРИЯТИЯ — список (главное, слева) + календарь (справа, sticky)
============================================================= */
.ev-page{padding:140px 24px 80px;max-width:1180px;margin:0 auto}
.ev-head{margin-bottom:36px;text-align:center}
.ev-head h1{
font-family:'Inter',sans-serif;font-size:42px;font-weight:800;
color:var(--dark);margin:0 0 10px;letter-spacing:-0.8px;
}
.ev-head p{font-size:16px;color:var(--warm-gray);margin:0}
/* Раскладка: список + календарь */
.ev-layout{
display:grid;
grid-template-columns:1fr 340px;
gap:32px;
align-items:start;
}
.ev-main{min-width:0}
/* Календарь справа — компактный, прилипающий */
.ev-aside{position:sticky;top:100px}
.ev-calendar{
background:#fff;border:1px solid rgba(193,105,79,0.12);
border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);
}
.ev-cal__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ev-cal__month{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;color:var(--dark)}
.ev-cal__nav{
width:32px;height:32px;border-radius:50%;border:none;
background:var(--sand);color:var(--brick);font-size:18px;cursor:pointer;
transition:background .2s;line-height:1;
}
.ev-cal__nav:hover{background:#E5D0B0}
.ev-cal__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.ev-cal__weekdays span{text-align:center;font-size:10px;font-weight:700;color:var(--warm-gray);text-transform:uppercase}
.ev-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ev-cell{
position:relative;aspect-ratio:1/1;border:none;background:transparent;
border-radius:8px;font-size:13px;font-weight:600;color:var(--dark);
cursor:default;display:flex;align-items:center;justify-content:center;
transition:background .18s;
}
.ev-cell--empty{visibility:hidden}
.ev-cell--off{color:rgba(0,0,0,0.22)}
.ev-cell--has{cursor:pointer;background:rgba(224,30,43,0.08);color:var(--red);font-weight:800}
.ev-cell--has:hover{background:rgba(224,30,43,0.18)}
.ev-cell--today{outline:2px solid var(--gold);outline-offset:-2px}
.ev-cell__dot{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--red)}
.ev-cal__hint{text-align:center;font-size:12px;color:var(--warm-gray);margin-top:12px;min-height:16px;line-height:1.4}
/* Список карточек */
.ev-list{display:flex;flex-direction:column;gap:18px}
.ev-card{
display:grid;grid-template-columns:200px 1fr;gap:0;
background:#fff;border-radius:18px;overflow:hidden;
border:1px solid rgba(193,105,79,0.1);box-shadow:var(--shadow-sm);
text-decoration:none;transition:transform .2s, box-shadow .2s, outline .2s;
}
.ev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ev-card--hl{outline:3px solid var(--red);outline-offset:-1px}
.ev-card__photo{overflow:hidden;background:var(--sand)}
.ev-card__photo img{width:100%;height:100%;object-fit:cover;min-height:170px;display:block}
.ev-card__body{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.ev-card__top{display:flex;gap:14px;align-items:flex-start}
.ev-card__date-badge{
flex-shrink:0;text-align:center;background:var(--sand);
border-radius:12px;padding:8px 12px;min-width:54px;
}
.ev-card__day{display:block;font-size:23px;font-weight:800;color:var(--red);line-height:1}
.ev-card__mon{display:block;font-size:11px;color:var(--warm-gray);text-transform:uppercase;font-weight:700;margin-top:2px}
.ev-card__title{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;color:var(--dark);margin:0 0 4px;line-height:1.3}
.ev-card__meta{font-size:13px;color:var(--warm-gray);display:flex;gap:5px;flex-wrap:wrap}
.ev-card__meta span:first-child{color:var(--terracotta);font-weight:600}
.ev-card__desc{font-size:14px;line-height:1.6;color:var(--warm-gray);margin:0}
.ev-card__status{align-self:flex-start;font-size:11px;font-weight:700;padding:4px 12px;border-radius:12px}
.ev-card__status--upcoming{background:#e8f5e9;color:#2e7d32}
.ev-card__status--ongoing{background:#fff3e0;color:#e65100}
.ev-card__status--past{background:var(--sand);color:var(--warm-gray)}
/* Пагинация */
.ev-pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:40px}
.ev-pg{padding:8px 14px;border-radius:10px;background:var(--sand);color:var(--warm-gray);text-decoration:none;font-weight:600;font-size:14px;min-width:40px;text-align:center;transition:background .18s}
.ev-pg:hover{background:#E5D0B0}
.ev-pg--cur{background:var(--red);color:#fff;font-weight:700}
.ev-pg--nav{color:var(--red)}
.ev-pg--off{color:rgba(0,0,0,0.25);background:transparent}
/* Планшет — календарь над списком */
@media(max-width:900px){
.ev-layout{grid-template-columns:1fr}
.ev-aside{position:static;order:-1;max-width:460px;margin:0 auto 8px;width:100%}
}
@media(max-width:680px){
.ev-page{padding:100px 14px 60px}
.ev-head h1{font-size:30px}
.ev-card{grid-template-columns:1fr}
.ev-card__photo img{min-height:200px;max-height:240px}
}
/* =============================================================
СТРАНИЦА ГИМНА
============================================================= */
.hymn-page{
position:relative;
min-height:100vh;
padding:140px 24px 90px;
background:linear-gradient(160deg, var(--sand) 0%, #fff 60%);
overflow:hidden;
}
.hymn-page--bg{
background-size:cover;
background-position:center;
background-attachment:fixed;
}
.hymn-overlay{
position:absolute;inset:0;
z-index:1;
}
.hymn-page--bg .hymn-overlay{
background:linear-gradient(180deg, rgba(44,24,16,0.55) 0%, rgba(44,24,16,0.75) 100%);
}
.hymn-inner{
position:relative;
z-index:2;
max-width:820px;
margin:0 auto;
text-align:center;
}
.hymn-head{margin-bottom:44px}
.hymn-pretitle{
display:inline-block;
font-size:12px;
font-weight:700;
letter-spacing:4px;
text-transform:uppercase;
color:var(--red);
margin-bottom:14px;
}
.hymn-page--bg .hymn-pretitle{color:var(--gold)}
.hymn-title{
font-family:'Lora','Georgia',serif;
font-size:52px;
font-weight:700;
font-style:italic;
color:var(--dark);
margin:0;
letter-spacing:-0.5px;
}
.hymn-page--bg .hymn-title{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,0.4)}
.hymn-divider{
display:block;
width:80px;height:4px;
background:var(--red);
border-radius:2px;
margin:20px auto 0;
}
/* Картинка с текстом гимна */
.hymn-image{
margin:0 auto 44px;
border-radius:18px;
overflow:hidden;
box-shadow:0 24px 60px rgba(44,24,16,0.25);
max-width:680px;
}
.hymn-image img{
width:100%;
display:block;
}
/* Видео */
.hymn-video{
max-width:680px;
margin:0 auto;
}
.hymn-video__frame{
position:relative;
aspect-ratio:16/9;
border-radius:16px;
overflow:hidden;
background:#1a0f08;
cursor:pointer;
box-shadow:0 20px 50px rgba(44,24,16,0.3);
}
.hymn-video__thumb{
position:absolute;inset:0;
background-size:cover;
background-position:center;
transition:transform .4s;
}
.hymn-video__frame:hover .hymn-video__thumb{transform:scale(1.04)}
.hymn-video__play{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:80px;height:80px;
border-radius:50%;
background:rgba(224,30,43,0.92);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:30px;padding-left:6px;
z-index:2;
transition:transform .2s;
}
.hymn-video__frame:hover .hymn-video__play{transform:translate(-50%,-50%) scale(1.1)}
.hymn-empty{
color:var(--warm-gray);
font-size:16px;
padding:60px 0;
}
.hymn-page--bg .hymn-empty{color:rgba(255,255,255,0.85)}
@media(max-width:640px){
.hymn-page{padding:100px 16px 60px}
.hymn-page--bg{background-attachment:scroll}
.hymn-title{font-size:34px}
}
.welcome-text{font-size:17px;line-height:1.8;color:var(--dark)}
.welcome-text p{margin:0 0 18px}