/* --- Normalize & Global Resets --- */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
scrollbar-gutter: stable;
}
body {
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f5f5f5;
overflow-x: hidden;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
text-decoration: none;
color: inherit;
transition: all .3s ease;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
max-width: 100%;
height: auto;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
border: none;
background: none;
cursor: pointer;
transition: all .3s ease;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template,
[hidden] {
display: none;
}
/* --- Global Utilities --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ========== Theme variables (подгони под точные цвета сайта) ========== */
:root {
--sb-size: 8px;
--sb-track: #F5F5F7;
--sb-track-border: #E0E0E0;
--sb-thumb: #EE4500;
--sb-thumb-hover: #ff5f1a;
--sb-thumb-active: #cc3a00;
--sb-corner: #F5F5F7;
}
html {
scrollbar-width: thin;
/* auto | thin */
scrollbar-color: var(--sb-thumb) var(--sb-track);
/* thumb track */
}
*::-webkit-scrollbar {
width: var(--sb-size);
height: var(--sb-size);
}
*::-webkit-scrollbar-track {
background: var(--sb-track);
border-left: 1px solid var(--sb-track-border);
}
*::-webkit-scrollbar-thumb {
background: var(--sb-thumb);
border-radius: 999px;
border: 2px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--sb-thumb-hover);
}
*::-webkit-scrollbar-thumb:active {
background: var(--sb-thumb-active);
}
*::-webkit-scrollbar-corner {
background: var(--sb-corner);
}
@media (pointer: coarse) {
html {
scrollbar-width: auto;
}
}
.mw-1020 {
max-width: 1020px !important;
margin-inline: auto !important;
}
.layer-under {
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
z-index: 1;
}
.layer-over {
position: relative;
z-index: 2;
width: 100%;
}
/* --- Reveal Logic --- */
.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right {
opacity: 0;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.reveal {
transform: translate(0, 0);
}
.reveal-up {
transform: translateY(20px);
}
.reveal-down {
transform: translateY(-20px);
}
.reveal-left {
transform: translateX(20px);
}
.reveal-right {
transform: translateX(-20px);
}
.reveal.active,
.reveal-up.active,
.reveal-down.active,
.reveal-left.active,
.reveal-right.active {
opacity: 1;
transform: translate(0, 0);
}
.reveal-line {
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.reveal-line.active {
transform: scaleX(1);
}
@media (max-width: 768px) {
.reveal-left,
.reveal-right {
transform: translateY(20px);
}
}
/* --- Text Animation (Letter by Letter) --- */
.text-animate {
position: relative;
}
.text-animate-layer {
display: inline;
}
/* Keep full heading text indexable/accessible while animation layer is decorative */
.text-animate-seo-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-animate .text-char {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
will-change: opacity, transform;
}
.text-animate-active .text-char {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--char-index) * 0.03s);
}
/* Hover effect: add subtle scale and brightness */
.text-animate:hover .text-char {
transform: translateY(0) scale(1.02);
filter: brightness(1.1);
transition: all 0.3s ease;
}
/* Preserve word structure */
.text-word {
display: inline-block;
white-space: nowrap;
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.text-animate .text-char {
opacity: 1;
transform: translateY(0);
transition: none;
}
.text-animate-active .text-char {
transition-delay: 0s;
}
}
/* --- Back to Top Button --- */
.back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #EC4824 0%, #FF6B4A 100%);
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
box-shadow: 0 4px 20px rgba(236, 72, 36, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(236, 72, 36, 0.4);
background: linear-gradient(135deg, #D63D1E 0%, #EC4824 100%);
}
.back-to-top:active {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(236, 72, 36, 0.3);
}
.back-to-top svg {
width: 24px;
height: 24px;
animation: bounceArrow 2s ease-in-out infinite;
}
@keyframes bounceArrow {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.back-to-top:hover svg {
animation: none;
transform: translateY(-2px);
}
/* Mobile responsive */
@media (max-width: 768px) {
.back-to-top {
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
}
.back-to-top svg {
width: 20px;
height: 20px;
}
}
/* --- Top Bar --- */
.top-bar {
height: 48px;
width: 100%;
background-color: #FFB901;
padding: 0 64px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all .3s ease;
z-index: 1001;
}
.top-bar.orange {
background-color: #EE4500;
}
.top-bar__content {
display: flex;
align-items: center;
gap: 5px;
text-align: center;
}
.top-bar__text {
font-weight: 500;
font-size: 16px;
line-height: 100%;
color: #463C3E;
}
.top-bar__divider {
font-weight: 500;
font-size: 16px;
line-height: 100%;
color: #FFFFFF;
margin: 0 4px;
}
.top-bar__link {
font-weight: 700;
font-size: 16px;
line-height: 100%;
color: #EC4824;
}
.top-bar.orange .top-bar__link {
color: #FFFFFF;
}
.top-bar__link:hover {
opacity: 0.8;
}
.top-bar__close {
position: absolute;
right: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.top-bar__close svg {
width: 20px;
height: 20px;
object-fit: contain;
}
/* --- Main Header --- */
.main-header {
background-color: #FFFFFF;
padding: 0 64px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.burger-menu {
display: none;
}
.header-grid {
display: grid;
grid-template-columns: 5fr 12fr;
align-items: center;
min-height: 60px;
padding: 16px 0;
gap: 64px;
max-width: 100%;
}
.header-nav-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.header-col-left {
display: flex;
align-items: center;
}
.logo {
width: 100%;
max-width: 192px;
display: block;
transition: all .3s ease;
}
.header-col-right {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.nav-list {
display: flex;
gap: 40px;
list-style: none;
}
.nav-link {
font-weight: 600;
font-size: 20px;
line-height: 100%;
color: #463C3E;
padding: 10px 0;
display: block;
cursor: pointer;
}
.nav-link:hover,
.nav-link.active {
color: #EC4824;
}
.header-actions {
display: flex;
align-items: center;
gap: 32px;
}
.btn-login {
font-weight: 700;
font-size: 14px;
line-height: 150%;
color: #8796B2;
text-transform: uppercase;
}
.btn-login:hover {
color: #463C3E;
}
.btn-demo {
width: 144px;
height: 40px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-weight: 700;
font-size: 14px;
line-height: 150%;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn-demo:hover {
background-color: #cc3b00;
transform: translateY(-2px);
}
/* --- Mega Menu (UPDATED LOGIC) --- */
.mega-menu-wrapper {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #FFFFFF;
border-top: 1px solid #f0f0f0;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
z-index: 900;
/* Новая анимация: анимируем высоту */
height: 0;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mega-menu-item {
/* Важно для кросс-фейда и корректного расчета высоты JS-ом */
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 64px;
/* Скрыто по умолчанию */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mega-menu-item.active {
opacity: 1;
visibility: visible;
z-index: 10;
}
.mega-menu-grid {
align-items: start;
padding-top: 32px;
padding-bottom: 64px;
/* Паддинг снизу перенесен внутрь контента для корректного расчета высоты */
}
/* ... (Внутренние стили меню без изменений) ... */
.menu-col-left {
width: 100%;
}
.featured-card {
display: block;
width: 100%;
aspect-ratio: 494 / 308;
background-size: cover;
background-position: center;
border-radius: 33px;
border: 1px solid #8796B2;
position: relative;
overflow: hidden;
}
.featured-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 12, 12, 0) 0%, #463C3E 100%);
}
.featured-card.video-card::before {
display: none;
}
.featured-card__content {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
z-index: 2;
}
.featured-card__cat {
font-weight: 600;
font-size: 14px;
line-height: 150%;
color: #FFB901;
display: block;
margin-bottom: 8px;
}
.featured-card__title {
font-weight: 700;
font-size: 20px;
line-height: 100%;
color: #FFFFFF;
}
.menu-col-right {
width: 100%;
}
.icon-link {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.icon-link:last-child {
margin-bottom: 0;
}
.icon-link .menu-icon {
width: 40px;
height: 40px;
object-fit: contain;
}
.icon-link span {
font-weight: 500;
font-size: 21px;
line-height: 35px;
color: #463C3E;
transition: color .3s ease;
}
.icon-link:hover span {
color: #EC4824;
}
.type-icons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 80px;
row-gap: 30px;
}
.type-icons-grid .icon-link {
margin-bottom: 0;
}
.type-categories {
display: flex;
justify-content: space-between;
gap: 20px;
}
.cat-column {
display: flex;
flex-direction: column;
}
.cat-title {
font-weight: 700;
font-size: 21px;
line-height: 26px;
color: #8796B2;
margin-bottom: 24px;
}
.cat-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
}
.cat-list a {
font-weight: 500;
font-size: 21px;
line-height: 26px;
color: #463C3E;
}
.cat-list a:hover {
color: #EC4824;
}
.type-mixed {
display: flex;
align-items: flex-start;
}
.mixed-list {
display: flex;
flex-direction: column;
}
.vertical-divider {
width: 1px;
background-color: #C4CBD2;
align-self: stretch;
margin: 0 40px;
}
.small-image-promo {
margin-left: auto;
padding-left: 40px;
}
.small-image-promo img {
display: block;
}
.type-socials {
display: flex;
justify-content: space-between;
}
.menu-main-list {
display: flex;
flex-direction: column;
}
.socials-column {
display: flex;
flex-direction: column;
gap: 20px;
margin-left: 80px;
}
.socials-column img {
transition: opacity .3s ease;
}
.socials-column a:hover img {
opacity: 0.8;
}
/* --- Platform Menu Specifics --- */
.video-card {
border: 1px solid #E0E0E0;
background-color: #F9F9F9;
display: flex;
align-items: center;
justify-content: center;
}
.play-button-overlay {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
transition: transform .3s ease;
}
.video-card:hover .play-button-overlay {
transform: scale(1.1);
}
.platform-layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 40px;
height: 100%;
}
.platform-links-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 30px;
}
.platform-links-list a {
font-weight: 500;
font-size: 16px;
line-height: 120%;
color: #463C3E;
transition: color .2s ease;
}
.platform-links-list a:hover {
color: #EC4824;
}
.platform-links-list a.active {
color: #EC4824;
font-weight: 700;
}
.platform-features-col {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.feature-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 0;
width: 100%;
}
.feature-main {
display: flex;
align-items: center;
gap: 20px;
}
.feature-icon {
width: 32px;
height: 32px;
object-fit: contain;
}
.feature-title {
font-weight: 500;
font-size: 17px;
line-height: 120%;
color: #463C3E;
}
.feature-row:hover .feature-title {
color: #EC4824;
}
.feature-badge {
width: 84px;
height: 84px;
object-fit: contain;
}
.feature-divider {
width: 100%;
height: 1px;
background-color: #E5E5E5;
margin: 33px 0;
}
/* --- Solutions Menu Specifics --- */
.solutions-layout {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 60px;
align-items: start;
}
.solutions-col {
display: flex;
flex-direction: column;
}
.col-header-strip {
width: 100%;
height: 1px;
background-color: #C4CBD2;
margin-bottom: 20px;
}
.cat-title {
font-weight: 700;
font-size: 17px;
line-height: 21px;
color: #8796B2;
margin-bottom: 24px;
}
.cat-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 30px;
}
.cat-list a {
font-weight: 500;
font-size: 16px;
line-height: 120%;
color: #463C3E;
transition: color .2s ease;
}
.cat-list a:hover {
color: #EC4824;
}
.solutions-inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
/* --- Resources Menu Specifics --- */
.resources-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, min-content);
grid-auto-flow: column;
column-gap: 48px;
row-gap: 22px;
height: 100%;
}
.resource-link {
display: flex;
align-items: flex-start;
gap: 16px;
text-decoration: none;
margin: 0;
}
.res-icon {
width: 32px;
height: 32px;
object-fit: contain;
}
.resource-link span {
font-weight: 500;
font-size: 17px;
line-height: 28px;
color: #463C3E;
transition: color .2s ease;
padding-top: 2.5px;
}
.resource-link:hover span {
color: #EC4824;
}
/* --- Company Menu Specifics --- */
.company-layout {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
height: 100%;
}
.company-links-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, min-content);
grid-auto-flow: column;
column-gap: 60px;
row-gap: 27px;
flex-grow: 1;
}
.company-socials {
display: flex;
flex-direction: column;
gap: 20px;
padding-left: 40px;
}
.company-socials a img {
display: block;
transition: opacity .3s ease;
width: 32px;
}
.company-socials a:hover img {
opacity: 0.7;
}
/* --- Footer CTA --- */
.footer-cta {
height: 255px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 60px;
border-top: 5px solid #fff;
position: relative;
overflow: hidden;
}
body.page-template-template-terms .footer-cta {
border-color: #EC4824;
}
.footer-cta__title {
font-weight: 700;
font-size: 50px;
line-height: 1.1;
color: #463C3E;
text-align: center;
padding: 0 20px;
z-index: 5;
}
.footer-cta__btn {
width: 290px;
height: auto;
padding: 12px 0;
background-color: #FFFFFF;
color: #EC4824;
border-radius: 33px;
font-weight: 800;
font-size: 16px;
line-height: 150%;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
z-index: 5;
}
.footer-cta__btn:hover {
background-color: #fdfdfd;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(236, 72, 36, 0.15);
}
.footer-cta__spinner {
position: absolute;
top: 50%;
left: 50%;
width: 375px;
height: 375px;
border: 2px solid #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: footer-cta-spin 6s linear infinite;
z-index: 1;
pointer-events: none;
}
/* Точки */
.footer-cta__spinner-dot {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.footer-cta__spinner-dot--filled {
background-color: #fff;
left: -11px;
}
.footer-cta__spinner-dot--hollow {
border: 2px solid #fff;
background: transparent;
right: -11px;
}
/* Контент поверх */
.footer-cta__content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
}
/* Анимация */
@keyframes footer-cta-spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* --- Main Footer Layout --- */
.main-footer {
width: 100%;
background-color: #FFFFFF;
border-top: 1px solid #C4CBD2;
}
.footer-top-row {
display: flex;
width: 100%;
border-bottom: 1px solid #C4CBD2;
}
.footer-subscribe {
width: 40%;
padding: 36px 56px;
border-right: 1px solid #C4CBD2;
display: flex;
flex-direction: column;
}
.subscribe-title {
font-weight: 800;
font-size: 16px;
line-height: 150%;
color: #463C3E;
margin-bottom: 20px;
}
.subscribe-form {
display: flex;
flex-direction: column;
}
.subscribe-form form {
position: relative;
}
.subscribe-form .legal-consent-container {
display: flex;
align-items: center;
min-height: 50px;
}
.subscribe-form .hs-submit {
position: absolute;
right: 0;
bottom: 0;
}
.input-label,
footer .subscribe-form label {
font-weight: 600;
font-size: 12px;
line-height: 150%;
color: #8796B2;
margin-bottom: 5px;
}
.subscribe-input,
footer .subscribe-form input {
border: none;
border-bottom: 1px solid #8796B2;
padding: 8px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 150%;
color: #463C3E;
outline: none;
background: transparent;
margin-bottom: 20px;
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 25px;
flex-wrap: wrap;
}
.custom-checkbox {
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
gap: 10px;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
height: 14px;
width: 14px;
background-color: transparent;
border: 1px solid #8796B2;
display: flex;
align-items: center;
justify-content: center;
}
.custom-checkbox input:checked~.checkmark::after {
content: "";
width: 10px;
height: 10px;
background-color: #FFB901;
display: block;
}
.checkbox-text {
font-weight: 600;
font-size: 12px;
line-height: 150%;
color: #8796B2;
}
.checkbox-text a {
text-decoration: underline;
}
.subscribe-btn,
footer .subscribe-form input[type="submit"] {
width: 180px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-align: center;
margin-top: 0;
padding: 0;
border: none;
}
.subscribe-btn:hover,
footer .subscribe-form input[type="submit"]:hover {
background-color: #cc3b00;
}
.footer-brand {
width: 50%;
border-right: 1px solid #C4CBD2;
position: relative;
padding: 40px 28px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
.footer-logo {
width: 290px;
height: auto;
display: block;
}
.footer-socials {
width: 10%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
}
.footer-socials img {
width: 25px;
height: 25px;
display: block;
transition: opacity .3s;
}
.footer-socials a:hover img {
opacity: 0.7;
}
.footer-bottom-row {
display: flex;
width: 100%;
}
.footer-heading {
font-weight: 800;
font-size: 16px;
line-height: 24px;
color: #463C3E;
margin-bottom: 25px;
}
.footer-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-list a {
font-weight: 500;
font-size: 13px;
line-height: 18px;
color: #463C3E;
}
.footer-list a:hover {
color: #EC4824;
}
.footer-col-platform {
width: 20%;
border-right: 1px solid #C4CBD2;
padding: 40px;
position: relative;
}
.footer-divider {
height: 1px;
width: 100%;
background-color: #C4CBD2;
margin: 14px 0 0;
}
.footer-special-link {
display: block;
font-weight: 600;
font-size: 15px;
line-height: 24px;
color: #463C3E;
padding: 14px 0 0;
}
.footer-special-link:hover {
color: #EC4824;
}
.footer-security-block {
position: relative;
}
.footer-soc-badge {
position: absolute;
width: 70px;
height: 70px;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
.footer-col-solutions {
width: 53%;
border-right: 1px solid #C4CBD2;
padding: 40px;
}
.footer-solutions-grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 20px;
}
.fs-col {
display: flex;
flex-direction: column;
}
.fs-cat {
font-weight: 700;
font-size: 15px;
line-height: 24px;
color: #8796B2;
margin-bottom: 20px;
}
.fs-inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.footer-col-rest {
width: 27%;
padding: 40px;
}
.rest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.rest-column {
display: flex;
flex-direction: column;
}
.footer-list.compact {
gap: 11px;
}
.footer-demo-btn {
margin-top: 30px;
width: 180px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-weight: 700;
font-size: 16px;
line-height: 150%;
display: flex;
align-items: center;
justify-content: center;
}
.footer-demo-btn:hover {
background-color: #cc3b00;
transform: translateY(-2px);
}
.footer-copyright-row {
width: 100%;
height: 700px;
background-color: #FFFFFF;
position: relative;
border-top: 1px solid #C4CBD2;
background-size: contain;
background-position: bottom center;
background-repeat: no-repeat;
}
.copyright-content {
position: absolute;
bottom: 40px;
left: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.copyright-text {
font-weight: 500;
font-size: 13px;
line-height: 24px;
color: #8796B2;
}
.copyright-link {
font-weight: 500;
font-size: 13px;
line-height: 24px;
color: #463C3E;
text-decoration: underline;
}
.copyright-link:hover {
color: #EC4824;
}
.mobile-back-btn {
display: none;
}
/* --- Mobile / Responsive Adaptation (Max-width 1024px) --- */
@media (max-width: 1024px) {
/* --- 1. Top Bar & Header Adjustments --- */
.top-bar {
padding: 10px 20px;
}
.top-bar__text {
font-size: 14px;
}
/* Скрываем лишнее в топ-баре */
.top-bar__divider,
.top-bar__link,
.top-bar__close {
display: none;
}
.main-header {
padding: 0 20px;
height: 80px;
position: sticky;
top: 0;
z-index: 1000;
/* Хедер всегда сверху */
}
.header-grid {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
min-height: 80px;
gap: 0;
}
/* Header Left: Logo vs Back Button */
.header-col-left {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-nav {
width: 100%;
}
.mobile-back-btn {
display: none;
background: transparent;
border: none;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 0;
}
.mobile-back-btn span {
font-weight: 700;
font-size: 16px;
color: #463C3E;
}
/* Переключалка видимости Лого / Кнопки Назад */
.submenu-open .logo {
display: none;
}
.submenu-open .mobile-back-btn {
display: flex;
}
.logo {
max-width: 160px;
}
/* Burger Menu */
.burger-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
background: transparent;
padding: 0;
z-index: 1002;
}
.burger-menu span {
width: 100%;
height: 3px;
background-color: #463C3E;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
}
.burger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
}
/* --- 2. Mobile Menu Container (Main Wrapper) --- */
.header-col-right {
position: fixed;
left: 0;
width: 100%;
background-color: #FFFFFF;
/* Высота и Top вычисляются JS-ом */
height: 0;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 990;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
/* --- 3. Main Nav List (First View) --- */
.header-nav-container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
overflow-y: auto;
/* Скролл только здесь */
padding-bottom: 40px;
/* Анимация ухода списка влево */
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateX(0);
}
/* Скрываем список, когда открыто подменю */
.header-col-right.show-submenu .header-nav-container {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
position: absolute;
/* Убираем из потока */
}
.nav-list {
flex-direction: column;
gap: 0;
width: 100%;
}
.nav-link {
font-size: 18px;
padding: 20px;
border-bottom: 1px solid #f5f5f5;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-link::after {
content: '›';
font-size: 24px;
font-weight: 400;
color: #8796B2;
}
.header-actions {
flex-direction: column;
width: 100%;
gap: 20px;
padding: 30px 20px;
}
.btn-demo {
width: 100%;
}
/* --- 4. Mega Menu Wrapper (Sibling Overlay Layer) --- */
.mega-menu-wrapper {
/* Фиксируем поверх всего, так как это соседний элемент */
position: fixed;
/* Top и Height желательно синхронизировать JS-ом, но для CSS-фоллбека: */
top: 80px;
height: calc(100vh - 80px) !important;
left: 0;
width: 100%;
background-color: #FFFFFF;
/* Скрыто по умолчанию (Fade) */
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1050;
/* Должен быть выше .header-col-right (990) */
transition: opacity 0.3s ease, visibility 0.3s ease;
/* Сброс десктопных стилей */
box-shadow: none;
border: none;
padding: 0;
display: block;
overflow: hidden;
}
/* Класс добавляется JS-ом при клике на ссылку */
.mega-menu-wrapper.mobile-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* --- 5. Individual Menu Items --- */
.mega-menu-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Растягиваем на весь wrapper */
background-color: #FFFFFF;
overflow-y: auto;
/* Скролл контента */
padding: 20px 20px 80px 20px;
/* Анимация появления справа */
opacity: 0;
transform: translateX(30px);
transition: opacity 0.3s ease, transform 0.3s ease;
visibility: hidden;
z-index: 25;
display: block;
}
.mega-menu-item.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* --- Resets --- */
.mega-menu-grid,
.platform-layout,
.solutions-layout,
.company-layout,
.solutions-inner-grid,
.resources-layout,
.company-links-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
padding-top: 0;
}
.company-socials {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
/* .menu-col-left { display: none; } */
/* Footer Fixes */
.footer-copyright-row {
background-size: cover;
height: auto;
min-height: 300px;
}
.copyright-content {
bottom: 20px;
left: 20px;
}
.footer-top-row,
.footer-bottom-row,
.footer-solutions-grid,
.rest-grid {
flex-direction: column;
display: flex;
}
.footer-subscribe,
.footer-brand,
.footer-socials,
.footer-col-platform,
.footer-col-solutions,
.footer-col-rest {
width: 100%;
border-right: none;
border-bottom: 1px solid #eee;
padding: 30px 20px;
}
}
/* --- Blog Hero Section --- */
.blog-hero {
width: 100%;
}
.hero-grid {
display: flex;
width: 100%;
height: calc(100vh - 146px);
background-color: #463C3E;
}
.hero-item {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.hero-overlay-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 12, 12, 0) 0%, #463C3E 100%);
z-index: 1;
pointer-events: none;
}
.hero-tag {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 150%;
color: #FFB901;
vertical-align: middle;
text-transform: uppercase;
}
.hero-featured {
width: 60%;
height: 100%;
padding: 37px 60px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-right: 1px solid #8796B2;
}
.hero-content-featured {
position: relative;
z-index: 3;
width: 100%;
max-width: 650px;
}
.hero-content-featured .hero-tag {
margin-bottom: 24px;
}
.hero-divider-yellow {
width: 35px;
height: 5px;
background-color: #FFB901;
margin-bottom: 26px;
}
.hero-title-large {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #FFFFFF;
margin-bottom: 45px;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
background-color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 16px;
line-height: 150%;
color: #EC4824;
text-decoration: none;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.hero-btn:hover {
transform: translateY(-2px);
background-color: #f0f0f0;
}
.hero-col-right {
width: 40%;
height: 100%;
display: flex;
flex-direction: column;
}
.hero-secondary {
width: 100%;
height: 50%;
padding: 26px 40px;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
}
.hero-secondary:first-child {
border-bottom: 1px solid #8796B2;
}
.hero-hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
opacity: 0;
transition: opacity 0.4s ease;
}
.hero-secondary:hover .hero-hover-overlay {
opacity: 1;
}
.hero-content-secondary {
position: relative;
z-index: 3;
width: 100%;
}
.hero-content-secondary .hero-tag {
margin-bottom: 12px;
}
.hero-title-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
}
.hero-title-medium {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 100%;
color: #FFFFFF;
margin: 0;
max-width: 500px;
}
.hero-arrow {
flex-shrink: 0;
margin-bottom: 5px;
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
}
.hero-secondary:hover .hero-arrow {
opacity: 0;
transform: translateX(10px);
}
.hero-desc-wrapper {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.hero-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 150%;
color: #C4CBD2;
margin: 0;
max-width: 500px;
}
.hero-secondary:hover .hero-desc-wrapper {
max-height: 150px;
opacity: 1;
margin-top: 24px;
}
.hero-bottom-strip {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background-color: #EC4824;
z-index: 4;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s ease;
}
.hero-secondary:hover .hero-bottom-strip {
transform: scaleY(1);
}
@media (max-width: 1024px) {
.hero-grid {
flex-direction: column;
height: auto;
}
.hero-featured {
width: 100%;
height: 500px;
border-right: none;
border-bottom: 1px solid #8796B2;
padding: 30px 20px;
}
.hero-featured .hero-title-large {
font-size: 28px;
}
.hero-col-right {
width: 100%;
height: auto;
display: none;
}
.hero-secondary {
height: 350px;
padding: 20px;
}
.hero-secondary .hero-title-medium {
font-size: 22px;
}
}
/* --- Blog Feed Section --- */
.blog-feed-section {
background-color: #F5F5F7;
padding: 60px 0;
width: 100%;
}
.blog-container {
max-width: 1540px;
padding: 0 35px;
margin: 0 auto;
width: 100%;
}
.blog-feed-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 56px;
}
.feed-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 50px;
line-height: 100%;
color: #463C3E;
text-align: center;
margin-bottom: 24px;
}
.feed-subtitle {
max-width: 1082px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 21px;
line-height: 150%;
color: #463C3E;
text-align: center;
vertical-align: middle;
}
.search-filter-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
max-width: 1350px;
min-height: 188px;
margin: 0 auto 56px auto;
}
.sf-col {
display: flex;
flex-direction: column;
}
.sf-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 150%;
color: #463C3E;
vertical-align: middle;
}
.search-col {
flex-grow: 1;
}
.search-col .sf-label {
margin-bottom: 5px;
}
.blog-search-form {
display: flex;
align-items: center;
width: 100%;
}
.blog-search-input {
flex-grow: 1;
border: none;
border-bottom: 1px solid #8796B2;
background: transparent;
padding: 10px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 16px;
color: #463C3E;
outline: none;
}
.blog-search-input::placeholder {
color: #8796B2;
}
.blog-search-btn {
width: 80px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border: none;
margin-left: 15px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-align: center;
vertical-align: middle;
cursor: pointer;
transition: background-color 0.3s;
}
.blog-search-btn:hover {
background-color: #cc3b00;
}
.sf-divider {
width: 1px;
background-color: #C4CBD2;
margin: 0 60px;
align-self: stretch;
}
.filter-col {
width: 50%;
flex-shrink: 0;
}
.filter-col .sf-label {
margin-bottom: 22px;
letter-spacing: -0.019em;
}
.filter-tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
background-color: transparent;
border: 1px solid #8796B2;
border-radius: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 150%;
letter-spacing: -0.019em;
color: #8796B2;
text-align: center;
vertical-align: middle;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-tag:hover,
.filter-tag.active {
border-color: #EE4500;
color: #EE4500;
}
.filter-tag.static {
cursor: default;
}
.filter-tag.static:hover {
border-color: #8796B2;
color: #8796B2;
}
.blog-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 74px;
row-gap: 60px;
}
.post-card {
display: flex;
flex-direction: column;
}
.post-img {
width: 100%;
height: auto;
aspect-ratio: 440 / 250;
object-fit: cover;
border-radius: 0;
margin-bottom: 11px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.post-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-date {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 150%;
color: #8796B2;
vertical-align: middle;
margin-bottom: 10px;
}
.post-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 150%;
color: #463C3E;
vertical-align: middle;
margin-bottom: 5px;
}
.post-excerpt {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #463C3E;
margin-bottom: 20px;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
}
.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 60px;
width: 100%;
}
.page-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 100%;
color: #463C3E;
text-decoration: none;
transition: color 0.3s ease;
}
.page-num:hover {
color: #EC4824;
}
.page-num.active {
color: #EC4824;
}
.page-dots {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 100%;
color: #463C3E;
}
.page-next {
display: flex;
align-items: center;
margin-left: 30px;
transition: transform 0.3s ease;
}
.page-next:hover {
transform: translateX(5px);
}
@media (max-width: 1200px) {
.blog-posts-grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
}
}
@media (max-width: 1024px) {
.search-filter-wrapper {
flex-direction: column;
height: auto;
min-height: auto;
align-items: stretch;
}
.sf-divider {
width: 100%;
height: 1px;
margin: 40px 0;
}
.filter-col {
width: 100%;
}
.blog-posts-grid {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 40px;
}
.feed-main-title {
font-size: 36px;
}
.blog-pagination {
gap: 20px;
}
.page-next {
margin-left: 10px;
}
}
/* --- Single Post Hero --- */
.single-hero {
position: relative;
width: 100%;
height: 390px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 10px solid #EC4824;
}
.single-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 12, 12, 0.32) 0%, #463C3E 100%);
z-index: 1;
}
.single-hero-content {
position: relative;
z-index: 2;
max-width: 1000px;
margin: 0 auto;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.single-post-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
color: #FFFFFF;
margin-bottom: 34px;
max-width: 750px;
}
.single-hero-divider {
width: 35px;
height: 5px;
background-color: #FFB901;
margin-bottom: 14px;
}
.single-post-meta {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 150%;
text-transform: uppercase;
vertical-align: middle;
display: flex;
flex-direction: column;
}
.single-post-meta-author {
color: #FFB901;
}
.single-post-meta-date {
color: #FFFFFF;
}
@media (max-width: 1024px) {
.single-hero {
height: auto;
min-height: 390px;
}
.single-hero-content {
padding-top: 60px;
padding-bottom: 40px;
}
.single-post-title {
font-size: 32px;
}
}
/* --- Single Post Main Section --- */
.single-post-section {
background-color: #F5F5F7;
width: 100%;
padding-bottom: 65px;
position: relative;
z-index: 5;
}
.white-board {
max-width: 1470px;
margin: 0 auto;
transform: translateY(-37px);
background-color: #FFFFFF;
padding: 85px 45px 45px 45px;
position: relative;
z-index: 10;
}
.article-content {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.article-intro {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 21px;
line-height: 170%;
color: #463C3E;
margin-bottom: 38px;
}
.article-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 170%;
color: #463C3E;
margin-top: 17px;
margin-bottom: 17px;
}
.article-text b,
.article-text strong {
font-weight: 700;
}
.article-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #463C3E;
margin-top: 38px;
margin-bottom: 20px;
scroll-margin-top: 120px;
}
.article-heading b,
.article-heading strong {
color: #EC4824;
}
.tldr-box {
background-color: #FFB901;
border-radius: 33px;
padding: 40px 40px 40px 25px;
display: flex;
gap: 40px;
margin: 40px 0;
}
.tldr-left {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
flex-shrink: 0;
}
.tldr-left span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 96px;
line-height: 100%;
color: #FFFFFF;
white-space: nowrap;
transform: rotate(-90deg);
}
.tldr-content {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 170%;
color: #463C3E;
}
.tldr-list {
padding-left: 20px;
margin: 0;
}
.tldr-list li {
margin-bottom: 10px;
}
.article-img-wrapper {
margin: 54px 0 30px 0;
}
.article-image {
max-width: 580px;
width: 100%;
height: auto;
border: 1px solid #C4CBD2;
border-radius: 11px;
display: block;
}
figcaption {
font-size: 14px;
color: #8796B2;
margin-top: 10px;
}
.article-bottom-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-top: 64px;
}
.sidebar-wrapper {
position: absolute;
right: 0;
top: -37px;
height: 100%;
width: 365px;
pointer-events: none;
z-index: 100;
overflow: hidden;
overflow: visible;
}
.sidebar-sticky {
position: sticky;
top: 122px;
pointer-events: auto;
background-color: #F5F5F7;
width: 365px;
padding: 0;
transform: translateX(calc(100% - 50px));
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
display: flex;
/* Чтобы ручка и контент были рядом */
flex-direction: row;
}
.sidebar-sticky:hover {
transform: translateX(0);
box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.1);
}
.sidebar-handle {
width: 50px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 24px 0;
background-color: #E8E8EA;
border-right: 1px solid #DEDEDE;
cursor: pointer;
transition: all .3s ease;
}
.sidebar-handle span {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
color: #8796B2;
margin-bottom: 10px;
text-transform: uppercase;
}
.sidebar-sticky:hover .sidebar-handle {
background-color: #FFB901;
}
.sidebar-sticky:hover .sidebar-handle span {
color: #FFFFFF;
}
.sidebar-sticky:hover .sidebar-handle svg path {
stroke: #FFFFFF;
}
.sidebar-index-box {
width: 315px;
padding: 24px 0 36px 30px;
opacity: 0;
transition: opacity 0.2s ease;
}
.sidebar-sticky:hover .sidebar-index-box {
opacity: 1;
transition-delay: 0.1s;
}
.sidebar-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 100%;
color: #463C3E;
margin-bottom: 20px;
}
.sidebar-divider {
width: 100%;
height: 1px;
background-color: #EC4824;
margin-bottom: 24px;
}
.sidebar-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 30px;
padding-right: 20px;
max-height: 60vh;
overflow-y: auto;
}
.sidebar-list a {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #463C3E;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 1px;
transition: color 0.3s;
}
.sidebar-list a:hover {
color: #EC4824;
text-decoration-color: #EC4824;
}
.sidebar-list-item.active a {
color: #EC4824;
text-decoration-color: #EC4824;
font-weight: 700;
}
.sidebar-list-item--h3 {
padding-left: 14px;
}
.sidebar-list-item--h3 a {
font-size: 15px;
opacity: 0.9;
}
.sidebar-learn-more {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: #EC4824;
text-decoration: underline;
margin-bottom: 20px;
}
.sidebar-learn-more:hover {
color: #8796B2;
}
.sidebar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-decoration: none;
transition: background-color 0.3s;
}
.sidebar-btn:hover {
background-color: #cc3b00;
}
@media (min-width: 1470px) {
.sidebar-sticky {
transform: translateX(0);
}
.sidebar-index-box {
opacity: 1;
width: 100%;
}
.sidebar-handle {
opacity: 0;
pointer-events: none;
width: 0;
}
}
@media (min-width: 1300.02px) {
.sidebar-sticky:hover .sidebar-handle {
opacity: 0;
pointer-events: none;
width: 0;
}
}
@media (max-width: 1600px) {
.article-content {
padding-right: 150px;
}
}
@media (max-width: 1300px) {
.sidebar-wrapper {
position: relative;
width: 100%;
height: auto;
right: auto;
top: 0;
margin-bottom: 40px;
z-index: 1;
overflow: visible;
}
.sidebar-sticky {
position: static;
width: 100%;
max-width: 100%;
transform: none;
padding: 30px;
display: block;
box-shadow: none;
border: 1px solid #E5E5E5;
}
.sidebar-sticky:hover {
transform: none;
box-shadow: none;
}
.sidebar-handle {
display: none;
}
.sidebar-index-box {
width: 100%;
padding: 0;
opacity: 1;
}
.article-content {
padding-right: 0;
}
.tldr-box {
flex-direction: column;
gap: 20px;
padding: 30px;
}
.tldr-left span {
transform: rotate(0);
font-size: 60px;
}
.tldr-left {
width: 100%;
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.article-intro,
.article-text,
.tldr-content {
font-size: 18px;
}
.article-heading {
font-size: 28px;
}
.white-board {
margin-top: 0;
transform: unset;
padding: 40px 20px;
}
.sidebar-wrapper {
padding: 0 20px;
top: 0;
margin-bottom: 20px;
}
}
/* --- Learn More & Share Section --- */
.learn-more-container {
padding-top: 24px;
}
.learn-more-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EC4824;
margin-bottom: 20px;
}
.faq-section {
background-color: #F5F5F7;
padding-top: 60px;
padding-bottom: 100px;
}
.faq-container {
max-width: 1020px;
margin: 0 auto;
padding: 0 20px;
}
.faq-item {
width: 100%;
}
.faq-btn {
width: 100%;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding: 0;
cursor: pointer;
text-align: left;
}
.faq-question {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 170%;
color: #463C3E;
transition: color 0.3s;
}
.faq-section .faq-question {
font-size: 23px;
}
.faq-chevron {
flex-shrink: 0;
margin-top: 15px;
transition: transform 0.3s ease;
}
.faq-btn.active .faq-chevron {
transform: rotate(180deg);
}
.faq-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
.faq-content {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 170%;
color: #463C3E;
padding-top: 10px;
}
.faq-section .faq-content {
font-size: 20px;
}
.faq-divider {
width: 100%;
height: 1px;
background-color: #8796B2;
margin: 24px 0;
}
.share-top-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-top: 24px;
}
.share-container {
margin-top: 27px;
}
.share-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 150%;
letter-spacing: 0%;
text-transform: uppercase;
color: #8796B2;
margin-bottom: 12px;
}
.share-icons {
display: flex;
gap: 12px;
}
.share-link {
display: inline-block;
width: 35px;
height: 35px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.share-link:hover {
transform: translateY(-2px);
opacity: 0.8;
}
@media (max-width: 768px) {
.faq-section {
padding-block: 40px;
}
.faq-question,
.faq-section .faq-question {
font-size: 18px;
}
.faq-content,
.faq-section .faq-content {
font-size: 16px;
}
.learn-more-title {
font-size: 28px;
}
}
/* --- Related Posts Section --- */
.related-posts-section {
background-color: #F5F5F7;
width: 100%;
padding-bottom: 56px;
}
.related-container {
max-width: 1470px;
margin: 0 auto;
padding: 0 35px;
}
.related-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 23px;
}
.related-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EC4824;
margin-bottom: 37px;
}
@media (max-width: 1024px) {
.related-title {
font-size: 28px;
}
.single-post-section {
padding-bottom: 40px;
}
}
/* --- Case Studies Hero --- */
.case-hero {
position: relative;
width: 100%;
min-height: 390px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 10px solid #EC4824;
}
.case-hero-content {
max-width: 900px;
padding: 60px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 2;
}
.case-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
color: #FFFFFF;
margin-bottom: 23px;
}
.case-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin-bottom: 23px;
max-width: 860px;
}
.case-hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 290px;
height: 50px;
background-color: #FFFFFF;
color: #EC4824;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 16px;
line-height: 150%;
text-decoration: none;
text-transform: uppercase;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-hero-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.case-title {
font-size: 32px;
}
.case-subtitle {
font-size: 18px;
}
.case-hero-btn {
width: 100%;
max-width: 290px;
}
}
/* --- Case Studies Slider Section (Swiper) --- */
.cases-slider-section {
background-color: #F5F5F7;
padding: 120px 0;
width: 100%;
}
.cases-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
/* Swiper Container */
.cases-swiper {
width: 100%;
/* Добавляем паддинг снизу для пагинации, так как она absolute в Swiper по умолчанию,
но мы ее переопределим */
padding-bottom: 50px;
overflow: visible !important;
/* Чтобы тени или вылеты не обрезались, если нужно */
}
/* Slide Card */
.case-slide {
background-color: #FFFFFF;
padding: 50px;
border-radius: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
height: auto;
/* Чтобы слайды тянулись по высоте */
}
/* Image */
.case-slide-img {
width: 100%;
aspect-ratio: 628 / 393;
object-fit: cover;
margin-bottom: 38px;
display: block;
}
.case-slide-img.placeholder-img {
background-color: #E0E0E0;
}
/* Content Styles (остаются те же) */
.case-slide-content {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
/* Прижимает кнопку к низу, если слайды разной высоты */
}
.case-slide-tag {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 150%;
color: #EE4500;
text-transform: uppercase;
margin-bottom: 24px;
}
.case-slide-divider {
width: 35px;
height: 5px;
background-color: #8796B2;
margin-bottom: 24px;
}
.case-slide-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
color: #463C3E;
margin-bottom: 17px;
}
.case-slide-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 150%;
color: #463C3E;
margin-bottom: 75px;
}
.case-slide-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
background-color: #FFFFFF;
border: 1px solid #EE4500;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 16px;
line-height: 150%;
color: #EC4824;
text-decoration: none;
transition: all 0.3s ease;
margin-top: auto;
/* Гарантирует, что кнопка внизу */
}
.case-slide-btn:hover {
background-color: #EE4500;
color: #FFFFFF;
}
/* --- Swiper Pagination Customization --- */
.cases-swiper .swiper-pagination.cases-pagination {
position: static;
/* Убираем absolute позиционирование */
margin-top: 80px;
/* Отступ 80px от слайдов */
display: flex;
justify-content: center;
align-items: center;
gap: 34px !important;
/* Расстояние между точками */
}
.cases-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #D9D9D9;
opacity: 1;
margin: 0 !important;
/* Сбрасываем дефолтные марджины Swiper */
border-radius: 50%;
transition: background-color 0.3s ease;
}
.cases-swiper .swiper-pagination-bullet-active {
background-color: #EE4500;
}
/* Mobile */
@media (max-width: 1024px) {
.case-slide-title {
font-size: 32px;
}
.case-slide-desc {
font-size: 20px;
margin-bottom: 40px;
}
.cases-slider-section {
padding: 60px 0;
}
.cases-swiper .swiper-pagination.cases-pagination {
margin-top: 40px;
}
}
/* --- Testimonials Section --- */
.testimonials-section {
background-color: #F5F5F7;
background-size: cover;
background-position: center;
width: 100%;
padding: 0 0 180px 0;
position: relative;
margin-bottom: 0;
}
/* Top Header Block */
.testi-header-container.short {
max-width: 1020px;
margin: 0 auto;
padding: 0 20px;
}
/* Top Header Block */
.testi-header-container {
max-width: 100%;
margin: 0 auto;
padding: 0 0;
}
.testi-divider {
width: 100%;
/* Занимает всю ширину контейнера (1020px) */
height: 5px;
background-color: #EC4824;
margin-bottom: 23px;
}
.testi-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EC4824;
text-align: left;
/* Выравнивание по левому краю контейнера */
margin-bottom: 50px;
}
.testi-title~p {
font-weight: 500;
font-size: 21px;
line-height: 150%;
margin-top: 24px;
}
/* Slider Wrapper */
.testi-slider-wrapper {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
.testimonials-swiper {
width: 100%;
overflow: visible !important;
/* ВАЖНО: чтобы логотип снизу не обрезался */
padding-bottom: 66px;
/* Место под пагинацию */
}
/* Slide Card */
.testi-slide {
/* Для корректной работы fade эффекта */
opacity: 0 !important;
transition-property: opacity, transform !important;
}
.testi-slide.swiper-slide-active {
opacity: 1 !important;
}
.testi-card {
background-color: #FFFFFF;
border-radius: 55px;
padding: 50px 62px;
height: auto;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Top Quote */
.quote-icon-top {
width: 68px;
margin-bottom: 44px;
}
.quote-icon-top img {
width: 100%;
}
/* Main Text */
.testi-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 36px;
line-height: 55px;
color: #463C3E;
text-align: center;
/* Максимальный отступ вниз */
margin-bottom: auto;
padding-bottom: 40px;
/* Минимальный зазор перед футером */
}
/* Footer (Profile + Quote) */
.testi-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.testi-profile {
display: flex;
align-items: center;
gap: 33px;
transform: translateY(83px);
}
.testi-avatar {
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.testi-avatar.placeholder-avatar {
background-color: #ddd;
}
.testi-info {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 64px;
}
.testi-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 32px;
line-height: 100%;
color: #EE4500;
}
.testi-role {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 24px;
line-height: 120%;
color: #463C3E;
}
.quote-icon-bottom {
width: 100px;
flex-shrink: 0;
}
.quote-icon-bottom img {
width: 100%;
}
/* Floating Company Logo */
.testi-company-logo {
position: absolute;
top: calc(100% + 55px);
right: 0;
max-height: 100px;
width: auto;
z-index: 10;
}
/* Pagination (Yellow) */
.testimonials-swiper .testi-pagination {
position: absolute;
bottom: 0;
/* Прибиваем к низу контейнера swiper (у него есть padding-bottom) */
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 34px !important;
}
.testimonials-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #D9D9D9;
opacity: 1;
margin: 0 !important;
border-radius: 50%;
}
.testimonials-swiper .swiper-pagination-bullet-active {
background-color: #FFB901;
/* Желтый активный */
}
/* Adaptive */
@media (max-width: 1024px) {
.testi-card {
padding: 24px;
min-height: auto;
border-radius: 30px;
}
.testi-text {
font-size: 16px;
line-height: 1.5;
}
.testi-footer {
flex-direction: column;
align-items: center;
text-align: center;
gap: 30px;
}
.testi-profile {
flex-direction: column;
gap: 20px;
transform: unset;
}
.testi-avatar {
width: 100px;
height: 100px;
}
.testi-info {
margin-bottom: 0;
}
.testi-name {
font-size: 20px;
}
.testi-role {
font-size: 16px;
}
.quote-icon-top {
width: 40px;
margin-bottom: 20px;
}
.quote-icon-bottom {
display: none;
/* Можно скрыть на мобильных для экономии места */
}
.testi-company-logo {
position: static;
margin-top: 30px;
display: block;
margin-left: auto;
margin-right: auto;
}
}
/* --- Our Work Section --- */
.our-work-section {
background-color: #F5F5F7;
width: 100%;
padding-top: 0;
padding-bottom: 120px;
/* Отступ снизу */
/* Header (testi-header-container) уже имеет padding-top 50px */
}
/* Wrapper limited to 1680px */
.work-slider-wrapper {
max-width: 1680px;
margin: 0 auto;
padding: 0 35px;
/* Безопасные отступы */
}
.work-swiper {
width: 100%;
padding-bottom: 80px;
/* Место под пагинацию */
overflow: visible !important;
}
/* Slide (Column) */
.work-col {
display: flex;
flex-direction: column;
gap: 30px;
/* Отступ между верхним и нижним лого */
height: auto;
}
/* Logo Card */
.work-card {
position: relative;
/* Для позиционирования стрелки */
width: 100%;
aspect-ratio: 315 / 240;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 0;
text-decoration: none;
/* Убираем подчеркивание ссылки */
overflow: hidden;
/* Чтобы стрелка выезжала красиво, если добавим анимацию */
cursor: pointer;
}
.work-logo {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
display: block;
/* Добавляем небольшой эффект для логотипа при ховере, опционально */
transition: transform 0.3s ease;
}
/* Arrow Styling */
.work-arrow {
position: absolute;
bottom: 27px;
right: 27px;
opacity: 0;
/* Скрыто по умолчанию */
transform: translateX(-10px);
/* Слегка сдвинуто влево */
transition: all 0.3s ease;
/* Плавное появление */
}
/* Hover Effects */
.work-card:hover .work-arrow {
opacity: 1;
transform: translateX(0);
/* Выезжает на место */
}
.work-card:hover .work-logo {
transform: scale(1.05);
/* Легкий зум логотипа */
}
/* Pagination (Reuse style similar to cases-pagination) */
.work-swiper .work-pagination {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 34px !important;
}
.work-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #D9D9D9;
opacity: 1;
margin: 0 !important;
border-radius: 50%;
transition: background-color 0.3s ease;
}
/* Orange active dot (First slider style) */
.work-swiper .swiper-pagination-bullet-active {
background-color: #EE4500;
}
/* --- Case Study Inner Hero --- */
.cs-inner-hero {
background-color: #F5F5F7;
padding-top: 40px;
padding-bottom: 60px;
width: 100%;
}
.cs-inner-hero.cs-inner-hero--author {
padding-bottom: 20px;
}
/* Back Link Row */
.cs-back-row {
width: 100%;
padding: 0 64px;
/* Отступы по бокам согласно ТЗ */
margin-bottom: 11px;
/* Отступ до основного контента */
}
.cs-back-link {
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
color: #463C3E;
/* Дефолтный цвет текста, если не указан */
transition: opacity 0.3s ease;
}
.cs-back-link:hover {
opacity: 0.7;
}
.cs-back-link span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 16px;
line-height: 150%;
color: #463C3E;
}
/* Main Container */
.cs-hero-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
/* 35px padding + max-width 1470 = 1540 total width area */
}
/* Title */
.cs-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 40px;
line-height: 100%;
color: #463C3E;
text-align: center;
margin-bottom: 36px;
}
/* Grid Layout */
.cs-hero-grid {
display: grid;
/* Пропорции 934px к 490px */
grid-template-columns: 934fr 490fr;
gap: 30px;
width: 100%;
/* Grid stretch items vertically by default, so heights will match */
}
/* Left Content Box */
.cs-content-box {
background-color: #FFFFFF;
border-radius: 39px;
padding: 50px 70px 60px 60px;
display: flex;
flex-direction: column;
justify-content: center;
/* Центрируем контент вертикально, если текста мало, или flex-start */
}
.cs-box-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 36px;
line-height: 100%;
color: #EC4824;
/* Оранжевый */
margin-bottom: 20px;
}
.cs-box-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 20px;
line-height: 150%;
color: #463C3E;
margin-bottom: 20px;
}
.cs-box-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 24px;
line-height: 150%;
color: #463C3E;
}
.cs-box-subtitle .text-orange {
color: #EC4824;
}
/* Right Image Box */
.cs-image-box {
width: 100%;
height: 100%;
/* Растягивается на высоту грида */
min-height: 300px;
/* Минимальная высота на всякий случай */
border-radius: 39px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #ddd;
/* Fallback color */
}
/* Responsive */
@media (max-width: 1024px) {
.cs-hero-grid {
grid-template-columns: 1fr;
/* Одна колонка на планшетах/мобильных */
gap: 20px;
}
.cs-image-box {
height: 300px;
/* Фиксированная высота картинки на мобильных */
order: -1;
/* Если хочешь поднять картинку наверх, раскомментируй */
}
.cs-back-row {
padding: 0 20px;
}
.cs-content-box {
padding: 40px 30px;
}
.cs-main-title {
font-size: 32px;
}
}
/* --- Info Section --- */
.cs-info-section {
background-color: #F5F5F7;
padding-bottom: 120px;
width: 100%;
}
.cs-info-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
}
/* 1. Header Block */
.cs-info-header {
margin-bottom: 50px;
}
.cs-header-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 38px;
}
body.author .cs-header-divider {
margin-bottom: 60px;
}
.cs-header-content {
display: flex;
align-items: flex-start;
}
.cs-header-img-wrapper {
width: 150px;
flex-shrink: 0;
}
.cs-header-icon {
width: 100%;
height: auto;
display: block;
}
.cs-header-text {
margin-left: 36px;
display: flex;
flex-direction: column;
gap: 17px;
/* Отступ между заголовком и текстом */
}
.cs-header-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EC4824;
}
.cs-header-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 150%;
color: #463C3E;
vertical-align: middle;
}
/* 2. Stats Grid */
.cs-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
margin-bottom: 50px;
}
.cs-stat-card {
background-color: #FFFFFF;
border-radius: 39px;
padding: 22px 36px 40px 36px;
display: flex;
flex-direction: column;
height: 100%;
/* Одинаковая высота */
box-sizing: border-box;
}
.cs-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
/* Если есть иконка */
margin-bottom: 14px;
text-align: center;
}
.cs-stat-top.center-single {
justify-content: center;
}
.cs-stat-val {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 64px;
line-height: 100%;
color: #EC4824;
}
.cs-stat-symbol {
font-size: 40px;
/* Размер знака %, M, X */
vertical-align: baseline;
margin-left: 2px;
}
.cs-stat-icon {
width: 56px;
height: auto;
object-fit: contain;
}
.cs-stat-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 36px;
color: #463C3E;
text-align: start;
}
/* 3. Feature Blocks (Shared Styles) */
.cs-feature-block {
background-color: #FFFFFF;
border-radius: 39px;
padding: 50px 50px 30px 50px;
margin-bottom: 50px;
/* Отступ между блоками */
}
.cs-feature-block:last-child {
margin-bottom: 0;
/* Убираем отступ у последнего блока */
}
/* Grid Layouts */
.cs-feature-grid {
display: grid;
gap: 80px;
align-items: center;
/* Выравнивание по верхней границе */
}
/* Standard: Text (580) | Image (700) */
.cs-feature-grid.layout-standard {
grid-template-columns: 580fr 700fr;
}
/* Reversed: Image (700) | Text (580) */
.cs-feature-grid.layout-reversed {
grid-template-columns: 700fr 580fr;
}
/* Image Column */
.cs-feature-media {
width: 100%;
}
.cs-feature-img {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
/* Опционально, чтобы картинка была красивой */
}
/* Text Column Content */
.cs-feature-content {
display: flex;
flex-direction: column;
}
.cs-feature-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EC4824;
margin-bottom: 30px;
}
.cs-feature-body h2,
.cs-feature-body h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 170%;
color: #463C3E;
margin: 0;
margin-bottom: 10px;
}
.cs-feature-body p {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Bold по ТЗ */
font-size: 20px;
line-height: 170%;
color: #463C3E;
margin-top: 0;
margin-bottom: 20px;
}
.cs-feature-body>*:last-child {
margin-bottom: 0;
/* Убираем отступ у последнего элемента */
}
.cs-feature-body .text-orange {
color: #EC4824;
}
/* Button */
.cs-feature-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
background-color: #EC4824;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 16px;
line-height: 150%;
text-decoration: none;
text-align: center;
margin-top: 45px;
/* 45px от текста */
transition: background-color 0.3s ease;
}
.cs-feature-btn:hover {
background-color: #CC3B00;
}
/* --- Responsive --- */
@media (max-width: 1200px) {
.cs-feature-grid.layout-standard,
.cs-feature-grid.layout-reversed {
gap: 40px;
}
.cs-stats-grid {
gap: 20px;
}
}
@media (max-width: 1024px) {
/* Header Stack */
.cs-header-content {
flex-direction: column;
}
.cs-header-text {
margin-left: 0;
margin-top: 20px;
}
/* Stats Stack */
.cs-stats-grid {
grid-template-columns: 1fr;
/* Одна колонка */
}
/* Feature Blocks Stack */
.cs-feature-grid.layout-standard,
.cs-feature-grid.layout-reversed {
grid-template-columns: 1fr;
/* Одна колонка */
gap: 40px;
}
/* Order change for reversed layout on mobile if needed (Image Top) */
.cs-feature-grid.layout-reversed .cs-feature-media {
order: -1;
}
.cs-feature-grid.layout-standard .cs-feature-media {
order: -1;
/* Картинка всегда сверху на мобилке */
}
.cs-feature-block {
padding: 40px 30px;
}
}
/* --- Case Study Footer Section --- */
.cs-footer-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 120px;
width: 100%;
}
/* Part 1: Share Bar */
.cs-share-bar-container {
max-width: 1024px;
margin: 0 auto;
padding: 0 20px;
/* Safety padding */
margin-bottom: 120px;
/* Отступ до второй части */
}
.cs-share-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 27px;
}
.cs-share-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
/* Выравнивание по низу, чтобы иконки и кнопка стояли ровно */
}
.cs-share-left {
display: flex;
flex-direction: column;
}
.cs-share-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
/* SemiBold */
font-size: 16px;
line-height: 150%;
color: #8796B2;
text-transform: uppercase;
margin-bottom: 12px;
}
.cs-share-icons {
display: flex;
gap: 12px;
}
/* Кнопка Share (аналогична другим, но свои размеры) */
.cs-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
background-color: #EC4824;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 16px;
line-height: 150%;
text-decoration: none;
transition: background-color 0.3s ease;
}
.cs-share-btn:hover {
background-color: #CC3B00;
}
/* Part 2: Conclusion */
.cs-conclusion-container {
max-width: 1228px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cs-conclusion-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 40px;
line-height: 100%;
color: #463C3E;
/* Предполагаю черный, в ТЗ цвет не указан, но для h1/h2 обычно черный */
margin-bottom: 70px;
}
.cs-conclusion-img {
width: 100%;
max-width: 500px;
/* Ограничение по ТЗ */
height: auto;
margin-bottom: 60px;
border-radius: 20px;
/* Опционально, для красоты */
}
.cs-conclusion-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 24px;
line-height: 150%;
color: #463C3E;
max-width: 100%;
/* Чтобы текст не разъезжался слишком широко */
}
/* Responsive */
@media (max-width: 768px) {
/* Share bar stack */
.cs-share-row {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.cs-share-btn {
width: 100%;
/* Кнопка на всю ширину на мобиле */
}
/* Conclusion spacing */
.cs-share-bar-container {
margin-bottom: 80px;
}
.cs-conclusion-title {
font-size: 32px;
margin-bottom: 40px;
}
.cs-conclusion-img {
margin-bottom: 40px;
}
.cs-conclusion-text {
font-size: 20px;
}
}
/* --- About Hero --- */
.about-hero {
position: relative;
width: 100%;
height: 520px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
/* Optional: Slight overlay to make play button pop if image is light */
.about-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
z-index: 1;
}
.hero-play-btn {
position: relative;
z-index: 2;
background: none;
border: none;
padding: 0;
cursor: pointer;
width: 160px;
/* Фиксируем ширину по ТЗ */
height: 160px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hero-play-btn svg {
width: 100%;
height: 100%;
display: block;
}
.hero-play-btn:hover {
transform: scale(1.1);
/* Эффект увеличения при наведении */
opacity: 0.9;
}
/* --- Video Modal --- */
/* Legacy Video Modal Styles - Replaced by Fancybox
.video-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.video-modal.active {
opacity: 1;
visibility: visible;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.modal-content {
position: relative;
width: 90%;
max-width: 1200px;
z-index: 2001;
}
.modal-close {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
cursor: pointer;
padding: 5px;
transition: transform 0.2s;
}
.modal-close:hover {
transform: scale(1.2);
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
background-color: #463C3E;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
End Legacy Video Modal Styles */
/* --- About Content Section --- */
.about-content-section {
background-color: #F5F5F7;
padding-top: 70px;
padding-bottom: 0;
width: 100%;
}
.about-container {
max-width: 1630px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
}
/* Title */
.about-section-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 40px;
line-height: 100%;
text-align: center;
color: #463C3E;
margin-bottom: 70px;
}
/* Grid */
.about-values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* 2 колонки */
column-gap: 80px;
row-gap: 50px;
margin-bottom: 70px;
/* Отступ до картинки */
}
/* Grid Item */
.about-value-item {
display: flex;
align-items: center;
/* Выравнивание полоски и текста по центру вертикально */
}
.value-strip {
width: 5px;
height: 50px;
background-color: #EC4824;
/* Оранжевый */
margin-right: 40px;
flex-shrink: 0;
/* Чтобы полоска не сжималась */
}
.value-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin: 0;
}
/* --- About Bottom CTA Banner --- */
.about-cta-banner {
width: 100%;
max-width: 1260px;
height: 700px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin: 70px auto 0;
border-radius: 33px 33px 0 0;
border-left: 1px solid #8796B2;
border-top: 1px solid #8796B2;
border-right: 1px solid #8796B2;
}
.about-cta-btn {
display: flex;
align-items: center;
justify-content: center;
width: 530px;
height: 90px;
background-color: #EC4824;
color: #FFFFFF;
/* Радиус кнопки (в ТЗ не указан, ставлю 45px для полного скругления при высоте 90) */
border-radius: 45px;
text-decoration: none;
/* Typography */
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
/* ExtraBold */
font-size: 28px;
line-height: 150%;
text-align: center;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.about-cta-btn:hover {
background-color: #CC3B00;
transform: scale(1.02);
}
/* --- Responsive --- */
@media (max-width: 1024px) {
.about-values-grid {
grid-template-columns: 1fr;
/* 1 колонка на мобильных */
column-gap: 0;
row-gap: 30px;
}
.about-section-title {
font-size: 32px;
margin-bottom: 40px;
}
.value-text {
font-size: 18px;
}
.value-strip {
margin-right: 20px;
}
.about-cta-banner {
height: 400px;
}
.about-cta-btn {
width: 90%;
/* На мобильных кнопка будет почти во всю ширину */
font-size: 16px;
height: 70px;
}
}
/* --- Awards Section --- */
.awards-section {
background-color: #F5F5F7;
width: 100%;
padding-bottom: 120px;
}
.awards-section .testi-header-container {
max-width: 1540px;
padding: 0 35px;
}
.awards-section .testi-title {
max-width: 1020px;
margin-inline: auto;
}
.awards-swiper {
width: 100%;
padding-bottom: 80px;
/* Место под пагинацию */
overflow: visible !important;
}
/* Card Styling */
.awards-card {
background-color: #FFFFFF;
border-radius: 0;
padding: 60px 0 80px 60px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
/* min-height: 500px; <--- УДАЛЯЕМ МИНИМАЛЬНУЮ ВЫСОТУ */
height: auto;
/* Ставим auto, чтобы JS мог управлять высотой */
width: 100%;
box-sizing: border-box;
}
/* Left Column */
.awards-col-left {
display: flex;
flex-direction: column;
}
.awards-quote-icon {
width: 68px;
height: auto;
}
.awards-quote-icon.right {
width: 100px;
margin-inline-start: auto;
}
.awards-main-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Bold */
font-size: 36px;
line-height: 55px;
color: #463C3E;
margin-top: 50px;
margin-bottom: 0;
/* Кавычки сразу под текстом */
}
/* Отступ для нижних кавычек */
.awards-main-text+.awards-quote-icon {
margin-top: 10px;
/* Визуальный зазор */
margin-bottom: 50px;
}
.awards-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 21px;
line-height: 150%;
color: #8796B2;
}
.awards-desc a {
color: inherit;
text-decoration: underline;
}
/* Right Column */
.awards-col-right {
width: 100%;
height: auto;
position: relative;
/* Картинка прижимается к правому краю из-за padding-right: 0 у родителя */
}
.awards-img {
width: 100%;
height: 100%;
object-fit: cover;
/* Заполняет всю правую половину */
display: block;
min-height: 400px;
/* Чтобы картинка была видна */
transform: translateX(3vw);
}
/* Pagination (Yellow/Orange reuse) */
.awards-swiper .awards-pagination {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 34px !important;
}
.awards-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #D9D9D9;
opacity: 1;
margin: 0 !important;
border-radius: 50%;
}
.awards-swiper .swiper-pagination-bullet-active {
background-color: #FFB901;
/* Желтый */
}
.awards-swiper .swiper-slide {
opacity: 0 !important;
transition-property: opacity, transform !important;
}
.awards-swiper .swiper-slide.swiper-slide-active {
opacity: 1 !important;
}
/* Responsive */
@media (max-width: 1024px) {
.awards-card {
grid-template-columns: 1fr;
grid-template-rows: 1fr 300px;
padding: 24px;
/* Обычный паддинг со всех сторон */
}
.awards-col-right {
height: 300px;
/* Фикс высота для картинки на мобильном */
margin-top: 40px;
}
.awards-main-text {
font-size: 24px;
line-height: 1.4;
margin-top: 20px;
}
.awards-quote-icon {
width: 40px;
}
.awards-main-text+.awards-quote-icon {
margin-top: 10px;
margin-bottom: 10px;
width: 70px;
}
.awards-desc {
font-size: 16px;
}
.awards-img {
min-height: unset;
transform: unset;
}
.awards-swiper .awards-pagination {
gap: 16px !important;
flex-wrap: wrap;
}
.awards-swiper {
padding-bottom: 60px;
}
}
/* --- Team Section --- */
.team-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 120px;
width: 100%;
}
/* Header Block */
.team-header-wrapper {
max-width: 1024px;
margin: 0 auto;
padding: 0 20px;
/* Безопасные отступы на всякий случай */
margin-bottom: 76px;
/* Отступ вниз до грида */
}
.team-header-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 24px;
}
.team-header-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 36px;
line-height: 100%;
color: #EC4824;
margin: 0;
}
/* Grid Container */
.team-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3 колонки */
gap: 10px;
}
/* Team Card */
.team-card {
position: relative;
width: 100%;
/* Пропорция 490 к 885 */
aspect-ratio: 490 / 885;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #ddd;
/* Fallback */
border-radius: 0;
/* Скрываем всё, что вылезает (если вдруг) */
overflow: hidden;
/* Support for anchor tag */
display: block;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* Overlay */
.team-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(180deg, rgba(0, 12, 12, 0) 7.69%, #463C3E 100%);
padding: 0 40px 40px 40px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
/* Текст слева, LinkedIn справа */
align-items: flex-end;
/* Прижимаем к низу */
}
/* Info */
.team-info {
display: flex;
flex-direction: column;
}
.team-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 32px;
line-height: 100%;
color: #FFFFFF;
margin-bottom: 10px;
}
.team-role {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 24px;
line-height: 100%;
color: #FDB813;
/* Желтый */
}
/* LinkedIn Icon */
.team-linkedin-icon {
display: block;
width: 60px;
height: 60px;
flex-shrink: 0;
/* Чтобы не сжималась */
transition: transform 0.3s ease, opacity 0.3s ease;
}
.team-linkedin-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.team-card:hover .team-linkedin-icon {
transform: scale(1.15);
opacity: 1;
}
/* Responsive */
@media (max-width: 1200px) {
/* Если экран меньше, шрифт может быть великоват, можно чуть уменьшить */
.team-name {
font-size: 28px;
}
.team-role {
font-size: 20px;
}
.team-overlay {
padding: 0 20px 30px 20px;
}
}
@media (max-width: 768px) {
.team-grid {
grid-template-columns: 1fr;
/* 1 колонка на мобильных */
gap: 20px;
}
/* На мобильных карточки будут слишком высокими при такой пропорции (885px высоты).
Можно изменить пропорцию для мобильных, чтобы они влезали в экран. */
.team-card {
aspect-ratio: 3 / 4;
/* Более квадратные на мобиле */
}
}
/* --- Advisory Board Section --- */
.advisory-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 120px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* Orange Strip */
.advisory-strip {
width: 100%;
max-width: 1024px;
height: 5px;
background-color: #EC4824;
}
.advisory-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
width: 100%;
padding: 0 35px;
margin: 0 auto;
box-sizing: border-box;
}
/* Typography */
.advisory-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
text-align: center;
color: #463C3E;
margin-top: 60px;
margin-bottom: 40px;
}
.advisory-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
text-align: center;
color: #463C3E;
/* max-width: 900px; */
margin: 0 auto;
margin-bottom: 70px;
}
.advisory-subtitle a {
color: #EC4824;
text-decoration: underline;
}
/* --- Complex Grid Layout --- */
.advisory-grid-wrapper {
display: flex;
flex-direction: column;
width: 100%;
/* Отступ между рядами (в ТЗ не указан, ставлю 0, если нужно слить ряды) */
/* Если визуально ряды должны быть отдельно, добавь gap: 30px; */
}
/* General Row Styles */
.advisory-row {
display: flex;
width: 100%;
flex-wrap: nowrap;
/* Запрещаем перенос */
}
/* Row 1: Cell 1 + Cell 2 (Bottom Aligned) */
/* 548 + 548 + 155 (space) */
.row-top {
align-items: flex-end;
/* Прижимаем к низу */
justify-content: flex-start;
}
/* Row 2: Space + Cell 3 + Cell 4 (Top Aligned) */
/* 280 (space) + 422 + 548 */
.row-bottom {
align-items: flex-start;
/* Прижимаем к верху */
justify-content: flex-start;
}
/* Cells styling */
.advisory-cell {
position: relative;
border: 1px solid #8796B2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #ddd;
box-sizing: border-box;
/* Бордер входит в размер */
flex-shrink: 0;
/* Support for anchor tag */
display: block;
text-decoration: none;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.advisory-cell:hover {
transform: scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
border-color: #EC4824;
}
/* --- Calculations based on total width 1251 units --- */
/* Cell 1: 548 width -> 43.805% */
.cell-1 {
width: 43.805%;
aspect-ratio: 548 / 352;
}
.cell-1 .advisory-info-card {
left: -3vw;
bottom: -4vh;
}
.cell-2 .advisory-info-card {
left: unset;
right: -6vw;
bottom: unset;
top: 4vh;
}
.cell-3 .advisory-info-card {
left: -9vw;
bottom: 5vh;
}
.cell-4 .advisory-info-card {
left: unset;
right: -3vw;
bottom: -4vh;
}
/* Cell 2: 548 width -> 43.805% */
.cell-2 {
width: 43.805%;
aspect-ratio: 548 / 308;
/* Гапа нет, ячейка идет сразу за первой.
Оставшиеся 12.39% справа остаются пустыми автоматически */
}
/* Cell 3: 422 width -> 33.733% */
/* Left Margin: 280 -> 22.382% */
.cell-3 {
width: 33.733%;
aspect-ratio: 422 / 422;
/* Квадрат */
margin-left: 22.382%;
/* Отступ слева */
}
/* Cell 4: 548 width -> 43.805% */
.cell-4 {
width: 43.805%;
aspect-ratio: 548 / 308;
/* Идет сразу за 3-й, сумма ширин ~100% */
}
/* --- Info Card (Absolute) --- */
.advisory-info-card {
position: absolute;
bottom: 0;
left: 0;
width: 295px;
height: 125px;
background-color: #FFFFFF;
padding: 0 27px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
z-index: 2;
}
.advisory-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.2;
color: #EC4824;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
margin-bottom: 8px;
}
.advisory-role {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 100%;
color: #8796B2;
}
/* --- Responsive --- */
@media (max-width: 1200px) {
.advisory-row {
flex-direction: column;
align-items: center;
}
.cell-1,
.cell-2,
.cell-3,
.cell-4 {
width: 100%;
max-width: 600px;
margin-left: 0;
margin-bottom: 30px;
/* 1. Убираем жесткий aspect-ratio, так как высота теперь = фото + текст */
aspect-ratio: auto;
/* 2. Настраиваем фон так, чтобы он занимал ширину и не зумился на всю высоту */
background-size: 100% auto;
background-position: top center;
background-color: #FFFFFF;
/* Белый фон для нижней части, где будет текст */
display: flex;
flex-direction: column;
}
/* 3. Создаем "распорку", которая держит пропорцию 16:9 для фоновой картинки сверху */
.advisory-cell::before {
content: "";
display: block;
width: 100%;
padding-top: 56.25%;
/* Это ровно 16:9 */
}
.advisory-info-card {
/* 4. Вынимаем карточку из absolute, теперь она встает ровно под картинкой */
position: relative;
width: 100%;
height: auto;
padding: 24px 20px;
background-color: #FFFFFF;
/* Опционально: линия, чтобы визуально отделить текст от фото */
border-top: 1px solid #8796B2;
z-index: 2;
}
/* 5. Важно! Сбрасываем десктопные отступы для всех индивидуальных карточек */
.cell-1 .advisory-info-card,
.cell-2 .advisory-info-card,
.cell-3 .advisory-info-card,
.cell-4 .advisory-info-card {
left: unset;
right: unset;
bottom: unset;
top: unset;
}
}
/* --- Values Section --- */
.values-section {
background-color: #F5F5F7;
/* Отступы секции (обычно 120 снизу, сверху зависит от предыдущей,
но по умолчанию ставим стандартные) */
padding-top: 0;
padding-bottom: 120px;
width: 100%;
}
/* Header (Analogous to Team Header) */
.values-header-wrapper {
max-width: 1024px;
margin: 0 auto;
padding: 0 20px;
margin-bottom: 70px;
/* Отступ до грида */
}
.values-header-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 24px;
}
.values-header-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 36px;
/* Размер как в предыдущих хедерах такого типа */
line-height: 100%;
color: #EC4824;
margin: 0;
}
/* Container (1680px + padding) */
.values-container {
max-width: 1680px;
margin: 0 auto;
padding: 0 35px;
}
/* Grid (4 columns) */
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 70px;
row-gap: 70px;
/* Если будет перенос строк */
}
.values-grid.values-grid--three {
grid-template-columns: repeat(3, 1fr);
}
/* Card */
.values-card {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.values-icon {
width: 120px;
height: 120px;
object-fit: contain;
/* Чтобы иконка не искажалась */
margin-bottom: 40px;
}
.values-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Bold */
font-size: 36px;
line-height: 100%;
color: #463C3E;
margin-top: 0;
margin-bottom: 26px;
}
.values-grid.values-grid--three .values-title {
font-size: 32px;
}
.values-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
/* Regular */
font-size: 20px;
line-height: 170%;
color: #463C3E;
margin: 0;
}
/* Responsive */
@media (max-width: 1400px) {
.values-grid {
column-gap: 40px;
/* Уменьшаем гап на средних экранах */
}
}
@media (max-width: 1200px) {
.values-grid,
.values-grid.values-grid--three {
grid-template-columns: repeat(2, 1fr);
/* 2 колонки на планшетах */
row-gap: 60px;
}
}
@media (max-width: 768px) {
.values-grid,
.values-grid.values-grid--three {
grid-template-columns: 1fr;
/* 1 колонка на мобильных */
row-gap: 50px;
}
.values-header-wrapper {
margin-bottom: 40px;
}
.values-title {
font-size: 28px;
}
.values-card {
align-items: center;
text-align: center;
}
}
/* --- Careers Section --- */
.careers-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 120px;
width: 100%;
}
/* Header (1024px width) */
.careers-header-wrapper {
max-width: 1024px;
margin: 0 auto;
padding: 0 20px;
margin-bottom: 70px;
/* Отступ вниз как у values */
}
.careers-header-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 24px;
}
.careers-header-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 36px;
line-height: 100%;
color: #EC4824;
margin: 0;
}
/* Container */
.careers-container {
max-width: 1740px;
margin: 0 auto;
padding: 0 35px;
/* Боковые отступы */
}
/* Banner Block */
.careers-banner {
width: 100%;
height: 380px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Если нужно затемнение, можно добавить linear-gradient в background-image */
background-color: #ffffff;
/* Fallback color */
border: 5px solid #ffffff;
border-radius: 0;
/* В ТЗ не указан, ставим 0 */
padding: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
/* Центр по вертикали */
align-items: center;
/* Центр по горизонтали */
gap: 32px;
/* Отступ между заголовком и кнопкой */
}
.careers-banner--small {
height: 250px;
}
/* Typography */
.careers-banner-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 50px;
/* line-height: 24px; <- Это обрежет текст. Ставлю 100%, чтобы было плотно, но читаемо */
line-height: 100%;
color: #463C3E;
text-align: center;
margin: 0;
max-width: 900px;
/* Ограничим ширину текста для красоты */
}
.careers-banner--small .careers-banner-title {
color: #fff;
}
/* Button */
.careers-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 350px;
height: 60px;
background-color: #FFFFFF;
color: #EC4824;
border-radius: 30px;
/* Половина высоты для "пилюли" */
text-decoration: none;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
/* ExtraBold */
font-size: 24px;
line-height: 150%;
text-align: center;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.careers-btn:hover {
background-color: #EC4824;
color: #FFFFFF;
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 768px) {
.careers-banner {
height: auto;
min-height: 300px;
padding: 40px 20px;
}
.careers-banner-title {
font-size: 32px;
}
.careers-btn {
width: 100%;
/* На мобильных кнопка на всю ширину */
max-width: 350px;
font-size: 20px;
}
}
/* Author */
/* AUTHOR BADGE */
.author-badge {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 150%;
color: #8796B2;
width: 92px;
height: 32px;
border: 1px solid #8796B2;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 17px auto;
}
/* Центрирование заголовка как в дизайне */
.cs-inner-hero--author .cs-main-title {
text-align: center;
margin-bottom: 40px;
}
/* Центрирование текста */
.cs-inner-hero--author .cs-content-box {
text-align: left;
}
/* Адаптация сетки — полностью наследует cs-hero-grid */
.cs-inner-hero--author .cs-hero-grid {
align-items: center;
}
/* Картинка автора */
.cs-inner-hero--author .cs-image-box {
background-size: cover;
background-position: center;
}
/* Contact Page */
.contact-hero {
position: relative;
height: 330px;
width: 100%;
border-bottom: 10px solid #EC4824;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.contact-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
.contact-hero-bg::after {
content: '';
background-color: #fff;
opacity: .55;
position: absolute;
inset: 0;
z-index: 2;
}
.contact-hero-video,
.contact-hero-fallback {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.contact-hero-content {
position: relative;
z-index: 2;
max-width: 980px;
padding: 0 20px;
text-align: center;
}
.contact-hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
color: #463C3E;
margin-bottom: 24px;
}
.contact-hero-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
color: #463C3E;
}
/* --- Адаптация под мобильные экраны --- */
@media (max-width: 768px) {
.contact-hero {
height: auto;
padding: 60px 20px;
flex-direction: column;
border-bottom: 8px solid #EC4824;
}
.contact-hero-title {
font-size: 28px;
margin-bottom: 16px;
}
.contact-hero-text {
font-size: 17px;
line-height: 150%;
}
.contact-hero-video,
.contact-hero-fallback {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 1;
}
.contact-hero-content {
position: relative;
z-index: 2;
padding: 0;
}
}
.contact-info-section {
background-color: #f5f5f5;
padding: 80px 0 120px;
}
.contact-info-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
.contact-info-grid {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 80px;
align-items: start;
}
.contact-info-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
color: #463C3E;
margin-bottom: 57px;
max-width: 400px;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 47px;
}
.contact-info-item {
display: flex;
align-items: center;
}
.info-marker {
width: 5px;
height: 80px;
border-radius: 5px;
background-color: #EE4500;
flex-shrink: 0;
margin-right: 30px;
}
.info-content {
flex: 1;
}
.info-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 21px;
line-height: 150%;
color: #EC4824;
margin-bottom: 0;
}
.info-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin-top: 0;
}
.contact-info-right {
width: 100%;
}
.hubspot-placeholder {
width: 100%;
height: 100%;
min-height: 400px;
background-color: #fff;
border: 2px dashed #EC4824;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
color: #EC4824;
text-align: center;
padding: 40px;
}
/* --- Адаптация под мобильные экраны --- */
@media (max-width: 1024px) {
.contact-info-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.contact-info-left {
max-width: 100%;
}
.contact-info-title {
font-size: 32px;
margin-bottom: 40px;
text-align: center;
}
.contact-info-item {
flex-direction: row;
}
.info-marker {
height: 60px;
}
.info-heading,
.info-text {
font-size: 18px;
}
.hubspot-placeholder {
min-height: 300px;
font-size: 16px;
padding: 30px;
}
}
@media (max-width: 600px) {
.contact-info-title {
font-size: 26px;
}
.info-heading,
.info-text {
font-size: 16px;
}
.info-marker {
height: 50px;
margin-right: 20px;
}
.hubspot-placeholder {
font-size: 15px;
padding: 20px;
}
}
/* --- Thank You Section --- */
.thank-hero {
position: relative;
width: 100%;
/* Паддинг сверху 50, снизу 215 */
padding: 50px 0 215px;
overflow: hidden;
}
/* Фоновое видео */
.thank-hero__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.thank-hero__bg video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Опционально: если текст плохо читается, можно включить полупрозрачный фон */
.thank-hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.55);
z-index: 1;
}
/* Контейнер 1540px + паддинги 35px */
.thank-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
position: relative;
z-index: 1;
}
/* --- Верхняя часть --- */
.thank-hero__top {
display: flex;
flex-direction: column;
align-items: center;
/* Отступ до линии: Текст(21px) + 100px вниз */
margin-bottom: 120px;
}
.thank-hero__icon {
width: 180px;
height: auto;
/* Картинка вниз 38 */
margin-bottom: 38px;
}
.thank-hero__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #463C3E;
/* Базовый цвет, поменяй на #fff если фон темный */
margin: 0 0 23px 0;
/* Вниз 23 */
}
.thank-hero__desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
text-align: center;
color: #463C3E;
margin: 0;
}
/* --- Линия и второй заголовок --- */
.thank-hero__divider {
width: 100%;
height: 5px;
background-color: #EC4824;
/* Вниз 24 */
margin-bottom: 24px;
}
.thank-hero__subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EC4824;
text-align: left;
margin: 0 0 120px 0;
/* Вниз 120 */
}
/* --- Сетка (Grid) --- */
.thank-grid {
max-width: 1280px;
/* По центру, макс 1280 */
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4 колонки */
gap: 30px;
/* Зазор между колонками */
}
.thank-card {
display: flex;
flex-direction: column;
align-items: center;
}
.thank-card__img-wrapper {
width: 140px;
height: 140px;
/* Вниз 30 */
margin-bottom: 30px;
}
.thank-card__img-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
}
.thank-card__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: center;
color: #463C3E;
margin: 0 0 38px 0;
/* Вниз 38 */
}
.thank-card__btn {
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 38px;
background-color: #ffffff;
border: 1px solid #EC4824;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 16px;
line-height: 150%;
color: #EC4824;
transition: all 0.3s ease;
}
.thank-card__btn:hover {
background-color: #EC4824;
color: #ffffff;
}
/* --- Адаптивность (Mobile & Tablet) --- */
@media (max-width: 1024px) {
.thank-hero {
padding-bottom: 120px;
/* Уменьшаем нижний отступ */
}
.thank-hero__subtitle {
margin-bottom: 60px;
/* Уменьшаем отступ до грида */
}
.thank-grid {
grid-template-columns: repeat(2, 1fr);
/* 2 колонки на планшете */
gap: 50px 20px;
}
}
@media (max-width: 600px) {
.thank-hero {
padding-top: 30px;
padding-bottom: 80px;
}
.thank-hero__top {
margin-bottom: 60px;
}
.thank-hero__title {
font-size: 32px;
/* Чуть меньше заголовок */
}
.thank-hero__desc {
font-size: 18px;
}
.thank-hero__subtitle {
font-size: 28px;
margin-bottom: 40px;
text-align: center;
/* На мобилке лучше по центру */
}
.thank-grid {
grid-template-columns: 1fr;
/* 1 колонка на телефоне */
gap: 60px;
}
.thank-card__title {
font-size: 28px;
margin-bottom: 20px;
}
}
/* --- HubSpot Form Reset & Customization --- */
/* 1. Глобальные настройки контейнера формы */
.contact-form .hs-form,
.contact-info-right .hubspot-form-container .hs-form {
width: 100%;
font-family: 'Plus Jakarta Sans', sans-serif;
display: flex;
/* Включаем флекс для перестановки футера */
flex-wrap: wrap;
/* Разрешаем перенос строк */
gap: 0;
/* Отступы регулируем вручную */
}
/* Все филдсеты (группы полей) занимают 100% ширины */
.contact-form .hs-form fieldset,
.contact-info-right .hubspot-form-container .hs-form fieldset {
width: 100%;
max-width: 100%;
margin-bottom: 45px;
/* Отступ между рядами */
border: none;
padding: 0;
}
/* 2. Лейблы (Заголовки полей) */
.contact-form label,
.contact-info-right .hubspot-form-container label {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 12px;
line-height: 150%;
color: #8796B2;
margin-bottom: 10px !important;
/* Принудительный отступ вниз */
}
.contact-form .hs-form-required,
.contact-info-right .hubspot-form-container .hs-form-required {
/* color: #EC4824; */
}
/* 3. Инпуты и Селекты */
.contact-form .hs-input,
.contact-info-right .hubspot-form-container .hs-input {
width: 100% !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 150%;
color: #463C3E !important;
background-color: transparent !important;
border: none !important;
border-bottom: 1px solid #8796B2 !important;
border-radius: 0 !important;
padding: 0 0 5px 0 !important;
/* Сверху 0, снизу 5 */
margin: 0;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
/* Высота для текстовых полей */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-info-right .hubspot-form-container input[type="text"],
.contact-info-right .hubspot-form-container input[type="email"],
.contact-info-right .hubspot-form-container input[type="tel"],
.contact-info-right .hubspot-form-container select {
height: 24px !important;
min-height: 24px !important;
}
/* Высота для Textarea */
.contact-form textarea.hs-input,
.contact-info-right .hubspot-form-container textarea.hs-input {
height: 72px !important;
min-height: 72px !important;
resize: none;
/* Убираем уголок растягивания */
}
/* Ховер эффект (полоска становится оранжевой) */
.contact-form .hs-input:hover,
.contact-form .hs-input:focus,
.contact-info-right .hubspot-form-container .hs-input:hover,
.contact-info-right .hubspot-form-container .hs-input:focus {
border-bottom-color: #EC4824 !important;
outline: none !important;
}
/* 4. Кастомизация Select (Шеврон) */
.contact-form select.hs-input,
.contact-info-right .hubspot-form-container select.hs-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238796B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right center !important;
background-size: 12px 8px !important;
cursor: pointer;
}
/* 5. Сетка (2 колонки) */
/* HubSpot использует класс .form-columns-2 для групп из двух полей */
.contact-form .form-columns-2,
.contact-info-right .hubspot-form-container .form-columns-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 45px;
/* Отступ между колонками */
}
.contact-form .form-columns-2 .hs-form-field,
.contact-info-right .hubspot-form-container .form-columns-2 .hs-form-field {
width: 100% !important;
float: none !important;
margin-bottom: 0 !important;
/* Отключаем флоаты хабспота */
}
.contact-info-right .hubspot-form-container .form-columns-2 .hs-form-field:first-child .input,
.contact-info-right .hs-form-4a71408b-19fb-48b6-aff3-65f4b0fd531e_7c4c1372-12bd-4d53-9549-eba3884bb4b6 fieldset.form-columns-2 .input {
margin-right: 0 !important;
}
/* 6. Ошибки валидации */
.contact-form .hs-form-field,
.contact-info-right .hubspot-form-container .hs-form-field {
position: relative;
/* Чтобы позиционировать ошибку абсолютно относительно поля */
}
.contact-form .hs-error-msgs,
.contact-info-right .hubspot-form-container .hs-error-msgs {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
list-style: none;
margin-top: 10px;
/* Сверху 10 */
}
.contact-form .hs-error-msgs li label,
.contact-info-right .hubspot-form-container .hs-error-msgs li label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 12px;
color: #EC4824 !important;
margin-bottom: 0 !important;
}
/* 7. ФУТЕР (Кнопка + Юридический текст) */
/* Блок с кнопкой */
.contact-form .hs_submit,
.contact-info-right .hubspot-form-container .hs_submit {
width: auto !important;
order: 1;
}
.contact-form .hs_submit {
margin-top: 25px;
}
.contact-info-right .hubspot-form-container .hs_submit {
margin-top: -25px;
}
/* Блок с текстом соглашения */
.contact-form .legal-consent-container,
.contact-info-right .hubspot-form-container .legal-consent-container {
width: auto !important;
order: 2;
/* Текст идет вторым */
margin-top: 70px;
margin-left: 37px;
/* Отступ от кнопки */
margin-bottom: 0 !important;
/* Убираем нижний отступ филдсета */
display: flex;
align-items: center;
margin: 0;
}
.contact-info-right .legal-consent-container {
bottom: 7px;
}
/* Стилизация кнопки */
.contact-form .hs-button,
.contact-info-right .hubspot-form-container input[type="submit"] {
width: 180px;
height: 50px;
background-color: #EE4500 !important;
border: none !important;
border-radius: 33px !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
color: #ffffff !important;
text-align: center;
cursor: pointer;
transition: opacity 0.3s;
}
.contact-info-right .hubspot-form-container input[type="submit"] {
margin-top: 0 !important;
}
.contact-form .hs-button:hover,
.contact-info-right .hubspot-form-container input[type="submit"]:hover {
opacity: 0.85;
/* Легкий эффект при наведении */
}
/* Стилизация юридического текста */
.contact-form .legal-consent-container p,
.contact-form .legal-consent-container span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 12px;
line-height: 150%;
color: #8796B2;
margin: 0;
}
.contact-form .legal-consent-container a {
color: #8796B2;
text-decoration: underline;
}
/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media (max-width: 768px) {
/* Сбрасываем грид в 1 колонку */
.contact-form .form-columns-2 {
grid-template-columns: 1fr;
gap: 45px;
/* Отступ между рядами сохраняем */
}
/* Футер: элементы друг под другом */
.contact-form .hs-form {
flex-direction: column;
}
.contact-form .hs_submit {
order: 1;
width: 100% !important;
}
.contact-form .hs-button {
width: 100%;
/* Кнопка на всю ширину на мобилке */
}
.contact-form .legal-consent-container {
order: 2;
width: 100% !important;
margin-left: 0;
margin-top: 20px;
justify-content: center;
text-align: center;
}
}
/* --- 404 Page Styles --- */
.error-hero {
position: relative;
width: 100%;
min-height: 100vh;
/* Минимум 100% высоты экрана */
background-color: #EC4824;
/* Фолбек цвет пока грузится видео */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Фон (видео) */
.error-hero__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.error-hero__bg video {
width: 100%;
height: 100%;
object-fit: cover;
/* Заполняет весь экран без искажений */
display: block;
}
/* Опциональное затемнение, если текст плохо читается на видео */
.error-hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
/* Контейнер контента */
.error-content {
position: relative;
z-index: 2;
/* Поверх видео */
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
}
/* Обертка для картинки и текста */
.error-content__wrapper {
position: relative;
/* Чтобы позиционировать текст внутри */
width: 732px;
max-width: 100%;
/* Адаптив для мобильных */
}
/* Картинка */
.error-content__img {
width: 100%;
height: auto;
display: block;
}
/* Текст поверх картинки */
.error-content__text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Строго по центру */
width: 100%;
padding: 0 20px;
/* Отступы, чтобы текст не прилипал к краям картинки на моб */
text-align: center;
box-sizing: border-box;
}
.error-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #FFFFFF;
margin: 0 0 24px 0;
/* Вниз 24 */
}
.error-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;
color: #FFFFFF;
margin: 0;
}
/* --- Адаптив для 404 --- */
@media (max-width: 600px) {
.error-title {
font-size: 32px;
margin-bottom: 16px;
}
.error-desc {
font-size: 16px;
}
}
/* --- Terms & Policies Section --- */
.terms-section {
background-color: #F5F5F7;
/* Фон базовый */
padding: 60px 0 120px 0;
/* Отступ сверху 60, снизу 120 */
width: 100%;
}
.terms-container {
max-width: 1250px;
/* Ширина 1250 */
margin: 0 auto;
padding: 0 35px;
/* Паддинги слева справа 35 */
position: relative;
}
/* Заголовок секции */
.terms-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
text-align: center;
color: #463C3E;
margin: 0 0 45px 0;
/* Вниз 45 */
}
/* --- Блок табов --- */
.terms-tabs {
display: flex;
justify-content: center;
/* Центруем табы */
gap: 40px;
/* Расстояние между кнопками (можно менять) */
margin-bottom: 60px;
/* Отступ от кнопок вниз 60 */
}
.terms-tab-btn {
background: none;
border: none;
cursor: pointer;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 100%;
text-align: center;
color: #463C3E;
padding: 0 10px 28px 10px;
/* Снизу паддинг 28 */
border-bottom: 5px solid transparent;
/* Полоска прозрачная по умолчанию */
transition: all 0.3s ease;
}
/* Ховер */
.terms-tab-btn:hover {
color: #EC4824;
border-bottom-color: rgba(236, 72, 36, 0.5);
/* #EC482480 (50% opacity) */
}
/* Активный таб */
.terms-tab-btn.tab-active {
color: #EC4824;
border-bottom-color: #EC4824;
}
/* --- Контент табов (Анимация) --- */
.terms-content-wrapper {
position: relative;
min-height: 200px;
/* Чтобы не прыгало при загрузке */
}
.terms-pane {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.terms-pane.tab-active {
display: block;
/* Анимация через keyframes для плавного появления display:block */
animation: fadeEffect 0.5s forwards;
}
@keyframes fadeEffect {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Типографика внутри контента (.terms-prose) --- */
.terms-prose {
width: 100%;
color: #463C3E;
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Базовый параграф (Medium 21px, LH 150%) */
.terms-prose p {
font-weight: 500;
font-size: 21px;
line-height: 150%;
margin: 0 0 21px 0;
/* Отступы между абзацами 21 */
}
/* Жирный текст (Bold 21px) */
.terms-prose strong,
.terms-prose b {
font-weight: 700;
}
/* Заголовки внутри текста (используем h3 или h4) */
.terms-prose h2,
.terms-prose h3,
.terms-prose h4 {
font-weight: 700;
font-size: 21px;
/* По ТЗ размер такой же, но жирный */
line-height: 55px;
/* Или 39px, как в описании */
margin: 0;
color: #463C3E;
}
/* Ссылки (Underline) */
.terms-prose a {
color: #463C3E;
/* Или #EC4824 если нужно */
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-decoration-skip-ink: auto;
transition: color 0.2s;
}
.terms-prose a:hover {
color: #EC4824;
}
/* Специальный класс для оранжевого текста */
.text-orange {
color: #EC4824 !important;
}
.terms-prose ul,
.terms-prose ol {
padding: 0 0 0 30px;
font-weight: 500;
font-size: 21px;
line-height: 150%;
margin: 0 0 21px 0;
}
.terms-prose ul li:not(:last-child),
.terms-prose ol li:not(:last-child) {
margin-bottom: 21px;
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
.terms-tabs {
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 40px;
border-bottom: none;
}
.terms-tab-btn {
width: 100%;
padding-bottom: 15px;
border-bottom-width: 2px;
}
.terms-prose p,
.terms-prose h3,
.terms-prose ul,
.terms-prose ol {
font-size: 18px;
/* Чуть меньше на телефоне */
}
}
/* --- New Reviews Section --- */
.reviews-slider-section {
padding: 0 0 120px;
overflow: hidden;
/* Скрываем переполнение страницы */
background-color: #F5F5F7;
/* Фон секции (предполагаемый) */
}
.reviews-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
.reviews-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
margin-bottom: 24px;
/* Вниз 24 */
}
.reviews-title__wrapper {
margin: 0 auto 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.reviews-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: start;
color: #EC4824;
margin: 0;
}
.reviews-title__logos {
display: flex;
align-items: center;
gap: 40px;
}
.reviews-title__logos img {
width: auto;
height: 45px;
max-width: 100%;
object-fit: contain;
}
.reviews-swiper {
padding-bottom: 80px !important;
/* ВАЖНО: Место для свисающего аватара и пагинации */
padding-left: 10px;
/* Небольшой отступ чтобы тени не резались */
padding-right: 10px;
}
body.page-template-template-contact-us .reviews-swiper {
padding-bottom: 90px !important;
}
/* Слайд (растягиваем по высоте) */
.reviews-swiper .swiper-slide {
height: auto;
/* Чтобы Flexbox растянул их */
display: flex;
/* Для растягивания контента внутри */
}
/* Карточка */
.reviews-card {
position: relative;
background: #FFFFFF;
border-radius: 41px;
/* Паддинг: верх 58, право 36, низ 124, лево 36 */
padding: 58px 36px 124px 36px;
width: 100%;
box-sizing: border-box;
/* box-shadow: 0px 10px 30px rgba(0,0,0,0.05); опционально */
}
/* Верхняя кавычка */
.reviews-card .quote-top {
position: absolute;
top: 30px;
left: 25px;
width: 33px;
height: auto;
}
/* Текстовая обертка */
.reviews-card__text-wrap {
position: relative;
/* Чтобы нижняя кавычка позиционировалась относительно этого блока, или карточки */
margin-bottom: 30px;
/* Вниз 30 до имени */
}
/* Текст отзыва */
.reviews-card__text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 39px;
text-align: center;
color: #463C3E;
margin: 0;
position: relative;
z-index: 2;
}
/* Нижняя кавычка (закрывающая) */
.reviews-card .quote-bottom {
position: absolute;
right: -10px;
/* 25px от правого края карточки примерно */
top: 100%;
/* По нижней части текста */
width: 50px;
height: auto;
z-index: 1;
}
/* Инфо (Имя и Роль) */
.reviews-card__info {
text-align: center;
}
.reviews-card__name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 150%;
text-align: center;
color: #EE4500;
margin: 0;
}
.reviews-card__role {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 150%;
text-align: center;
color: #8796B2;
}
/* Аватар */
.reviews-card__avatar {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
border-radius: 50%;
overflow: hidden;
}
.reviews-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Pagination */
.reviews-swiper .reviews-pagination {
position: absolute;
bottom: 0;
/* Прибиваем к низу контейнера swiper (у него есть padding-bottom) */
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 34px !important;
}
.reviews-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #D9D9D9;
opacity: 1;
margin: 0 !important;
border-radius: 50%;
}
.reviews-swiper .swiper-pagination-bullet-active {
background-color: #EC4824;
/* Желтый активный */
}
/* --- Адаптив --- */
@media (max-width: 1024px) {
.reviews-card__text {
font-size: 20px;
line-height: 1.4;
}
.reviews-card__name {
font-size: 26px;
}
.reviews-card__role {
font-size: 20px;
}
}
@media (max-width: 600px) {
.reviews-card {
padding: 40px 20px 100px 20px;
}
.reviews-card__avatar {
width: 120px;
height: 120px;
bottom: -30px;
}
.quote-top {
top: 20px;
left: 20px;
width: 25px;
}
}
/* --- Partnerships Section --- */
.partnerships-section {
background-color: #F5F5F7;
padding: 60px 0 120px;
}
.container-xxl {
max-width: 1700px;
margin: 0 auto;
padding-inline: 35px;
}
.partnerships-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 100%;
text-align: center;
margin-bottom: 60px;
}
.partnerships-grid {
display: grid;
grid-template-columns: 130fr 130fr 77fr;
grid-template-rows: repeat(2, 1fr);
gap: 20px;
}
.partnerships-grid.partnerships-grid--two {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.partnership-card {
background-color: #FFFFFF;
padding: 33px 30px 55px;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
background-size: cover;
background-position: center;
}
.partnership-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #EE4500;
margin-bottom: 30px;
}
.partnership-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 150%;
max-width: 477px;
text-align: center;
}
.partnerships-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 74px;
}
.partnerships-buttons a {
width: 300px;
height: 50px;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
background-color: #EE4500;
color: #fff;
text-transform: uppercase;
}
.partnerships-buttons a:hover {
background-color: #cf3a00;
}
/* --- Адаптация --- */
@media (max-width: 1024px) {
.partnerships-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
}
@media (max-width: 768px) {
.partnerships-title {
font-size: 32px;
margin-bottom: 40px;
}
.partnerships-grid,
.partnerships-grid.partnerships-grid--two {
grid-template-columns: 1fr;
}
.partnership-heading {
font-size: 28px;
margin-bottom: 20px;
}
.partnership-text {
font-size: 15px;
}
}
/* --- New Video & Quote Section Styles --- */
.video-quote-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 80px;
width: 100%;
/* Если нужно убрать лишние отступы у body/main */
box-sizing: border-box;
}
/* Контейнер: 1155px + по 35px паддинг с боков */
.vq-container {
max-width: 1225px;
margin: 0 auto;
padding: 0 35px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* --- Блок видео --- */
.vq-video-wrapper {
width: 100%;
aspect-ratio: 1155 / 650;
/* Пропорция картинки */
background-color: #cccccc;
/* Цвет фона пока грузится картинка */
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* Если нужно скругление, добавь border-radius */
}
/* Кнопка Play */
.vq-play-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
width: 160px;
height: 160px;
transition: transform 0.3s ease;
/* Сброс стандартных стилей кнопки */
display: flex;
align-items: center;
justify-content: center;
}
.vq-play-btn:hover {
transform: scale(1.05);
}
.vq-play-btn svg {
width: 100%;
height: 100%;
display: block;
}
/* --- Блок цитаты --- */
.vq-content-wrapper {
margin-top: 70px;
position: relative;
}
.vq-quote-block {
position: relative;
margin-bottom: 45px;
}
.vq-quote-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 36px;
line-height: 55px;
letter-spacing: 0%;
color: #463C3E;
margin: 0;
position: relative;
z-index: 2;
}
/* Кавычки */
.vq-quote-decor {
position: absolute;
z-index: 1;
pointer-events: none;
}
.vq-quote-decor.left {
width: 68px;
top: -60px;
left: -80px;
}
.vq-quote-decor.right {
width: 100px;
/* 100% высоты текста + 50px отступ */
top: calc(100% + 50px);
right: 65px;
}
/* --- Блок автора --- */
.vq-author-block {
display: flex;
flex-direction: column;
}
.vq-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.2;
color: #EE4500;
margin-bottom: 10px;
}
.vq-role {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.2;
color: #8796B2;
}
/* --- Адаптив --- */
@media (max-width: 1024px) {
.vq-quote-decor.left {
left: -40px;
width: 50px;
}
.vq-quote-decor.right {
right: 0;
top: 100%;
}
}
@media (max-width: 768px) {
.video-quote-section {
padding-bottom: 50px;
}
.vq-container {
padding: 0 20px;
}
.vq-play-btn {
width: 80px;
height: 80px;
}
.vq-content-wrapper {
margin-top: 40px;
}
.vq-quote-text {
font-size: 24px;
line-height: 34px;
}
.vq-quote-block {
margin-bottom: 30px;
}
.vq-quote-decor.left {
top: -30px;
left: -10px;
width: 40px;
opacity: 0.5;
}
.vq-quote-decor.right {
width: 60px;
top: 100%;
margin-top: 10px;
right: 0;
opacity: 0.5;
}
.vq-name {
font-size: 24px;
}
.vq-role {
font-size: 18px;
}
}
/* Bacome Section */
.become-section {
background-color: #F5F5F7;
padding: 0 0 120px;
}
.become-container {
max-width: 1020px;
margin: 0 auto;
padding: 0 20px;
}
.become-section .testi-title {
margin-bottom: 0;
}
.become-section .testi-header-container {
margin-bottom: 60px;
}
/* --- Insights Scroll Section (Sticky Scrollytelling) --- */
.insights-section {
background-color: #F5F5F7;
padding-top: 80px;
padding-bottom: 0;
position: relative;
z-index: 5;
}
.insights-scroll-wrapper {
/* Высота задается инлайново в HTML (400vh), но на всякий случай тут база */
position: relative;
width: 100%;
}
.insights-sticky-viewport {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.insights-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
max-width: 1400px;
width: 100%;
padding: 0 35px;
align-items: center;
}
/* --- Left Column: Text (Simple Fade) --- */
.insights-col-text {
position: relative;
height: 400px;
/* Фиксируем высоту области текста */
display: flex;
align-items: center;
}
.insight-text-item {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
/* Только центрирование, без движения при анимации */
width: 100%;
/* Fade effect only */
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.insight-text-item.active {
opacity: 1;
visibility: visible;
}
.insight-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 110%;
color: #463C3E;
margin-bottom: 24px;
}
.insight-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 160%;
color: #463C3E;
margin-bottom: 40px;
max-width: 450px;
}
.insight-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 190px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
transition: background-color 0.3s;
}
.insight-btn:hover {
background-color: #cc3b00;
}
/* --- Right Column: Image Stacking Logic --- */
.insights-col-img {
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
/* Перспектива для красоты, хотя мы используем 2D scale */
perspective: 1000px;
}
.insight-layers-container {
position: relative;
width: 100%;
height: 100%;
}
.insight-layer {
position: absolute;
top: 50%;
left: 50%;
width: auto;
max-width: 100%;
max-height: 100%;
/* ДЕФОЛТНОЕ состояние (оно же Future) */
/* Это те картинки, до которых мы еще НЕ доскроллили (они лежат внизу стопкой) */
transform: translate(-50%, 20%) scale(0.5);
opacity: 0;
z-index: 0;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 1. АКТИВНЫЙ (Центр) */
.insight-layer.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
z-index: 10;
}
/* 2. СЛЕДУЮЩИЙ (Снизу, чуть меньше) */
.insight-layer.next {
opacity: 0.6;
transform: translate(-50%, -10%) scale(0.8);
z-index: 5;
}
/* 3. ПРЕДЫДУЩИЙ (Сверху, уходит) */
.insight-layer.prev {
opacity: 0.8;
transform: translate(-50%, -90%) scale(0.4);
z-index: 20;
}
/* 4. ПРОЙДЕННЫЙ (НОВЫЙ КЛАСС) */
/* Это те, что были prev, но мы скроллим дальше. Они должны улетать ВВЕРХ */
.insight-layer.past {
opacity: 0;
/* Уводим еще выше, чем prev (-80% -> -150%) */
transform: translate(-50%, -150%) scale(0.3);
z-index: 0;
}
/* --- Mobile Adaptation --- */
@media (max-width: 1024px) {
.insights-scroll-wrapper {
height: auto !important;
}
.insights-sticky-viewport {
position: static;
height: auto;
display: block;
padding-bottom: 80px;
}
.insights-grid {
display: flex;
flex-direction: column-reverse;
gap: 40px;
}
.insights-col-text {
display: block;
height: auto;
}
.insight-text-item {
position: relative;
transform: none;
top: auto;
left: auto;
opacity: 1;
visibility: visible;
margin-bottom: 60px;
}
.insight-text-item:last-child {
margin-bottom: 0;
}
.insights-col-img {
height: 350px;
}
/* На мобиле показываем просто все картинки в стопке или только активную */
.insight-layer {
display: none;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
z-index: 1;
}
.insight-layer.active {
display: block;
}
}
/* --- Risk Section --- */
.risk-section {
background-color: #F5F5F7;
width: 100%;
padding-top: 0;
padding-bottom: 100px;
/* Паддинг снизу 100 */
}
.risk-container {
max-width: 1020px;
/* Ширина контента 1020 */
margin: 0 auto;
padding: 0 20px;
/* Безопасные отступы */
}
.risk-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
/* Или #EE4500, в ТЗ для полосок указан он, но для главной линии обычно этот */
margin-bottom: 60px;
/* От полоски вниз 60 */
}
.risk-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* 50% каждый */
gap: 60px;
/* Гап 60 */
align-items: start;
}
/* --- Left Column --- */
.risk-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 40px;
line-height: 100%;
letter-spacing: 0%;
color: #463C3E;
margin: 0;
}
.risk-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 21px;
line-height: 150%;
letter-spacing: 0%;
color: #463C3E;
margin-top: 25px;
/* Отступ сверху 25 */
margin-bottom: 0;
}
/* --- Right Column --- */
.risk-list-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 21px;
line-height: 150%;
letter-spacing: 0%;
color: #EE4500;
/* Оранжевый #EE4500 */
margin: 0 0 20px 0;
/* Вниз 20 */
}
.risk-list {
display: flex;
flex-direction: column;
gap: 18px;
/* Между элементами списка 18 */
}
.risk-item {
display: flex;
align-items: flex-start;
/* Выравнивание по верхнему краю */
}
.risk-marker {
width: 5px;
height: 26px;
/* 26 в высоту */
background-color: #EE4500;
border-radius: 5px;
/* Радиус 5 */
flex-shrink: 0;
margin-right: 20px;
/* От полоски вправо 20 */
/* Оптическая коррекция: так как line-height у текста 150% (31.5px),
а полоска 26px, чтобы они визуально были "по верху" текста,
полоску можно сдвинуть на пару пикселей вниз,
либо оставить margin-top: 0 для строгого выравнивания.
Обычно ставят небольшой отступ, чтобы центровать относительно первой строки. */
margin-top: 3px;
}
.risk-item-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 21px;
line-height: 150%;
letter-spacing: 0%;
color: #463C3E;
}
/* --- Mobile Adaptation --- */
@media (max-width: 1024px) {
.risk-grid {
grid-template-columns: 1fr;
/* Одна колонка */
gap: 40px;
}
.risk-title {
font-size: 32px;
}
.risk-desc,
.risk-list-title,
.risk-item-text {
font-size: 18px;
}
.risk-marker {
height: 22px;
/* Чуть меньше для мобилки */
margin-top: 4px;
}
}
/* --- Secure Section --- */
.secure-section {
background-color: #F5F5F7;
width: 100%;
padding-top: 0;
padding-bottom: 100px;
/* Паддинг снизу 100 */
}
.secure-header-container {
max-width: 1020px;
margin: 0 auto;
padding: 0 20px;
position: relative;
/* Для абсолютного позиционирования бейджа */
margin-bottom: 65px;
/* Отступ от блока заголовка вниз 65 */
}
/* Переиспользуем стиль полоски, но уточним на всякий случай, если нужно специфично */
.secure-header-container .testi-divider {
width: 100%;
height: 5px;
background-color: #EC4824;
}
/* Бейдж справа от полоски */
.secure-badge {
position: absolute;
left: 100%;
top: -40px;
width: auto;
height: auto;
max-height: 90px;
z-index: 2;
}
.secure-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 40px;
/* Как в предыдущих секциях для заголовков */
line-height: 100%;
color: #EC4824;
/* Оранжевый */
margin-top: 40px;
text-align: left;
/* В ТЗ не указано, но обычно слева, как и полоска. Если нужно по центру - напиши */
}
/* Контейнер грида 1540 */
.secure-grid-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
.secure-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4 колонки */
gap: 20px;
/* Гап 20 */
}
.secure-grid--five {
grid-template-columns: repeat(5, 1fr);
}
/* Карточка */
.secure-card {
background-color: #FFFFFF;
min-height: 596px;
/* Минимум высота 596 */
padding: 30px;
/* Паддинг 30 */
display: flex;
flex-direction: column;
align-items: center;
/* Выравнивание контента по центру */
/* justify-content: flex-start; - текст сверху */
position: relative;
/* Для абс. позиционирования фоновой картинки */
box-sizing: border-box;
overflow: hidden;
/* Чтобы картинка не вылезала, если что */
}
.secure-grid--five .secure-card {
min-height: 440px;
}
.secure-card-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 36px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #EE4500;
margin-top: 35px;
/* Отступ сверху 35 */
margin-bottom: 25px;
/* Снизу 25 */
position: relative;
z-index: 2;
/* Текст поверх картинки */
}
.secure-grid--five .secure-card-title {
font-size: 30px;
}
.secure-card-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 16px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;
color: #463C3E;
max-width: 300px;
/* Чтобы текст не был слишком широким на больших экранах */
position: relative;
z-index: 2;
}
/* Фоновая картинка внутри карточки */
.secure-card-bg {
position: absolute;
bottom: 70px;
/* Снизу 70px */
right: -50px;
/* Позиция по правой стороне */
width: 220px;
height: 220px;
object-fit: contain;
object-position: right center;
/* Contain */
z-index: 1;
/* Под текстом */
opacity: 1;
/* Если нужно сделать бледнее, можно поставить 0.5 */
}
.secure-grid--five .secure-card-bg {
bottom: 40px;
width: 150px;
height: 150px;
}
/* --- Mobile Adaptation --- */
@media (max-width: 1200px) {
.secure-grid,
.secure-grid--five {
grid-template-columns: repeat(2, 1fr);
/* 2 колонки на планшете */
gap: 30px;
}
.secure-card {
min-height: 450px;
/* Чуть меньше высота на планшете */
}
}
@media (max-width: 768px) {
.secure-grid,
.secure-grid--five {
grid-template-columns: 1fr;
/* 1 колонка на мобильном */
gap: 40px;
}
.secure-header-container {
margin-bottom: 40px;
}
.secure-badge {
/* На мобильном бейдж может уезжать за экран, поправим */
right: 0;
top: -50px;
transform: scale(0.8);
}
.secure-main-title {
font-size: 32px;
}
.secure-card {
min-height: auto;
/* На мобилке высота по контенту + отступ под картинку */
padding-bottom: 250px;
/* Место под картинку */
}
.secure-card-bg {
/* На мобильном можно центрировать картинку снизу */
right: 50%;
transform: translateX(50%);
bottom: 30px;
}
}
/* --- New Case Studies Section (Unique Styles) --- */
.studies-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 120px;
width: 100%;
}
.studies-header-container {
max-width: 1020px;
margin: 0 auto;
padding: 0 20px;
margin-bottom: 60px;
}
/* Обертка шириной 1540 (1470 + 35padding) */
.studies-wrapper {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
.studies-swiper {
width: 100%;
overflow: visible !important;
padding-bottom: 80px;
/* Место под пагинацию */
}
/* Слайд: белый фон, без теней/контура */
.studies-slide {
background-color: #FFFFFF;
padding: 45px 45px 55px 45px;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: auto;
border-radius: 0;
}
/* Картинка */
.studies-img {
width: 100%;
aspect-ratio: 628 / 393;
object-fit: cover;
display: block;
margin-bottom: 50px;
/* вниз 50 */
}
.studies-content {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
}
/* Категория */
.studies-cat {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
/* SemiBold */
font-size: 16px;
line-height: 150%;
color: #EE4500;
text-transform: uppercase;
/* Обычно категории капсом, но если нужно строго как написал (нет Caps), убери это св-во */
margin-bottom: 24px;
/* вниз 24 */
}
/* Полоска */
.studies-divider {
width: 35px;
height: 5px;
background-color: #8796B2;
margin-bottom: 13px;
/* вниз 13 */
}
/* Заголовок */
.studies-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 40px;
line-height: 100%;
color: #463C3E;
margin: 0 0 17px 0;
/* вниз 17 */
}
/* Текст */
.studies-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
/* Regular */
font-size: 24px;
line-height: 150%;
color: #463C3E;
margin: 0 0 24px;
}
/* Список (Стили как у текста) */
.studies-list {
list-style: none;
padding: 0;
/* "только сверху отступ в одну строчку" = margin-top от параграфа */
margin: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 0;
}
.studies-list li {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
/* Regular */
font-size: 24px;
line-height: 150%;
color: #463C3E;
display: flex;
align-items: flex-start;
}
/* Плюсик */
.studies-list li .plus {
color: #EE4500;
font-weight: 400;
/* "Отступ до текста - один пробел" */
margin-right: 0.4em;
flex-shrink: 0;
}
/* Кнопка */
.studies-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 48px;
/* 180 на 48 */
background-color: #FFFFFF;
/* фон белый */
border: 1px solid #EE4500;
/* контур */
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
/* ExtraBold */
font-size: 16px;
line-height: 150%;
color: #463C3E;
/* Текст кнопки обычно черный или бренда. Если нужно оранжевый, поставь #EE4500 */
text-align: center;
margin-top: auto;
/* вниз 25 */
text-decoration: none;
text-transform: uppercase;
/* Обычно кнопки капсом, если нет - убери */
transition: all 0.3s ease;
}
.studies-btn:hover {
background-color: #EE4500;
color: #FFFFFF;
}
/* --- Пагинация (Оранжевая) --- */
.studies-swiper .studies-pagination {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 34px !important;
}
.studies-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #D9D9D9;
opacity: 1;
margin: 0 !important;
border-radius: 50%;
transition: background-color 0.3s ease;
}
/* Активный буллет - оранжевый */
.studies-swiper .swiper-pagination-bullet-active {
background-color: #EE4500;
}
/* Адаптив */
@media (max-width: 1024px) {
.studies-slide {
padding: 30px;
}
.studies-title {
font-size: 32px;
}
.studies-text,
.studies-list li {
font-size: 20px;
}
}
/* --- Playbook Page Styles --- */
/* Hero */
.playbook-hero {
height: 230px;
width: 100%;
/* Градиент по ТЗ */
background: linear-gradient(72.44deg, #F9CEA8 0%, #E9EDE6 100%);
border-bottom: 10px solid #EC4824;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* Чтобы картинка не вылезала */
}
/* Картинка в Hero (абсолют) */
.playbook-hero-img {
position: absolute;
width: 367px;
height: 367px;
left: 5vw;
top: 0;
/* Центруем по вертикали */
z-index: 1;
/* Ниже текста */
object-fit: cover;
/* Если картинка квадратная, border-radius не просили, но если нужно - добавь */
}
/* Контент в Hero */
.playbook-hero-content {
position: relative;
z-index: 2;
/* Выше картинки */
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.playbook-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
letter-spacing: 0%;
color: #463C3E;
/* Нижняя часть черная по дефолту */
margin: 0 0 24px 0;
/* Отступ 24 вниз */
}
.playbook-title .text-orange {
color: #EE4500;
/* Верхняя часть оранжевая */
}
.playbook-date {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 150%;
color: #8796B2;
}
/* Content Section */
.playbook-section {
background-color: #F5F5F7;
padding: 100px 0 120px 0;
width: 100%;
}
/* Контейнер 1640px + паддинги */
.playbook-container {
max-width: 1710px;
/* 1640 + 35left + 35right */
margin: 0 auto;
padding: 0 35px;
box-sizing: border-box;
}
.playbook-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* 50% на 50% */
gap: 40px;
align-items: start;
}
/* Left Column */
.playbook-col-left {
display: flex;
flex-direction: column;
gap: 22px;
/* Гап для текста */
}
.playbook-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 100%;
color: #463C3E;
margin: 0;
}
.playbook-text {
display: flex;
flex-direction: column;
gap: 22px;
}
.playbook-text p {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin: 0;
}
/* Bottom Block (Img + Tags) */
.playbook-bottom-block {
margin-top: 20px;
/* Доп отступ от текста, если нужно */
}
.playbook-content-img {
width: 100%;
max-width: 360px;
aspect-ratio: 363 / 218;
border-radius: 31px;
object-fit: cover;
display: block;
}
/* Right Column */
.playbook-col-right {
width: 100%;
}
.playbook-form-box {
background-color: #FFFFFF;
border-radius: 36px;
padding: 54px;
width: 100%;
box-sizing: border-box;
}
.playbook-form-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 100%;
color: #EE4500;
margin: 0 0 50px 0;
/* Вниз 50 */
}
.playbook-buttons {
margin-top: 25px;
}
.playbook-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 300px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 70;
font-size: 16px;
line-height: 150%;
text-decoration: none;
text-transform: uppercase;
transition: all .3s ease;
}
.playbook-btn:hover {
opacity: .8;
}
/* --- Playbook Video Block Styles --- */
/* Обертка для видео (фон + позиционирование) */
.playbook-video-wrapper {
width: 100%;
aspect-ratio: 810 / 494;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #cccccc;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
overflow: hidden;
margin-bottom: 25px;
}
/* Кнопка Play */
.playbook-play-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
/* Размер кнопки.
Сделал чуть меньше (120px) чем в полноэкранном блоке (160px),
так как эта колонка у нас уже. */
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.playbook-play-btn svg {
width: 100%;
height: 100%;
display: block;
/* Тень для кнопки, чтобы была видна на светлом фоне */
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.2));
}
.playbook-play-btn:hover {
transform: scale(1.1);
/* Легкое увеличение при наведении */
}
/* Адаптация под мобильные */
@media (max-width: 1024px) {
.playbook-grid {
grid-template-columns: 1fr;
/* Одна колонка */
}
.playbook-hero-img {
left: -50px;
/* Сдвигаем на мобилке, чтобы не перекрывала текст полностью */
opacity: 0.3;
/* Или делаем полупрозрачной */
}
.playbook-form-box {
padding: 30px;
}
.playbook-video-wrapper {
border-radius: 20px;
/* Чуть меньше скругление на мобильных */
margin-bottom: 30px;
}
.playbook-play-btn {
width: 80px;
/* Уменьшаем кнопку на мобильных */
height: 80px;
}
}
/* --- Product Feature Intro Modification --- */
/* Центрирование заголовков */
.product-intro-mod .intro-header-group {
text-align: center;
}
/* Надзаголовок (THE PROBLEM) */
.product-intro-mod .intro-suptitle {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 100%;
text-transform: uppercase;
color: #EE4500;
margin-bottom: 17px;
/* Отступ до заголовка */
}
/* Модификация существующего заголовка (Why Cyabra?) */
.product-intro-mod .about-section-title {
margin-bottom: 24px;
/* Отступ до текста */
}
/* Текстовый блок */
.product-intro-mod .intro-text-block {
max-width: 900px;
/* Ограничим ширину строки */
margin: 0 auto 34px auto;
/* Центр + Отступ до кнопки */
}
.product-intro-mod .intro-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
text-align: center;
color: #463C3E;
margin: 0;
}
/* Обертка для кнопки */
.product-intro-mod .intro-btn-wrapper {
display: flex;
justify-content: center;
/* У баннера (about-cta-banner) уже есть margin-top: 70px в style.css */
}
/* Оранжевая кнопка */
.product-intro-mod .intro-orange-btn {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.product-intro-mod .intro-orange-btn:hover {
background-color: #CC3B00;
transform: translateY(-2px);
}
/* Кнопка Play (SVG) */
.product-intro-mod .feature-play-btn {
width: 120px;
height: 120px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.product-intro-mod .feature-play-btn svg {
width: 100%;
height: 100%;
display: block;
/* Можно добавить тень, если фон картинки светлый */
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}
.product-intro-mod .feature-play-btn:hover {
transform: scale(1.1);
}
/* --- Feature Steps Section (New) --- */
.feature-steps-section {
background-color: #F5F5F7;
padding-top: 0;
padding-bottom: 80px;
width: 100%;
}
.feature-steps-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
box-sizing: border-box;
}
/* Линия */
.feature-steps-divider {
width: 100%;
height: 5px;
background-color: #EE4500;
margin-bottom: 48px;
transform-origin: left;
/* Для анимации reveal-line */
}
/* Заголовок секции */
.feature-steps-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: center;
color: #463C3E;
margin: 0 0 120px 0;
}
/* --- Step Item (Grid Wrapper) --- */
.feature-step-item {
display: grid;
/* По дефолту: Текст (588) | Картинка (864) */
grid-template-columns: 588fr 864fr;
gap: 50px;
align-items: flex-start;
/* Центруем вертикально */
margin-bottom: 120px;
}
.feature-step-item:last-child {
margin-bottom: 0;
}
/* Модификатор для четных (Реверс) */
.feature-step-item.reversed {
/* Картинка (864) | Текст (588) */
grid-template-columns: 864fr 588fr;
}
/* --- Колонки --- */
.feature-step-text-col {
display: flex;
flex-direction: column;
align-items: flex-start;
order: 1;
}
.feature-step-img-col {
width: 100%;
height: auto;
aspect-ratio: 864 / 544;
/* На всякий случай */
position: relative;
border: 1px solid #8796B2;
border-radius: 33px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.5);
/* #FFFFFF80 */
order: 2;
}
.feature-step-item.reversed .feature-step-text-col {
order: 2;
}
.feature-step-item.reversed .feature-step-img-col {
order: 1;
}
.step-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- Элементы внутри текста --- */
.step-icon {
width: 98px;
height: 98px;
object-fit: contain;
margin-bottom: 27px;
}
.step-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 50px;
color: #EE4500;
margin: 0 0 22px 0;
}
.step-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin-bottom: 22px;
}
.step-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin: 0 0 43px 0;
}
/* Кнопка с иконкой */
.step-btn {
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
.step-btn:hover {
opacity: 0.7;
}
.step-btn-icon {
width: 28px;
height: 28px;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.step-btn-icon svg {
width: 100%;
height: 100%;
}
.step-btn-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
/* Medium */
font-size: 11px;
line-height: 150%;
color: #EE4500;
text-transform: uppercase;
/* Обычно такие кнопки капсом */
}
/* --- Feature Bottom CTA (Button with Lines) --- */
.feature-bottom-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 45px;
/* Отступ 45px с каждой стороны от кнопки */
margin-top: 80px;
/* Отступ от последнего шага (как везде) */
width: 100%;
}
.feature-bottom-line {
height: 5px;
background-color: #EE4500;
flex-grow: 1;
/* Растягивается на всю оставшуюся ширину */
border-radius: 2px;
/* Опционально: чуть скруглить края линии */
}
/* Стили кнопки (копия .intro-orange-btn) */
.feature-bottom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 50px;
flex-shrink: 0;
/* Чтобы кнопка не сжималась */
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold */
font-size: 16px;
line-height: 150%;
text-decoration: none;
text-transform: uppercase;
/* Обычно такие кнопки капсом */
transition: background-color 0.3s ease, transform 0.3s ease;
}
.feature-bottom-btn:hover {
background-color: #CC3B00;
transform: translateY(-2px);
}
/* --- Mobile / Tablet Adaptation --- */
@media (max-width: 1200px) {
.feature-step-item,
.feature-step-item.reversed {
grid-template-columns: 1fr;
/* Одна колонка */
gap: 50px;
}
/* Меняем порядок на мобильном: Картинка сверху, текст снизу (опционально) */
.feature-step-img-col {
order: -1;
min-height: 300px;
}
.feature-step-text-col {
padding: 0 20px;
}
.feature-steps-title {
font-size: 32px;
margin-bottom: 60px;
}
.step-title {
font-size: 28px;
line-height: 1.2;
}
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
.feature-bottom-cta {
gap: 20px;
/* Уменьшаем отступ на мобильных */
margin-top: 60px;
}
.feature-bottom-btn {
width: 200px;
/* Чуть компактнее на мобильных */
font-size: 14px;
}
}
/* --- Platform Custom Grid Section --- */
.platform-grid-section {
padding-top: 0;
padding-bottom: 120px;
background-color: transparent;
/* или #f5f5f5, как фон страницы */
}
/* Контейнер 1470px + 35px по бокам */
.container-custom {
max-width: 1540px;
/* 1470 + 35 + 35 */
width: 100%;
margin: 0 auto;
padding: 0 35px;
box-sizing: border-box;
}
/* Оранжевая линия */
.grid-top-line {
width: 100%;
height: 5px;
background-color: #EE4500;
margin-bottom: 80px;
transform-origin: left;
/* Для анимации reveal-line */
}
/* Сетка 4 колонки */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
row-gap: 50px;
}
/* --- Карточка --- */
.feature-card {
position: relative;
background-color: #FFFFFF;
/* Паддинги: верх 232, бока 24, низ 30 */
padding: 232px 12px 30px 12px;
/* Бордер прозрачный по умолчанию */
border: 5px solid transparent;
box-sizing: border-box;
/* Чтобы бордер не увеличивал размер блока */
transition: all 0.8s ease-out;
cursor: default;
}
/* Ховер эффект: бордер */
.feature-card:hover {
border-color: #EE4500;
}
/* --- Картинка (абсолютное позиционирование) --- */
.feature-card__img-wrapper {
position: absolute;
top: -34px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
/* Если картинка слишком широкая, ограничим */
max-width: 90%;
}
.feature-card__img {
display: block;
/* Размеры картинки зависят от твоего дизайна.
Обычно в таких блоках это 150-200px.
Если картинка SVG/PNG без фона — идеально. */
width: auto;
height: auto;
max-height: 200px;
/* На всякий случай, чтобы не налезло на текст */
}
/* --- Типографика --- */
.feature-card__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 100%;
text-align: center;
color: #EE4500;
margin: 0 0 24px 0;
}
.feature-card__text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 150%;
text-align: center;
color: #463C3E;
/* Или твой основной цвет текста */
margin: 0;
}
/* --- Плюс в углу --- */
.feature-card__plus {
position: absolute;
bottom: 10px;
right: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 200;
/* ExtraLight */
font-size: 50px;
line-height: 100%;
/* Чтобы не было лишних отступов */
color: #EE4500;
opacity: 0;
transform: translateY(10px);
transition: all 0.8s ease-out;
pointer-events: none;
/* Чтобы не мешал кликам */
}
/* Показ плюса при ховере на всю карточку */
.feature-card:hover .feature-card__plus {
opacity: 1;
transform: translateY(0);
}
/* --- Адаптив --- */
/* Планшет (2 колонки) */
@media (max-width: 1200px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Мобильный (1 колонка) */
@media (max-width: 768px) {
.container-custom {
padding: 0 20px;
/* Чуть меньше отступы на моб */
}
.grid-top-line {
margin-bottom: 60px;
/* Чуть меньше отступ */
}
.features-grid {
grid-template-columns: 1fr;
row-gap: 60px;
/* Увеличим отступ между карточками, т.к. картинка торчит */
}
.feature-card {
padding-top: 180px;
/* На мобильном можно чуть уменьшить паддинг если картинка меньше */
}
}
/* --- Process Collage Section --- */
.process-collage-section {
width: 100%;
/* Фон: наложение желтого оттенка поверх сложного градиента */
background:
linear-gradient(0deg, rgba(255, 185, 1, 0.05), rgba(255, 185, 1, 0.05)),
linear-gradient(70.03deg, #F9CFA9 6.62%, #FCF7D6 93.38%);
/* Паддинги по ТЗ: 50 100 90 */
padding: 50px 100px 90px 100px;
box-sizing: border-box;
position: relative;
overflow: hidden;
/* Обрезаем, если что-то вылетит за край */
}
/* --- Главный заголовок секции --- */
.collage-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: center;
color: #463C3E;
margin-top: 0;
margin-bottom: 60px;
/* Отступ от заголовка до контента */
position: relative;
z-index: 10;
}
/* --- Канвас (область для absolute элементов) --- */
.process-canvas {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
/* Высота секции. Обязательно подбери это значение,
когда расставишь все элементы, чтобы низ не обрезался. */
min-height: 950px;
}
/* --- Картинки --- */
.collage-img-wrapper {
position: absolute;
z-index: 1;
/* Лежат под текстом */
}
.collage-img-wrapper img {
display: block;
width: 100%;
/* Растягиваем на ширину обертки */
height: auto;
/* Легкая тень в тон бренда */
}
/* --- Текстовые блоки --- */
.collage-text-block {
position: absolute;
z-index: 2;
/* Поверх картинок */
width: 300px;
/* Фиксируем ширину текста, чтобы он красиво переносился */
}
/* Цифра (01, 02...) */
.collage-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 150%;
color: #463C3E;
margin-bottom: 8px;
/* Вниз 8 */
}
/* Заголовок этапа */
.collage-item-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 150%;
color: #EE4500;
/* Оранжевый */
margin: 0;
/* Вниз 0 */
}
/* Описание */
.collage-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin-top: 0;
}
/* --- Адаптив (Мобильный) --- */
@media (max-width: 1200px) {
.process-collage-section {
padding: 40px 20px;
}
.collage-main-title {
font-size: 28px;
margin-bottom: 40px;
}
/* На планшетах и телефонах отключаем absolute позиционирование */
.process-canvas {
min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.collage-img-wrapper,
.collage-text-block {
position: relative !important;
/* Сбрасываем top/left */
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 400px;
text-align: center;
}
.collage-img-wrapper {
margin-bottom: -20px;
/* Чуть прижимаем картинку к тексту */
}
}
/* --- We Cover Section (UPDATED) --- */
.we-cover-section {
background-color: #F5F5F7;
padding: 120px 0;
/* Отступ 120 сверху и снизу */
width: 100%;
overflow: hidden;
/* На случай, если картинка вылезает за пределы экрана */
}
/* Контейнер: 1470px + 35px по бокам */
.we-cover-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
}
/* Желтая рамка */
.we-cover-box {
position: relative;
width: 100%;
height: 540px;
/* Фиксированная высота */
border: 3px solid #FDB813;
/* Цвет и толщина по ТЗ */
border-radius: 53px;
/* Радиус */
/* Отступ внутри: 95 сверху и по бокам */
padding: 95px 95px 0 95px;
box-sizing: border-box;
background-color: transparent;
/* Фон прозрачный */
/* overflow: visible; - это дефолт, но важно помнить, чтобы картинка торчала */
}
/* Заголовок "We Cover" */
.we-cover-title {
position: absolute;
top: -18px;
/* Половина от font-size (36px), чтобы встать ровно на линию */
left: 50%;
transform: translateX(-50%);
background-color: #F5F5F7;
/* Цвет фона секции, чтобы перекрыть линию */
padding: 0 40px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: center;
color: #463C3E;
/* Черный (или #4A4A4A) */
margin: 0;
white-space: nowrap;
z-index: 5;
}
/* --- Иконки --- */
.we-cover-icons-row {
display: flex;
justify-content: space-between;
/* Space Between по ТЗ */
align-items: flex-start;
gap: 30px;
/* Минимальный гап */
width: 100%;
margin-bottom: auto;
/* Толкаем текст вниз, если используем flex-direction: column для бокса, но тут у нас фикс высота */
}
/* Стили иконки */
.social-icon {
width: 90px;
height: 90px;
flex-shrink: 0;
/* Не сжимать */
display: flex;
align-items: center;
justify-content: center;
color: #EE4500;
background-color: transparent;
transition: all 0.3s ease;
}
.social-icon svg {
width: 100%;
/* Иконки внутри чуть больше, т.к. круг 90px */
height: 100%;
}
.social-icon:hover {
transform: translateY(-5px);
}
/* Скрытый класс (добавляется JS-ом) */
.social-icon.hidden-icon {
display: none;
}
/* Кнопка More */
.social-item-more {
display: flex;
/* Flex, но скрыт через inline style в HTML, пока JS не включит */
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
flex-shrink: 0;
}
.social-icon-more {
width: 90px;
height: 90px;
/* Пунктир для отличия */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #EE4500;
transition: all 0.3s ease;
}
.social-item-more:hover .social-icon-more {
background-color: rgba(238, 69, 0, 0.1);
}
.social-icon-more svg {
width: 100%;
height: 100%;
}
.more-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
color: #EE4500;
}
/* --- Текст внизу --- */
.we-cover-text-wrapper {
margin-top: 140px;
margin-inline-start: 37.5%;
margin-inline-end: 3%;
text-align: center;
position: relative;
z-index: 4;
}
.we-cover-bottom-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: center;
color: #4A4A4A;
/* Или #463C3E */
margin: 0;
}
/* --- Картинка навылет --- */
.we-cover-img-absolute {
position: absolute;
bottom: -115px;
/* Выглядывает на 115px вниз */
left: 7.5%;
/* Отступ слева, подбери под макет */
z-index: 3;
pointer-events: none;
width: 33%;
/* Чтобы не мешала выделять текст, если перекрывает */
}
.floating-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
/* Ограничение размера картинки */
/* Тень или эффекты, если нужны */
}
/* Адаптив */
@media (max-width: 1200px) {
.we-cover-box {
height: auto;
/* На планшетах фикс высота может ломать контент */
padding: 60px 40px 140px 40px;
/* Большой паддинг снизу для картинки */
}
.social-icon,
.social-icon-more {
width: 60px;
height: 60px;
}
.we-cover-title,
.we-cover-bottom-text {
font-size: 28px;
}
.we-cover-text-wrapper {
margin-top: 100px;
margin-inline-start: 0%;
margin-inline-end: 0%;
}
.we-cover-img-absolute {
left: 50%;
transform: translateX(-50%);
bottom: -60px;
}
}
/* =========================================
HERO SLIDER SECTION
========================================= */
.hero-section {
width: 100%;
height: calc(100vh - 146px);
/* Фиксированная высота по ТЗ */
position: relative;
overflow: hidden;
}
.hero-swiper {
width: 100%;
height: 100%;
}
.hero-slide {
position: relative;
width: 100%;
height: 100%;
/* Паддинги слайда (внутренние отступы контента от краев секции) */
padding-top: 8vh;
padding-bottom: 8vh;
box-sizing: border-box;
display: flex;
align-items: flex-start;
/* Центрируем контент вертикально */
}
/* Фоновое изображение (справа) */
.hero-bg-img {
position: absolute;
top: 0;
right: 0;
width: 66.66%;
/* 2/3 ширины */
height: 100%;
background-size: contain;
background-position: center right;
/* Прижато вправо, по центру вертикально */
background-repeat: no-repeat;
z-index: 1;
/* Под текстом */
pointer-events: none;
}
/* Контейнер контента */
.hero-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
width: 100%;
margin: 0 auto;
padding: 0 35px;
position: relative;
z-index: 5;
/* Поверх фона */
height: 100%;
display: flex;
align-items: flex-start;
/* Центрирование контента по высоте */
}
/* Обертка текста (левая часть) */
.hero-content {
max-width: 666px;
width: 100%;
}
/* Заголовок */
.hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 55px;
line-height: 100%;
letter-spacing: 0%;
color: #463C3E;
/* Предполагаю черный, в ТЗ цвет не указан, но обычно черный */
margin-top: 0;
margin-bottom: 28px;
}
/* Текст */
.hero-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
/* Bold по ТЗ */
font-size: 23px;
line-height: 150%;
letter-spacing: 0%;
color: #463C3E;
margin-top: 0;
margin-bottom: 40px;
}
/* Кнопка */
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 170px;
height: 50px;
background-color: #EE4500;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
color: #FFFFFF;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
}
.hero-btn:hover {
background-color: #cc3b00;
transform: translateY(-2px);
}
/* --- Pagination (Custom Left Aligned) --- */
.hero-swiper .hero-pagination {
position: absolute;
bottom: 8vh !important;
/* Поднимаем чуть выше, чтобы соответствовать нижнему отступу слайда (padding-bottom: 88px) */
/* Центрируем сам контейнер пагинации относительно экрана... */
left: 50%;
transform: translateX(-50%);
/* ...но ограничиваем его ширину как у основного контента */
width: 100%;
max-width: 1540px;
/* 1470 + 35 + 35 */
padding: 0 35px;
/* Те же отступы, что у hero-container */
box-sizing: border-box;
display: flex;
justify-content: flex-start;
/* Выравнивание точек ВЛЕВО */
align-items: center;
z-index: 10;
}
/* Буллеты */
.hero-swiper .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #8796B2;
opacity: 1;
border-radius: 50%;
/* Отступ только справа 32px, чтобы первая точка встала ровно в линию с текстом */
margin: 0 32px 0 0 !important;
transition: all 0.3s ease;
}
/* Убираем отступ у последнего буллета */
.hero-swiper .swiper-pagination-bullet:last-child {
margin-right: 0 !important;
}
/* Активный буллет */
.hero-swiper .swiper-pagination-bullet-active {
width: 75px;
height: 16px;
background-color: #EE4500;
border-radius: 16px;
}
/* --- Mobile / Tablet Adaptation --- */
@media (max-width: 1024px) {
.hero-section {
height: auto;
min-height: 700px;
}
.hero-slide {
padding-top: 120px;
/* Больше отступ сверху из-за хедера */
padding-bottom: 100px;
/* Место под пагинацию */
flex-direction: column;
justify-content: center;
}
.hero-bg-img {
width: 100%;
height: 50%;
top: auto;
bottom: 0;
background-position: center bottom;
opacity: 0.3;
/* Чтобы текст читался, если наедет */
}
.hero-container {
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
.hero-content {
max-width: 100%;
text-align: center;
}
.hero-title {
font-size: 40px;
}
.hero-text {
font-size: 18px;
}
.hero-btn {
margin: 0 auto;
/* Центрируем кнопку */
}
}
/* =========================================
LOGOS MARQUEE SECTION
========================================= */
.logos-section {
width: 100%;
/* Отступы по ТЗ: 50 сверху, 70 снизу */
padding-top: 50px;
padding-bottom: 70px;
background-color: #F5F5F7;
/* Фон как у страницы, или белый, если нужно */
overflow: hidden;
}
.logos-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
}
.logos-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;
color: #463C3E;
/* Предполагаю темный цвет текста */
margin-top: 0;
margin-bottom: 50px;
}
/* Обертка для наложения маски размытия по краям */
.logos-marquee-wrapper {
position: relative;
width: 100%;
/* Side-fade mask disabled
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); */
}
.logos-swiper {
width: 100%;
overflow: visible;
/* Чтобы логотипы не обрезались резко внутри контейнера */
pointer-events: none;
}
/* Настройки слайда логотипа */
.logo-slide {
width: auto;
/* Ширина авто, зависит от картинки */
height: 38px;
/* Фиксированная высота по ТЗ */
display: flex;
align-items: center;
justify-content: center;
/* Гап задается в JS через spaceBetween, но здесь сбросим margin */
margin-right: 0;
}
.logo-slide img {
height: 100%;
/* Картинка занимает всю высоту слайда (38px) */
width: auto;
/* Ширина подстраивается */
object-fit: contain;
/* Можно добавить фильтр, если логотипы цветные, а нужны ч/б, например: */
/* filter: grayscale(100%); opacity: 0.7; */
transition: opacity 0.3s ease;
}
.logo-slide:hover img {
opacity: 1;
/* Эффект при наведении, если нужен */
}
/* Важно для плавной анимации в Swiper */
.logos-swiper .swiper-wrapper {
transition-timing-function: linear;
/* Линейная скорость без замедлений */
}
/* =========================================
FEATURES SPLIT SECTION
========================================= */
.features-split-section {
width: 100%;
/* Паддинги: 0 сверху, 120 снизу */
padding: 0 0 120px 0;
/* Фон секции */
background-image: url('../site/img/bg-pr-fe.jpg');
background-position: right center;
background-size: contain;
background-repeat: no-repeat;
background-color: #F5F5F7;
/* Фолбек цвет, если картинка не загрузится */
}
.features-split-container {
max-width: 1540px;
/* 1470 + 35 + 35 */
margin: 0 auto;
padding: 0 35px;
}
/* Оранжевая полоска */
.features-split-divider {
width: 100%;
max-width: 1020px;
/* Ограничение ширины */
height: 5px;
background-color: #EE4500;
margin-bottom: 100px;
/* Вниз 100 */
/* Для анимации reveal-line */
transform-origin: left;
}
/* Сетка */
.features-split-grid {
display: grid;
/* Соотношение 3 к 4 */
grid-template-columns: 3fr 4fr;
gap: 50px;
align-items: center;
/* Центрируем вертикально */
}
/* --- Left Column --- */
.features-split-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.features-split-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
color: #463C3E;
margin: 0 0 37px 0;
/* Вниз 37 */
}
.features-list {
display: flex;
flex-direction: column;
gap: 0;
/* Гап 0 по ТЗ */
width: 100%;
margin-bottom: 40px;
/* Отступ до кнопки */
}
/* --- Feature Item (Tab) --- */
.features-item {
display: flex;
align-items: stretch;
/* Растягиваем полоску на всю высоту */
background-color: transparent;
/* Прозрачный по дефолту */
border-radius: 39px;
padding: 36px 30px 36px 44px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Состояние Active / Hover */
.features-item.active,
.features-item:hover {
background-color: #FFFFFF;
}
/* Полоска слева */
.features-item-strip {
width: 5px;
background-color: #EE4500;
/* Скрыта по дефолту */
border-radius: 5px;
flex-shrink: 0;
margin-right: 30px;
/* 30 до текста */
transition: background-color 0.3s ease;
}
/* Показываем полоску только у активного или при ховере */
.features-item.active .features-item-strip,
.features-item:hover .features-item-strip {
background-color: #EE4500;
}
.features-item-content {
display: flex;
flex-direction: column;
}
.features-item-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 21px;
line-height: 150%;
color: #EE4500;
/* Оранжевый */
margin: 0;
}
.features-item-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 21px;
line-height: 150%;
color: #463C3E;
margin: 0;
}
/* Кнопка */
.features-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 226px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-decoration: none;
text-transform: uppercase;
text-align: center;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.features-btn:hover {
background-color: #CC3B00;
transform: translateY(-2px);
}
/* --- Right Column --- */
.features-split-right {
width: 100%;
}
.features-img-box {
background-color: #FBFBFB;
border-radius: 48px;
padding: 28px;
width: 100%;
box-sizing: border-box;
/* Тень опционально, для красоты, как на скринах Cyabra */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}
.features-main-img {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
/* Небольшой радиус самой картинке */
/* Анимация смены картинки */
transition: opacity 0.3s ease;
opacity: 1;
}
.features-main-img.fading {
opacity: 0.5;
/* Легкое затухание при смене */
}
/* --- Mobile Adaptation --- */
@media (max-width: 1024px) {
.features-split-grid {
grid-template-columns: 1fr;
/* Одна колонка */
gap: 60px;
}
/* Меняем порядок: Картинка первая, текст второй (по желанию, но обычно так лучше на моб) */
/* .features-split-right { order: -1; } - если нужно картинку сверху */
.features-item {
padding: 24px;
}
.features-item-strip {
margin-right: 20px;
}
.features-split-title {
font-size: 32px;
}
}
/* =========================================
NEW SCROLLY TELLING SECTION (UPDATED)
========================================= */
.scrolly-section {
width: 100%;
background: linear-gradient(260.03deg, #F9CFA9 6.62%, #FCF7D6 93.38%);
padding-top: 80px;
padding-bottom: 120px;
position: relative;
}
/* Верхняя линия */
.scrolly-top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #8796B2;
transform-origin: left;
}
.scrolly-top-line.reveal-line {
background-color: #EE4500;
height: 5px;
}
.scrolly-container {
max-width: 1540px;
margin: 0 auto;
padding: 0 35px;
}
/* Враппер для скролла */
.scrolly-wrapper {
height: 350vh;
/* Чуть увеличил для плавности */
position: relative;
}
/* Липкая область */
.scrolly-sticky-viewport {
position: -webkit-sticky;
position: sticky;
/* Учитываем хедер 98px + небольшой отступ 30px */
top: 128px;
height: auto;
width: 100%;
overflow: visible;
}
/* Сетка: 1fr (Картинки) - 1.5fr (Текст) */
.scrolly-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
align-items: center;
/* Верхний край, так как правая колонка длиннее */
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/* --- Левая колонка (Стек картинок) --- */
.scrolly-col-img {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
position: sticky;
top: 0;
}
.scrolly-img-stack {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Базовый стиль картинки */
.scrolly-img {
position: absolute;
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: contain;
border-radius: 20px;
/* Дефолтное состояние (скрыто или где-то далеко) */
opacity: 0;
transform: translateY(0) scale(0.8);
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
z-index: 1;
/* Фильтр для неактивных */
filter: blur(2px);
}
/* Активная (Центр) */
.scrolly-img.active {
opacity: 1;
transform: translateY(0) scale(1);
z-index: 10;
filter: blur(0);
}
/* Предыдущая (Сверху) */
.scrolly-img.prev {
opacity: 0.4;
transform: translateY(-75%) scale(0.5);
/* Сдвиг вверх */
z-index: 5;
}
/* Следующая (Снизу) */
.scrolly-img.next {
opacity: 0.4;
transform: translateY(75%) scale(0.5);
/* Сдвиг вниз */
z-index: 5;
}
/* --- Правая колонка (Текст) --- */
.scrolly-col-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Заголовок (теперь внутри колонки) */
.scrolly-main-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
text-align: left;
/* Выравнивание влево */
color: #463C3E;
margin-top: 0;
margin-bottom: 60px;
}
/* --- Аккордеон --- */
.scrolly-item {
cursor: pointer;
transition: all 0.3s ease;
}
/* Хедер элемента */
.scrolly-item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.scrolly-item-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 100%;
color: #EE4500;
margin: 0;
transition: opacity 0.3s;
}
/* Плюсик */
.scrolly-item-plus {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 200;
font-size: 64px;
line-height: 100%;
color: #EE4500;
opacity: 1;
transition: opacity 0.3s ease;
}
/* Активное состояние заголовка */
.scrolly-item:not(.active) .scrolly-item-title {
opacity: 1;
}
.scrolly-item:not(.active):hover .scrolly-item-title {
opacity: 1;
}
/* Активный: скрываем плюс */
.scrolly-item.active .scrolly-item-plus {
opacity: 0;
/* Просто исчезает */
}
/* Тело элемента (Wrappers для плавной анимации высоты) */
.scrolly-item-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s ease-out;
}
.scrolly-item.active .scrolly-item-wrapper {
grid-template-rows: 1fr;
}
.scrolly-item-inner {
overflow: hidden;
/* Паддинги задаем тут, чтобы не было скачков при анимации высоты */
padding-top: 0;
opacity: 0;
transition: opacity 0.5s ease 0.1s, padding-top 0.3s ease;
}
.scrolly-item.active .scrolly-item-inner {
opacity: 1;
padding-top: 16px;
/* Отступ от заголовка */
padding-bottom: 24px;
}
.scrolly-item-desc {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 155%;
color: #463C3E;
margin: 0 0 24px 0;
}
/* Кнопка внутри аккордеона */
.scrolly-small-btn {
display: inline-flex;
align-items: center;
text-decoration: none;
gap: 12px;
transition: opacity 0.3s;
}
.scrolly-small-btn:hover {
opacity: 0.7;
}
.btn-text {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 150%;
color: #EE4500;
text-transform: uppercase;
}
/* Разделитель */
.scrolly-divider {
width: 100%;
height: 1px;
background-color: #8796B2;
margin: 25px 0;
opacity: 0.5;
}
/* Bottom CTA */
.scrolly-bottom-cta {
margin-top: 60px;
display: flex;
justify-content: flex-start;
/* Выравнивание влево */
}
.scrolly-main-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
background-color: #EE4500;
color: #FFFFFF;
border-radius: 33px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 150%;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.scrolly-main-btn:hover {
background-color: #CC3B00;
transform: translateY(-2px);
}
/* --- Mobile Adaptation --- */
@media (max-width: 1024px) {
.scrolly-wrapper {
height: auto;
}
.scrolly-sticky-viewport {
position: static;
}
.scrolly-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.scrolly-col-img {
order: -1;
height: 300px;
position: static;
}
.scrolly-img.prev,
.scrolly-img.next {
display: none;
}
/* На мобиле показываем только активную */
.scrolly-main-title {
text-align: center;
}
.scrolly-bottom-cta {
justify-content: center;
}
}