:root { --sr-bg: #edf3f8;
--sr-grid-line: rgba(59, 130, 246, 0.16);
--sr-grid-size: 24px;
--sr-bg-pattern:
linear-gradient(to right, var(--sr-grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--sr-grid-line) 1px, transparent 1px);
--sr-surface: #ffffff;
--sr-surface-soft: #f8fafc;
--sr-text: #0f172a;
--sr-text-muted: #64748b;
--sr-border: #e2e8f0;
--sr-border-strong: #cbd5e1;
--sr-accent-primary: #3b82f6; --sr-accent-primary-hover: color-mix(in srgb, var(--sr-accent-primary) 88%, #0f172a); --sr-btn-ring: rgba(191, 219, 254, 0.95);
--sr-btn-ring-soft: rgba(191, 219, 254, 0.55);
--sr-btn-ring-spread: 3px;
--sr-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.32);
--sr-btn-shadow-primary:
0 0 0 var(--sr-btn-ring-spread) var(--sr-btn-ring),
var(--sr-btn-inset);
--sr-btn-shadow-primary-hover:
0 0 0 var(--sr-btn-ring-spread) rgba(191, 219, 254, 0.82),
inset 0 1px 0 rgba(255, 255, 255, 0.24);
--sr-btn-shadow-outline:
0 0 0 var(--sr-btn-ring-spread) var(--sr-btn-ring-soft),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
--sr-accent-secondary: #f59e0b;
--sr-link: #374151;
--sr-success: #16a34a;
--sr-warning: #d97706;
--sr-danger: #dc2626;
--sr-shadow-sm: 0 4px 18px rgba(15, 23, 42, 0.08);
--sr-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.12);
--sr-neu-raised:
-4px -4px 8px rgba(255, 255, 255, 0.92),
4px 4px 10px rgba(15, 23, 42, 0.1);
--sr-neu-pressed:
inset 2px 2px 5px rgba(15, 23, 42, 0.12),
inset -2px -2px 5px rgba(255, 255, 255, 0.88);
--sr-radius-sm: 10px;
--sr-radius-md: 14px;
--sr-radius-lg: 18px;
--sr-radius-pill: 999px;
--sr-container: 1360px; --sr-post-prose-max: 980px;
--sr-section-y: 56px;
--sr-section-x: 24px; --sr-section-gap: var(--sr-section-y); --sr-torn-edge-h: 40px;
--sr-torn-bg-trim: 30px;
--sr-torn-bg-color: #fff; --sr-inner-hero-pad-y: clamp(11px, 2vw, 20px);
} *,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--sr-bg);
background-image: var(--sr-bg-pattern);
background-size: var(--sr-grid-size) var(--sr-grid-size);
color: var(--sr-text);
line-height: 1.5;
overflow-x: hidden;
}
a {
color: var(--sr-link);
text-decoration: none;
}
a:hover {
color: var(--sr-accent-primary);
}
.sr-faq-extended a,
.sr-faq-extended a:visited {
color: #2563eb;
}
.sr-faq-extended a:hover,
.sr-faq-extended a:focus-visible {
color: #1d4ed8;
}
.sr-page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.sr-main {
flex: 1;
} .sr-section,
.sr-container,
.sr-topbar-inner,
.sr-mainbar-inner,
.sr-footer-inner {
max-width: var(--sr-container);
margin: 0 auto;
}
.sr-section {
padding: var(--sr-section-y) var(--sr-section-x);
}
main > section.sr-section:not(.sr-hero) {
margin-top: var(--sr-section-gap);
} #process + #client-logos.sr-section,
#client-logos + #testimonials.sr-section,
#guarantees + #testimonials.sr-section,
#guarantees + #faq.sr-section {
margin-top: calc(var(--sr-section-gap) + var(--sr-torn-edge-h));
} .page-id-128 #seo-text.sr-section {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-top: calc(var(--sr-torn-edge-h) + 22px);
padding-bottom: calc(var(--sr-torn-edge-h) + 22px);
}
.page-id-128 #seo-text .sr-container.sr-seo-text-inner {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
gap: 22px;
}
.page-id-128 #seo-text .sr-seo-text__head {
gap: 12px;
}
.page-id-128 #seo-text .sr-seo-text-lead {
margin-top: 8px;
margin-bottom: 10px;
line-height: 1.6;
}
.page-id-128 #seo-text .sr-seo-body {
max-width: 100%;
width: 100%;
margin-inline: 0;
line-height: 1.85;
}
.page-id-128 #seo-text .sr-seo-body p {
margin-bottom: 1.2em;
} #about + #process.sr-section {
margin-top: calc(var(--sr-section-gap) + var(--sr-torn-edge-h) + 16px);
}
#faq.sr-section {
margin-top: 0 !important;
}
main > section.sr-section.sr-hero {
margin-top: 0;
} #contacts::before,
#contacts::after,
#faq::before,
#faq::after,
#testimonials::before,
#testimonials::after,
#process::before,
#process::after,
#calculator::before,
#calculator::after,
#features::before,
#features::after,
.sr-hero::before,
.sr-hero::after,
.sr-footer::before,
#contacts .sr-contacts-layout::before,
#calculator .sr-calc-inner::before,
.sr-inner-page-hero::after {
left: 50%;
right: auto;
width: 100vw;
max-width: none;
margin-left: -50vw;
}
.sr-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.sr-contacts-layout,
.sr-faq-layout,
.sr-calc-result,
.sr-brief-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
} .sr-contacts-layout {
align-items: end;
position: relative;
}
.sr-contacts-info,
.sr-contacts-form-wrap {
align-self: end;
}
.sr-contacts-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.sr-contacts-form-wrap {
display: flex;
flex-direction: column;
}
.sr-contacts-form {
display: flex;
flex-direction: column;
gap: 12px;
} .sr-contacts-form .sr-contacts-grid {
gap: 12px;
}
.sr-contacts-form .sr-field {
gap: 8px;
}
.sr-contacts-form .sr-field > span {
margin: 0;
line-height: 1.3;
}
.sr-contacts-form .sr-field input,
.sr-contacts-form .sr-field textarea {
padding: 12px 14px;
}
.sr-contacts-form .sr-contacts-message,
.sr-contacts-form .sr-btn-primary,
.sr-contacts-form .sr-calc-privacy,
.sr-contacts-form .sr-contacts-form-status {
margin: 0;
}
.sr-contacts-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.sr-contacts-list__item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 10px;
}
.sr-contacts-list__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sr-accent-primary);
line-height: 1;
align-self: center;
} i.sr-fa {
display: inline-block;
font-style: normal;
line-height: 1;
vertical-align: middle;
}
.sr-contacts-list__icon .sr-contacts-list-fa {
font-size: 15px;
}
.sr-contact-page-intro__msg--icon .sr-contact-msg-fa {
font-size: 22px;
}
.sr-messenger-btn > i.sr-fa {
position: relative;
z-index: 1;
font-size: 19px;
color: inherit;
}
.sr-header-fa {
font-size: 18px;
}
.sr-mobile-drawer__close .sr-header-fa {
font-size: 17px;
}
.sr-mobile-drawer__contact-ico .sr-header-fa {
font-size: 16px;
}
.sr-mobile-drawer__fa {
font-size: 14px;
}
.sr-features-pack-card__icon-fa {
font-size: 24px;
line-height: 1;
}
.sr-team-cert-fa {
font-size: 18px;
}
.sr-support-ticket-fallback-fa {
font-size: 48px;
line-height: 1;
opacity: 0.88;
}
.sr-contact-modal__close .sr-header-fa,
.sr-support-ticket-modal__close .sr-header-fa,
.sr-brief-success-modal__close .sr-header-fa {
font-size: 17px;
}
.sr-services-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.sr-services-grid,
.sr-team-grid,
.sr-support-grid,
.sr-blog-grid,
.sr-portfolio-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
} .sr-partners__head {
margin-bottom: clamp(20px, 3.5vw, 32px);
}
.sr-partners__title {
margin: 0;
}
.sr-partners__lead {
margin: 0;
max-width: min(52rem, 100%);
}
.sr-partners__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 36%);
gap: clamp(28px, 4.5vw, 56px);
align-items: start;
}
.sr-partners__body:not(:has(.sr-partners__visual)) {
grid-template-columns: 1fr;
}
.sr-partners__main {
min-width: 0;
}
.sr-partners__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2.2vw, 22px);
align-items: stretch;
} .sr-partners__grid > .sr-partner-card:nth-child(odd):last-child {
grid-column: 1 / -1;
justify-self: center;
width: 100%;
max-width: min(420px, 100%);
}
.sr-partners__visual {
margin: 0;
position: sticky;
top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px));
min-width: 0;
}
.sr-partners__photo {
display: block;
width: 100%;
height: auto;
border-radius: var(--sr-radius-lg);
border: 1px solid var(--sr-border);
box-shadow:
var(--sr-shadow-md),
0 0 0 1px rgba(255, 255, 255, 0.65) inset;
background: var(--sr-surface-soft);
}
.sr-partner-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 20px 18px;
overflow: hidden;
background: linear-gradient(
165deg,
#fff 0%,
color-mix(in srgb, var(--sr-surface-soft) 92%, #fff) 48%,
#fff 100%
);
border: 1px solid color-mix(in srgb, var(--sr-border) 78%, var(--sr-accent-primary) 8%);
border-radius: var(--sr-radius-lg);
box-shadow:
var(--sr-shadow-sm),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
transition:
box-shadow 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease;
}
.sr-partner-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--sr-accent-primary),
color-mix(in srgb, var(--sr-accent-primary) 35%, #93c5fd)
);
opacity: 0.95;
pointer-events: none;
}
.sr-partner-card:hover {
border-color: color-mix(in srgb, var(--sr-accent-primary) 28%, var(--sr-border));
box-shadow:
0 14px 36px rgba(15, 23, 42, 0.1),
0 0 0 1px color-mix(in srgb, var(--sr-accent-primary) 12%, transparent),
0 1px 0 rgba(255, 255, 255, 0.95) inset;
transform: translateY(-2px);
}
.sr-partner-card__top {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
min-width: 0;
width: 100%;
}
.sr-partner-card__logo-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
height: 56px;
max-height: 56px;
overflow: hidden;
flex-shrink: 0;
box-sizing: border-box;
}
.sr-partner-card__logo {
display: block;
max-width: 100%;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
}
.sr-partner-card__monogram {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
font-size: 22px;
font-weight: 800;
color: var(--sr-accent-primary);
background: color-mix(in srgb, var(--sr-accent-primary) 14%, #fff);
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--sr-accent-primary) 22%, var(--sr-border));
}
.sr-partner-card__rule {
width: 100%;
height: 0;
margin: 14px 0 0;
padding: 0;
border: 0;
border-top: 1px solid var(--sr-border);
flex-shrink: 0;
}
.sr-partner-card__name {
margin: 12px 0 0;
padding: 0;
width: 100%;
font-size: clamp(1.05rem, 2.2vw, 1.2rem);
line-height: 1.35;
color: var(--sr-text);
text-align: center;
}
.sr-partner-card__name-link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--sr-accent-primary) 45%, transparent);
transition: color 0.15s ease, border-color 0.15s ease;
}
.sr-partner-card__name-link:hover,
.sr-partner-card__name-link:focus-visible {
color: var(--sr-accent-primary);
border-bottom-color: var(--sr-accent-primary);
}
.sr-partner-card__text {
margin: 0;
flex: 1 1 auto;
font-size: 14px;
line-height: 1.55;
color: var(--sr-text-muted);
}
.sr-partner-card__cta {
align-self: flex-end;
margin-top: auto;
padding: 8px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
text-decoration: none;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--sr-accent-primary) 92%, #fff),
var(--sr-accent-primary)
);
border-radius: var(--sr-radius-pill);
border: 1px solid color-mix(in srgb, var(--sr-accent-primary) 55%, #1e40af);
box-shadow: var(--sr-btn-shadow-primary);
transition:
filter 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}
.sr-partner-card__cta:hover {
filter: brightness(1.05);
box-shadow: var(--sr-btn-shadow-primary-hover);
transform: translateY(-1px);
}
.sr-partner-card__cta:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 3px;
}
.sr-calc-addons,
.sr-contacts-grid,
.sr-calc-design-grid,
.sr-brief-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sr-about-story {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 14px;
align-items: stretch;
} .sr-nav {
position: sticky;
top: 0;
z-index: 40;
} body.admin-bar .sr-nav {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .sr-nav {
top: 46px;
}
}
.sr-topbar,
.sr-mainbar {
background: var(--sr-surface);
border-bottom: 1px solid var(--sr-border);
}
.sr-topbar {
position: relative;
z-index: 2;
}
.sr-mainbar {
position: relative;
z-index: 1;
}
.sr-topbar {
font-size: 12px;
color: var(--sr-text-muted);
}
.sr-topbar-inner {
padding: 10px var(--sr-section-x);
display: flex;
align-items: center;
gap: 14px;
} .sr-mainbar-inner {
padding: 10px var(--sr-section-x);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
}
.sr-topbar-left,
.sr-topbar-right,
.sr-mainbar-left,
.sr-mainbar-right,
.sr-mainbar-middle,
.sr-mainbar-center {
display: flex;
align-items: center;
gap: 14px;
}
.sr-topbar-left {
flex: 1;
justify-content: center;
}
.sr-mainbar-left {
grid-column: 1;
justify-self: center;
min-width: 0;
flex-wrap: wrap;
justify-content: center;
}
.sr-mainbar-left .sr-header-menu,
.sr-mainbar-middle .sr-header-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.sr-mainbar-left .sr-header-menu > li,
.sr-mainbar-middle .sr-header-menu > li {
margin: 0;
padding: 0;
list-style: none;
} @media (min-width: 901px) {
.sr-nav .sr-mainbar,
.sr-mainbar-inner,
.sr-mainbar-left,
.sr-mainbar-right,
.sr-mainbar-left nav,
.sr-mainbar-middle {
overflow: visible;
}
.sr-mainbar-left .sr-header-menu > li.menu-item-has-children,
.sr-mainbar-middle .sr-header-menu > li.menu-item-has-children {
position: relative;
} .sr-header-menu > li.menu-item-has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 14px;
z-index: 95;
pointer-events: auto;
}
.sr-header-menu .sub-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 220px;
margin: 0;
padding: 8px 0;
list-style: none;
background: #fff;
border-radius: var(--sr-radius-lg);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.15s ease,
transform 0.15s ease,
visibility 0.15s;
z-index: 100;
}
.sr-header-menu li.menu-item-has-children:hover > .sub-menu,
.sr-header-menu li.menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.sr-header-menu .sub-menu > li {
margin: 0;
padding: 0;
list-style: none;
}
.sr-header-menu .sub-menu a {
display: block;
padding: 10px 18px;
font-size: 14px;
white-space: nowrap;
color: var(--sr-text);
}
.sr-header-menu .sub-menu a:hover {
background: rgba(59, 130, 246, 0.08);
color: var(--sr-accent-primary);
}
}
.sr-mainbar-center {
grid-column: 2;
justify-self: center;
} .sr-mainbar-right {
grid-column: 3;
justify-self: stretch;
min-width: 0;
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
}
.sr-mainbar-middle {
justify-self: center;
min-width: 0;
flex-wrap: wrap;
justify-content: center;
}
.sr-mainbar-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.sr-mainbar-actions .sr-messenger-btn {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
padding: 0;
color: #fff;
background: var(--sr-accent-primary);
box-shadow: none;
border-radius: 10px;
border: 1px solid transparent;
}
.sr-mainbar-actions .sr-messenger-btn::before {
display: none;
}
.sr-mainbar-actions .sr-messenger-btn > svg,
.sr-mainbar-actions .sr-messenger-btn > i.sr-fa {
width: 16px;
height: 16px;
font-size: 16px;
color: #fff;
}
.sr-mainbar-actions .sr-messenger-btn:hover:not(.is-disabled) {
color: #fff;
background: var(--sr-accent-primary-hover);
transform: none;
}
.sr-mainbar-actions .sr-messenger-btn:hover:not(.is-disabled)::before {
display: none;
}
.sr-mainbar-left a,
.sr-mainbar-middle a,
.sr-mainbar-right a {
color: var(--sr-text);
font-size: 14px;
}
.sr-mainbar-left a:hover,
.sr-mainbar-middle a:hover,
.sr-mainbar-right a:hover {
color: var(--sr-accent-primary);
}
.sr-logo {
display: inline-flex;
align-items: center;
gap: 10px;
}
.sr-logo-mark {
width: 32px;
height: 32px;
border-radius: 10px;
border: 2px solid var(--sr-text);
background: linear-gradient(135deg, #fff, var(--sr-surface-soft));
}
img.custom-logo {
max-height: 48px;
width: auto;
}
.sr-logo-text-main {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sr-logo-text-sub {
display: block;
font-size: 11px;
color: var(--sr-text-muted);
letter-spacing: 0.11em;
text-transform: uppercase;
} .sr-mainbar .sr-logo {
gap: calc(10px * 0.8);
}
.sr-mainbar .sr-logo-mark {
width: calc(32px * 0.8);
height: calc(32px * 0.8);
border-radius: calc(10px * 0.8);
border-width: calc(2px * 0.8);
}
.sr-mainbar img.custom-logo {
max-height: calc(48px * 0.8);
}
.sr-mainbar .sr-logo-text-main {
font-size: calc(18px * 0.8);
}
.sr-mainbar .sr-logo-text-sub {
font-size: calc(11px * 0.8);
}
.sr-footer {
position: relative;
z-index: 2;
background: var(--sr-surface);
border-top: 1px solid var(--sr-border);
margin-top: 0 !important;
font-size: 12px;
color: var(--sr-text-muted);
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
} .sr-footer::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
transform: none;
pointer-events: none;
z-index: 0;
opacity: 0.12;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/bg-footer.png?v=1);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
} #contacts.sr-section {
flex-shrink: 0;
width: 100%;
}
.sr-footer-inner {
padding: 18px var(--sr-section-x) 24px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 12px 20px;
text-align: right;
position: relative;
z-index: 1;
min-height: 28px;
}
.sr-footer-links {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
margin-left: auto;
}
.sr-footer-links .sr-footer-menu {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.sr-footer-links .sr-footer-menu > li {
margin: 0;
padding: 0;
list-style: none;
}
.sr-footer-links a,
.sr-footer-links .sr-footer-menu a {
color: inherit;
text-decoration: none;
}
.sr-footer-links a:hover,
.sr-footer-links .sr-footer-menu a:hover {
color: var(--sr-accent-primary);
} .sr-form-hp {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sr-contacts-form,
.sr-contact-modal__form {
position: relative;
}
.sr-footer-copy {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
} .sr-mobile-quick {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 1200;
box-sizing: border-box;
width: 58px;
height: 58px;
}
.sr-mobile-quick__bubble {
display: none;
position: relative;
z-index: 1201;
border: 0;
background: linear-gradient(0deg, #ddd, #fff);
border-radius: 50%;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
width: 58px;
height: 58px;
min-height: 58px;
min-width: 58px;
padding: 0;
font-size: 13px;
font-weight: 600;
color: #6d7481;
justify-content: center;
overflow: visible;
outline: none;
}
.sr-mobile-quick__bubble::after {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
background: linear-gradient(0deg, #fff, #ddd);
z-index: 0;
}
.sr-mobile-quick__bubble > .sr-mobile-quick__bubble-ico {
position: relative;
z-index: 1;
}
.sr-mobile-quick__bubble-ico {
width: 31px;
height: 31px;
flex-basis: 31px;
}
.sr-mobile-quick__bubble-ico svg {
width: 100%;
height: 100%;
}
.sr-mobile-quick__bubble::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
rgba(46, 124, 255, 0) 0deg,
rgba(46, 124, 255, 0) 240deg,
rgba(46, 124, 255, 0.95) 300deg,
rgba(46, 124, 255, 0) 360deg
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
opacity: 0;
pointer-events: none;
}
@keyframes srBubbleRingSpin {
to {
transform: rotate(360deg);
}
} .sr-mobile-quick__panel {
position: fixed;
left: max(10px, env(safe-area-inset-left, 0px));
right: calc(58px + 10px + max(10px, env(safe-area-inset-right, 0px)));
bottom: 10px;
z-index: 1199;
margin-right: 0;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: 20px;
box-shadow: 0 14px 36px rgba(16, 24, 40, 0.2);
padding: 5px 6px 0;
overflow: visible;
width: auto;
max-width: none;
transform: translateX(0);
opacity: 1;
pointer-events: auto;
transition: transform 0.26s ease, opacity 0.22s ease;
isolation: isolate;
} .sr-mobile-quick__panel::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 22px;
background: conic-gradient(
from 0deg,
rgba(46, 124, 255, 0) 0deg,
rgba(46, 124, 255, 0) 240deg,
rgba(46, 124, 255, 0.95) 300deg,
rgba(46, 124, 255, 0) 360deg
);
padding: 2px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 0;
opacity: 0;
}
.sr-mobile-quick:not(.is-collapsed) .sr-mobile-quick__panel::before {
opacity: 1;
animation: none;
}
.sr-mobile-quick__list {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
overflow: hidden;
border-radius: 18px;
}
.sr-mobile-quick__btn {
border: 0;
background: transparent;
border-radius: 10px;
display: grid;
justify-items: center;
gap: 1px;
min-height: 44px;
min-width: 0;
padding: 0 2px;
color: var(--sr-text);
cursor: pointer;
box-sizing: border-box;
}
.sr-mobile-quick__btn:active {
background: color-mix(in srgb, var(--sr-accent-primary) 10%, transparent);
}
.sr-mobile-quick__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
color: currentColor;
}
.sr-mobile-quick__ico svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
fill: currentColor;
stroke: currentColor;
}
.sr-mobile-quick__ico i.sr-fa {
font-size: 18px;
line-height: 1;
color: currentColor;
}
.sr-mobile-quick__txt {
font-size: 10px;
line-height: 1.05;
font-weight: 500;
text-align: center;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-page-quick-links {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1200;
}
.sr-page-quick-links__card {
width: min(360px, calc(100vw - 24px));
background: #fff;
border: 1px solid var(--sr-border);
border-radius: 14px;
box-shadow: 0 14px 40px rgba(16, 24, 40, 0.18);
padding: 12px;
}
.sr-page-quick-links__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.sr-page-quick-links__title {
font-size: 14px;
}
.sr-page-quick-links__close {
border: 1px solid var(--sr-border);
background: #fff;
border-radius: 999px;
width: 26px;
height: 26px;
line-height: 1;
cursor: pointer;
}
.sr-page-quick-links__list {
display: grid;
gap: 8px;
}
.sr-page-quick-links__btn {
border: 1px solid var(--sr-border);
background: #fff;
border-radius: 10px;
padding: 9px 11px;
text-align: left;
cursor: pointer;
}
.sr-page-quick-links__btn:hover {
border-color: var(--sr-accent);
} .sr-lang,
.sr-city,
.sr-currency {
position: relative;
}
.sr-lang-toggle,
.sr-currency-toggle,
.sr-lang-option,
.sr-currency-option {
border: 1px solid var(--sr-border-strong);
background: #fff;
color: var(--sr-text);
font-size: 12px;
}
.sr-lang-toggle,
.sr-currency-toggle,
.sr-lang-option {
border-radius: var(--sr-radius-pill);
}
.sr-currency-option {
border-radius: var(--sr-radius-sm);
}
.sr-lang-toggle,
.sr-currency-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
cursor: pointer;
}
.sr-currency-toggle {
min-width: 44px;
justify-content: center;
}
.sr-currency-icon {
font-size: 14px;
font-weight: 700;
line-height: 1;
color: var(--sr-text);
}
.sr-currency-caret {
width: 7px;
height: 7px;
border-right: 1px solid var(--sr-text-muted);
border-bottom: 1px solid var(--sr-text-muted);
transform: rotate(45deg);
flex-shrink: 0;
}
.sr-currency-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 55;
display: none;
flex-direction: column;
align-items: stretch;
gap: 4px;
min-width: 200px;
padding: 6px;
border-radius: var(--sr-radius-md);
background: #fff;
border: 1px solid var(--sr-border);
box-shadow: var(--sr-shadow-sm);
}
.sr-currency-menu.is-open {
display: flex;
}
.sr-currency-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
cursor: pointer;
text-align: left;
font-size: 12px;
font-weight: 500;
}
.sr-currency-option__sym {
display: inline-flex;
min-width: 1.5em;
justify-content: center;
font-weight: 700;
color: var(--sr-text-muted);
}
.sr-currency-option__sym--code {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
.sr-currency-option.is-active {
color: #fff;
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
}
.sr-currency-option.is-active .sr-currency-option__sym {
color: rgba(255, 255, 255, 0.92);
}
.sr-city-display {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border: 1px solid var(--sr-border-strong);
border-radius: var(--sr-radius-pill);
background: #fff;
color: var(--sr-text);
font-size: 12px;
}
.sr-city-label {
white-space: nowrap;
}
.sr-lang-caret {
width: 7px;
height: 7px;
border-right: 1px solid var(--sr-text-muted);
border-bottom: 1px solid var(--sr-text-muted);
transform: rotate(45deg);
}
.sr-lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 120;
display: none;
gap: 6px;
padding: 6px;
border-radius: var(--sr-radius-md);
background: #fff;
border: 1px solid var(--sr-border);
box-shadow: var(--sr-shadow-sm);
}
.sr-lang-menu.is-open {
display: flex;
}
.sr-lang-option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 8px;
cursor: pointer;
}
a.sr-lang-option {
text-decoration: none;
color: inherit;
box-sizing: border-box;
}
.sr-lang-flag {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
image-rendering: auto;
-webkit-image-rendering: auto;
}
.sr-lang-option.is-active {
color: #fff;
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
} .sr-city-notice {
position: fixed;
z-index: 100;
right: max(16px, env(safe-area-inset-right, 0px));
bottom: max(16px, env(safe-area-inset-bottom, 0px));
left: auto;
top: auto;
max-width: min(432px, calc(100vw - 32px));
pointer-events: none;
}
.sr-city-notice.is-open {
pointer-events: auto;
}
.sr-city-notice__panel {
position: relative;
padding: 0 22px 22px;
background: #fff;
border: none;
border-radius: 22px;
box-shadow:
0 24px 64px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(15, 23, 42, 0.04);
}
.sr-city-notice.is-open .sr-city-notice__panel {
animation: sr-city-notice-in 0.38s ease both;
}
@keyframes sr-city-notice-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.sr-city-notice.is-open .sr-city-notice__panel {
animation: none;
}
}
.sr-city-notice__topbar {
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 48px;
padding: 14px 0 6px;
margin: 0 -6px 0 0;
}
.sr-city-notice__dismiss {
flex: 0 0 auto;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: none;
border-radius: 999px;
background: transparent;
color: var(--sr-text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
color 0.15s ease,
background 0.15s ease;
}
.sr-city-notice__dismiss-icon {
display: block;
width: 14px;
height: 14px;
position: relative;
}
.sr-city-notice__dismiss-icon::before,
.sr-city-notice__dismiss-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
border-radius: 1px;
background: currentColor;
}
.sr-city-notice__dismiss-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.sr-city-notice__dismiss-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.sr-city-notice__dismiss:hover {
color: var(--sr-text);
background: rgba(15, 23, 42, 0.06);
}
.sr-city-notice__dismiss:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.4);
outline-offset: 2px;
}
.sr-city-notice__title {
margin: 0 0 10px;
font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
font-weight: 700;
color: var(--sr-text);
line-height: 1.28;
letter-spacing: -0.02em;
}
.sr-city-notice__lead,
.sr-city-notice__pick-hint,
.sr-city-notice__quick-title,
.sr-city-notice__countries-hint {
margin: 0 0 14px;
font-size: 13px;
line-height: 1.5;
color: var(--sr-text-muted);
} .sr-city-notice__step[data-sr-city-step="countries"] > .sr-city-notice__countries-hint,
.sr-city-notice__step[data-sr-city-step="pick"] > .sr-city-notice__pick-hint {
margin-bottom: 18px;
font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.15rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--sr-text);
}
.sr-city-notice__quick-title {
font-weight: 600;
color: var(--sr-text);
}
.sr-city-notice__quick-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.sr-city-notice__quick-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 42px;
padding: 8px 14px;
box-sizing: border-box;
border: 1px solid var(--sr-border-strong);
border-radius: var(--sr-radius-pill);
background: #fff;
color: var(--sr-text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.sr-city-notice__quick-link:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
background: rgba(59, 130, 246, 0.06);
}
.sr-city-notice__quick-link:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.35);
outline-offset: 2px;
}
.sr-city-notice__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sr-city-notice__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: var(--sr-radius-pill);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--sr-border-strong);
background: #fff;
color: var(--sr-text);
}
.sr-city-notice__btn--primary {
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
color: #fff;
}
.sr-city-notice__btn--primary:hover {
filter: brightness(1.05);
}
.sr-city-notice__btn--ghost {
background: #fff;
}
.sr-city-notice__btn--block {
width: 100%;
margin-top: 8px;
}
.sr-city-notice__note-title {
margin: 0 0 12px;
padding: 0;
font-size: 0.9375rem;
font-weight: 700;
color: var(--sr-text);
line-height: 1.35;
letter-spacing: -0.01em;
}
.sr-city-notice__note {
margin: 0 0 18px;
font-size: 13px;
line-height: 1.62;
color: var(--sr-text-muted);
}
.sr-city-notice__note-p {
margin: 0 0 0.85em;
}
.sr-city-notice__note-p:last-child {
margin-bottom: 0;
}
.sr-city-notice__search-wrap {
margin: 0 0 14px;
}
.sr-city-notice__search-label {
display: block;
margin: 0 0 8px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
color: var(--sr-text-muted);
}
.sr-city-notice__search {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
border: none;
border-radius: 14px;
background: #f1f5f9;
font-size: 15px;
color: var(--sr-text);
transition:
background 0.18s ease,
box-shadow 0.18s ease;
}
.sr-city-notice__search::placeholder {
color: #94a3b8;
}
.sr-city-notice__search:hover {
background: #e8eef5;
}
.sr-city-notice__search:focus {
outline: none;
background: #eef2f7;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.sr-city-notice__empty {
margin: 0;
padding: 20px 14px;
font-size: 14px;
line-height: 1.5;
color: var(--sr-text-muted);
text-align: center;
background: #f8fafc;
border-radius: 14px;
border: none;
}
.sr-city-notice__list {
--sr-city-notice-row: 44px;
display: flex;
flex-direction: column;
gap: 4px;
max-height: calc(var(--sr-city-notice-row) * 5 + 4px * 4);
overflow-y: auto;
overflow-x: hidden;
padding: 2px 2px 4px;
margin: 0 0 4px;
border-radius: 0;
border: none;
background: transparent;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
-ms-overflow-style: none;
}
.sr-city-notice__list::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.sr-city-notice__list::-webkit-scrollbar-track {
background: transparent !important;
}
.sr-city-notice__list::-webkit-scrollbar-thumb {
background: transparent !important;
border-radius: 0 !important;
}
.sr-city-notice__city-btn {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--sr-city-notice-row);
width: 100%;
margin: 0;
padding: 12px 14px;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--sr-border-strong) 78%, #fff);
border-radius: 14px;
background: #fff;
color: var(--sr-text);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
text-align: left;
cursor: pointer;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 6px 16px rgba(15, 23, 42, 0.06);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.15s ease,
color 0.15s ease,
transform 0.15s ease;
}
.sr-city-notice__city-btn:hover {
border-color: color-mix(in srgb, var(--sr-accent-primary) 35%, #dbe4ef);
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
color: color-mix(in srgb, var(--sr-text) 92%, var(--sr-accent-primary));
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.92) inset,
0 10px 20px rgba(15, 23, 42, 0.09);
}
.sr-city-notice__city-btn:active {
background: color-mix(in srgb, var(--sr-accent-primary) 10%, #fff);
color: var(--sr-accent-primary);
transform: translateY(0);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 4px 10px rgba(15, 23, 42, 0.07);
}
.sr-city-notice__city-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.sr-city-notice__city-btn::after {
content: "";
width: 8px;
height: 8px;
border-top: 2px solid color-mix(in srgb, var(--sr-text-muted) 70%, transparent);
border-right: 2px solid color-mix(in srgb, var(--sr-text-muted) 70%, transparent);
transform: rotate(45deg);
margin-left: 10px;
flex: 0 0 auto;
}
.sr-city-notice__step[data-sr-city-step="countries"] .sr-city-notice__city-btn::after {
opacity: 0.75;
}
.sr-city-notice__step[data-sr-city-step="pick"] .sr-city-notice__city-btn::after {
opacity: 0.5;
} @media (max-width: 900px) {
.sr-city-notice {
left: 12px;
right: 12px;
bottom: 12px;
top: auto;
width: auto;
max-width: none;
}
.sr-city-notice__panel {
padding: 0 16px 16px;
border-radius: 18px;
max-height: min(82vh, 720px);
overflow: hidden;
display: flex;
flex-direction: column;
}
.sr-city-notice__topbar {
min-height: 44px;
padding: 10px 0 4px;
margin-right: -4px;
}
.sr-city-notice__title {
margin-bottom: 8px;
font-size: clamp(1.6rem, 6.2vw, 2.1rem);
}
.sr-city-notice__lead,
.sr-city-notice__pick-hint,
.sr-city-notice__quick-title,
.sr-city-notice__countries-hint {
margin-bottom: 12px;
font-size: 16px;
line-height: 1.45;
}
.sr-city-notice__step {
min-width: 0;
overflow-x: hidden;
}
.sr-city-notice__search-wrap,
.sr-city-notice__actions {
min-width: 0;
}
.sr-city-notice__search {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.sr-city-notice__list {
max-height: min(36vh, 320px);
overflow-x: hidden !important;
overscroll-behavior: contain;
} .sr-city-notice__step[data-sr-city-step="countries"] .sr-city-notice__list {
max-height: none !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
height: auto !important;
padding-right: 0;
margin-right: 0;
scrollbar-width: none !important;
display: grid;
gap: 10px;
}
.sr-city-notice__step[data-sr-city-step="countries"] [data-sr-country-list] {
max-height: none !important;
overflow: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.sr-city-notice__step[data-sr-city-step="countries"] [data-sr-country-list]::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.sr-city-notice__step[data-sr-city-step="countries"] .sr-city-notice__list::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.sr-city-notice__step[data-sr-city-step="countries"] .sr-city-notice__city-btn {
min-height: 60px;
padding: 10px 12px;
font-size: 15px;
border-radius: 12px;
}
.sr-city-notice__panel {
max-height: min(88vh, 820px);
}
.sr-city-notice__actions {
flex-wrap: nowrap;
}
.sr-city-notice__btn {
flex: 1 1 0;
min-width: 0;
}
} .sr-mobile-only {
display: none !important;
} .sr-mainbar-mobile-actions {
display: none;
}
.sr-mainbar-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 10px;
margin: 0;
border: 0;
border-radius: var(--sr-radius-sm);
background: transparent;
cursor: pointer;
color: var(--sr-accent-secondary);
}
.sr-mainbar-burger:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 2px;
}
.sr-mainbar-burger__line {
display: block;
height: 2px;
border-radius: 1px;
background: currentColor;
}
.sr-mobile-drawer {
display: none;
}
body.sr-drawer-open .sr-mainbar-burger__line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.sr-drawer-open .sr-mainbar-burger__line:nth-child(2) {
opacity: 0;
}
body.sr-drawer-open .sr-mainbar-burger__line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.sr-mainbar-burger__line {
transition: transform 0.2s ease, opacity 0.2s ease;
}
body.sr-drawer-open {
overflow: hidden;
}
.sr-mobile-drawer__backdrop {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(15, 23, 42, 0.5);
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.sr-mobile-drawer__panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 61;
width: 85%;
max-width: 100%;
background: var(--sr-surface-soft);
border-left: 1px solid var(--sr-border);
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
box-shadow: var(--sr-shadow-md);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.sr-mobile-drawer.is-open .sr-mobile-drawer__backdrop {
opacity: 1;
pointer-events: auto;
}
.sr-mobile-drawer.is-open .sr-mobile-drawer__panel {
transform: translateX(0);
} .sr-mobile-drawer__masthead {
flex-shrink: 0;
padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 16px;
background: #fff;
border-bottom: 1px solid var(--sr-border);
}
.sr-mobile-drawer__masthead-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.sr-mobile-drawer__masthead .sr-section-kicker {
margin: 0;
} .sr-mobile-drawer .sr-section-kicker:not(.sr-mobile-drawer__kicker--city) {
font-size: 8px;
padding: 4px 8px;
line-height: 1.25;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sr-text-muted);
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-pill);
box-shadow: none;
} .sr-mobile-drawer .sr-section-kicker.sr-mobile-drawer__kicker--city {
font-size: 12px;
padding: 6px 12px;
line-height: 1.3;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--sr-text);
}
.sr-mobile-drawer h2.sr-section-title {
margin: 0;
font-size: clamp(20px, 5.4vw, 26px);
line-height: 1.2;
}
.sr-mobile-drawer h2.sr-section-title::after {
width: 120px;
height: 2px;
margin-top: 8px;
}
.sr-mobile-drawer__subtitle {
margin: 12px 0 0;
max-width: 100%;
font-size: 14px;
line-height: 1.45;
}
.sr-mobile-drawer__close {
flex-shrink: 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-pill);
background: #fff;
color: var(--sr-text-muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sr-mobile-drawer__close:hover {
color: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
background: var(--sr-surface-soft);
}
.sr-mobile-drawer__close:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 2px;
}
.sr-mobile-drawer__scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: 14px;
}
.sr-mobile-drawer__nav-item--has-sub {
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.sr-mobile-drawer__nav-item--has-sub:last-child {
border-bottom: none;
}
.sr-mobile-drawer__nav-parent {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
margin: 0;
border: none;
border-radius: 0;
background: transparent;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--sr-text);
text-align: left;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
.sr-mobile-drawer__nav-parent:hover,
.sr-mobile-drawer__nav-parent:focus-visible {
background: rgba(59, 130, 246, 0.06);
color: var(--sr-accent-primary);
outline: none;
}
.sr-mobile-drawer__link-chevron--sub {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.sr-mobile-drawer__nav-item--has-sub.is-open .sr-mobile-drawer__link-chevron--sub {
transform: rotate(180deg);
}
.sr-mobile-drawer__sub {
display: flex;
flex-direction: column;
background: rgba(15, 23, 42, 0.03);
}
.sr-mobile-drawer__sub[hidden] {
display: none;
}
.sr-mobile-drawer__link--sub {
padding-left: 28px;
font-size: 14px;
font-weight: 500;
}
.sr-mobile-drawer__nav-card {
display: flex;
flex-direction: column;
padding: 6px;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
}
.sr-mobile-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
padding: 10px 12px;
border-radius: var(--sr-radius-md);
font-size: 15px;
font-weight: 600;
line-height: 1.25;
color: var(--sr-text);
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.sr-mobile-drawer__link:hover {
background: var(--sr-surface-soft);
color: var(--sr-accent-primary);
}
.sr-mobile-drawer__link:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 0;
background: var(--sr-surface-soft);
}
.sr-mobile-drawer__link-chevron {
flex-shrink: 0;
display: inline-flex;
color: var(--sr-text-muted);
opacity: 0.55;
}
.sr-mobile-drawer__link:hover .sr-mobile-drawer__link-chevron {
color: var(--sr-accent-primary);
opacity: 1;
}
.sr-mobile-drawer__section {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 14px 16px;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
}
.sr-mobile-drawer__section .sr-section-kicker {
margin: 0;
align-self: flex-start;
}
.sr-mobile-drawer__messengers {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
}
.sr-messenger-btn {
flex: 0 0 auto;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
margin: 0;
border: 0;
border-radius: 50%;
padding: 5px;
box-sizing: border-box;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: #969696;
background: linear-gradient(0deg, #ddd, #fff);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition:
box-shadow 0.25s ease,
color 0.25s ease,
transform 0.2s ease;
}
.sr-messenger-btn::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
background: linear-gradient(0deg, #fff, #ddd);
z-index: 0;
}
.sr-messenger-btn > svg,
.sr-messenger-btn > i.sr-fa {
position: relative;
z-index: 1;
width: 19px;
height: 19px;
color: #969696;
fill: currentColor;
stroke: currentColor;
}
.sr-messenger-btn > i.sr-fa {
width: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
line-height: 1;
}
.sr-messenger-btn:hover:not(.is-disabled) {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
color: #337ab7;
transform: translateY(1px);
}
.sr-messenger-btn:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 2px;
}
.sr-messenger-btn.is-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.sr-messenger-btn--whatsapp {
color: #8c8c8c;
}
.sr-messenger-btn--whatsapp:hover:not(.is-disabled) {
color: #20c55e;
}
.sr-messenger-btn--telegram {
color: #8c8c8c;
}
.sr-messenger-btn--telegram:hover:not(.is-disabled) {
color: #229ed9;
}
.sr-messenger-btn--message {
color: #8c8c8c;
}
.sr-messenger-btn--message:hover:not(.is-disabled) {
color: #f59e0b;
} .sr-mobile-drawer__messengers .sr-messenger-btn {
width: auto;
height: auto;
min-width: 0;
min-height: 0;
padding: 6px 10px;
border: 1px solid var(--sr-border-strong);
border-radius: var(--sr-radius-pill);
background: #fff;
box-shadow: none;
color: var(--sr-text);
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease;
}
.sr-mobile-drawer__messengers .sr-messenger-btn::before {
display: none;
}
.sr-mobile-drawer__messengers .sr-messenger-btn > svg,
.sr-mobile-drawer__messengers .sr-messenger-btn > i.sr-fa {
width: 18px;
height: 18px;
color: currentColor;
}
.sr-mobile-drawer__messengers .sr-messenger-btn > i.sr-fa {
width: auto;
height: auto;
font-size: 18px;
}
.sr-mobile-drawer__messengers .sr-messenger-btn--whatsapp,
.sr-mobile-drawer__messengers .sr-messenger-btn--telegram,
.sr-mobile-drawer__messengers .sr-messenger-btn--message {
color: var(--sr-text);
}
.sr-mobile-drawer__messengers .sr-messenger-btn:hover:not(.is-disabled) {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
background: #fff;
box-shadow: none;
transform: none;
}
.sr-mobile-drawer__messengers .sr-messenger-btn:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 2px;
} .sr-contact-modal {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
padding: 20px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
padding-top: max(20px, env(safe-area-inset-top));
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
.sr-contact-modal.is-open {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
.sr-contact-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.5);
cursor: pointer;
}
.sr-contact-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
max-height: min(90vh, 640px);
max-height: min(90dvh, 640px);
overflow-y: auto;
margin: auto;
padding: 22px 20px 24px;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-md);
-webkit-overflow-scrolling: touch;
}
.sr-contact-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-pill);
background: #fff;
color: var(--sr-text-muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sr-contact-modal__close:hover {
color: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
background: var(--sr-surface-soft);
}
.sr-contact-modal .sr-section-kicker {
margin: 0 0 6px;
}
.sr-contact-modal h2.sr-section-title {
margin: 0;
padding-right: 48px;
font-size: clamp(20px, 4.2vw, 26px);
line-height: 1.2;
}
.sr-contact-modal h2.sr-section-title::after {
width: 120px;
height: 2px;
margin-top: 8px;
}
.sr-contact-modal__lead {
margin: 12px 0 18px;
max-width: 100%;
}
.sr-contact-modal__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.sr-contact-modal__label {
font-size: 13px;
font-weight: 600;
color: var(--sr-text);
}
.sr-contact-modal__form .sr-field {
margin: 0;
}
.sr-contact-modal__status {
margin: 0;
font-size: 14px;
line-height: 1.45;
}
.sr-contact-modal__status.is-success {
color: var(--sr-success);
}
.sr-contact-modal__status.is-error {
color: var(--sr-danger);
}
.sr-contact-modal__status.is-sending {
color: var(--sr-text-muted);
}
.sr-contact-modal__submit {
width: 100%;
min-height: 48px;
margin-top: 2px;
}
body.sr-contact-modal-open {
overflow: hidden;
}
.sr-mobile-drawer__lang-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
align-items: center;
justify-content: center;
}
.sr-mobile-drawer__lang {
text-align: center;
}
.sr-mobile-drawer__lang .sr-section-kicker {
justify-content: center;
text-align: center;
}
.sr-mobile-drawer__lang-pills .sr-lang-option {
width: auto;
height: auto;
min-width: 0;
min-height: 0;
border: 1px solid var(--sr-border-strong);
border-radius: var(--sr-radius-pill);
padding: 6px 10px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 600;
font-size: 12px;
letter-spacing: 0;
color: var(--sr-text);
background: #fff;
box-shadow: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease;
}
.sr-mobile-drawer__lang-pills .sr-lang-flag {
width: 18px;
height: 18px;
}
.sr-mobile-drawer__lang-pills .sr-lang-option__text {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
white-space: nowrap;
border: 0;
clip: auto;
clip-path: none;
}
.sr-mobile-drawer__lang-pills .sr-lang-option.is-active {
color: #fff;
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
}
.sr-mobile-drawer__lang-pills .sr-lang-option:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
background: #fff;
}
.sr-mobile-drawer__lang-pills .sr-lang-option.is-active:hover {
color: #fff;
background: var(--sr-accent-primary);
}
.sr-mobile-drawer__contact-card {
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
overflow: hidden;
background: #fff;
}
.sr-mobile-drawer__contact-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--sr-border);
background: #fff;
color: inherit;
text-decoration: none;
}
.sr-mobile-drawer__contact-row:last-child {
border-bottom: 0;
}
a.sr-mobile-drawer__contact-row:active {
background: var(--sr-surface-soft);
}
.sr-mobile-drawer__contact-ico {
flex-shrink: 0;
display: inline-flex;
margin-top: 1px;
color: var(--sr-accent-secondary);
}
.sr-mobile-drawer__contact-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.sr-mobile-drawer__contact-muted {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sr-text-muted);
}
.sr-mobile-drawer__contact-value {
font-size: 14px;
line-height: 1.4;
color: var(--sr-text);
word-break: break-word;
} .sr-card,
.sr-hero-card,
.sr-calc-body,
.sr-portfolio-card,
.sr-testimonial-card,
.sr-calc-form,
.sr-hero-panel {
background: var(--sr-surface);
border: 1px solid var(--sr-border);
box-shadow: var(--sr-shadow-sm);
border-radius: var(--sr-radius-lg);
}
.sr-card {
padding: 14px;
}
.sr-card-title,
.sr-service-item-title,
.sr-process-title,
.sr-team-name {
color: var(--sr-text);
margin: 0 0 6px;
}
.sr-card-text,
.sr-pain-deck__text,
.sr-benefit-pro-card__text,
.sr-section-subtitle,
.sr-hero-lead,
.sr-hero-trust,
.sr-service-item-includes,
.sr-service-lead,
.sr-service-meta,
.sr-process-text,
.sr-process-duration,
.sr-testimonial-role,
.sr-testimonial-date,
.sr-faq-footer,
.sr-seo-body,
.sr-calc-note,
.sr-calc-alt,
.sr-brief-hint,
.sr-price-tier__kicker,
.sr-price-tier__term,
.sr-services-payment__text,
.sr-brief-privacy,
.sr-calc-privacy,
.sr-calc-step-subtitle,
.sr-calc-total-label,
.sr-metric-label,
.sr-about-metric-label,
.sr-team-role,
.sr-service-list,
.sr-portfolio-meta,
.sr-portfolio-label,
.sr-portfolio-text,
.sr-calc-step-label,
.sr-log-label {
color: var(--sr-text-muted);
}
.sr-section-title-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 18px;
margin-bottom: 22px;
} .sr-contacts .sr-section-title-row {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 0;
gap: 10px;
}
.sr-section-title {
margin: 0;
font-size: clamp(22px, 2.3vw, 32px);
line-height: 1.2;
color: var(--sr-text);
}
.sr-section-title::after {
content: "";
display: block;
margin-top: 9px;
width: 160px;
height: 2px;
background: linear-gradient(90deg, var(--sr-accent-secondary), var(--sr-accent-primary));
}
h3.sr-section-title {
font-size: clamp(18px, 1.85vw, 24px);
line-height: 1.28;
}
h3.sr-section-title::after {
width: 120px;
margin-top: 7px;
}  h1 {
margin: 10px 0 12px;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
color: var(--sr-text);
}
h2 {
margin: 0;
font-size: clamp(22px, 2.3vw, 32px);
line-height: 1.2;
color: var(--sr-text);
} h2:not(.sr-section-title)::after {
content: "";
display: block;
margin-top: 9px;
width: 160px;
height: 2px;
background: linear-gradient(90deg, var(--sr-accent-secondary), var(--sr-accent-primary));
}
h3 {
margin: 0 0 6px;
color: var(--sr-text);
}
h4 {
margin: 0 0 6px;
color: var(--sr-text);
}
h5 {
margin: 0 0 6px;
color: var(--sr-text);
} .sr-section-subtitle {
margin: 0;
max-width: min(60ch, 100%);
} #seo-text.sr-section {
padding-bottom: 0;
background: none;
border: none;
box-shadow: none;
}
.sr-seo-text--clean-pro .sr-seo-text-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.sr-seo-text__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
max-width: min(48rem, 100%);
}
.sr-seo-text--clean-pro .sr-section-kicker {
margin-bottom: 0;
}
.sr-seo-text--clean-pro .sr-section-title {
margin: 0;
}
.sr-seo-text--clean-pro .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-seo-text-lead {
margin: 4px 0 0;
max-width: min(42ch, 100%);
font-size: clamp(15px, 1.35vw, 17px);
line-height: 1.45;
}
.sr-seo-text--clean-pro .sr-seo-body {
align-self: stretch;
width: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
text-align: center;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--sr-text-muted);
}
.sr-seo-text--clean-pro .sr-seo-body a {
color: var(--sr-accent-primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.sr-seo-text--clean-pro .sr-seo-body a:hover {
color: var(--sr-accent-primary-hover);
}
.sr-seo-text--clean-pro .sr-seo-body p {
margin: 0 0 0.85em;
}
.sr-seo-text--clean-pro .sr-seo-body p:last-child {
margin-bottom: 0;
}
.sr-chip,
.sr-chip-badge,
.sr-badge,
.sr-badge-pill,
.sr-logo-chip,
.sr-calc-step-indicator,
.sr-calc-addon,
.sr-portfolio-filter,
.sr-about-tag,
.sr-checkbox,
.sr-log-item {
border: 1px solid var(--sr-border);
background: #fff;
border-radius: var(--sr-radius-pill);
}
.sr-chip,
.sr-badge,
.sr-calc-step-indicator,
.sr-calc-addon,
.sr-portfolio-filter {
padding: 6px 10px;
}
.sr-chip-badge,
.sr-badge-pill {
padding: 2px 8px;
}
.sr-pill-success {
background: #ecfdf3;
color: #166534;
}
.sr-pill-info {
background: #eff6ff;
color: var(--sr-accent-primary-hover);
}
.sr-pill-warn {
background: #fffbeb;
color: var(--sr-warning);
}
.sr-btn-primary,
.sr-btn-callback {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--sr-radius-pill);
border: 1px solid var(--sr-accent-primary);
background: var(--sr-accent-primary);
color: #fff;
font-weight: 700;
cursor: pointer;
box-shadow: var(--sr-btn-shadow-primary);
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease,
color 0.15s ease;
}
.sr-btn-primary:hover,
.sr-btn-callback:hover {
background: var(--sr-accent-primary-hover);
border-color: var(--sr-accent-primary-hover);
color: #fff;
box-shadow: var(--sr-btn-shadow-primary-hover);
}
.sr-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: var(--sr-radius-pill);
border: 2px solid var(--sr-border-strong);
background: #fff;
color: var(--sr-text);
font-weight: 650;
box-shadow: var(--sr-btn-shadow-outline);
transition:
border-color 0.15s ease,
color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.sr-btn-outline:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
box-shadow:
0 0 0 var(--sr-btn-ring-spread) rgba(191, 219, 254, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.sr-field {
display: grid;
gap: 6px;
font-size: 13px;
}
.sr-field input,
.sr-field textarea,
.sr-field select,
.sr-calc-form input,
.sr-calc-form textarea,
.sr-calc-form select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--sr-border-strong);
border-radius: 12px;
background: #fff;
color: var(--sr-text);
font: inherit;
}
.sr-field textarea,
.sr-calc-form textarea {
min-height: 110px;
resize: vertical;
}
.sr-field input:focus,
.sr-field textarea:focus,
.sr-field select:focus,
.sr-calc-form input:focus,
.sr-calc-form textarea:focus,
.sr-calc-form select:focus {
outline: 2px solid rgba(59, 130, 246, 0.16);
border-color: var(--sr-accent-primary);
} .sr-hero {
position: relative;
z-index: 0;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 24px;
align-items: center;
border: 0;
border-radius: 22px;
padding: 28px;
overflow: visible;
background: transparent;
box-shadow: none;
} .sr-hero::before {
content: "";
position: absolute;
top: 0;
bottom: calc(-1 * var(--sr-torn-edge-h) + 40px);
transform: none;
pointer-events: none;
z-index: 1;
opacity: 0.12;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/bg-heros.png?v=9);
background-repeat: no-repeat;
background-position: center calc(20% + env(safe-area-inset-top, 0px) * 0.35);
background-size: 100% auto;
} .sr-hero::after {
content: "";
position: absolute;
top: 0;
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size:
100% calc(100% - var(--sr-torn-edge-h)),
100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
.sr-hero > * {
position: relative;
z-index: 2;
}
.sr-hero-left,
.sr-hero-right {
position: relative;
z-index: 2;
}
.sr-hero-left {
display: grid;
gap: 14px;
padding-right: 18px;
border-right: 0;
}
.sr-hero-left .sr-hero-kicker {
justify-self: center;
margin-left: auto;
margin-right: auto; margin-bottom: -10px;
}
.sr-hero--static-right-image .sr-hero-mobile-image-wrap {
display: none;
}
.sr-hero-kicker-heading + .sr-hero-heading {
margin-top: 0;
}
@media (max-width: 900px) {
.sr-hero-kicker {
margin-left: auto;
margin-right: auto;
}
} .sr-section-kicker,
.sr-faq-kicker,
.sr-partners__kicker,
.sr-hero-kicker,
.sr-about-summary-kicker,
.sr-pain-deck__kicker,
.sr-partner-card__badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 5px 11px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.25;
color: var(--sr-accent-primary);
background: linear-gradient(
135deg,
color-mix(in srgb, var(--sr-accent-primary) 14%, #fff),
#fff
);
border: 1px solid color-mix(in srgb, var(--sr-accent-primary) 22%, var(--sr-border));
border-radius: var(--sr-radius-pill);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sr-section-kicker,
.sr-faq-kicker,
.sr-partners__kicker,
.sr-hero-kicker,
.sr-about-summary-kicker,
.sr-pain-deck__kicker {
margin: 0 0 4px;
}
.sr-partner-card__badge {
position: relative;
z-index: 1;
margin: 0;
align-self: flex-start;
}
.sr-hero-heading {
margin: 10px 0 12px;
font-size: clamp(22px, 2.75vw, 34px);
line-height: 1.25;
font-weight: 400;
letter-spacing: normal;
text-align: center;
} .sr-hero .sr-hero-heading::after {
margin-left: auto;
margin-right: auto;
}
.sr-gradient-text {
color: var(--sr-accent-primary);
}
.sr-hero--landing-service .sr-gradient-text {
background: linear-gradient(
90deg,
var(--sr-landing-grad-dark-start, #0f172a) 0%,
#111827 14%,
var(--sr-landing-grad-accent, var(--sr-accent-primary)) 40%,
var(--sr-landing-grad-accent, var(--sr-accent-primary)) 60%,
#111827 86%,
var(--sr-landing-grad-dark-end, #0f172a) 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.sr-hero-points {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 6px;
padding: 0;
}
.sr-hero-point {
display: grid;
grid-template-columns: 26px 1fr;
align-items: center;
column-gap: 14px;
padding: 0;
color: var(--sr-text-muted);
font-size: 16px;
line-height: 1.25;
}
.sr-hero-point-icon {
width: 26px;
height: 26px;
border-radius: 0;
background: transparent;
border: 0;
color: var(--sr-accent-primary);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 26px;
font-size: 14px;
line-height: 1;
position: relative;
}
.sr-hero-point-icon::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
border: 0;
display: block;
}
.sr-hero-point-icon--fa::before {
display: none;
}
.sr-hero-point-icon i.sr-hero-point-fa {
font-size: 15px;
line-height: 1;
color: inherit;
}
.sr-hero-point-icon svg,
.sr-metric-icon svg {
width: 92%;
height: 92%;
display: block;
overflow: visible;
fill: currentColor;
stroke: currentColor;
color: var(--sr-accent-primary);
} .sr-metric-icon {
overflow: visible; }
.sr-metric-icon svg {
width: 100%;
height: 100%;
overflow: visible;
transform: none;
}
.sr-metric-icon i.sr-hero-metric-fa {
font-size: 1.35em;
line-height: 1;
color: var(--sr-accent-primary);
} .sr-hero-point-icon svg rect[fill="none"][stroke="none"],
.sr-metric-icon svg rect[fill="none"][stroke="none"] {
display: none;
}
.sr-hero-slider-btn svg {
width: 1em;
height: 1em;
display: block;
margin: 0 auto;
fill: currentColor;
stroke: currentColor;
color: inherit;
}
.sr-hero-slider-btn i.sr-hero-slider-fa {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 14px;
line-height: 1;
color: inherit;
}
.sr-nav-cta,
.sr-hero-metrics,
.sr-about-metrics,
.sr-brief-actions,
.sr-dot-row,
.sr-logos-row,
.sr-calc-steps,
.sr-calc-nav,
.sr-calc-summary,
.sr-calc-summary-row,
.sr-testimonial-author,
.sr-testimonial-footer,
.sr-service-footer,
.sr-checkbox-group,
.sr-portfolio-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sr-hero-left .sr-nav-cta {
justify-content: flex-start;
margin-top: 6px;
}
.sr-hero-left .sr-btn-primary,
.sr-hero-left .sr-btn-outline {
min-width: 220px;
}
.sr-hero-left .sr-hero-metrics {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.sr-hero-left .sr-metric {
padding: 10px 12px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
display: grid;
grid-template-columns: 50px 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 2px;
align-content: start;
}
.sr-hero-left .sr-metric-icon {
grid-row: 1 / span 2;
width: 50px;
height: 50px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--sr-accent-primary);
font-size: 15px;
line-height: 1;
justify-self: center;
align-self: center;
overflow: visible; } .sr-hero-left .sr-metric-icon svg { transform: translate(6px, 6px);
transform-origin: center center;
}
.sr-hero-left .sr-metric-icon i.sr-hero-metric-fa {
font-size: 24px;
transform: none;
}
.sr-hero-left .sr-metric-value {
font-size: 24px;
line-height: 1;
font-weight: 750;
letter-spacing: -0.02em;
}
.sr-hero-left .sr-metric-label {
margin-top: 4px;
font-size: 13px;
line-height: 1.3;
}
.sr-hero-left .sr-metric-label { margin-top: 0; }
.sr-calc-summary-row,
.sr-calc-nav,
.sr-service-footer,
.sr-testimonial-footer {
justify-content: space-between;
align-items: center;
}
.sr-metric-value,
.sr-about-metric-value,
.sr-service-price,
.sr-calc-total-value,
.sr-log-value {
color: var(--sr-text);
font-weight: 700;
}
.sr-service-item-price,
.sr-service-price,
.sr-price-tier__price-val,
.sr-services-pricing__summary-price,
.sr-calc-card-price {
color: var(--sr-accent-primary);
font-weight: 700;
}
.sr-feature-dot,
.sr-dot--accent,
.sr-dot--accent-2,
.sr-orbit-dot {
background: var(--sr-accent-secondary);
}
.sr-hero-grid,
.sr-badge-stack,
.sr-log-list,
.sr-faq-accordion,
.sr-brief-form,
.sr-calc-form-grid {
display: grid;
gap: 10px;
}
.sr-log-list,
.sr-service-list,
.sr-price-tier__list,
.sr-price-features {
margin: 0;
padding: 0;
list-style: none;
}
.sr-portfolio-card {
overflow: hidden;
}
.sr-portfolio-thumb,
.sr-portfolio-thumb--gradient-2,
.sr-portfolio-thumb--gradient-3 {
min-height: 120px;
background: var(--sr-surface-soft);
}
.sr-portfolio-body {
padding: 12px;
}
.sr-portfolio-filter {
cursor: pointer;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: var(--sr-radius-pill);
border: 1px solid var(--sr-border-strong);
background: #fff;
color: var(--sr-text);
font: inherit;
font-weight: 600;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sr-portfolio-filter:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
}
.sr-portfolio-filter:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.35);
outline-offset: 3px;
}
.sr-portfolio-filter.is-active {
color: #fff;
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
font-weight: 700;
box-shadow: var(--sr-btn-shadow-primary);
} .sr-portfolio-link {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--sr-radius-pill);
border: 2px solid var(--sr-border-strong);
background: #fff;
color: var(--sr-text);
font: inherit;
font-weight: 650;
cursor: pointer;
box-shadow: var(--sr-btn-shadow-outline);
transition:
border-color 0.15s ease,
color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.sr-portfolio-link:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
box-shadow:
0 0 0 var(--sr-btn-ring-spread) rgba(191, 219, 254, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.sr-portfolio-link:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.35);
outline-offset: 3px;
}
a.sr-portfolio-link {
text-decoration: none;
}
.sr-calc-step-indicator.is-active,
.sr-calc-card.is-selected {
border-color: var(--sr-accent-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.sr-calc-addon.is-selected {
border-color: var(--sr-success);
background: #ecfdf3;
}
.sr-calc-step-indicator.is-completed {
border-color: var(--sr-success);
} #contacts {
position: relative;
overflow: visible;
background: transparent;
}
#contacts::before {
content: "";
position: absolute;
height: var(--sr-torn-edge-h);
top: calc(var(--sr-torn-bg-trim) - var(--sr-torn-edge-h));
transform: rotate(180deg);
pointer-events: none;
z-index: 0;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
} #contacts::after {
content: "";
position: absolute;
top: var(--sr-torn-bg-trim);
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size:
100% calc(100% - var(--sr-torn-edge-h)),
100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
#contacts > * {
position: relative;
z-index: 1;
} #contacts .sr-contacts-layout::before {
content: "";
position: absolute;
top: calc(var(--sr-torn-bg-trim) - var(--sr-section-y));
bottom: calc(-1 * var(--sr-section-y) - var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
opacity: 0.12;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/bg-footer.png?v=1);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
} #faq {
position: relative;
overflow: visible;
background: transparent;
}
#faq::before {
content: "";
position: absolute;
height: var(--sr-torn-edge-h);
top: calc(var(--sr-torn-bg-trim) - var(--sr-torn-edge-h));
transform: rotate(180deg);
pointer-events: none;
z-index: 0;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
#faq::after {
content: "";
position: absolute;
top: var(--sr-torn-bg-trim);
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Rd-bg-faq.png?v=1),
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat, no-repeat;
background-size:
clamp(240px, 28vw, 520px) auto,
100% calc(100% - var(--sr-torn-edge-h)),
100% var(--sr-torn-edge-h);
background-position: right bottom, center top, center bottom;
}
#faq > * {
position: relative;
z-index: 1;
}
.sr-faq-extended .sr-faq-layout {
gap: clamp(20px, 3.5vw, 36px);
align-items: start;
}
.sr-faq-content {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.sr-faq-extended .sr-section-title-row {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 0;
gap: 10px;
}
.sr-faq-extended .sr-section-title { letter-spacing: normal;
}
.sr-faq-panel {
padding: 16px; --sr-faq-panel-pad-x: 16px;
--sr-faq-pagination-optical-shift: 6px;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
position: relative;
} .sr-faq-extended .sr-faq-panel {
--sr-faq-pagination-gutter: 40px;
} .sr-brief-panel {
max-width: min(720px, 100%);
margin: 0 auto;
padding: 24px 22px 28px;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
}
.sr-brief-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
}
.sr-brief-visual {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.sr-brief-image {
display: block;
width: 100%;
max-width: min(440px, 100%);
height: auto;
margin: 0 auto;
object-fit: contain;
}
.sr-brief-intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.sr-brief-intro .sr-section-kicker {
align-self: center;
margin: 0 0 4px;
}
.sr-brief-intro .sr-section-title {
text-align: center;
}
.sr-brief-intro .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-brief-intro .sr-section-subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sr-brief-intro .sr-brief-hint-text {
margin-top: 12px;
max-width: min(62ch, 100%);
margin-left: auto;
margin-right: auto;
font-size: clamp(0.88rem, 0.82rem + 0.25vw, 0.95rem);
line-height: 1.55;
opacity: 0.96;
}
.sr-brief-intro .sr-brief-actions {
justify-content: center;
width: 100%;
margin-top: 4px;
}
.sr-faq-pagination {
position: absolute;
top: 18px;
bottom: 18px; left: calc(
100% - var(--sr-faq-panel-pad-x, 16px) - var(--sr-faq-pagination-gutter, 40px) / 2 + var(--sr-faq-pagination-optical-shift, 0px)
);
right: auto;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
pointer-events: auto;
z-index: 2;
}
.sr-faq-pagination.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sr-faq-extended .sr-faq-accordion { padding-right: var(--sr-faq-pagination-gutter, 40px);
}
.sr-faq-accordion-wrap {
max-height: none;
overflow: hidden;
}
.sr-faq-accordion {
display: flex;
flex-direction: column;
transition: transform 0.45s ease;
will-change: transform;
}
.sr-faq-extended .sr-faq-accordion-item {
margin: 0 0 12px;
padding: 0;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(226, 232, 240, 0.75);
border-radius: 18px;
box-shadow:
10px 10px 24px rgba(15, 23, 42, 0.06),
-10px -10px 24px rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(226, 232, 240, 0.75);
overflow: hidden;
}
.sr-faq-extended .sr-faq-accordion-item.is-open {
background: rgba(255, 255, 255, 0.70);
border-color: rgba(29, 78, 216, 0.22);
box-shadow:
inset 10px 10px 24px rgba(15, 23, 42, 0.06),
inset -10px -10px 24px rgba(255, 255, 255, 0.92);
}
.sr-faq-extended .sr-faq-accordion-item:last-child {
margin-bottom: 0;
}
.sr-faq-accordion-body {
max-height: 0;
overflow: hidden;
padding: 0 18px 0 16px;
transition: max-height 0.28s ease, padding-bottom 0.28s ease;
}
.sr-faq-accordion-item.is-open .sr-faq-accordion-body {
padding-bottom: 16px;
}
.sr-faq-accordion-body p {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--sr-text-muted);
}
.sr-faq-accordion-header {
width: 100%;
padding: 16px 14px 16px 18px;
border: 0;
background: transparent;
color: var(--sr-text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
text-align: left;
font: inherit;
font-size: 15px;
font-weight: 650;
line-height: 1.35;
border-radius: 0;
transition: color 0.16s ease, background 0.16s ease;
}
.sr-faq-accordion-header:hover {
color: var(--sr-accent-primary);
}
.sr-faq-accordion-item.is-open .sr-faq-accordion-header {
color: var(--sr-accent-primary);
}
.sr-faq-accordion-header:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.45);
outline-offset: 2px;
}
.sr-faq-accordion-caret {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 14px;
background: rgba(239, 246, 255, 0.7);
border: 1px solid rgba(59, 130, 246, 0.22);
position: relative;
box-shadow:
7px 7px 16px rgba(15, 23, 42, 0.08),
-7px -7px 16px rgba(255, 255, 255, 0.85);
transition:
background 0.16s ease,
border-color 0.16s ease,
transform 0.2s ease;
}
.sr-faq-accordion-item.is-open .sr-faq-accordion-caret {
background: rgba(219, 234, 254, 0.85);
border-color: rgba(59, 130, 246, 0.40);
box-shadow:
inset 7px 7px 16px rgba(15, 23, 42, 0.08),
inset -7px -7px 16px rgba(255, 255, 255, 0.86);
}
.sr-faq-accordion-caret::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
margin: 0;
border-right: 2px solid rgba(29, 78, 216, 0.95);
border-bottom: 2px solid rgba(29, 78, 216, 0.95);
transform: translate(-50%, -50%) rotate(45deg);
transition: transform 0.22s ease;
}
.sr-faq-accordion-item.is-open .sr-faq-accordion-caret::after {
transform: translate(-50%, -50%) rotate(-135deg);
}
.sr-faq-footer {
margin: 0;
padding: 16px 20px;
font-size: 14px;
line-height: 1.5;
background: rgba(239, 246, 255, 0.65);
border: 1px solid rgba(59, 130, 246, 0.22);
border-radius: var(--sr-radius-md);
}
.sr-faq-footer a {
color: var(--sr-accent-primary);
font-weight: 650;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.sr-faq-footer a:hover {
color: var(--sr-accent-primary-hover);
}
.sr-faq-illustration {
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
position: static;
top: auto;
align-self: stretch;
height: 100%;
}
body.admin-bar .sr-faq-illustration {
top: 120px;
}
@media screen and (max-width: 782px) {
body.admin-bar .sr-faq-illustration {
top: 88px;
}
}
.sr-faq-illustration img {
display: block;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
object-fit: contain;
} .sr-blog-teaser .sr-blog-grid {
gap: 14px;
} @media (min-width: 901px) {
.sr-blog-teaser .sr-blog-grid[data-blog-mode="grid"] {
display: grid;
justify-content: center;
gap: 14px;
overflow: visible;
flex-wrap: unset;
scroll-snap-type: none;
}
.sr-blog-teaser .sr-blog-grid[data-blog-mode="grid"][data-blog-cols="2"] {
grid-template-columns: repeat(2, 300px);
}
.sr-blog-teaser .sr-blog-grid[data-blog-mode="grid"][data-blog-cols="4"] {
grid-template-columns: repeat(4, 300px);
}
.sr-blog-teaser .sr-blog-grid[data-blog-mode="grid"] .sr-blog-thumb {
height: 300px; } .sr-blog-slider-viewport[data-blog-mode="slider"] {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0 var(--sr-section-x);
box-sizing: border-box;
}
.sr-blog-teaser .sr-blog-grid[data-blog-mode="slider"] {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
}
.sr-blog-teaser .sr-blog-grid[data-blog-mode="slider"]::-webkit-scrollbar {
display: none;
}
.sr-blog-teaser .sr-blog-grid[data-blog-mode="slider"] .sr-blog-card {
flex: 0 0 100%;
max-width: 100%;
min-width: 0;
scroll-snap-align: start;
}
} @media (max-width: 900px) {
.sr-blog-teaser .sr-section-title-row {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sr-inline-gap, 14px);
margin-bottom: var(--sr-stack-gap, 20px);
}
.sr-blog-teaser .sr-section-title-row > div {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: min(36ch, 100%);
}
.sr-blog-teaser .sr-section-title-row .sr-section-title {
text-align: center;
}
.sr-blog-teaser .sr-section-title-row .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-blog-teaser .sr-section-title-row .sr-section-subtitle {
text-align: center;
max-width: min(52ch, 100%);
margin: 0;
}
.sr-blog-slider-viewport {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0 var(--sr-section-x);
box-sizing: border-box;
}
.sr-blog-teaser .sr-blog-grid[data-blog-slider] {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 14px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
}
.sr-blog-teaser .sr-blog-grid[data-blog-slider]::-webkit-scrollbar {
display: none;
} .sr-blog-teaser .sr-blog-grid[data-blog-slider] .sr-blog-card {
flex: 0 0 min(300px, 100%);
width: min(300px, 100%);
max-width: 300px;
min-width: 0;
scroll-snap-align: start;
box-sizing: border-box;
}
.sr-blog-teaser .sr-blog-grid[data-blog-slider] .sr-blog-thumb {
width: 100%;
height: auto;
aspect-ratio: 1;
max-height: 300px;
}
.sr-blog-teaser .sr-blog-grid[data-blog-slider] .sr-blog-thumb-link,
.sr-blog-teaser .sr-blog-grid[data-blog-slider] .sr-blog-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.sr-blog-card {
padding: 0;
border-radius: var(--sr-radius-lg);
display: flex;
flex-direction: column;
gap: 11px;
background: #fff;
border: 1px solid var(--sr-border);
box-shadow: var(--sr-shadow-sm);
overflow: hidden;
}
.sr-blog-thumb {
border-radius: 0;
overflow: hidden;
border: 0;
background: var(--sr-surface-soft);
position: relative; height: 210px;
}
.sr-blog-thumb-link {
display: block;
width: 100%;
height: 100%;
}
.sr-blog-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.sr-blog-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sr-blog-category {
font-size: 12px;
}
.sr-blog-author {
font-size: 12px;
color: var(--sr-text-muted);
white-space: nowrap;
}
.sr-blog-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .sr-blog-card .sr-blog-excerpt {
margin: 0;
}
.sr-blog-tags {
position: absolute;
top: 16px;
left: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
max-width: calc(100% - 32px);
z-index: 2;
}
.sr-blog-tag {
font-size: 12px;
} .sr-blog-tag {
border: 1px solid var(--sr-border) !important;
box-shadow: none !important;
background: #fff !important;
padding: 6px 10px;
}
.sr-blog-tag:hover {
background: rgba(239, 246, 255, 0.65);
}
.sr-blog-tag:focus-visible {
outline: none;
box-shadow: none;
}
.sr-blog-readmore {
margin-top: 0;
} .sr-blog-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 12px;
}
.sr-blog-readmore {
white-space: nowrap;
} .sr-blog-card > :not(.sr-blog-thumb):not(.sr-blog-divider) { padding-left: 16px;
padding-right: 16px;
}
.sr-blog-divider {
height: 2px;
width: 100%;
background: linear-gradient(
90deg,
var(--sr-accent-secondary),
var(--sr-accent-primary)
);
margin: 0;
} .sr-blog-card .sr-card-title {
text-align: center;
}
.sr-blog-card .sr-blog-excerpt {
text-align: center; padding-top: 0 !important;
}
.sr-blog-tags {
position: absolute;
top: 16px;
left: 16px;
width: auto;
justify-content: flex-start;
flex-wrap: wrap;
max-width: calc(100% - 32px);
}
.sr-blog-actions {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 2px;
padding-bottom: 16px; } .sr-blog-card .sr-card-title,
.sr-blog-card .sr-card-text {
padding-top: 0;
padding-bottom: 0;
}
.sr-blog-card .sr-blog-readmore {
padding-top: 10px;
padding-bottom: 10px;
}
.sr-blog-card .sr-blog-excerpt {
padding-bottom: 0;
}
@media (max-width: 900px) {
.sr-faq-pagination {
position: static;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: fit-content;
max-width: 100%;
margin-top: 14px;
margin-left: auto;
margin-right: auto;
left: auto;
right: auto;
top: auto;
bottom: auto;
transform: none;
padding: 0 4px;
}
.sr-faq-extended .sr-faq-accordion {
padding-right: 0;
}
.sr-faq-illustration {
position: static;
order: 1;
max-width: 420px;
margin-inline: auto;
height: auto;
align-self: auto;
}
.sr-faq-extended .sr-faq-layout {
display: flex;
flex-direction: column;
}
.sr-faq-content {
order: 0;
}
.sr-faq-accordion-header {
padding-right: 4px;
}
.sr-faq-accordion-body {
padding-right: 12px;
}
} .sr-guarantees {
width: 100%;
max-width: 100%; display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
gap: clamp(12px, 2vw, 24px);
align-items: start;
}
.sr-guarantees-title-row {
grid-column: 2;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: 0;
text-align: center;
}
.sr-guarantees-title-row > div:first-child {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.sr-guarantees-lead {
max-width: 100%;
text-align: center;
margin: 0;
}
.sr-guarantees .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-guarantees-hub {
grid-column: 1 / -1;
position: relative;
width: 100%;
min-height: 280px;
}
.sr-guarantees-spokes {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: visible;
} .sr-guarantees-hub__cols {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
gap: clamp(12px, 2vw, 24px);
align-items: center;
width: 100%;
}
.sr-guarantees-hub__column {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.sr-guarantees-hub__center {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sr-guarantees-figure {
background: linear-gradient(180deg, #fff 0%, var(--sr-surface-soft) 100%);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-md);
padding: clamp(12px, 2vw, 20px);
margin: 0;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sr-guarantees-figure::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(59, 130, 246, 0.35));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.sr-guarantees-figure img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.sr-guarantee-card {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
border: 1px solid var(--sr-border);
box-shadow: var(--sr-shadow-sm);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sr-guarantee-card:hover {
box-shadow: var(--sr-shadow-md);
}
.sr-guarantee-card__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 16px 20px;
flex: 1;
min-height: 100%;
}
.sr-guarantee-card__step {
position: absolute;
top: 10px;
right: 12px;
font-size: 28px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(15, 23, 42, 0.06);
user-select: none;
pointer-events: none;
}
.sr-guarantee-card__icon {
width: 36px;
height: 36px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
border: 1px solid rgba(59, 130, 246, 0.35);
box-shadow: var(--sr-neu-raised);
overflow: hidden;
line-height: 0;
} .sr-guarantee-card__icon svg {
width: 24px;
height: 24px;
max-width: 88%;
max-height: 88%;
display: block;
flex-shrink: 0;
box-sizing: border-box;
margin: 0;
color: inherit;
}
.sr-guarantee-card__icon svg :is(path, circle, rect, ellipse, polygon, polyline) {
fill: currentColor;
}
.sr-guarantee-card__icon svg :is(path, circle, rect, ellipse, polygon, polyline)[fill="none"] {
fill: none;
}
.sr-guarantee-card__icon svg :is(path, line, polyline, polygon, circle, rect, ellipse)[stroke]:not([stroke="none"]) {
stroke: currentColor;
}
.sr-guarantee-card__title {
margin: 0;
padding-right: 36px;
font-size: 14px;
font-weight: 650;
line-height: 1.3;
color: var(--sr-text);
}
.sr-guarantee-card__text {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--sr-text-muted);
} .sr-guarantee-card--v1 {
border-radius: var(--sr-radius-lg) var(--sr-radius-sm) var(--sr-radius-lg) var(--sr-radius-lg);
border-left: 3px solid #f59e0b;
transform: rotate(-0.4deg);
}
.sr-guarantee-card--v1:hover {
transform: rotate(0deg) translateY(-2px);
}
.sr-guarantee-card--v1 .sr-guarantee-card__icon {
background: rgba(245, 158, 11, 0.12);
color: #b45309;
border-color: rgba(245, 158, 11, 0.45);
}
.sr-guarantee-card--v2 {
border-radius: var(--sr-radius-lg);
outline: 1px solid rgba(59, 130, 246, 0.15);
outline-offset: 2px;
transform: rotate(-0.4deg);
}
.sr-guarantee-card--v2:hover {
transform: rotate(0deg) translateY(-2px);
}
.sr-guarantee-card--v2 .sr-guarantee-card__icon {
background: #ecfdf3;
color: #15803d;
border-color: rgba(22, 163, 74, 0.35);
}
.sr-guarantee-card--v3 {
border-radius: 4px var(--sr-radius-lg) var(--sr-radius-lg) var(--sr-radius-lg);
border-bottom: 2px solid #f59e0b;
background: linear-gradient(145deg, #fff 0%, #fff 55%, rgba(59, 130, 246, 0.06) 100%);
transform: rotate(-0.4deg);
}
.sr-guarantee-card--v3:hover {
transform: rotate(0deg) translateY(-2px);
}
.sr-guarantee-card--v3 .sr-guarantee-card__icon {
background: rgba(15, 23, 42, 0.06);
color: var(--sr-text);
border-color: var(--sr-border-strong);
}
.sr-guarantee-card--v4 {
border-radius: var(--sr-radius-lg);
border-top: 2px solid var(--sr-accent-primary);
}
.sr-guarantee-card--v4 .sr-guarantee-card__icon {
background: rgba(59, 130, 246, 0.12);
color: var(--sr-accent-primary);
}
.sr-guarantee-card--v5 {
border-radius: var(--sr-radius-lg);
outline: 1px solid rgba(59, 130, 246, 0.15);
outline-offset: 2px;
}
.sr-guarantee-card--v5 .sr-guarantee-card__icon {
background: #ecfdf3;
color: #15803d;
border-color: rgba(22, 163, 74, 0.35);
}
.sr-guarantee-card--v6 {
border-radius: var(--sr-radius-sm) var(--sr-radius-lg) var(--sr-radius-lg) var(--sr-radius-lg);
border-right: 3px solid var(--sr-accent-primary);
}
.sr-guarantee-card--v6 .sr-guarantee-card__icon {
background: rgba(59, 130, 246, 0.08);
color: var(--sr-accent-primary);
} .sr-guarantees-hub .sr-guarantee-card--v4,
.sr-guarantees-hub .sr-guarantee-card--v5,
.sr-guarantees-hub .sr-guarantee-card--v6 {
transform: rotate(0.4deg);
}
.sr-guarantees-hub .sr-guarantee-card--v4:hover,
.sr-guarantees-hub .sr-guarantee-card--v5:hover,
.sr-guarantees-hub .sr-guarantee-card--v6:hover {
transform: rotate(0deg) translateY(-2px);
}
.sr-guarantees-footer {
grid-column: 1 / -1;
justify-self: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
margin: 0;
padding: clamp(14px, 2.25vw, 20px);
border-radius: var(--sr-radius-lg);
border: 1px solid var(--sr-border);
background: var(--sr-surface-soft);
font-size: 14px;
line-height: 1.6;
color: var(--sr-text-muted);
display: block;
text-align: center;
}
.sr-guarantees-footer .sr-doc-icon {
display: inline;
margin-right: 0.35em;
font-size: 1.05em;
vertical-align: -0.06em;
} #support.sr-section {
margin-top: 0;
padding-top: 0;
} .sr-support--pro .sr-support-title-row {
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.sr-support--pro .sr-support-lead {
max-width: min(52ch, 100%);
text-align: right;
margin: 0;
}
.sr-support--pro .sr-section-title::after {
margin-left: 0;
}
.sr-support-card__tag {
margin: 0;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sr-text-muted);
} .sr-support-card .sr-guarantee-card__icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sr-support-card .sr-guarantee-card__icon > svg {
position: static;
width: 28px;
height: 28px;
max-width: none;
max-height: none;
transform: none;
margin: 0;
}
@media (max-width: 900px) {
.sr-support--pro .sr-support-title-row {
flex-direction: column;
align-items: stretch;
}
.sr-support--pro .sr-support-lead {
text-align: left;
}
}
@media (max-width: 1024px) {
.sr-guarantees {
grid-template-columns: 1fr;
}
.sr-guarantees-title-row {
grid-column: 1 / -1;
}
.sr-guarantees-spokes {
display: none;
} .sr-guarantees-hub__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.sr-guarantees-hub__column--left,
.sr-guarantees-hub__column--right {
display: contents;
}
.sr-guarantees-hub__center {
grid-column: 1 / -1;
order: -1;
width: 100%;
max-width: 360px;
justify-self: center;
}
.sr-guarantees-figure {
max-width: 360px;
margin: 0 auto;
isolation: isolate;
} .sr-guarantees-figure::after {
display: none;
}
.sr-guarantees-figure img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
}
@media (max-width: 640px) {
.sr-guarantees-hub__cols {
gap: 10px;
}
.sr-guarantee-card__inner {
padding: 12px 10px 14px;
}
.sr-guarantee-card__title {
font-size: 13px;
padding-right: 28px;
}
.sr-guarantee-card__text {
font-size: 12px;
}
.sr-guarantee-card__step {
font-size: 22px;
top: 8px;
right: 8px;
}
.sr-guarantee-card__icon {
width: 32px;
height: 32px;
font-size: 12px;
}
.sr-support-card .sr-guarantee-card__icon > svg {
width: 26px;
height: 26px;
}
.sr-guarantee-card--v1:hover,
.sr-guarantee-card--v2:hover,
.sr-guarantee-card--v3:hover {
transform: translateY(-2px);
}
.sr-guarantees-hub .sr-guarantee-card--v4:hover,
.sr-guarantees-hub .sr-guarantee-card--v5:hover,
.sr-guarantees-hub .sr-guarantee-card--v6:hover {
transform: translateY(-2px);
}
}
@media (prefers-reduced-motion: reduce) {
.sr-guarantee-card,
.sr-guarantee-card:hover {
transform: none !important;
transition: none;
}
} .sr-stack-brief-trio__layout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
gap: clamp(12px, 2vw, 24px);
align-items: start;
width: 100%;
}
.sr-stack-brief-trio__brief {
min-width: 0;
display: flex;
flex-direction: column;
}
.sr-stack-brief-trio__brief .sr-brief-panel {
max-width: none;
margin: 0;
display: flex;
flex-direction: column;
} @media (min-width: 1025px) {
.sr-stack-brief-trio__layout {
align-items: center;
}
.sr-stack-brief-trio .sr-stack-targets-panel {
align-self: center;
height: fit-content;
gap: 12px;
padding: clamp(16px, 2vw, 20px);
padding-bottom: clamp(14px, 1.8vw, 18px);
}
.sr-stack-brief-trio .sr-stack-targets-head {
gap: 8px;
}
.sr-stack-brief-trio .sr-stack-targets-cards {
gap: 10px;
}
.sr-stack-brief-trio .sr-stack-targets-card__inner {
padding: 12px 12px 12px;
}
.sr-stack-brief-trio .sr-stack-targets-card::after {
display: none;
}
.sr-stack-brief-trio .sr-stack-targets-panel .sr-stack-targets-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 1024px) {
.sr-stack-brief-trio__layout {
grid-template-columns: 1fr;
}
} .sr-stack-targets-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: stretch;
}
.sr-stack-targets-panel {
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
padding: clamp(18px, 2.5vw, 24px);
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.sr-stack-targets-head {
display: flex;
flex-direction: column;
gap: 10px;
}
.sr-stack-targets-head .sr-section-title {
margin: 0;
}
.sr-stack-targets-lead {
margin: 0;
max-width: none;
}
.sr-stack-targets-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
}
.sr-stack-targets-card {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
box-shadow: var(--sr-shadow-sm);
overflow: hidden;
}
.sr-stack-targets-card::after {
content: "";
position: absolute;
left: var(--sr-radius-md);
right: var(--sr-radius-md);
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--sr-accent-secondary), var(--sr-accent-primary));
opacity: 0.9;
pointer-events: none;
}
.sr-stack-targets-card__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 14px 18px;
flex: 1;
}
.sr-stack-targets-card__title {
margin: 0;
font-size: 14px;
font-weight: 650;
line-height: 1.3;
color: var(--sr-text);
}
.sr-stack-targets-card__text {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--sr-text-muted);
} #stack .sr-stack-targets-card:nth-child(1),
#stack .sr-stack-targets-card:nth-child(3),
#targets .sr-stack-targets-card:nth-child(1),
#targets .sr-stack-targets-card:nth-child(3) {
border-radius: var(--sr-radius-lg);
border-top: 2px solid var(--sr-accent-primary);
}
#stack .sr-stack-targets-card:nth-child(2),
#stack .sr-stack-targets-card:nth-child(4),
#targets .sr-stack-targets-card:nth-child(2),
#targets .sr-stack-targets-card:nth-child(4) {
border-radius: var(--sr-radius-lg);
border-top: 2px solid #f59e0b;
}
@media (max-width: 900px) {
.sr-stack-targets-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.sr-stack-targets-cards {
grid-template-columns: 1fr;
}
} #testimonials {
position: relative;
overflow: visible;
background: transparent;
}
#testimonials::before {
content: "";
position: absolute;
height: var(--sr-torn-edge-h);
top: calc(var(--sr-torn-bg-trim) - var(--sr-torn-edge-h));
transform: rotate(180deg);
pointer-events: none;
z-index: 0;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
} #testimonials::after {
content: "";
position: absolute;
top: var(--sr-torn-bg-trim);
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size:
100% calc(100% - var(--sr-torn-edge-h)),
100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
#testimonials > * {
position: relative;
z-index: 1;
} #process {
position: relative;
overflow: visible;
background: transparent;
}
#process::before {
content: "";
position: absolute;
height: var(--sr-torn-edge-h);
top: calc(var(--sr-torn-bg-trim) - var(--sr-torn-edge-h));
transform: rotate(180deg);
pointer-events: none;
z-index: 0;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
#process::after {
content: "";
position: absolute;
top: var(--sr-torn-bg-trim);
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size:
100% calc(100% - var(--sr-torn-edge-h)),
100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
#process > * {
position: relative;
z-index: 1;
} #calculator {
position: relative;
overflow: visible;
background: transparent;
}
#calculator::before {
content: "";
position: absolute;
height: var(--sr-torn-edge-h);
top: calc(var(--sr-torn-bg-trim) - var(--sr-torn-edge-h));
transform: rotate(180deg);
pointer-events: none;
z-index: 0;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
#calculator::after {
content: "";
position: absolute;
top: var(--sr-torn-bg-trim);
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size:
100% calc(100% - var(--sr-torn-edge-h)),
100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
#calculator > * {
position: relative;
z-index: 1;
} #calculator .sr-calc-inner::before {
content: "";
position: absolute;
top: calc(var(--sr-torn-bg-trim) - var(--sr-section-y));
bottom: calc(-1 * var(--sr-section-y) - var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
opacity: 0.12;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/lines-bg.png?v=1);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
}
@media (max-width: 900px) {
#calculator .sr-calc-inner::before {
content: none;
}
} #calculator .sr-calc-rabbit--desktop {
position: absolute;
z-index: 2;
top: clamp(72px, 14vw, 200px);
right: clamp(-240px, -12vw, -20px);
width: min(400px, 38vw);
max-width: none;
height: auto;
pointer-events: none;
user-select: none;
}
#calculator .sr-calc-rabbit--mobile {
display: none;
}
@media (max-width: 1024px) {
#calculator .sr-calc-rabbit--desktop {
display: none;
} #calculator .sr-calc-intro {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
gap: clamp(8px, 2vw, 16px);
margin: 0;
padding: 0;
overflow: visible;
} #calculator .sr-calc-intro .sr-calc-section-title {
flex: 0 0 50%;
max-width: 50%;
min-width: 0;
align-items: flex-start;
text-align: left;
padding-top: 0;
}
#calculator .sr-calc-intro .sr-calc-section-title > div:first-child {
max-width: none;
}
#calculator .sr-calc-intro .sr-section-subtitle {
text-align: left;
}
#calculator.sr-calc--clean-pro .sr-calc-section-title .sr-section-title::after {
margin-left: 0;
margin-right: auto;
}
#calculator .sr-calc-intro .sr-calc-rabbit--mobile {
display: block;
position: relative;
z-index: 2;
flex: 1 1 0;
min-width: 0;
width: 100%;
max-width: none;
height: auto;
object-fit: contain;
object-position: bottom right;
align-self: flex-end;
margin: 0 0 0 20px;
pointer-events: none;
user-select: none;
transform: scale(1.4);
transform-origin: bottom right;
}
#calculator .sr-calc-body {
margin-top: 0;
}
} .sr-process--flow.sr-process--clean-pro .sr-process-title-row {
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
margin-bottom: 24px;
}
.sr-process--flow.sr-process--clean-pro .sr-process-title-row > div {
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
}
#process .sr-section-title {
text-align: center;
white-space: nowrap; font-size: clamp(17px, 2.1vw + 0.75rem, 32px);
letter-spacing: -0.02em;
}
#process .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-process-clean-track.sr-process-scale {
position: relative;
width: 100%;
padding-top: 2px;
} .sr-process-scale__rail {
display: none;
position: absolute;
left: 6%;
right: 6%;
top: 22px;
height: 3px;
border-radius: 999px;
z-index: 0;
background: linear-gradient(
90deg,
rgba(245, 158, 11, 0.55),
rgba(59, 130, 246, 0.78),
rgba(245, 158, 11, 0.5)
);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
pointer-events: none;
}
@media (min-width: 1201px) {
.sr-process-scale__rail {
display: block;
}
}
.sr-process--flow .sr-process-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(10px, 2vw, 1.25rem);
align-items: start;
position: relative;
z-index: 1;
}
.sr-process--flow .sr-process-step {
margin: 0;
padding: 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.sr-process-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
margin-bottom: 14px;
}
.sr-process-index {
width: 42px;
height: 42px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 2px solid var(--sr-border);
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.sr-process--flow .sr-process-step:nth-child(odd) .sr-process-index {
border-color: rgba(59, 130, 246, 0.55);
color: var(--sr-accent-primary);
}
.sr-process--flow .sr-process-step:nth-child(even) .sr-process-index {
border-color: rgba(245, 158, 11, 0.65);
color: #d97706;
}
.sr-process-step:hover .sr-process-index {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.sr-process--flow .sr-process-duration {
font-size: 11px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.25;
max-width: 100%;
} .sr-process--flow .sr-process-content {
display: grid;
gap: 8px;
text-align: center;
width: 100%;
max-width: min(26ch, 100%);
margin-inline: auto;
padding: 0 2px;
}
.sr-process--flow .sr-process-title {
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
font-weight: 650;
line-height: 1.3;
margin: 0;
padding-bottom: 16px;
position: relative;
color: var(--sr-text);
}
.sr-process--flow .sr-process-step:nth-child(odd) .sr-process-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
width: 36px;
height: 2px;
border-radius: 2px;
background: var(--sr-accent-primary);
opacity: 0.55;
}
.sr-process--flow .sr-process-step:nth-child(even) .sr-process-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
width: 36px;
height: 2px;
border-radius: 2px;
background: #f59e0b;
opacity: 0.55;
}
.sr-process--flow .sr-process-text {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--sr-text-muted);
}
@media (max-width: 1200px) {
.sr-process--flow .sr-process-timeline {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1100px) and (min-width: 901px) {
.sr-process--flow .sr-process-timeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.sr-process-scale__rail {
display: none;
}
.sr-process--flow .sr-process-timeline {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
padding-left: 0;
border-left: 0;
}
.sr-process--flow .sr-process-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 14px;
position: relative;
padding-left: 18px;
}
.sr-process--flow .sr-process-step::before {
content: "";
position: absolute;
left: 5px;
top: 22px;
bottom: -18px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, rgba(59, 130, 246, 0.35), rgba(245, 158, 11, 0.35));
}
.sr-process--flow .sr-process-step:last-child::before {
bottom: 0;
}
.sr-process-node {
margin-bottom: 0;
align-items: flex-start;
}
.sr-process--flow .sr-process-content {
text-align: left;
margin-inline: 0;
max-width: none;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
} .sr-process--flow .sr-process-title {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 10px;
row-gap: 0;
align-items: center;
padding-bottom: 0;
position: static;
}
.sr-process--flow .sr-process-step:nth-child(odd) .sr-process-title::after,
.sr-process--flow .sr-process-step:nth-child(even) .sr-process-title::after {
position: static;
transform: none;
left: auto;
bottom: auto;
grid-column: 1;
grid-row: 1;
width: 36px;
height: 2px;
border-radius: 2px;
opacity: 0.65;
align-self: center;
}
.sr-process--flow .sr-process-step:nth-child(odd) .sr-process-title::after {
background: var(--sr-accent-primary);
}
.sr-process--flow .sr-process-step:nth-child(even) .sr-process-title::after {
background: #f59e0b;
}
} .sr-pain-points--deck {
position: relative;
overflow: hidden;
border-radius: calc(var(--sr-radius-lg) + 4px);
border: 1px solid rgba(203, 213, 225, 0.75);
background:
radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.09) 0%, transparent 55%),
radial-gradient(90% 60% at 0% 100%, rgba(245, 158, 11, 0.07) 0%, transparent 50%),
linear-gradient(168deg, #f1f5f9 0%, #ffffff 38%, #f8fafc 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
var(--sr-shadow-sm);
}
.sr-pain-points--deck::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--sr-bg-pattern);
background-size: var(--sr-grid-size) var(--sr-grid-size);
opacity: 0.35;
pointer-events: none;
mask-image: linear-gradient(165deg, black 0%, transparent 68%);
}
.sr-pain-deck {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: clamp(28px, 4vw, 44px);
}
.sr-pain-deck__head {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
width: 100%;
max-width: none;
margin-inline: 0;
text-align: center;
}
.sr-pain-deck__kicker {
align-self: center;
margin-left: auto;
margin-right: auto;
}
.sr-pain-deck__headline {
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(12px, 2vw, 18px);
width: 100%;
text-align: center;
}
.sr-pain-deck__title {
margin: 0;
font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem);
font-weight: 750;
line-height: 1.12;
letter-spacing: -0.035em;
color: var(--sr-text);
text-align: center;
text-wrap: balance;
}
.sr-pain-deck__title::after {
content: "";
display: block;
width: 52px;
height: 3px;
margin-top: 14px;
margin-inline: auto;
border-radius: var(--sr-radius-pill);
background: linear-gradient(90deg, rgba(245, 158, 11, 0.95), var(--sr-accent-primary));
}
.sr-pain-deck__lead {
margin: 0;
max-width: none;
width: 100%;
font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
line-height: 1.55;
color: var(--sr-text-muted);
text-align: center;
}
.sr-pain-deck__body {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: clamp(22px, 3.2vw, 40px);
align-items: start;
}
.sr-pain-deck__visual {
min-width: 0;
}
.sr-pain-deck__visual-inner {
position: relative;
padding: clamp(18px, 2.5vw, 28px);
border-radius: calc(var(--sr-radius-lg) + 6px);
background:
conic-gradient(from 210deg at 65% 35%, rgba(59, 130, 246, 0.14), transparent 40%, rgba(245, 158, 11, 0.1), transparent 75%),
linear-gradient(145deg, #ffffff 0%, #eef2ff 45%, #fff 100%);
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 20px 48px rgba(15, 23, 42, 0.07);
}
.sr-pain-deck__badge {
position: absolute;
top: clamp(14px, 2vw, 22px);
left: clamp(14px, 2vw, 22px);
z-index: 2;
padding: 8px 14px;
font-size: 0.75rem;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--sr-text);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--sr-radius-md);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.sr-pain-deck__figure {
margin: clamp(36px, 5vw, 48px) 0 0;
border-radius: var(--sr-radius-lg);
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 0.9);
overflow: hidden;
box-shadow: 0 12px 40px rgba(30, 58, 138, 0.08);
}
.sr-pain-deck__img {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
object-fit: contain;
}
.sr-pain-deck__list {
position: relative;
margin: 0;
padding: 0 0 0 8px;
list-style: none;
counter-reset: pain-deck;
}
.sr-pain-deck__list::before {
content: "";
position: absolute;
left: 25px;
top: 12px;
bottom: 12px;
width: 2px;
border-radius: var(--sr-radius-pill);
background: linear-gradient(
180deg,
rgba(59, 130, 246, 0.35) 0%,
rgba(148, 163, 184, 0.45) 50%,
rgba(245, 158, 11, 0.3) 100%
);
}
.sr-pain-deck__item {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px 16px;
align-items: start;
margin-bottom: clamp(12px, 1.8vw, 16px);
}
.sr-pain-deck__item:last-child {
margin-bottom: 0;
}
.sr-pain-deck__idx {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-top: 4px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: -0.03em;
color: #fff;
background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
border-radius: 14px;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.95),
0 6px 16px rgba(15, 23, 42, 0.15);
}
.sr-pain-deck__item:nth-child(even) .sr-pain-deck__idx {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--sr-accent-primary) 90%, #000) 0%,
var(--sr-accent-primary) 100%
);
}
.sr-pain-deck__item--focus .sr-pain-deck__idx {
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.98),
0 0 0 5px rgba(59, 130, 246, 0.22),
0 8px 22px rgba(59, 130, 246, 0.28);
}
.sr-pain-deck__card {
padding: 16px 18px 18px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--sr-radius-md);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.sr-pain-deck__item--focus .sr-pain-deck__card {
border-color: rgba(59, 130, 246, 0.38);
box-shadow:
0 0 0 1px rgba(59, 130, 246, 0.12),
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 14px 36px rgba(59, 130, 246, 0.12);
}
.sr-pain-deck__card:hover {
border-color: rgba(203, 213, 225, 0.95);
box-shadow: var(--sr-shadow-md);
transform: translateY(-2px);
}
.sr-pain-deck__item--focus .sr-pain-deck__card:hover {
border-color: rgba(59, 130, 246, 0.45);
box-shadow:
0 0 0 1px rgba(59, 130, 246, 0.16),
var(--sr-shadow-md);
}
.sr-pain-deck__card-title {
margin: 0 0 10px;
font-size: clamp(0.98rem, 0.92rem + 0.22vw, 1.08rem);
font-weight: 680;
line-height: 1.28;
letter-spacing: -0.025em;
color: var(--sr-text);
}
@media (max-width: 900px) {
.sr-pain-deck__body {
grid-template-columns: 1fr;
gap: clamp(20px, 4vw, 28px);
}
.sr-pain-deck__visual {
max-width: min(440px, 100%);
margin-inline: auto;
width: 100%;
}
.sr-pain-deck__list {
padding-left: 4px;
}
.sr-pain-deck__list::before {
left: 21px;
}
}
@media (prefers-reduced-motion: reduce) {
.sr-pain-deck__card:hover {
transform: none;
}
} .sr-benefits--clean-pro {
position: relative;
background: linear-gradient(
168deg,
rgba(248, 250, 252, 0.98) 0%,
#fff 48%,
rgba(239, 246, 255, 0.45) 100%
);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
}
.sr-benefits--clean-pro .sr-benefits-title-row {
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.sr-benefits--clean-pro .sr-benefits-lead {
max-width: min(52ch, 100%);
text-align: right;
margin: 0;
}
.sr-benefits--clean-pro .sr-section-title::after {
margin-left: 0;
}
.sr-benefits-grid--pro {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
}
.sr-benefit-pro-card {
position: relative;
margin: 0;
padding: 18px 18px 22px;
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sr-benefit-pro-card:hover {
box-shadow: var(--sr-shadow-md);
transform: translateY(-3px);
}
.sr-benefit-pro-card__step {
position: absolute;
top: 10px;
right: 14px;
font-size: 32px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(15, 23, 42, 0.06);
user-select: none;
pointer-events: none;
}
.sr-benefit-pro-card__title {
margin: 0 44px 12px 0;
padding-bottom: 10px;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
font-weight: 650;
line-height: 1.3;
color: var(--sr-text);
letter-spacing: -0.02em;
border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.sr-benefit-pro-card__text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
}
.sr-benefit-pro-card:nth-child(3n + 1) {
border-top: 2px solid var(--sr-accent-primary);
}
.sr-benefit-pro-card:nth-child(3n + 2) {
border-top: 2px solid #f59e0b;
}
.sr-benefit-pro-card:nth-child(3n + 3) {
border-top: 2px solid rgba(59, 130, 246, 0.45);
}
.sr-benefits-note--pro {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 14px;
margin: 22px 0 0;
padding: 14px 16px;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--sr-text-muted);
background: rgba(248, 250, 252, 0.85);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--sr-radius-md);
border-left: 3px solid var(--sr-accent-primary);
}
.sr-benefits-note__label {
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sr-text-muted);
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-pill);
padding: 6px 12px;
}
@media (max-width: 1100px) {
.sr-benefits-grid--pro {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sr-benefit-pro-card:nth-child(3n + 1),
.sr-benefit-pro-card:nth-child(3n + 2),
.sr-benefit-pro-card:nth-child(3n + 3) {
border-top-color: transparent;
}
.sr-benefit-pro-card:nth-child(odd) {
border-top: 2px solid var(--sr-accent-primary);
}
.sr-benefit-pro-card:nth-child(even) {
border-top: 2px solid #f59e0b;
}
}
@media (max-width: 900px) {
.sr-benefits--clean-pro .sr-benefits-title-row {
flex-direction: column;
align-items: stretch;
}
.sr-benefits--clean-pro .sr-benefits-lead {
text-align: left;
}
}
@media (max-width: 640px) {
.sr-benefits-grid--pro {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sr-benefit-pro-card {
padding: 14px 12px 16px;
}
.sr-benefit-pro-card__title {
margin-right: 36px;
padding-bottom: 8px;
font-size: 0.9375rem;
}
.sr-benefit-pro-card__text {
font-size: 0.8125rem;
line-height: 1.5;
}
.sr-benefit-pro-card__step {
font-size: 26px;
top: 8px;
right: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.sr-benefit-pro-card:hover {
transform: none;
}
} .sr-services--clean-pro {
position: relative;
overflow: visible;
background: linear-gradient(
165deg,
rgba(248, 250, 252, 0.98) 0%,
#fff 50%,
rgba(239, 246, 255, 0.38) 100%
);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
} #services.sr-services--clean-pro.sr-services--pricing {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
}
.sr-services-intro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
margin-bottom: 22px;
}
.sr-services-intro .sr-section-kicker {
margin-bottom: 0;
}
.sr-services-intro__title {
margin: 0;
}
.sr-services-intro .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-services-intro__text {
margin: 0;
max-width: min(48ch, 100%);
line-height: 1.55;
} .sr-services--pricing-single .sr-services-intro__text {
max-width: none;
align-self: stretch;
}
.sr-services-pricing {
margin-top: 0;
}
.sr-services-pricing__tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 18px;
}
.sr-services-pricing__tab {
cursor: pointer;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: var(--sr-radius-pill);
border: 2px solid var(--sr-border-strong);
background: #fff;
color: var(--sr-text);
font: inherit;
font-weight: 650;
font-size: 0.9375rem;
box-shadow: var(--sr-btn-shadow-outline);
transition:
border-color 0.15s ease,
color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.sr-services-pricing__tab:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
box-shadow:
0 0 0 var(--sr-btn-ring-spread) rgba(191, 219, 254, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.sr-services-pricing__tab:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.35);
outline-offset: 3px;
}
.sr-services-pricing__tab.is-active {
color: #fff;
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
font-weight: 700;
box-shadow: var(--sr-btn-shadow-primary);
}
.sr-services-pricing__summary {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
padding: 16px 18px;
background: rgba(248, 250, 252, 0.97);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
min-width: 0;
}
.sr-services-pricing__summary-main {
flex: 1 1 auto;
min-width: 0;
font-size: 1rem;
line-height: 1.45;
color: var(--sr-text);
}
.sr-services-pricing__summary-price {
font-weight: 500;
}
.sr-services-pricing__summary-label {
font-weight: 600;
color: var(--sr-text-muted);
}
.sr-services-pricing__summary-sep {
margin: 0 6px;
color: var(--sr-text-muted);
}
.sr-services-pricing__summary-actions {
display: flex;
flex: 0 1 auto;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 10px 14px;
min-width: 0;
}
.sr-services-pricing__pay-link,
.sr-services-pricing__cta,
.sr-services-pricing__cta-secondary {
flex: 0 0 auto;
font-weight: 650;
color: var(--sr-link);
text-decoration: underline;
text-decoration-skip-ink: auto;
text-underline-offset: 3px;
white-space: nowrap;
background: none;
border: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
}
.sr-services-pricing__pay-link:hover,
.sr-services-pricing__cta:hover,
.sr-services-pricing__cta-secondary:hover {
color: var(--sr-accent-primary);
}
.sr-services-pricing__tiers {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.sr-price-tier {
display: flex;
flex-direction: column;
margin: 0;
padding: 18px 16px 16px;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
min-height: 0;
}
.sr-price-tier--featured {
position: relative;
border-color: rgba(59, 130, 246, 0.38);
box-shadow: 0 14px 38px rgba(59, 130, 246, 0.12);
}
.sr-price-tier--featured::after {
content: "";
position: absolute;
top: 14px;
right: 0;
bottom: 14px;
width: 4px;
border-radius: 4px 0 0 4px;
background: linear-gradient(180deg, var(--sr-accent-primary), #f59e0b);
pointer-events: none;
}
.sr-price-tier__head {
margin: 0 0 10px;
}
.sr-price-tier__name {
margin: 0 0 8px;
padding: 0;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--sr-text);
border: 0;
text-align: center;
}
.sr-price-tier__head-rule {
position: relative;
display: block;
min-height: 22px;
}
.sr-price-tier__head-rule-line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: rgba(59, 130, 246, 0.4);
border-radius: 1px;
pointer-events: none;
}
.sr-price-tier__head-badge {
position: absolute;
right: 20px;
top: 50%;
z-index: 1;
transform: translateY(-50%);
margin: 0;
padding: 5px 14px;
border: 1px solid rgba(59, 130, 246, 0.28);
border-radius: 999px;
background: #fff;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--sr-accent-primary);
line-height: 1.2;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
white-space: nowrap;
max-width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
.sr-price-tier__kicker {
margin: 0 0 12px;
}
.sr-price-tier__group {
margin-bottom: 12px;
}
.sr-price-tier__services {
position: relative;
flex: 1 1 auto;
min-height: 0;
max-height: 400px;
overflow: hidden;
}
.sr-price-tier.is-services-expanded .sr-price-tier__services {
max-height: none;
}
.sr-price-tier__divider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 28px;
margin: 12px 0 10px;
flex-shrink: 0;
}
.sr-price-tier__divider-line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: var(--sr-border);
transform: translateY(-50%);
pointer-events: none;
}
.sr-price-tier__toggle {
position: relative;
z-index: 1;
margin: 0;
padding: 5px 14px;
border: 1px solid rgba(59, 130, 246, 0.28);
border-radius: 999px;
background: #fff;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--sr-accent-primary);
cursor: pointer;
line-height: 1.2;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sr-price-tier__toggle:hover,
.sr-price-tier__toggle:focus-visible {
background: #eef4ff;
border-color: rgba(59, 130, 246, 0.58);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
outline: none;
}
.sr-price-tier__divider.is-toggle-hidden {
min-height: 1px;
margin: 10px 0 8px;
}
.sr-price-tier__group-title {
margin: 0 0 6px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sr-text-muted);
}
.sr-price-tier__list li {
position: relative;
margin: 0 0 6px;
padding-left: 14px;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--sr-text);
}
.sr-price-tier__list li:last-child {
margin-bottom: 0;
}
.sr-price-tier__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
margin-top: -2px;
border-radius: 1px;
background: var(--sr-accent-primary);
}
.sr-price-tier__foot {
margin-top: auto;
padding-top: 0;
border-top: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.sr-price-tier__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.sr-price-tier__actions .sr-price-tier__more {
width: 100%;
margin-top: 0;
}
@media (max-width: 900px) {
.sr-price-tier__actions .sr-price-tier__more {
text-align: center;
justify-content: center;
}
}
.sr-price-tier__actions .sr-price-tier__more--primary {
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
color: #fff;
}
.sr-price-tier__actions .sr-price-tier__more--primary:hover,
.sr-price-tier__actions .sr-price-tier__more--primary:focus-visible {
background: var(--sr-accent-primary-hover);
border-color: var(--sr-accent-primary-hover);
color: #fff;
}
.sr-price-tier__meta {
display: grid;
grid-template-columns: minmax(0, 6.5fr) minmax(0, 3.5fr);
gap: 12px;
align-items: start;
}
.sr-price-tier__meta-col {
display: flex;
flex-direction: column;
gap: 4px;
}
.sr-price-tier__meta-col--term {
text-align: right;
justify-self: end;
align-items: flex-end;
padding-right: 0 !important;
margin-right: 0 !important;
}
.sr-price-tier__meta-label {
display: block;
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sr-text-muted);
}
.sr-price-tier__more {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 8px;
border-radius: 8px;
border: 1px solid var(--sr-accent-primary);
color: var(--sr-accent-primary);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
min-height: 34px;
padding: 8px 12px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sr-price-tier__more:hover,
.sr-price-tier__more:focus-visible {
background: var(--sr-accent-primary);
color: #fff;
border-color: var(--sr-accent-primary);
}
.sr-price-tier__price-val {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.sr-price-tier__term {
font-size: 1rem;
line-height: 1.25;
}
.sr-services-payment {
margin-top: 22px;
padding: 16px 18px;
background: rgba(255, 251, 235, 0.4);
border: 1px solid rgba(251, 191, 36, 0.28);
border-radius: var(--sr-radius-md);
text-align: center;
}
.sr-services-payment__title {
margin: 0 0 8px;
font-size: 0.9375rem;
font-weight: 700;
color: var(--sr-text);
}
.sr-services-payment__text {
margin: 0;
line-height: 1.55;
}
@media (max-width: 1100px) {
.sr-services-pricing__tiers {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sr-services-pricing__summary {
flex-wrap: wrap;
}
.sr-services-pricing__summary-actions {
flex: 1 1 100%;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
}
@media (max-width: 900px) {
.sr-services-pricing__summary {
flex-wrap: wrap;
flex-direction: column;
align-items: stretch;
}
.sr-services-pricing__summary-main {
text-align: center;
}
.sr-services-pricing__summary-price {
white-space: nowrap;
}
.sr-services-pricing__summary-actions {
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
}
.sr-services-pricing__pay-link,
.sr-services-pricing__cta,
.sr-services-pricing__cta-secondary {
white-space: normal;
}
}
@media (max-width: 480px) {
.sr-services-pricing__summary-actions {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.sr-services-pricing__tiers {
display: flex;
flex-wrap: nowrap;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
scrollbar-width: none;
}
.sr-services-pricing__tiers::-webkit-scrollbar {
display: none;
}
.sr-services-pricing__tiers .sr-price-tier {
flex: 0 0 88%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.sr-services-pricing__tabs {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
overflow: visible;
padding-bottom: 0;
margin-inline: 0;
padding-inline: 0;
}
.sr-services-pricing__tab {
flex: 0 1 auto;
min-width: 0;
text-align: center;
}
} .sr-portfolio--clean-pro {
position: relative;
background: linear-gradient(
163deg,
rgba(248, 250, 252, 0.98) 0%,
#fff 46%,
rgba(254, 243, 199, 0.22) 100%
);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
}
.sr-portfolio--clean-pro .sr-portfolio-title-row {
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.sr-portfolio--clean-pro .sr-portfolio-lead {
max-width: min(52ch, 100%);
text-align: right;
margin: 0;
}
.sr-portfolio--clean-pro .sr-section-title::after {
margin-left: 0;
}
.sr-portfolio-filters--pro {
margin-bottom: 20px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--sr-radius-md);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
gap: 8px;
}
.sr-portfolio--clean-pro .sr-portfolio-filter {
padding: 8px 16px;
font-size: 0.9375rem;
font-weight: 650;
border: 2px solid var(--sr-border);
background: #fff;
box-shadow: var(--sr-btn-shadow-outline);
transition:
border-color 0.15s ease,
color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
.sr-portfolio--clean-pro .sr-portfolio-filter:hover:not(.is-active) {
box-shadow:
0 0 0 var(--sr-btn-ring-spread) rgba(191, 219, 254, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.sr-portfolio--clean-pro .sr-portfolio-filter.is-active {
color: #fff;
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
border-width: 2px;
box-shadow: var(--sr-btn-shadow-primary);
}
.sr-portfolio-grid--pro {
gap: 16px;
}
.sr-portfolio-card--pro {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.sr-portfolio-card--pro:hover {
box-shadow: var(--sr-shadow-md);
transform: translateY(-3px);
}
.sr-portfolio-card--pro:nth-child(3n + 1) {
border-top: 2px solid var(--sr-accent-primary);
}
.sr-portfolio-card--pro:nth-child(3n + 2) {
border-top: 2px solid #f59e0b;
}
.sr-portfolio-card--pro:nth-child(3n + 3) {
border-top: 2px solid rgba(59, 130, 246, 0.45);
}
.sr-portfolio--clean-pro .sr-portfolio-thumb {
flex-shrink: 0;
min-height: 140px;
border-radius: 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}
.sr-portfolio--clean-pro .sr-portfolio-thumb--gradient-1 {
background: linear-gradient(145deg, #e0f2fe 0%, #dbeafe 42%, #c7d2fe 100%);
}
.sr-portfolio--clean-pro .sr-portfolio-thumb--gradient-2 {
background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 45%, #fed7aa 100%);
}
.sr-portfolio--clean-pro .sr-portfolio-thumb--gradient-3 {
background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 40%, #cbd5e1 100%);
} .sr-portfolio--clean-pro .sr-portfolio-thumb--has-image {
position: relative;
padding: 0;
min-height: 180px;
height: 180px;
overflow: hidden;
background: #f1f5f9;
}
.sr-portfolio--clean-pro .sr-portfolio-thumb--has-image .sr-portfolio-thumb__img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 230%;
max-width: none;
object-fit: cover;
object-position: center top;
animation: sr-portfolio-thumb-pan-y 18s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes sr-portfolio-thumb-pan-y {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-100% + 180px));
}
}
@media (prefers-reduced-motion: reduce) {
.sr-portfolio--clean-pro .sr-portfolio-thumb--has-image .sr-portfolio-thumb__img {
animation: none;
height: 100%;
object-fit: cover;
object-position: center center;
}
}
.sr-portfolio-card__body {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 18px 18px 20px;
}
.sr-portfolio-card__step {
position: absolute;
top: 14px;
right: 16px;
font-size: 32px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: rgba(15, 23, 42, 0.06);
user-select: none;
pointer-events: none;
}
.sr-portfolio--clean-pro .sr-portfolio-title {
margin: 0 44px 8px 0;
padding-bottom: 10px;
font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
font-weight: 650;
line-height: 1.28;
letter-spacing: -0.02em;
color: var(--sr-text);
border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.sr-portfolio--clean-pro .sr-portfolio-meta {
margin: 0 0 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.sr-portfolio-pro-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.sr-portfolio-pro-block {
margin: 0;
padding: 12px 12px 12px 14px;
background: rgba(248, 250, 252, 0.75);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: var(--sr-radius-sm);
border-left: 3px solid var(--sr-accent-primary);
}
.sr-portfolio-pro-block--result {
border-left-color: #f59e0b;
}
.sr-portfolio-pro-block .sr-portfolio-label {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sr-portfolio-pro-block .sr-portfolio-text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
}
.sr-portfolio-pro-block .sr-portfolio-result {
margin: 0;
font-size: 0.95rem;
font-weight: 650;
line-height: 1.45;
color: var(--sr-text);
}
.sr-portfolio-link--pro {
margin-top: auto;
width: 100%;
justify-content: center;
border-radius: var(--sr-radius-md);
}
.sr-portfolio-more--pro {
margin: 24px 0 0;
padding-top: 20px;
border-top: 1px solid rgba(226, 232, 240, 0.9);
text-align: center;
}
.sr-portfolio-more--pro .sr-btn-outline {
text-decoration: none;
}
@media (max-width: 900px) {
.sr-portfolio--clean-pro .sr-portfolio-title-row {
flex-direction: column;
align-items: stretch;
}
.sr-portfolio--clean-pro .sr-portfolio-lead {
text-align: left;
} .sr-portfolio-filters--pro {
padding: 8px 10px;
gap: 5px;
flex-wrap: nowrap;
justify-content: center;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sr-portfolio-filters--pro::-webkit-scrollbar {
display: none;
}
.sr-portfolio--clean-pro .sr-portfolio-filter {
padding: 5px 8px;
font-size: 0.75rem;
line-height: 1.2;
border-width: 1px;
flex: 0 0 auto;
white-space: nowrap;
}
.sr-portfolio--clean-pro .sr-portfolio-filter.is-active {
border-width: 1px;
}
.sr-portfolio-pro-details {
grid-template-columns: 1fr;
}
.sr-portfolio-card--pro:nth-child(3n + 1),
.sr-portfolio-card--pro:nth-child(3n + 2),
.sr-portfolio-card--pro:nth-child(3n + 3) {
border-top-color: transparent;
}
.sr-portfolio-card--pro:nth-child(odd) {
border-top: 2px solid var(--sr-accent-primary);
}
.sr-portfolio-card--pro:nth-child(even) {
border-top: 2px solid #f59e0b;
}
.sr-portfolio--clean-pro .sr-portfolio-slider-viewport {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0 var(--sr-section-x);
box-sizing: border-box;
}
.sr-portfolio--clean-pro .sr-portfolio-grid--pro[data-portfolio-slider] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
grid-template-columns: unset;
overflow-x: auto;
overflow-y: hidden;
gap: 14px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
}
.sr-portfolio--clean-pro .sr-portfolio-grid--pro[data-portfolio-slider]::-webkit-scrollbar {
display: none;
}
.sr-portfolio--clean-pro .sr-portfolio-grid--pro[data-portfolio-slider] > .sr-portfolio-card--pro {
--sr-portfolio-slide-w: min(300px, calc(100% - 2 * var(--sr-section-x)));
flex: 0 0 var(--sr-portfolio-slide-w);
width: var(--sr-portfolio-slide-w);
max-width: 300px;
min-height: 0;
scroll-snap-align: start;
box-sizing: border-box;
}
.sr-portfolio--clean-pro .sr-portfolio-card--pro:hover {
transform: none;
}
} @media (max-width: 900px) {
.sr-scroll-slider-dots {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
padding: 0;
box-sizing: border-box;
}
.sr-scroll-slider-dots[hidden] {
display: none !important;
} .sr-scroll-slider-dot {
width: 22px;
height: 22px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--sr-border-strong);
background: var(--sr-surface-soft);
box-shadow: var(--sr-neu-raised);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease;
}
.sr-scroll-slider-dot::before {
content: "";
width: 5px;
height: 5px;
border-radius: 999px;
background: #94a3b8;
}
.sr-scroll-slider-dot.is-active {
border-color: var(--sr-accent-primary);
box-shadow: none;
transform: none;
}
.sr-scroll-slider-dot.is-active::before {
background: var(--sr-accent-primary);
}
.sr-scroll-slider-dot:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.28);
outline-offset: 2px;
} .sr-hero-slider-footer {
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 10px;
} .sr-hero-slider-footer .sr-hero-slider-dots {
flex: 0 1 auto;
justify-content: flex-start;
min-width: 0;
}
.sr-hero-slider-actions {
flex: 0 0 auto;
justify-content: flex-end;
}
}
@media (prefers-reduced-motion: reduce) {
.sr-portfolio-card--pro:hover {
transform: none;
}
} .sr-testimonials .sr-testimonials-kicker {
gap: 10px;
}
.sr-testimonials .sr-testimonials-kicker-stars {
color: #d97706;
letter-spacing: 0.08em;
font-size: 12px;
line-height: 1;
}
.sr-testimonials .sr-section-title-row {
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.sr-testimonials-head-aside {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
max-width: min(52ch, 100%);
text-align: right;
}
.sr-testimonials-head-aside .sr-section-subtitle {
text-align: right;
}
.sr-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.sr-testimonials .sr-testimonial-card {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
overflow: hidden;
} .sr-testimonials .sr-testimonial-card--flip {
overflow: visible;
}
.sr-testimonial-flip {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
perspective: 1100px;
-webkit-perspective: 1100px;
}
.sr-testimonial-flip__inner {
position: relative;
flex: 1;
min-height: 280px;
display: grid;
grid-template: 1fr / 1fr;
transform: translateZ(0);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.sr-testimonial-flip__inner.is-flipped {
transform: rotateY(180deg) translateZ(0);
}
.sr-testimonial-flip__face {
grid-area: 1 / 1;
min-width: 0;
min-height: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; background: #fff;
border-radius: var(--sr-radius-lg);
display: flex;
flex-direction: column;
}
.sr-testimonial-flip__face--front {
transform: rotateY(0deg) translateZ(0.1px);
}
.sr-testimonial-flip__face--back {
transform: rotateY(180deg) translateZ(0.1px);
}
.sr-testimonial-flip__face .sr-testimonial-card__inner {
flex: 1;
min-height: 100%;
}
.sr-testimonial-text--back {
font-size: 0.95rem;
line-height: 1.45;
}
.sr-testimonial-back-link-wrap {
margin: 0;
}
.sr-testimonial-case-link {
font-weight: 600;
color: var(--sr-accent-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.sr-testimonial-case-link:hover {
color: var(--sr-accent-secondary);
}
@media (prefers-reduced-motion: reduce) {
.sr-testimonial-flip__inner {
transition: none;
}
}
.sr-testimonials .sr-testimonial-card::after {
content: "";
position: absolute; left: var(--sr-radius-lg);
right: var(--sr-radius-lg);
bottom: 0;
height: 4px;
background: linear-gradient(90deg, var(--sr-accent-secondary), var(--sr-accent-primary));
opacity: 0.9;
pointer-events: none;
}
.sr-testimonial-card__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 18px 22px;
flex: 1;
min-height: 100%;
}
.sr-testimonials .sr-testimonial-text {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--sr-text-muted);
}
.sr-testimonial-rating-row {
display: flex;
justify-content: center;
margin: 0;
}
.sr-testimonials .sr-testimonial-stars {
color: #d97706;
letter-spacing: 0.08em;
font-size: 13px;
line-height: 1;
}
.sr-testimonials .sr-testimonial-footer {
margin-top: auto;
padding-top: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sr-testimonials .sr-testimonial-author {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
}
.sr-testimonial-person {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sr-testimonials .sr-testimonial-name {
font-weight: 650;
color: var(--sr-text);
font-size: 14px;
line-height: 1.25;
}
.sr-testimonials .sr-testimonial-role {
font-size: 12px;
font-weight: 500;
color: var(--sr-text-muted);
line-height: 1.3;
}
.sr-testimonials .sr-testimonial-date {
font-size: 12px;
color: var(--sr-text-muted);
white-space: nowrap;
}
.sr-testimonials .sr-testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
background: rgba(59, 130, 246, 0.1);
color: var(--sr-accent-primary);
border: 1px solid rgba(59, 130, 246, 0.35);
box-shadow: var(--sr-neu-raised);
}
.sr-testimonials .sr-testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.sr-testimonials .sr-testimonial-avatar:has(img) .sr-testimonial-avatar-initials {
display: none;
}
.sr-testimonials .sr-testimonial-avatar-initials {
line-height: 1;
}
@media (max-width: 900px) {
.sr-testimonials .sr-section-title-row {
flex-direction: column;
align-items: stretch;
}
.sr-testimonials-head-aside {
align-items: flex-start;
text-align: left;
max-width: none;
}
.sr-testimonials-head-aside .sr-section-subtitle {
text-align: left;
}
.sr-testimonials-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.sr-testimonials-grid {
grid-template-columns: 1fr;
} .sr-testimonials-grid .sr-testimonial-card--flip:not(:first-child) {
display: none;
}
}
.sr-support-icon__svg,
.sr-orbit-ring,
.sr-orbit-dot {
display: none;
} .sr-hero-slider {
padding: 16px;
display: grid;
gap: 14px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(209, 213, 219, 0.9);
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1);
}
.sr-hero-card--landing-image {
padding: 0;
overflow: hidden;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
}
.sr-hero-card__landing-image {
display: block;
width: 100%;
height: auto;
}
.sr-hero-slider-track {
position: relative;
min-height: 300px;
}
.sr-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(16px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
display: grid;
gap: 12px;
align-content: start;
}
.sr-hero-slide.is-active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.sr-hero-slide-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sr-hero-slide-tag {
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-pill);
padding: 4px 9px;
color: var(--sr-text-muted);
}
.sr-hero-slide-type {
font-size: 12px;
font-weight: 600;
color: var(--sr-accent-primary);
}
.sr-hero-slide-title {
margin: 0;
font-size: 24px;
line-height: 1.2;
color: var(--sr-text);
}
.sr-hero-slide-text {
margin: 0;
color: var(--sr-text-muted);
}
.sr-hero-slide-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.sr-hero-slide-list li {
border: 1px solid var(--sr-border);
border-radius: 12px;
padding: 8px 10px;
font-size: 14px;
color: var(--sr-text);
background: var(--sr-surface-soft);
}
.sr-hero-slider-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sr-hero-slider-dots {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.sr-hero-slider-dot {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid var(--sr-border-strong);
background: var(--sr-surface-soft);
cursor: pointer;
box-shadow: var(--sr-neu-raised);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
flex: 0 0 auto;
}
.sr-hero-slider-dot::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: #94a3b8;
}
.sr-hero-slider-dot.is-active {
border-color: var(--sr-accent-primary);
box-shadow: none;
}
.sr-hero-slider-dot.is-active::before {
background: var(--sr-accent-primary);
}
.sr-hero-slider-actions {
display: flex;
align-items: center;
gap: 8px;
}
.sr-hero-slider-btn {
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid var(--sr-border-strong);
background: var(--sr-surface-soft);
color: var(--sr-text);
cursor: pointer;
box-shadow: var(--sr-neu-raised);
transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
position: static;
overflow: visible;
}
.sr-hero-slider-btn:hover {
border-color: var(--sr-accent-primary);
color: var(--sr-accent-primary);
transform: translateY(-1px);
}
.sr-hero-slider-btn:active {
box-shadow: var(--sr-neu-pressed);
transform: translateY(0);
}
.sr-checkbox,
.sr-brief-pill {
background: var(--sr-surface-soft);
box-shadow: var(--sr-neu-raised);
}
.sr-checkbox:active,
.sr-brief-pill:active {
box-shadow: var(--sr-neu-pressed);
}
.sr-checkbox input,
.sr-brief-pill input {
accent-color: var(--sr-accent-primary);
}
.sr-hero-slider-btn:focus-visible,
.sr-hero-slider-dot:focus-visible,
.sr-checkbox:focus-within,
.sr-brief-pill:focus-within {
outline: 2px solid rgba(59, 130, 246, 0.28);
outline-offset: 2px;
} .sr-about-combo {
position: relative;
z-index: 1;
margin-top: 64px;
border: 0;
border-radius: 22px;
padding: 28px;
overflow: hidden;
background-color: transparent;
background-image: none;
box-shadow: none;
}
.sr-about-combo::before,
.sr-about-combo::after {
content: none;
display: none;
} @media (min-width: 901px) {
.sr-about-combo {
margin-top: 100px;
}
}
.sr-about-combo::before {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: -56px;
height: 62px;
pointer-events: none;
z-index: 3;
background-color: var(--sr-bg);
background-image: var(--sr-bg-pattern);
background-size: var(--sr-grid-size) var(--sr-grid-size);
box-shadow: 0 10px 18px rgba(17, 24, 39, 0.08);
-webkit-mask:
radial-gradient(30px 12px at 4% 100%, transparent 98%, #000 100%),
radial-gradient(26px 11px at 14% 100%, transparent 98%, #000 100%),
radial-gradient(34px 13px at 25% 100%, transparent 98%, #000 100%),
radial-gradient(22px 10px at 37% 100%, transparent 98%, #000 100%),
radial-gradient(30px 12px at 49% 100%, transparent 98%, #000 100%),
radial-gradient(24px 11px at 61% 100%, transparent 98%, #000 100%),
radial-gradient(32px 13px at 73% 100%, transparent 98%, #000 100%),
radial-gradient(22px 10px at 84% 100%, transparent 98%, #000 100%),
radial-gradient(28px 12px at 95% 100%, transparent 98%, #000 100%),
linear-gradient(#000, #000);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask:
radial-gradient(30px 12px at 4% 100%, transparent 98%, #000 100%),
radial-gradient(26px 11px at 14% 100%, transparent 98%, #000 100%),
radial-gradient(34px 13px at 25% 100%, transparent 98%, #000 100%),
radial-gradient(22px 10px at 37% 100%, transparent 98%, #000 100%),
radial-gradient(30px 12px at 49% 100%, transparent 98%, #000 100%),
radial-gradient(24px 11px at 61% 100%, transparent 98%, #000 100%),
radial-gradient(32px 13px at 73% 100%, transparent 98%, #000 100%),
radial-gradient(22px 10px at 84% 100%, transparent 98%, #000 100%),
radial-gradient(28px 12px at 95% 100%, transparent 98%, #000 100%),
linear-gradient(#000, #000);
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
.sr-about-combo::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(31, 41, 55, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(31, 41, 55, 0.05) 1px, transparent 1px);
background-size: 34px 34px;
}
.sr-about-combo .sr-section-title-row,
.sr-about-combo .sr-about-pro__intro,
.sr-about-combo .sr-about-story,
.sr-about-combo .sr-about-team-head,
.sr-about-combo .sr-about-pro__team-block,
.sr-about-combo .sr-team-grid {
position: relative;
z-index: 1;
}
.sr-about-summary-card,
.sr-about-niches-card {
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
padding: 16px;
}
.sr-about-media-card {
margin: 0;
border-radius: var(--sr-radius-lg);
overflow: hidden;
border: 1px solid var(--sr-border);
box-shadow: var(--sr-shadow-sm);
background: #fff;
min-height: 100%;
}
.sr-about-media {
display: block;
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
}
.sr-about-summary-card--story {
display: grid;
gap: 12px;
}
.sr-about-summary-head {
display: grid;
gap: 6px;
margin-bottom: 8px;
}
.sr-about-summary-title {
margin: 0;
font-size: 24px;
line-height: 1.2;
}
.sr-about-summary-text {
margin: 0;
color: var(--sr-text-muted);
}
.sr-about-metrics-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.sr-about-metric-card {
border: 1px solid var(--sr-border);
border-radius: 12px;
background: #fafafa;
padding: 10px;
}
.sr-about-niches-title {
margin: 0 0 12px;
font-size: 18px;
}
.sr-about-tags {
display: grid;
gap: 8px;
}
.sr-about-tags--inline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sr-about-tag {
border-radius: 12px;
padding: 9px 11px;
color: var(--sr-text);
}
.sr-about-team-head {
margin-top: 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
}
.sr-about-team-title {
margin: 0;
font-size: 30px;
line-height: 1.15;
}
.sr-about-team-subtitle {
margin: 0;
color: var(--sr-text-muted);
}
.sr-team-grid--about {
margin-top: 12px;
}
.sr-team-card--modern {
display: grid;
gap: 10px;
align-content: start;
min-height: 230px;
position: relative;
overflow: hidden;
} .sr-team-card--modern::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Gravatar/GravatarMen.png) no-repeat center / contain;
pointer-events: none;
z-index: 0;
}
@media (min-width: 901px) {
.sr-team-card--modern::after {
width: 128px;
height: 128px;
}
}
.sr-team-card--modern > * {
position: relative;
z-index: 1;
}
.sr-team-card--modern.sr-team-card--watermark-girl::after {
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Gravatar/GravatarGirl.png);
}
.sr-team-card--modern.sr-team-card--watermark-girl2::after {
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Gravatar/GravatarGirl2.png);
} .sr-team-cert-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sr-team-cert-actions::-webkit-scrollbar {
display: none;
}
.sr-team-cert-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
white-space: nowrap;
padding: 5px 10px 5px 6px;
max-width: 100%;
border: 1px solid rgba(203, 213, 225, 0.95);
border-radius: var(--sr-radius-pill);
background: rgba(255, 255, 255, 0.88);
color: var(--sr-accent-primary);
font-size: 0.78rem;
font-weight: 650;
letter-spacing: 0.02em;
line-height: 1.2;
cursor: pointer;
text-align: left;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease,
color 0.18s ease;
}
.sr-team-cert-badge:hover {
border-color: rgba(59, 130, 246, 0.45);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
background: #fff;
}
.sr-team-cert-badge:focus-visible {
outline: 2px solid var(--sr-accent-primary);
outline-offset: 2px;
}
.sr-team-cert-badge__icon {
display: flex;
flex-shrink: 0;
color: var(--sr-accent-primary);
opacity: 0.92;
}
.sr-team-cert-badge__text {
color: var(--sr-text);
font-weight: 600;
} .sr-team-cert-modal {
position: fixed;
inset: 0;
z-index: 85;
display: flex;
align-items: center;
justify-content: center;
padding: 20px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
padding-top: max(20px, env(safe-area-inset-top));
}
.sr-team-cert-modal[hidden] {
display: none !important;
}
.sr-team-cert-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.52);
cursor: pointer;
}
.sr-team-cert-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 520px;
max-height: min(90vh, 720px);
max-height: min(90dvh, 720px);
overflow: auto;
margin: auto;
padding: 0;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-md);
-webkit-overflow-scrolling: touch;
}
.sr-team-cert-modal__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-pill);
background: #fff;
color: var(--sr-text-muted);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sr-team-cert-modal__close:hover {
color: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
background: var(--sr-surface-soft);
}
.sr-team-cert-modal__inner {
padding: 22px 20px 24px;
padding-right: 48px;
}
.sr-team-cert-modal__dialog:has(.sr-team-cert-modal__img:not([hidden])) .sr-team-cert-modal__inner {
padding-top: 16px;
}
.sr-team-cert-modal__img {
display: block;
width: 100%;
max-width: none;
height: auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--sr-border);
object-fit: contain;
object-position: center top;
background: var(--sr-surface-soft);
max-height: min(52vh, 440px);
}
.sr-team-cert-modal__img[hidden] {
display: none !important;
}
.sr-team-cert-modal__title {
margin: 0 0 10px;
font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
font-weight: 720;
line-height: 1.28;
letter-spacing: -0.02em;
color: var(--sr-text);
text-align: center;
}
.sr-team-cert-modal__meta {
margin: 0 0 8px;
font-size: 0.88rem;
line-height: 1.45;
color: var(--sr-text-muted);
text-align: center;
}
.sr-team-cert-modal__meta[hidden] {
display: none !important;
}
.sr-team-cert-modal__meta a {
color: var(--sr-accent-primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.sr-team-cert-modal__links {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin: 12px 0 14px;
justify-content: center;
}
.sr-team-cert-modal__links[hidden] {
display: none !important;
}
.sr-team-cert-modal__link {
font-size: 0.88rem;
font-weight: 600;
color: var(--sr-accent-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.sr-team-cert-modal__desc {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--sr-text);
}
.sr-team-cert-modal__desc[hidden] {
display: none !important;
}
body.sr-team-cert-modal-open {
overflow: hidden;
} body.sr-team-cert-modal-open #about {
z-index: 200;
} .sr-about-combo.sr-about-combo--pro {
margin-top: 64px;
padding: clamp(22px, 3.2vw, 38px);
border-radius: calc(var(--sr-radius-lg) + 4px);
border: 1px solid rgba(203, 213, 225, 0.75); background:
radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.09) 0%, transparent 55%),
radial-gradient(90% 60% at 0% 100%, rgba(245, 158, 11, 0.07) 0%, transparent 50%),
linear-gradient(168deg, #f1f5f9 0%, #ffffff 38%, #f8fafc 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
var(--sr-shadow-sm);
overflow: hidden;
}
.sr-about-combo--pro::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: var(--sr-bg-pattern);
background-size: var(--sr-grid-size) var(--sr-grid-size);
opacity: 0.35; -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 68%);
mask-image: linear-gradient(90deg, black 0%, transparent 68%);
}
.sr-about-combo--pro::after {
display: none;
}
.sr-about-pro__intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
width: 100%;
margin-bottom: clamp(22px, 3vw, 34px);
}
.sr-about-pro__headline {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
}
.sr-about-combo--pro .sr-about-pro__section-title {
margin: 0;
font-size: clamp(1.45rem, 1.12rem + 1.25vw, 2rem);
font-weight: 750;
line-height: 1.14;
letter-spacing: -0.032em;
color: var(--sr-text);
}
.sr-about-combo--pro .sr-about-pro__section-title.sr-section-title::after {
width: 52px;
height: 3px;
margin-top: 12px;
border-radius: var(--sr-radius-pill);
background: linear-gradient(90deg, rgba(245, 158, 11, 0.95), var(--sr-accent-primary));
}
.sr-about-combo--pro .sr-about-pro__section-lead {
margin: 0;
max-width: none;
width: 100%;
font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.06rem);
line-height: 1.55;
color: var(--sr-text-muted);
}
.sr-about-combo--pro .sr-about-pro__story {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(18px, 2.8vw, 32px);
align-items: stretch;
}
.sr-about-combo--pro .sr-about-pro__media {
margin: 0;
border-radius: calc(var(--sr-radius-lg) + 4px);
border: 1px solid rgba(226, 232, 240, 0.92);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
overflow: hidden;
}
.sr-about-combo--pro .sr-about-pro__media .sr-about-media {
min-height: min(340px, 52vw);
object-fit: cover;
object-position: center;
}
.sr-about-combo--pro .sr-about-pro__panel {
padding: clamp(18px, 2.2vw, 26px);
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.92);
border-radius: calc(var(--sr-radius-lg) + 2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 10px 32px rgba(15, 23, 42, 0.06);
}
.sr-about-combo--pro .sr-about-pro__panel-head {
margin-bottom: 4px;
gap: 0;
}
.sr-about-combo--pro .sr-about-pro__story-title {
margin: 0;
font-size: clamp(1.06rem, 0.96rem + 0.42vw, 1.28rem);
font-weight: 680;
line-height: 1.28;
letter-spacing: -0.024em;
color: var(--sr-text);
}
.sr-about-combo--pro .sr-about-pro__story-text {
margin: 0;
font-size: clamp(0.94rem, 0.9rem + 0.15vw, 1.02rem);
line-height: 1.58;
color: var(--sr-text-muted);
}
.sr-about-combo--pro .sr-about-pro__metrics {
margin-top: clamp(14px, 2vw, 20px);
gap: 12px;
}
.sr-about-combo--pro .sr-about-pro__metrics .sr-about-metric-card {
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: var(--sr-radius-md);
background: rgba(255, 255, 255, 0.92);
padding: 14px 14px 15px;
border-left: 3px solid var(--sr-accent-primary);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.sr-about-combo--pro .sr-about-pro__metrics .sr-about-metric-card:nth-child(2) {
border-left-color: rgba(245, 158, 11, 0.92);
}
.sr-about-combo--pro .sr-about-pro__metrics .sr-about-metric-card:nth-child(3) {
border-left-color: var(--sr-accent-primary);
}
.sr-about-combo--pro .sr-about-pro__metrics .sr-about-metric-value {
font-size: clamp(1.15rem, 1.02rem + 0.35vw, 1.35rem);
font-weight: 750;
letter-spacing: -0.03em;
}
.sr-about-combo--pro .sr-about-pro__metrics .sr-about-metric-label {
margin-top: 6px;
font-size: 0.82rem;
line-height: 1.35;
color: var(--sr-text-muted);
}
.sr-about-combo--pro .sr-about-pro__tags {
margin-top: 6px;
gap: 10px;
}
.sr-about-combo--pro .sr-about-pro__tags .sr-about-tag {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(226, 232, 240, 0.95);
font-size: 0.84rem;
font-weight: 600;
letter-spacing: -0.01em;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sr-about-combo--pro .sr-about-pro__tags .sr-about-tag:hover {
border-color: rgba(191, 219, 254, 0.95);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.sr-about-pro__team-block {
margin-top: clamp(26px, 3.5vw, 40px);
padding-top: clamp(22px, 3vw, 32px);
border-top: 1px solid rgba(226, 232, 240, 0.95);
}
.sr-about-combo--pro .sr-about-pro__team-head {
margin-top: 0;
align-items: flex-end;
}
.sr-about-combo--pro .sr-about-pro__team-head .sr-about-team-title {
font-size: clamp(1.35rem, 1.1rem + 0.85vw, 1.75rem);
font-weight: 750;
letter-spacing: -0.03em;
}
.sr-about-combo--pro .sr-about-pro__team-head .sr-about-team-subtitle {
max-width: min(48ch, 100%);
font-size: clamp(0.92rem, 0.88rem + 0.12vw, 1rem);
line-height: 1.5;
}
.sr-about-combo--pro .sr-team-grid--about {
margin-top: clamp(14px, 2vw, 18px);
} @media (max-width: 900px) { .sr-testimonials .sr-section-title-row {
align-items: center;
justify-content: center;
text-align: center;
}
.sr-testimonials .sr-testimonials-kicker {
justify-content: center;
margin-inline: auto;
}
.sr-testimonials-head-aside {
align-items: center;
text-align: center;
margin-inline: auto;
}
.sr-testimonials-head-aside .sr-section-subtitle {
text-align: center;
}
.sr-testimonials .sr-section-title::after,
.sr-faq-extended .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-faq-extended .sr-section-title-row {
align-items: center;
justify-content: center;
text-align: center;
}
.sr-faq-kicker {
margin-left: auto;
margin-right: auto;
}
.sr-faq-extended .sr-section-title,
.sr-faq-extended .sr-section-subtitle {
text-align: center;
}
.sr-about-combo--pro .sr-about-pro__intro,
.sr-about-combo--pro .sr-about-pro__story,
.sr-about-combo--pro .sr-about-pro__team-block {
position: relative;
z-index: 1;
}
.sr-about-combo--pro .sr-about-pro__intro {
align-items: center;
text-align: center;
margin-bottom: clamp(18px, 4vw, 26px);
}
.sr-about-combo--pro .sr-about-pro__kicker {
align-self: center;
}
.sr-about-combo--pro .sr-about-pro__headline {
align-items: center;
width: 100%;
}
.sr-about-combo--pro .sr-about-pro__section-title {
text-align: center;
}
.sr-about-combo--pro .sr-about-pro__section-title.sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-about-combo--pro .sr-about-pro__section-lead {
text-align: center;
max-width: min(52ch, 100%);
margin-inline: auto;
}
.sr-about-combo--pro .sr-about-pro__story {
grid-template-columns: minmax(0, 1fr);
gap: var(--sr-stack-gap);
}
.sr-about-combo--pro .sr-about-pro__media {
order: -1;
width: 100%;
max-width: min(400px, 100%);
margin-inline: auto;
}
.sr-about-combo--pro .sr-about-pro__media .sr-about-media {
min-height: min(260px, 58vw);
}
.sr-about-combo--pro .sr-about-pro__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sr-about-combo--pro .sr-about-pro__metrics .sr-about-metric-card:nth-child(3) {
grid-column: 1 / -1;
}
.sr-about-combo--pro .sr-about-pro__team-head {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.sr-about-combo--pro .sr-about-pro__team-head .sr-about-team-subtitle {
max-width: min(46ch, 100%);
margin-inline: auto;
}
.sr-team-grid--about {
display: flex;
flex-wrap: nowrap;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 8px;
margin-top: 14px;
}
.sr-team-grid--about::-webkit-scrollbar {
display: none;
}
.sr-team-grid--about > .sr-team-card--modern {
flex: 0 0 min(280px, calc(100% - 2 * var(--sr-section-x) - 28px));
scroll-snap-align: start;
min-height: 220px;
}
}
@media (min-width: 901px) {
.sr-about-combo.sr-about-combo--pro {
margin-top: 100px;
}
} #calculator.sr-calc--clean-pro .sr-calc-kicker {
margin: 0 0 6px;
}
#calculator .sr-calc-section-title {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 0;
}
#calculator .sr-calc-section-title > div:first-child {
flex: none;
max-width: 72ch;
} @media (min-width: 1025px) {
#calculator .sr-calc-intro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#calculator .sr-calc-section-title {
align-items: center;
}
#calculator .sr-calc-section-title > div:first-child {
margin-inline: auto;
text-align: center;
}
#calculator .sr-calc-intro .sr-section-subtitle {
text-align: center;
}
#calculator.sr-calc--clean-pro .sr-calc-section-title .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
} #calculator .sr-calc-steps {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
padding: 6px;
gap: 0;
background: #fff;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
width: max-content;
max-width: 100%;
box-sizing: border-box;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#calculator.sr-calc--result .sr-calc-steps {
display: none !important;
}
#calculator .sr-calc-step-indicator {
flex: 0 0 auto;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px;
padding: 10px 12px;
margin: 0;
border: 0;
border-radius: 12px;
background: transparent;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: background 0.16s ease, box-shadow 0.16s ease;
}
#calculator .sr-calc-step-indicator + .sr-calc-step-indicator {
border-left: 1px solid var(--sr-border);
}
#calculator .sr-calc-step-indicator:hover {
background: rgba(239, 246, 255, 0.55);
}
#calculator .sr-calc-step-indicator.is-active {
background: #eff6ff;
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
}
#calculator .sr-calc-card.is-selected {
border-color: var(--sr-accent-primary);
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.12),
0 10px 26px rgba(59, 130, 246, 0.14);
}
#calculator .sr-calc-step-index {
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 750;
background: #f1f5f9;
color: var(--sr-text-muted);
border: 1px solid var(--sr-border);
line-height: 1;
}
#calculator .sr-calc-step-indicator.is-active .sr-calc-step-index {
background: var(--sr-accent-primary);
color: #fff;
border-color: var(--sr-accent-primary);
}
#calculator .sr-calc-step-indicator.is-completed .sr-calc-step-index {
background: var(--sr-success);
border-color: var(--sr-success);
color: #fff;
}
#calculator .sr-calc-step-label {
font-size: 13px;
font-weight: 650;
color: var(--sr-text);
line-height: 1.25;
white-space: nowrap;
}
#calculator .sr-calc-body {
margin-top: 6px;
padding: 26px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: var(--sr-radius-lg);
box-shadow: 0 14px 34px rgba(59, 130, 246, 0.1);
display: flex;
flex-direction: column;
gap: 0;
} @media (min-width: 901px) {
#calculator .sr-calc-body {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
column-gap: 28px;
row-gap: 14px;
align-items: start;
}
#calculator .sr-calc-step:not([hidden]) {
display: contents;
}
#calculator .sr-calc-steps {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
width: max-content;
max-width: 100%;
}
#calculator .sr-calc-step:not([hidden]) .sr-calc-step-title {
grid-column: 1;
grid-row: 1;
margin: 0;
}
#calculator .sr-calc-step:not([hidden]) .sr-calc-step-subtitle {
grid-column: 1;
grid-row: 2;
margin: 0;
max-width: min(52ch, 100%);
}
#calculator .sr-calc-step:not([hidden]) .sr-calc-type-grid,
#calculator .sr-calc-step:not([hidden]) .sr-calc-addons,
#calculator .sr-calc-step:not([hidden]) .sr-calc-design-grid {
grid-column: 1 / -1;
grid-row: 3;
}
#calculator .sr-calc-step:not([hidden]) .sr-calc-nav {
grid-column: 1 / -1;
grid-row: 4;
}
#calculator .sr-calc-result:not([hidden]) {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
} #calculator .sr-calc-result[hidden] {
display: none !important;
}
#calculator .sr-calc-step {
display: grid;
gap: 18px;
}
#calculator .sr-calc-step[hidden] {
display: none !important;
}
#calculator .sr-calc-step-title {
margin: 0;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.22;
color: var(--sr-text);
letter-spacing: -0.02em;
}
#calculator .sr-calc-step-subtitle {
margin: -8px 0 0;
max-width: 62ch;
font-size: 15px;
line-height: 1.6;
color: var(--sr-text-muted);
}
#calculator .sr-calc-type-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 900px) {
#calculator .sr-calc-intro .sr-section-subtitle,
#calculator .sr-calc-step-subtitle,
#calculator .sr-calc-card-text {
display: none !important;
}
#calculator .sr-calc-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#calculator .sr-calc-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 112px;
padding-top: 16px;
padding-bottom: 16px;
border: 2px solid rgba(59, 130, 246, 0.45);
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
border-color 0.16s ease,
background-color 0.16s ease;
}
#calculator .sr-calc-card:active {
transform: translateY(1px) scale(0.995);
}
#calculator .sr-calc-card.is-selected {
border-color: var(--sr-accent-primary);
background: linear-gradient(180deg, #eff6ff 0%, #e8f1ff 100%);
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.16),
0 12px 26px rgba(59, 130, 246, 0.18);
}
#calculator .sr-calc-card-header {
justify-content: center;
text-align: center;
width: 100%;
}
#calculator .sr-calc-card-title {
text-align: center;
width: 100%;
}
}
#calculator .sr-calc-design-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#calculator .sr-calc-card {
display: grid;
gap: 10px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--sr-border);
background: #fff;
box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
#calculator .sr-calc-card:hover {
border-color: rgba(59, 130, 246, 0.4);
box-shadow: 0 10px 26px rgba(59, 130, 246, 0.14);
transform: translateY(-1px);
}
#calculator .sr-calc-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
#calculator .sr-calc-card-title {
font-size: 15px;
font-weight: 750;
color: var(--sr-text);
min-width: 0;
flex: 1 1 auto;
line-height: 1.25;
padding-right: 4px;
}
#calculator .sr-calc-card-price {
flex: 0 0 auto;
white-space: nowrap;
text-align: right;
line-height: 1.2;
font-size: 14px;
font-weight: 750;
}
#calculator .sr-calc-card-text {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--sr-text-muted);
}
#calculator .sr-calc-addons {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
}
#calculator .sr-calc-addon {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--sr-border);
background: #fff;
cursor: pointer;
font: inherit;
color: var(--sr-text);
text-align: left;
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
#calculator .sr-calc-addon:hover {
border-color: rgba(59, 130, 246, 0.35);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.08);
}
#calculator .sr-calc-addon-price {
font-size: 13px;
font-weight: 700;
color: var(--sr-accent-primary);
white-space: nowrap;
}
#calculator .sr-calc-nav {
margin-top: 22px;
padding-top: 2px;
flex-wrap: wrap;
gap: 12px;
} #calculator .sr-calc-nav:not(:has(.sr-btn-outline)) {
justify-content: flex-end;
}
#calculator .sr-calc-nav .sr-btn-primary {
min-width: min(240px, 100%);
justify-content: center;
}
#calculator .sr-calc-result {
margin-top: 6px;
gap: 18px;
}
#calculator .sr-calc-result-card {
padding: 22px;
}
#calculator .sr-calc-result-card .sr-card-label {
width: fit-content;
margin: 0 0 8px;
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 999px;
background: #eff6ff;
color: var(--sr-accent-primary);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
padding: 5px 10px;
}
#calculator .sr-calc-summary {
display: grid;
gap: 0;
}
#calculator .sr-calc-summary-row {
padding: 10px 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.95);
font-size: 14px;
color: var(--sr-text);
}
#calculator .sr-calc-summary-row:last-child {
border-bottom: 0;
}
#calculator .sr-calc-total {
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid var(--sr-border);
}
#calculator .sr-calc-total-value {
font-size: clamp(22px, 3vw, 30px);
font-weight: 800;
letter-spacing: -0.03em;
}
#calculator .sr-calc-note {
margin: 16px 0 0;
font-size: 13px;
line-height: 1.5;
}
#calculator .sr-calc-cta {
margin: 22px 0 0;
}
#calculator .sr-calc-cta .sr-btn-primary {
display: inline-flex;
width: 100%;
justify-content: center;
}
#calculator .sr-calc-form {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
#calculator .sr-calc-form-grid {
gap: 14px;
}
#calculator .sr-calc-submit-btn {
margin-top: 4px;
}
#calculator .sr-calc-privacy,
#calculator .sr-calc-alt {
margin: 0;
}
#calculator .sr-calc-privacy {
margin-top: -2px;
} #calculator.sr-calc--clean-pro .sr-calc-card-price,
#calculator.sr-calc--clean-pro .sr-calc-addon-price {
display: none !important;
} #calculator.sr-calc--clean-pro .sr-calc-body {
margin-top: 14px;
padding: clamp(18px, 3.2vw, 30px);
background: linear-gradient(
165deg,
rgba(248, 250, 252, 0.98) 0%,
#fff 50%,
rgba(239, 246, 255, 0.38) 100%
);
border: 1px solid rgba(226, 232, 240, 0.9);
box-shadow: var(--sr-shadow-sm);
}
@media (max-width: 1024px) {
#calculator.sr-calc--clean-pro .sr-calc-body {
margin-top: 0;
}
}
#calculator.sr-calc--clean-pro .sr-calc-steps {
padding: 8px;
gap: 4px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
#calculator.sr-calc--clean-pro .sr-calc-step-indicator + .sr-calc-step-indicator {
border-left-color: rgba(226, 232, 240, 0.9);
}
#calculator.sr-calc--clean-pro .sr-calc-step-indicator.is-active {
background: rgba(239, 246, 255, 0.95);
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
}
#calculator.sr-calc--clean-pro .sr-calc-type-grid {
gap: 16px;
}
#calculator.sr-calc--clean-pro .sr-calc-card {
position: relative;
gap: 12px;
padding: 18px 18px 18px 20px;
border-radius: var(--sr-radius-lg);
border: 1px solid var(--sr-border);
background: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
overflow: hidden;
}
#calculator.sr-calc--clean-pro .sr-calc-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: var(--sr-radius-lg) 0 0 var(--sr-radius-lg);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.35), rgba(245, 158, 11, 0.28));
opacity: 0;
transition: opacity 0.18s ease;
}
#calculator.sr-calc--clean-pro .sr-calc-card:hover::before,
#calculator.sr-calc--clean-pro .sr-calc-card.is-selected::before {
opacity: 1;
}
#calculator.sr-calc--clean-pro .sr-calc-card:hover {
transform: translateY(-2px);
box-shadow: var(--sr-shadow-sm);
}
#calculator.sr-calc--clean-pro .sr-calc-card.is-selected {
border-color: rgba(59, 130, 246, 0.45);
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.12),
var(--sr-shadow-sm);
}
#calculator.sr-calc--clean-pro .sr-calc-card-header {
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
#calculator.sr-calc--clean-pro .sr-calc-card-title {
font-size: clamp(15px, 1.1vw, 17px);
font-weight: 750;
letter-spacing: -0.02em;
}
#calculator.sr-calc--clean-pro .sr-calc-card-text {
font-size: 14px;
line-height: 1.55;
}
#calculator.sr-calc--clean-pro .sr-calc-card-badge {
flex: 0 0 auto;
padding: 4px 10px;
border-radius: var(--sr-radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--sr-text-muted);
background: rgba(248, 250, 252, 0.95);
border: 1px solid var(--sr-border);
}
#calculator.sr-calc--clean-pro .sr-calc-card-badge--accent {
color: #b45309;
background: rgba(255, 251, 235, 0.95);
border-color: rgba(245, 158, 11, 0.35);
}
#calculator.sr-calc--clean-pro .sr-calc-design-grid {
gap: 16px;
}
#calculator.sr-calc--clean-pro .sr-calc-addons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: 12px;
}
#calculator.sr-calc--clean-pro .sr-calc-addon {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
min-height: 72px;
border-radius: var(--sr-radius-md);
border: 1px solid var(--sr-border);
background: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
text-align: left;
}
#calculator.sr-calc--clean-pro .sr-calc-addon:hover {
border-color: rgba(59, 130, 246, 0.35);
box-shadow: var(--sr-shadow-sm);
}
#calculator.sr-calc--clean-pro .sr-calc-addon.is-selected {
border-color: rgba(59, 130, 246, 0.5);
background: rgba(239, 246, 255, 0.65);
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.1),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
#calculator.sr-calc--clean-pro .sr-calc-addon-body {
display: grid;
gap: 4px;
min-width: 0;
}
#calculator.sr-calc--clean-pro .sr-calc-addon-label {
font-size: 15px;
font-weight: 650;
color: var(--sr-text);
line-height: 1.25;
}
#calculator.sr-calc--clean-pro .sr-calc-addon-hint {
font-size: 13px;
line-height: 1.4;
color: var(--sr-text-muted);
}
#calculator.sr-calc--clean-pro .sr-calc-addon-check {
flex: 0 0 24px;
width: 24px;
height: 24px;
border-radius: 999px;
border: 2px solid var(--sr-border-strong);
background: #fff;
position: relative;
transition:
border-color 0.15s ease,
background 0.15s ease;
}
#calculator.sr-calc--clean-pro .sr-calc-addon.is-selected .sr-calc-addon-check {
border-color: var(--sr-accent-primary);
background: var(--sr-accent-primary);
}
#calculator.sr-calc--clean-pro .sr-calc-addon.is-selected .sr-calc-addon-check::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
#calculator.sr-calc--clean-pro .sr-calc-nav {
margin-top: 26px;
padding-top: 8px;
border-top: 1px solid rgba(226, 232, 240, 0.75);
}
#calculator.sr-calc--clean-pro .sr-calc-result-card {
border-radius: var(--sr-radius-lg);
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow: var(--sr-shadow-sm);
}
#calculator.sr-calc--clean-pro .sr-calc-form-wrapper {
border-radius: var(--sr-radius-lg);
border: 1px solid rgba(226, 232, 240, 0.9);
background: rgba(255, 255, 255, 0.75);
box-shadow: var(--sr-shadow-sm);
overflow: hidden;
}
@media (max-width: 900px) {
#calculator.sr-calc--clean-pro .sr-calc-design-grid {
grid-template-columns: 1fr;
}
#calculator.sr-calc--clean-pro .sr-calc-addons {
grid-template-columns: 1fr;
}
#calculator.sr-calc--clean-pro .sr-calc-steps {
width: 100%;
max-width: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
overflow: hidden;
}
#calculator.sr-calc--clean-pro .sr-calc-step-indicator {
min-width: 0;
padding: 8px 6px;
gap: 6px;
justify-content: center;
}
#calculator.sr-calc--clean-pro .sr-calc-step-index {
width: 24px;
height: 24px;
font-size: 11px;
}
#calculator.sr-calc--clean-pro .sr-calc-step-label {
font-size: 11px;
white-space: nowrap;
text-align: center;
}
#calculator .sr-calc-nav {
display: flex;
flex-wrap: nowrap;
gap: 10px;
}
#calculator .sr-calc-nav .sr-btn-outline,
#calculator .sr-calc-nav .sr-btn-primary {
flex: 1 1 0;
min-width: 0;
width: auto;
justify-content: center;
}
#calculator .sr-calc-total-value,
#calculator .sr-calc-total-value [data-calc-range-out] {
display: inline-flex;
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
#calculator .sr-calc-result-card .sr-card-label {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#calculator .sr-calc-privacy {
display: block;
white-space: normal;
text-align: center;
line-height: 1.35;
max-width: 30ch;
margin-left: auto;
margin-right: auto;
}
#calculator .sr-calc-privacy .sr-lock-icon {
display: none;
}
}
.sr-calc-privacy {
margin: 0;
display: flex;
align-items: center;
gap: 7px;
font-size: 0.67em; white-space: nowrap;
}
.sr-calc-privacy .sr-lock-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
font-size: 1em;
}
.sr-calc-privacy .sr-lock-icon .sr-footer-privacy-fa {
font-size: 1.05em;
opacity: 0.92;
} .sr-contacts-form .sr-calc-privacy {
width: 100%;
justify-content: flex-end;
text-align: right;
}
#features {
position: relative;
overflow: visible;
background: transparent;
}
#features::before {
content: "";
position: absolute;
height: var(--sr-torn-edge-h);
top: calc(var(--sr-torn-bg-trim) - var(--sr-torn-edge-h));
transform: rotate(180deg);
pointer-events: none;
z-index: 0;
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
#features::after {
content: "";
position: absolute;
top: var(--sr-torn-bg-trim);
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size: 100% calc(100% - var(--sr-torn-edge-h)), 100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
#features > * {
position: relative;
z-index: 1;
} .sr-inner-page-hero {
--sr-inner-hero-gap: clamp(8px, 1.25vw, 12px);
position: relative;
z-index: 1;
overflow: visible;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
padding: 0;
display: flex;
align-items: stretch;
justify-content: center;
background: transparent;
color: var(--sr-text);
font-family: inherit;
}
.sr-inner-page-hero::after {
content: "";
position: absolute;
top: 0;
bottom: calc(-1 * var(--sr-torn-edge-h));
transform: none;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(var(--sr-torn-bg-color), var(--sr-torn-bg-color)),
url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/Background.png?v=1);
background-repeat: no-repeat, no-repeat;
background-size: 100% calc(100% - var(--sr-torn-edge-h)), 100% var(--sr-torn-edge-h);
background-position: center top, center bottom;
}
.sr-inner-page-hero .sr-inner-page-hero__inner.sr-container {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--sr-container);
margin-left: auto;
margin-right: auto;
padding-top: var(--sr-inner-hero-pad-y);
padding-bottom: calc(var(--sr-inner-hero-pad-y) + 2px);
padding-left: max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--sr-section-x), env(safe-area-inset-right, 0px));
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
text-align: left;
min-height: 0;
}
.sr-inner-page-hero__crumbs {
flex-shrink: 0;
padding-bottom: 0;
margin-bottom: clamp(10px, 1.25vw, 16px);
border-bottom: 0;
}
.sr-inner-page-hero__crumbs .sr-breadcrumbs {
margin: 0;
} .sr-hero-crumbs {
flex-shrink: 0;
padding-bottom: 0;
margin-bottom: clamp(10px, 1.25vw, 16px);
border-bottom: 0;
}
.sr-hero-crumbs .sr-breadcrumbs {
margin: 0;
}
.sr-inner-page-hero .sr-breadcrumbs__list {
font-size: 0.78rem;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--sr-accent-primary);
align-content: flex-start;
}
.sr-inner-page-hero .sr-breadcrumbs__item {
min-width: 0;
max-width: 100%;
}
.sr-inner-page-hero .sr-breadcrumbs__link {
color: var(--sr-accent-primary);
}
.sr-inner-page-hero .sr-breadcrumbs__link:hover {
color: var(--sr-accent-primary-hover);
border-bottom-color: color-mix(in srgb, var(--sr-accent-primary) 45%, transparent);
}
.sr-inner-page-hero .sr-breadcrumbs__item--current .sr-breadcrumbs__text {
color: var(--sr-accent-primary);
font-weight: 600;
}
.sr-inner-page-hero .sr-breadcrumbs__item + .sr-breadcrumbs__item::before {
content: ">";
margin: 0 0.5rem;
font-weight: 500;
color: color-mix(in srgb, var(--sr-accent-primary) 45%, var(--sr-text-muted));
opacity: 1;
}
.sr-inner-page-hero__headline {
flex: 0 1 auto;
flex-grow: 0;
min-width: 0;
}
.sr-inner-page-hero__title {
margin: 0;
max-width: min(42rem, 100%);
font-size: clamp(1.35rem, 0.95rem + 1.6vw, 1.85rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.12;
color: var(--sr-text);
overflow-wrap: anywhere;
word-break: break-word;
text-wrap: balance;
font-family: inherit;
}
.sr-inner-page-hero__title::after {
content: "";
display: block;
margin-top: clamp(6px, 1vw, 8px);
width: min(140px, 32%);
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--sr-accent-secondary), var(--sr-accent-primary));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sr-accent-primary) 18%, transparent);
} body.sr-support-catalog-page .sr-inner-page-hero__title::after {
display: none !important;
content: none !important;
box-shadow: none !important;
background: transparent !important;
} body.sr-support-catalog-page .sr-inner-page-hero {
display: none !important;
} body.sr-flush-hero-under-nav .sr-main--page,
body.page-id-233 .sr-main--page,
body.page-id-234 .sr-main--page {
padding-top: 0 !important;
}
body.sr-flush-hero-under-nav .sr-inner-page-hero,
body.page-id-233 .sr-inner-page-hero,
body.page-id-234 .sr-inner-page-hero {
display: none !important;
} body.sr-flush-hero-under-nav .sr-page-entry-content > p:has(+ #top.sr-hero),
body.page-id-233 .sr-page-entry-content > p:has(+ #top.sr-hero),
body.page-id-234 .sr-page-entry-content > p:has(+ #top.sr-hero) {
display: none;
}
.sr-breadcrumbs {
margin: 0 0 14px;
}
.sr-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--sr-text-muted);
}
.sr-breadcrumbs__item {
display: flex;
align-items: center;
}
.sr-breadcrumbs__item + .sr-breadcrumbs__item::before {
content: ">";
margin: 0 0.45rem;
color: var(--sr-text-muted);
font-weight: 600;
opacity: 0.55;
pointer-events: none;
}
.sr-breadcrumbs__link {
color: var(--sr-text-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.sr-breadcrumbs__link:hover {
color: var(--sr-accent-primary);
border-bottom-color: color-mix(in srgb, var(--sr-accent-primary) 50%, transparent);
}
.sr-breadcrumbs__item--current .sr-breadcrumbs__text {
color: var(--sr-text);
font-weight: 600;
} .sr-features-clean-pro__title-row {
align-items: flex-end;
}
.sr-features-clean-pro__title-main {
min-width: 0;
flex: 1 1 280px;
}
.sr-features-clean-pro__kicker {
margin-bottom: 4px;
}
.sr-features-clean-pro__lead {
flex: 1 1 260px;
max-width: min(52ch, 100%);
margin: 0;
text-align: right;
}
.sr-features-clean-pro__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
width: 100%;
min-width: 0;
}
.sr-features-clean-pro__card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
min-width: 0;
padding: 16px 16px 18px;
background: var(--sr-surface);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow-sm);
}
.sr-features-clean-pro__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.sr-features-clean-pro__step {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sr-text-muted);
line-height: 1.3;
min-width: 0;
}
.sr-features-clean-pro__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #fff;
border: 1px solid var(--sr-border);
color: var(--sr-accent-primary);
}
.sr-features-clean-pro__icon svg {
width: 22px;
height: 22px;
display: block;
}
.sr-features-clean-pro__title {
margin: 0;
font-size: clamp(17px, 1.9vw, 20px);
line-height: 1.28;
color: var(--sr-text);
}
.sr-features-clean-pro__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--sr-text-muted);
overflow-wrap: break-word;
} .sr-features-pack__title-row {
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.sr-features-pack__kicker {
margin-bottom: 4px;
}
.sr-features-pack__lead {
flex: 0 1 auto;
max-width: min(52ch, 100%);
margin: 0;
text-align: right;
}
.sr-features-pack .sr-section-title::after {
margin-left: 0;
}
.sr-features-pack__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
width: 100%;
min-width: 0;
} .sr-features-pack .sr-guarantee-card__icon {
width: 28px;
height: 28px;
}
.sr-features-pack .sr-guarantee-card__icon svg {
width: 18px;
height: 18px;
}
.sr-features-pack .sr-features-pack-card__icon-fa {
font-size: 17px;
}
.sr-features-pack-card__icon-svg,
.sr-support-card__icon-svg,
.sr-features-pack-card__icon-fa {
width: 24px;
height: 24px;
max-width: 88%;
max-height: 88%;
display: block;
flex-shrink: 0;
box-sizing: border-box;
color: inherit;
}
.sr-features-pack-card__icon-fa {
width: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1100px) {
.sr-features-clean-pro__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sr-features-pack__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sr-team-card--modern .sr-team-avatar {
margin: 0;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--sr-border);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
background: #fff;
}
.sr-team-card--modern .sr-team-name {
margin: 0;
font-size: 24px;
line-height: 1.1;
} @media (max-width: 900px) {
:root {
--sr-section-y: 48px;
--sr-section-x: 18px;
--sr-stack-gap: 20px;
--sr-card-pad: 16px;
--sr-inline-gap: 14px;
--sr-section-gap: 40px;
} html {
scroll-padding-top: calc(var(--sr-mobile-header-h, 64px) + env(safe-area-inset-top, 0px) + 8px);
}
.sr-section {
padding-top: var(--sr-section-y);
padding-bottom: var(--sr-section-y);
padding-left: max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--sr-section-x), env(safe-area-inset-right, 0px));
}
main > section.sr-section:not(.sr-hero) {
margin-top: var(--sr-section-gap);
} #top + #about.sr-section,
#about + #process.sr-section,
#about + #features.sr-section,
#portfolio + #calculator.sr-section,
section.sr-benefits--clean-pro + #process.sr-section,
#support + #testimonials.sr-section,
section#brief + #faq.sr-section,
main.sr-main + #contacts.sr-section,
#features + #services.sr-section,
#calculator + #pain-points.sr-section,
#process + #guarantees.sr-section,
#process + #client-logos.sr-section,
#client-logos + #testimonials.sr-section,
#testimonials + #seo-text.sr-section,
#faq + section.sr-blog-teaser.sr-section {
margin-top: calc(var(--sr-section-gap) + var(--sr-torn-edge-h));
}
#about + #process.sr-section {
margin-top: calc(var(--sr-section-gap) + var(--sr-torn-edge-h) + 16px);
}
main.sr-main + #contacts.sr-section {
margin-top: 0 !important;
}
section#brief + #faq.sr-section {
margin-top: 0 !important;
}
#faq.sr-section {
margin-top: 0 !important;
} #features + #services.sr-section.sr-services--pricing {
margin-top: var(--sr-section-gap);
}
.sr-topbar-inner,
.sr-mainbar-inner,
.sr-footer-inner {
padding-left: max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--sr-section-x), env(safe-area-inset-right, 0px));
}
.sr-footer-inner {
flex-direction: column;
align-items: center;
gap: var(--sr-stack-gap);
padding-top: var(--sr-card-pad);
padding-bottom: calc(var(--sr-section-y) * 0.75);
text-align: center;
}
.sr-footer-links {
margin-left: 0;
justify-content: center;
}
.sr-footer-copy {
position: static;
left: auto;
transform: none;
white-space: normal;
}
.sr-mobile-quick {
right: max(10px, env(safe-area-inset-right, 0px));
left: auto;
bottom: 12px;
width: 58px;
height: 58px;
max-width: none;
}
.sr-mobile-quick.is-collapsed .sr-mobile-quick__panel {
transform: translateX(20px);
opacity: 0;
pointer-events: none;
}
.sr-mobile-quick .sr-mobile-quick__bubble {
display: inline-flex;
align-items: center;
justify-content: center;
}
.sr-mobile-quick__panel {
bottom: 12px;
}
.sr-mobile-quick.is-collapsed .sr-mobile-quick__bubble::before {
opacity: 1;
animation: srBubbleRingSpin 2.1s linear infinite;
}
.sr-mobile-quick:not(.is-collapsed) .sr-mobile-quick__panel {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.sr-page-quick-links {
right: 12px;
left: 12px;
bottom: 12px;
}
.sr-page-quick-links__card {
width: auto;
}
.sr-contacts-info {
gap: var(--sr-stack-gap);
}
.sr-contacts-form {
gap: var(--sr-inline-gap);
}
.sr-brief-panel {
padding: calc(var(--sr-card-pad) + 8px) var(--sr-card-pad) calc(var(--sr-card-pad) + 12px);
}
.sr-mobile-drawer__masthead {
padding: calc(12px + env(safe-area-inset-top, 0px)) max(var(--sr-section-x), env(safe-area-inset-right, 0px)) var(--sr-card-pad);
}
.sr-mobile-drawer__scroll {
padding: var(--sr-card-pad) max(var(--sr-section-x), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))
calc(var(--sr-card-pad) + 2px) max(var(--sr-section-x), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
gap: var(--sr-stack-gap);
}
.sr-mobile-drawer__section {
gap: var(--sr-inline-gap);
padding: var(--sr-card-pad) var(--sr-card-pad) calc(var(--sr-card-pad) + 2px);
}
.sr-mobile-drawer__nav-card {
padding: 8px;
}
.sr-contact-modal {
padding: var(--sr-card-pad) max(var(--sr-section-x), env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px))
max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-top: max(var(--sr-card-pad), env(safe-area-inset-top, 0px));
}
.sr-contact-modal__dialog {
padding: calc(var(--sr-card-pad) + 6px) var(--sr-card-pad) calc(var(--sr-card-pad) + 8px);
}
.sr-contact-modal__form {
gap: var(--sr-inline-gap);
}
.sr-topbar {
display: none !important;
}
.sr-topbar-desktop-only {
display: none !important;
}
.sr-nav {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
z-index: 40;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sr-page > .sr-main {
padding-top: calc(var(--sr-mobile-header-h, 64px) + env(safe-area-inset-top, 0px));
} .sr-page > .sr-main:has(.sr-inner-page-hero) {
padding-top: 0;
} .sr-page > .sr-main:has(#top.sr-hero) {
padding-top: 0;
}
.sr-inner-page-hero {
margin-top: 0;
padding-top: calc(var(--sr-mobile-header-h, 64px) + env(safe-area-inset-top, 0px));
box-sizing: border-box;
height: auto;
min-height: 0;
}
.sr-inner-page-hero__title {
scroll-margin-top: calc(var(--sr-mobile-header-h, 64px) + env(safe-area-inset-top, 0px) + 6px);
}
.sr-mainbar img.custom-logo {
max-height: 24px !important;
width: auto;
}
.sr-mainbar .sr-logo-mark {
width: 16px;
height: 16px;
border-width: 1px;
border-radius: 6px;
}
.sr-mainbar .sr-logo-text-main {
font-size: 13px;
}
.sr-mainbar .sr-logo-text-sub {
font-size: 8px;
letter-spacing: 0.08em;
}
.sr-mainbar-inner > .sr-mainbar-mobile-actions {
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
min-width: 0;
}
.sr-mainbar-mobile-actions .sr-mainbar-burger {
flex-shrink: 0;
margin-left: 0;
}
.sr-mainbar-mobile-actions .sr-currency {
display: flex;
align-items: center;
line-height: 0;
}
.sr-mainbar-mobile-city {
min-width: 0;
display: flex;
align-items: center;
}
.sr-mainbar-mobile-city .sr-city-display {
max-width: min(42vw, 200px);
}
.sr-mainbar-mobile-city .sr-city-label {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
body.sr-drawer-open .sr-mainbar-mobile-city {
opacity: 0;
pointer-events: none;
}
.sr-mainbar-desktop-only {
display: none !important;
}
.sr-mobile-drawer {
display: block;
}
.sr-mainbar-inner {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sr-mainbar-center {
justify-self: unset;
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.sr-mainbar-center .custom-logo-link {
display: inline-flex;
align-items: center;
line-height: 0;
}
.sr-mainbar-center .sr-logo {
align-items: center;
}
.sr-mainbar-burger {
flex-shrink: 0;
}
.sr-partners__body {
grid-template-columns: 1fr;
gap: var(--sr-stack-gap);
} .sr-partners .sr-partners__head {
flex-direction: column;
align-items: center;
text-align: center;
justify-content: flex-start;
gap: var(--sr-inline-gap);
margin-bottom: var(--sr-stack-gap);
}
.sr-partners .sr-partners__head > div {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.sr-partners .sr-partners__title::after {
margin-left: auto;
margin-right: auto;
}
.sr-partners .sr-partners__lead {
text-align: center;
max-width: min(42rem, 100%);
margin-inline: auto;
} .sr-partners__visual {
position: static;
order: 1;
max-width: min(260px, 78vw);
margin-inline: auto;
justify-self: center;
}
.sr-partners__main {
order: 2;
}
.sr-hero,
.sr-about-story,
.sr-contacts-layout,
.sr-faq-layout,
.sr-calc-result,
.sr-process-timeline,
.sr-services-grid,
.sr-services-pricing__tiers,
.sr-services-list,
.sr-team-grid,
.sr-support-grid,
.sr-partners__grid,
.sr-features-pack__grid,
.sr-blog-grid,
.sr-grid-3,
.sr-stack-targets-layout,
.sr-stack-brief-trio__layout,
.sr-brief-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--sr-stack-gap);
}
.sr-calc-addons,
.sr-calc-design-grid,
.sr-contacts-grid,
.sr-brief-row {
grid-template-columns: minmax(0, 1fr);
gap: var(--sr-inline-gap);
}
.sr-services-pricing__tiers {
justify-items: center;
}
.sr-services-pricing__tiers .sr-price-tier {
width: min(300px, 100%);
max-width: 300px;
box-sizing: border-box;
}
#calculator .sr-calc-steps {
position: static;
flex: none;
width: 100%;
max-width: none;
flex-direction: column;
margin-bottom: var(--sr-stack-gap);
}
#calculator .sr-calc-step .sr-calc-step-title,
#calculator .sr-calc-step .sr-calc-step-subtitle {
padding-right: 0;
}
#calculator .sr-calc-step-indicator + .sr-calc-step-indicator {
border-left: 0;
border-top: 1px solid var(--sr-border);
}
#calculator .sr-calc-body {
padding: var(--sr-card-pad) max(var(--sr-section-x), env(safe-area-inset-left, 0px)) var(--sr-card-pad)
max(var(--sr-section-x), env(safe-area-inset-right, 0px));
}
#calculator .sr-calc-design-grid {
grid-template-columns: minmax(0, 1fr);
}
.sr-hero {
padding: var(--sr-card-pad) max(var(--sr-section-x), env(safe-area-inset-left, 0px)) calc(var(--sr-card-pad) + 6px)
max(var(--sr-section-x), env(safe-area-inset-right, 0px));
border-radius: 18px;
} .sr-hero::before {
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/bg-hero-mob.png?v=1);
} .sr-footer::before,
#contacts .sr-contacts-layout::before {
background-image: url(//skyrabbit.kz/wp-content/themes/skyrabbit/assets/bg-footer-mob.png?v=2);
background-position: center bottom;
}
.sr-footer::before {
background-size: min(100%, 520px) auto;
}
#contacts .sr-contacts-layout::before {
background-size: 100% auto;
} #top.sr-hero {
padding-top: calc(
var(--sr-mobile-header-h, 64px) + env(safe-area-inset-top, 0px) + var(--sr-inner-hero-pad-y)
);
} body.sr-flush-hero-under-nav #top.sr-hero,
body.page-id-233 #top.sr-hero,
body.page-id-234 #top.sr-hero {
padding-top: calc(var(--sr-mobile-header-h, 64px) + env(safe-area-inset-top, 0px));
}
.sr-about-combo {
margin-top: 56px;
}
.sr-about-combo::before {
top: -50px;
height: 56px;
}
.sr-about-combo.sr-about-combo--pro::before {
top: 0;
height: auto;
inset: 0;
}
.sr-hero-left {
padding-right: 0;
border-right: 0;
border-bottom: 0;
padding-bottom: var(--sr-stack-gap);
gap: var(--sr-inline-gap);
} .sr-hero-left .sr-hero-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto;
gap: 10px;
}
.sr-hero-left .sr-metric:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.sr-hero-left .sr-metric:nth-child(3) {
grid-column: 2;
grid-row: 1;
}
.sr-hero-left .sr-metric:nth-child(2) {
grid-column: 1 / -1;
grid-row: 2;
justify-self: stretch;
width: 100%;
max-width: 100%;
}
.sr-hero-points {
gap: var(--sr-inline-gap);
}
.sr-hero--static-right-image .sr-hero-right {
display: none;
}
.sr-hero--static-right-image .sr-hero-mobile-image-wrap {
display: block;
width: 100%;
margin: 0;
}
.sr-hero--static-right-image .sr-hero-card__landing-image--mobile {
display: block;
width: min(100%, 520px);
margin: 0 auto;
height: auto;
}
.sr-features-clean-pro__title-row {
flex-direction: column;
align-items: flex-start;
gap: var(--sr-inline-gap);
margin-bottom: max(var(--sr-inline-gap), 12px);
}
.sr-features-pack__title-row {
flex-direction: column;
align-items: stretch;
gap: var(--sr-inline-gap);
margin-bottom: max(var(--sr-inline-gap), 12px);
} .sr-features-clean-pro__title-main {
flex: 0 1 auto;
}
.sr-features-clean-pro__lead {
flex: 0 1 auto;
text-align: left;
max-width: min(60ch, 100%);
}
.sr-features-pack__lead {
text-align: left;
max-width: min(60ch, 100%);
}
.sr-features-clean-pro .sr-section-title::after {
margin-top: 6px;
}
.sr-features-pack .sr-section-title::after {
margin-top: 6px;
}
.sr-features-clean-pro__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--sr-stack-gap);
}
.sr-features-clean-pro__card {
padding: var(--sr-card-pad) var(--sr-card-pad) calc(var(--sr-card-pad) + 2px);
}
.sr-features-pack .sr-guarantee-card__inner {
padding: var(--sr-card-pad) var(--sr-card-pad) calc(var(--sr-card-pad) + 4px);
} html[lang^="kk"] body.home .sr-hero-left .sr-nav-cta,
html[lang^="kk"] body.sr-page-about .sr-hero-left .sr-nav-cta,
html[lang^="kk"] body.sr-landing-service-page .sr-hero-left .sr-nav-cta {
flex-wrap: nowrap;
align-items: stretch;
gap: max(8px, var(--sr-inline-gap));
}
html[lang^="kk"] body.home .sr-hero-left .sr-btn-primary,
html[lang^="kk"] body.home .sr-hero-left .sr-btn-outline,
html[lang^="kk"] body.sr-page-about .sr-hero-left .sr-btn-primary,
html[lang^="kk"] body.sr-page-about .sr-hero-left .sr-btn-outline,
html[lang^="kk"] body.sr-landing-service-page .sr-hero-left .sr-btn-primary,
html[lang^="kk"] body.sr-landing-service-page .sr-hero-left .sr-btn-outline {
flex: 1 1 0;
min-width: 0;
padding-left: max(6px, 10px);
padding-right: max(6px, 10px);
font-size: clamp(10px, 2.8vw, 14px);
line-height: 1.25;
letter-spacing: -0.02em;
white-space: nowrap;
text-align: center;
}
html[lang^="kk"] body.home .sr-hero-left .sr-metric:nth-child(2),
html[lang^="kk"] body.sr-page-about .sr-hero-left .sr-metric:nth-child(2),
html[lang^="kk"] body.sr-landing-service-page .sr-hero-left .sr-metric:nth-child(2) {
justify-self: stretch;
width: 100%;
max-width: none;
} html[lang^="kk"] .sr-services-pricing__summary {
overflow-x: visible;
padding-left: max(12px, var(--sr-section-x));
padding-right: max(12px, var(--sr-section-x));
}
html[lang^="kk"] .sr-services-pricing__summary-main {
overflow-wrap: anywhere;
word-break: break-word;
}
html[lang^="kk"] .sr-services-pricing__summary-actions {
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 10px;
width: 100%;
min-width: 0;
}
html[lang^="kk"] .sr-services-pricing__pay-link,
html[lang^="kk"] .sr-services-pricing__cta,
html[lang^="kk"] .sr-services-pricing__cta-secondary {
white-space: normal;
text-align: center;
max-width: 100%;
width: 100%;
box-sizing: border-box;
} html[lang^="kk"] .sr-services-pricing__summary-days {
font-size: 0.9em;
} html[lang^="kk"] .sr-price-tier__meta {
grid-template-columns: minmax(0, 6.5fr) minmax(0, 3.5fr);
}
}
@media (max-width: 720px) {
:root {
--sr-section-y: 44px;
--sr-section-x: 16px;
--sr-section-gap: 36px;
--sr-stack-gap: 18px;
--sr-card-pad: 15px;
--sr-inline-gap: 12px;
}
.sr-hero {
border-radius: 16px;
}
.sr-about-combo {
margin-top: 46px;
}
.sr-about-combo::before {
top: -42px;
height: 48px;
}
.sr-about-combo.sr-about-combo--pro::before {
top: 0;
height: auto;
inset: 0;
}
.sr-mainbar-right,
.sr-mainbar-middle {
width: 100%;
justify-content: space-between;
}
.sr-about-team-head {
display: grid;
gap: 8px;
align-items: start;
}
.sr-about-team-title {
font-size: 26px;
}
.sr-about-summary-title {
font-size: 22px;
}
.sr-about-tags--inline {
grid-template-columns: minmax(0, 1fr);
}
.sr-hero-left .sr-nav-cta {
justify-content: center;
}
.sr-hero-left .sr-btn-primary,
.sr-hero-left .sr-btn-outline {
min-width: 0;
}
.sr-hero-slider-track {
min-height: 340px;
}
.sr-hero-slide-title {
font-size: 20px;
}
} .sr-main--page {
flex: 1 1 auto;
width: 100%;
} .sr-main--page .sr-page-entry-content {
max-width: var(--sr-container);
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--sr-section-x), env(safe-area-inset-right, 0px));
box-sizing: border-box;
} body.privacy-policy .sr-main--page .sr-page-entry-content,
body.sr-privacy-policy-page .sr-main--page .sr-page-entry-content {
position: relative;
z-index: 2;
padding-top: calc(var(--sr-torn-edge-h) + clamp(16px, 2.8vw, 28px));
padding-bottom: calc(var(--sr-torn-edge-h) + clamp(20px, 4vw, 40px));
} body.privacy-policy main.sr-main + #contacts.sr-section,
body.sr-privacy-policy-page main.sr-main + #contacts.sr-section {
margin-top: calc(var(--sr-section-gap) + var(--sr-torn-edge-h)) !important;
}
.sr-page-article {
margin: 0;
} .sr-blog-listing {
padding-top: clamp(18px, 3.5vw, 34px);
margin-left: auto;
margin-right: auto;
}
.sr-blog-grid--archive {
align-items: stretch;
}
.sr-blog-grid--archive .sr-blog-card {
height: 100%;
}
.sr-blog-listing .navigation.pagination {
margin-top: clamp(18px, 3vw, 28px);
display: flex;
justify-content: center;
}
.sr-blog-listing .nav-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sr-blog-listing .nav-links .page-numbers {
min-width: 38px;
height: 38px;
padding: 0 10px;
border-radius: 10px;
border: 1px solid var(--sr-border);
background: #fff;
color: var(--sr-text);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 600;
}
.sr-blog-listing .nav-links .page-numbers.current {
background: var(--sr-accent-primary);
border-color: var(--sr-accent-primary);
color: #fff;
}
.sr-blog-listing .nav-links .page-numbers:hover {
border-color: var(--sr-accent-primary);
} body.single-post {
background-color: #fff;
background-image: none;
}  body.single-post .sr-main--page > article {
margin-top: 50px;
margin-bottom: 0;
position: relative;
z-index: 2;
} body.single-post main.sr-main + #contacts.sr-section,
body.blog main.sr-main + #contacts.sr-section {
margin-top: 50px !important;
}
body.single-post .sr-main--page > article.sr-post-entry-wrap.sr-container {
max-width: min(var(--sr-post-prose-max), var(--sr-container));
width: 100%;
margin-left: auto;
margin-right: auto;
left: auto;
right: auto;
transform: none;
padding-left: max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--sr-section-x), env(safe-area-inset-right, 0px));
box-sizing: border-box;
padding-top: clamp(20px, 3.5vw, 40px);
padding-bottom: clamp(8px, 1.5vw, 16px);
}
body.single-post .sr-main--page > article .sr-page-entry-content {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
body.single-post .sr-post-entry {
background: var(--sr-surface-soft);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
padding: clamp(20px, 3.5vw, 36px) clamp(18px, 3vw, 28px);
box-sizing: border-box;
}
body.single-post .sr-single-post-head {
margin-bottom: clamp(14px, 2.5vw, 24px);
padding-bottom: 12px;
border-bottom: 1px solid var(--sr-border);
}
body.single-post .sr-single-post-title {
margin: 0;
font-size: clamp(1.45rem, 3.1vw, 2rem);
line-height: 1.2;
color: var(--sr-text);
}
body.single-post .sr-single-post-meta {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--sr-text-muted);
font-size: 0.92rem;
}
body.single-post .sr-page-entry-content {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.72;
color: var(--sr-text);
padding-bottom: clamp(28px, 4vw, 48px);
} body.single-post .sr-page-entry-content .alignfull,
body.single-post .sr-page-entry-content .alignwide,
body.single-post .sr-page-entry-content .wp-block-group.alignfull,
body.single-post .sr-page-entry-content .wp-block-cover.alignfull {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
body.single-post .sr-page-entry-content > *:first-child {
margin-top: 0;
}
body.single-post .sr-page-entry-content > *:last-child {
margin-bottom: 0;
}
body.single-post .sr-page-entry-content h2,
body.single-post .sr-page-entry-content h3,
body.single-post .sr-page-entry-content h4 {
margin: 1.35em 0 0.55em;
line-height: 1.25;
font-weight: 700;
color: var(--sr-text);
}
body.single-post .sr-page-entry-content h2 {
font-size: clamp(1.35rem, 2.8vw, 1.6rem);
}
body.single-post .sr-page-entry-content h3 {
font-size: clamp(1.15rem, 2.2vw, 1.28rem);
}
body.single-post .sr-page-entry-content h4 {
font-size: 1.05rem;
}
body.single-post .sr-page-entry-content p {
margin: 0 0 1.1em;
}
body.single-post .sr-page-entry-content ul,
body.single-post .sr-page-entry-content ol {
margin: 0 0 1.1em;
padding-left: 0;
padding-inline-start: 1.45em;
}
body.single-post .sr-page-entry-content ul {
list-style-type: disc;
}
body.single-post .sr-page-entry-content ol {
list-style-type: decimal;
}
body.single-post .sr-page-entry-content li {
margin: 0.48em 0;
padding-left: 0.2em;
}
body.single-post .sr-page-entry-content li::marker {
color: #2563eb;
font-weight: 600;
}
body.single-post .sr-page-entry-content ul ul,
body.single-post .sr-page-entry-content ol ol,
body.single-post .sr-page-entry-content ul ol,
body.single-post .sr-page-entry-content ol ul {
margin-top: 0.4em;
margin-bottom: 0.4em;
}
body.single-post .sr-page-entry-content .wp-block-table,
body.single-post .sr-page-entry-content figure.wp-block-table {
overflow-x: auto;
margin: 1.25em 0;
-webkit-overflow-scrolling: touch;
border-radius: var(--sr-radius-md);
border: 1px solid var(--sr-border);
background: #fff;
box-shadow: var(--sr-shadow-sm);
}
body.single-post .sr-page-entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.94em;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-sm);
overflow: hidden;
}
body.single-post .sr-page-entry-content th,
body.single-post .sr-page-entry-content td {
border: 1px solid var(--sr-border);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
body.single-post .sr-page-entry-content thead th {
background: var(--sr-surface-soft);
font-weight: 650;
color: var(--sr-text);
border-color: var(--sr-border-strong);
}
body.single-post .sr-page-entry-content tbody tr:nth-child(even) td {
background: rgba(248, 250, 252, 0.85);
}
body.single-post .sr-page-entry-content tbody tr:hover td {
background: rgba(37, 99, 235, 0.06);
}
body.single-post .sr-page-entry-content th,
body.single-post .sr-page-entry-content td {
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 900px) {
body.single-post,
body.single-post .sr-main--page,
body.single-post .sr-post-entry {
overflow-x: hidden;
}
body.single-post .sr-page-entry-content .wp-block-table,
body.single-post .sr-page-entry-content figure.wp-block-table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.single-post .sr-page-entry-content table {
display: table;
width: 100%;
max-width: 100%;
table-layout: fixed;
}
body.single-post .sr-page-entry-content th,
body.single-post .sr-page-entry-content td {
padding: 8px 10px;
font-size: 0.92em;
}
}
body.single-post .sr-page-entry-content strong,
body.single-post .sr-page-entry-content b {
font-weight: 700;
color: var(--sr-text);
}
body.single-post .sr-page-entry-content em,
body.single-post .sr-page-entry-content i {
font-style: italic;
}
body.single-post .sr-page-entry-content mark {
background: linear-gradient(
180deg,
rgba(59, 130, 246, 0.22),
rgba(245, 158, 11, 0.18)
);
color: var(--sr-text);
padding: 0.06em 0.28em;
border-radius: 4px;
box-decoration-break: clone;
}
body.single-post .sr-page-entry-content blockquote,
body.single-post .sr-page-entry-content .wp-block-quote {
margin: 1.25em 0;
padding: 14px 18px 14px 20px;
border-left: 4px solid var(--sr-accent-primary);
background: var(--sr-surface-soft);
border-radius: 0 var(--sr-radius-sm) var(--sr-radius-sm) 0;
color: var(--sr-text-muted);
box-shadow: 0 1px 0 rgba(59, 130, 246, 0.08);
} body.single-post .sr-page-entry-content .sr-attention,
body.single-post .sr-page-entry-content .attention,
body.single-post .sr-page-entry-content .note,
body.single-post .sr-page-entry-content .tip,
body.single-post .sr-page-entry-content .warning,
body.single-post .sr-page-entry-content .important {
margin: 1.25em 0;
padding: 14px 16px;
border-radius: var(--sr-radius-sm);
border: 1px solid rgba(37, 99, 235, 0.22);
border-left: 4px solid #2563eb;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.72));
color: #1f2937;
}
body.single-post .sr-page-entry-content .warning {
border-color: rgba(245, 158, 11, 0.3);
border-left-color: #f59e0b;
background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.72));
}
body.single-post .sr-page-entry-content .important {
border-color: rgba(220, 38, 38, 0.28);
border-left-color: #dc2626;
background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.72));
} body.single-post .sr-page-entry-content blockquote,
body.single-post .sr-page-entry-content .wp-block-quote,
body.single-post .sr-page-entry-content .sr-attention,
body.single-post .sr-page-entry-content .attention,
body.single-post .sr-page-entry-content .note,
body.single-post .sr-page-entry-content .tip,
body.single-post .sr-page-entry-content .warning,
body.single-post .sr-page-entry-content .important {
margin-left: 0;
margin-right: 0;
}
body.single-post .sr-page-entry-content .sr-attention > *:last-child,
body.single-post .sr-page-entry-content .attention > *:last-child,
body.single-post .sr-page-entry-content .note > *:last-child,
body.single-post .sr-page-entry-content .tip > *:last-child,
body.single-post .sr-page-entry-content .warning > *:last-child,
body.single-post .sr-page-entry-content .important > *:last-child {
margin-bottom: 0;
}
body.single-post .sr-page-entry-content blockquote p:last-child,
body.single-post .sr-page-entry-content .wp-block-quote p:last-child {
margin-bottom: 0;
}
body.single-post .sr-page-entry-content code,
body.single-post .sr-page-entry-content kbd {
font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
font-size: 0.88em;
background: var(--sr-surface-soft);
border: 1px solid var(--sr-border);
padding: 0.12em 0.42em;
border-radius: 6px;
color: #1e3a5f;
}
body.single-post .sr-page-entry-content pre,
body.single-post .sr-page-entry-content .wp-block-code {
margin: 1.15em 0;
padding: 14px 16px;
background: #f1f5f9;
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
overflow-x: auto;
font-size: 0.88em;
line-height: 1.55;
}
body.single-post .sr-page-entry-content pre code {
background: none;
border: 0;
padding: 0;
font-size: inherit;
color: var(--sr-text);
}
body.single-post .sr-page-entry-content a {
color: var(--sr-accent-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
body.single-post .sr-page-entry-content a:hover {
color: var(--sr-accent-primary-hover);
} body.single-post .sr-page-entry-content .sr-er {
margin: 1.75em 0;
}
body.single-post .sr-page-entry-content .sr-er-block {
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
background: var(--sr-surface-soft);
padding: clamp(16px, 3vw, 22px) clamp(16px, 3vw, 24px);
box-shadow: 0 1px 0 rgba(59, 130, 246, 0.06);
}
body.single-post .sr-page-entry-content .sr-er-block__title {
margin: 0 0 14px;
font-size: clamp(1rem, 2vw, 1.1rem);
font-weight: 700;
color: var(--sr-text);
display: flex;
align-items: center;
gap: 10px;
}
body.single-post .sr-page-entry-content .sr-er-block__title::before {
content: "";
width: 4px;
height: 1.15em;
border-radius: 2px;
background: linear-gradient(
180deg,
var(--sr-accent-secondary),
var(--sr-accent-primary)
);
flex-shrink: 0;
} body.single-post .sr-page-entry-content .sr-er-expert__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
margin-bottom: 12px;
font-size: 0.92em;
}
body.single-post .sr-page-entry-content .sr-er-expert__name {
font-weight: 700;
color: var(--sr-text);
}
body.single-post .sr-page-entry-content .sr-er-expert__role {
color: var(--sr-text-muted);
}
body.single-post .sr-page-entry-content .sr-er-expert__quote {
margin: 0;
padding: 14px 16px;
border-radius: var(--sr-radius-sm);
background: #fff;
border-left: 4px solid var(--sr-accent-primary);
color: var(--sr-text);
line-height: 1.65;
font-size: 0.98em;
} body.single-post .sr-page-entry-content .sr-er-rating__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
body.single-post .sr-page-entry-content .sr-er-rating__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(72px, 92px);
gap: 10px 14px;
align-items: center;
}
@media (min-width: 480px) {
body.single-post .sr-page-entry-content .sr-er-rating__row {
grid-template-columns: minmax(140px, 220px) 1fr minmax(40px, 48px);
}
}
body.single-post .sr-page-entry-content .sr-er-rating__label {
font-size: 0.92em;
color: var(--sr-text);
font-weight: 600;
}
body.single-post .sr-page-entry-content .sr-er-rating__track {
grid-column: 1 / -1;
height: 9px;
border-radius: 99px;
background: rgba(226, 232, 240, 0.95);
overflow: hidden;
}
@media (min-width: 480px) {
body.single-post .sr-page-entry-content .sr-er-rating__track {
grid-column: auto;
}
}
body.single-post .sr-page-entry-content .sr-er-rating__fill {
height: 100%;
width: var(--sr-er-w, 50%);
border-radius: inherit;
background: linear-gradient(
90deg,
var(--sr-accent-secondary),
var(--sr-accent-primary)
);
}
body.single-post .sr-page-entry-content .sr-er-rating__score {
font-size: 0.88em;
font-weight: 700;
color: var(--sr-accent-primary);
text-align: right;
}
@media (min-width: 480px) {
body.single-post .sr-page-entry-content .sr-er-rating__score {
text-align: center;
}
}
body.single-post .sr-page-entry-content .sr-er-rating__summary {
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px dashed var(--sr-border);
font-size: 0.94em;
color: var(--sr-text-muted);
line-height: 1.6;
} body.single-post .sr-page-entry-content .sr-er-split {
display: grid;
gap: 16px;
}
@media (min-width: 640px) {
body.single-post .sr-page-entry-content .sr-er-split {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
body.single-post .sr-page-entry-content .sr-er-split__col {
background: #fff;
border-radius: var(--sr-radius-sm);
padding: 14px 16px;
border: 1px solid var(--sr-border);
}
body.single-post .sr-page-entry-content .sr-er-split__col--pro {
border-top: 3px solid var(--sr-success);
}
body.single-post .sr-page-entry-content .sr-er-split__col--con {
border-top: 3px solid #f97316;
}
body.single-post .sr-page-entry-content .sr-er-split__head {
margin: 0 0 10px;
font-size: 0.95rem;
font-weight: 700;
}
body.single-post .sr-page-entry-content .sr-er-split__col--pro .sr-er-split__head {
color: var(--sr-success);
}
body.single-post .sr-page-entry-content .sr-er-split__col--con .sr-er-split__head {
color: #c2410c;
}
body.single-post .sr-page-entry-content .sr-er-split ul {
margin: 0;
padding-left: 1.2em;
font-size: 0.93em;
line-height: 1.55;
color: var(--sr-text);
}
body.single-post .sr-page-entry-content .sr-er-split li {
margin: 0.4em 0;
} body.single-post .sr-page-entry-content .sr-er-faq__item {
border-bottom: 1px solid var(--sr-border);
padding: 12px 0;
}
body.single-post .sr-page-entry-content .sr-er-faq__item:first-child {
padding-top: 0;
}
body.single-post .sr-page-entry-content .sr-er-faq__item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
body.single-post .sr-page-entry-content .sr-er-faq__q {
margin: 0 0 8px;
font-size: 0.95rem;
font-weight: 650;
color: var(--sr-text);
}
body.single-post .sr-page-entry-content .sr-er-faq__a {
margin: 0;
font-size: 0.92em;
line-height: 1.62;
color: var(--sr-text-muted);
} .sr-main--kontakty .sr-contact-page-intro {
margin-top: 0;
padding-top: clamp(8px, 2vw, 16px);
padding-bottom: clamp(20px, 4vw, 40px);
}
.sr-contact-page-intro .sr-container {
max-width: var(--sr-container);
margin-left: auto;
margin-right: auto;
padding-left: max(var(--sr-section-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--sr-section-x), env(safe-area-inset-right, 0px));
}
.sr-contact-page-intro__intro {
text-align: center;
margin-bottom: clamp(20px, 3vw, 28px);
}
.sr-contact-page-intro__intro .sr-contact-page-intro__heading {
margin-left: auto;
margin-right: auto;
}
.sr-contact-page-intro__intro .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-contact-page-intro__intro .sr-contact-page-intro__lead {
margin-left: auto;
margin-right: auto;
}
.sr-contact-page-intro__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2.5vw, 24px);
align-items: stretch;
}
.sr-contact-page-intro__lead {
margin: 0 0 18px;
max-width: 42rem;
font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
line-height: 1.55;
color: var(--sr-text-muted);
} .sr-legal-requisites__brand {
margin: 0 0 14px;
font-size: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
line-height: 1.55;
color: var(--sr-text-muted);
}
.sr-legal-requisites__list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sr-legal-requisites__row {
margin: 0;
display: grid;
grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr);
gap: 8px 14px;
align-items: baseline;
font-size: clamp(0.88rem, 0.85rem + 0.15vw, 0.98rem);
line-height: 1.45;
}
.sr-legal-requisites__term {
margin: 0;
font-weight: 600;
color: var(--sr-text-muted);
}
.sr-legal-requisites__desc {
margin: 0;
color: var(--sr-text);
}
.sr-legal-requisites__desc a {
text-decoration: underline;
text-underline-offset: 2px;
}
.sr-legal-requisites__desc a:hover,
.sr-legal-requisites__desc a:focus-visible {
color: var(--sr-accent-primary);
}
.sr-legal-requisites__mono {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
word-break: break-all;
}
.sr-footer-contacts__requisites-short {
margin: 0 0 12px;
font-size: clamp(0.88rem, 0.85rem + 0.15vw, 0.98rem);
line-height: 1.5;
color: var(--sr-text-muted);
}
.sr-footer-contacts__requisites-short:last-child {
margin-bottom: 0;
}
.sr-footer-contacts__direct {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--sr-border);
} .sr-contacts-list.sr-footer-contacts__direct {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 20px;
}
.sr-contacts-list.sr-footer-contacts__direct .sr-contacts-list__item {
display: inline-flex;
width: auto;
max-width: 100%;
grid-template-columns: unset;
gap: 8px;
}
.sr-contacts-list.sr-footer-contacts__direct .sr-contacts-list__icon {
flex-shrink: 0;
} #contacts .sr-contacts-info > .sr-footer-contacts__card .sr-card-label {
text-align: center;
}
#contacts .sr-contacts-info > .sr-footer-contacts__card > .sr-card-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#contacts .sr-footer-contacts__requisites-short {
width: 100%;
max-width: 36rem;
}
#contacts .sr-footer-contacts__direct {
width: 100%;
}
@media (max-width: 720px) {
.sr-contacts-list.sr-footer-contacts__direct {
flex-wrap: nowrap;
justify-content: center;
gap: 10px 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
scrollbar-width: thin;
}
.sr-contacts-list.sr-footer-contacts__direct .sr-contacts-list__item {
font-size: clamp(0.78rem, 2.8vw, 0.9rem);
}
}
@media (max-width: 520px) {
.sr-legal-requisites__row {
grid-template-columns: 1fr;
gap: 2px;
}
.sr-legal-requisites__term {
margin-top: 6px;
}
.sr-legal-requisites__row:first-of-type .sr-legal-requisites__term {
margin-top: 0;
}
}
.sr-contact-page-intro__heading {
margin-bottom: 10px;
}
.sr-contact-page-intro__contacts-note {
margin: 0 0 12px;
line-height: 1.55;
color: var(--sr-text-muted);
}
.sr-contact-page-intro__contacts-lines {
margin-bottom: 6px;
}
.sr-contact-page-intro__card {
height: 100%;
}
.sr-contact-page-intro__messengers {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 14px;
}
.sr-contact-page-intro__card--contacts .sr-contact-page-intro__cta {
display: flex;
justify-content: center;
}
.sr-contact-page-intro__msg {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
border: 1px solid var(--sr-border);
background: var(--sr-surface);
color: var(--sr-text);
transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.sr-contact-page-intro__msg--icon {
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
justify-content: center;
color: var(--sr-text);
}
.sr-contact-page-intro__msg--icon svg {
flex-shrink: 0;
}
.sr-contact-page-intro__msg--wa:hover,
.sr-contact-page-intro__msg--wa:focus-visible {
border-color: color-mix(in srgb, #25d366 45%, var(--sr-border));
color: #128c7e;
box-shadow: 0 4px 16px color-mix(in srgb, #25d366 22%, transparent);
}
.sr-contact-page-intro__msg--tg:hover,
.sr-contact-page-intro__msg--tg:focus-visible {
border-color: color-mix(in srgb, #229ed9 45%, var(--sr-border));
color: #229ed9;
box-shadow: 0 4px 16px color-mix(in srgb, #229ed9 22%, transparent);
}
.sr-contact-page-intro__msg:not(.sr-contact-page-intro__msg--icon):hover,
.sr-contact-page-intro__msg:not(.sr-contact-page-intro__msg--icon):focus-visible {
border-color: color-mix(in srgb, var(--sr-accent-primary) 35%, var(--sr-border));
box-shadow: 0 4px 14px color-mix(in srgb, var(--sr-accent-primary) 12%, transparent);
color: var(--sr-accent-primary);
}
.sr-contact-page-intro__cta {
margin-top: 20px;
}
.sr-contact-page-intro__cta .sr-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.sr-contact-page-intro__map {
margin-top: clamp(20px, 3vw, 28px);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--sr-border);
background: color-mix(in srgb, var(--sr-surface) 92%, var(--sr-border));
}
.sr-contact-page-intro__map iframe {
display: block;
width: 100%;
min-height: 280px;
border: 0;
vertical-align: middle;
}
@media (max-width: 720px) {
.sr-contact-page-intro__grid {
grid-template-columns: 1fr;
}
.sr-contact-page-intro__card--contacts {
order: -1;
}
}
.sr-page-entry-content > *:first-child {
margin-top: 0;
}
.sr-page-links {
margin: 24px auto;
max-width: min(960px, 100%);
padding: 0 var(--sr-section-x, 20px);
font-size: 0.9rem;
}
.sr-page-links__label {
margin-right: 8px;
color: var(--sr-text-muted);
}
.sr-client-logos {
--sr-client-logo-gap: 16px;
}
.sr-client-logos__head {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 22px;
}
.sr-client-logos__head > div {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.sr-client-logos__head .sr-section-title::after {
margin-left: auto;
margin-right: auto;
}
.sr-client-logos__viewport {
position: relative;
overflow: hidden;
}
.sr-client-logos__track {
display: flex;
gap: var(--sr-client-logo-gap);
align-items: center;
will-change: transform;
}
.sr-client-logos__item {
flex: 0 0 calc((100% - (var(--sr-client-logo-gap) * 3)) / 4);
min-width: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.sr-client-logos__img {
display: block;
max-width: 100%;
max-height: calc(52px * 1.2);
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 1024px) {
.sr-client-logos__item {
flex-basis: calc((100% - (var(--sr-client-logo-gap) * 2)) / 3);
}
}
@media (max-width: 700px) {
.sr-client-logos__item {
flex-basis: calc((100% - var(--sr-client-logo-gap)) / 2);
}
} @media (max-width: 900px) {
#client-logos + #testimonials.sr-section {
margin-top: var(--sr-section-gap);
}
#client-logos.sr-section {
display: flex;
flex-direction: column;
gap: 22px;
padding-top: calc((var(--sr-section-y) + var(--sr-torn-edge-h)) * 1.2);
padding-bottom: 0;
box-sizing: border-box;
}
#client-logos .sr-section-title-row.sr-client-logos__head {
margin-bottom: 0;
}
#client-logos .sr-client-logos__viewport {
margin-top: 0;
margin-bottom: 0;
}
} @media (max-width: 900px) {
.sr-calc .sr-calc-intro .sr-section-subtitle,
.sr-calc .sr-calc-step-subtitle,
.sr-calc .sr-calc-card-text {
display: none !important;
}
.sr-calc .sr-calc-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sr-calc .sr-calc-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 112px;
padding: 16px 12px;
border: 2px solid rgba(59, 130, 246, 0.45);
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.sr-calc .sr-calc-card-header,
.sr-calc .sr-calc-card-title {
width: 100%;
text-align: center;
justify-content: center;
}
.sr-calc .sr-calc-nav {
display: flex;
flex-wrap: nowrap;
gap: 10px;
}
.sr-calc .sr-calc-nav .sr-btn-outline,
.sr-calc .sr-calc-nav .sr-btn-primary {
flex: 1 1 0;
min-width: 0;
width: auto;
justify-content: center;
}
.sr-calc .sr-calc-total-value,
.sr-calc .sr-calc-total-value [data-calc-range-out] {
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
.sr-calc .sr-calc-result-card .sr-card-label,
.sr-calc .sr-calc-privacy {
text-align: center;
margin-left: auto;
margin-right: auto;
}
} .wp-block-image,
.wp-block-image figure {
max-width: 100% !important;
width: 100% !important;
overflow: hidden;
}
.wp-block-image img,
.entry-content img,
.post-content img,
article .content img {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
display: block;
border-radius: 8px;
} .sr-post-footer {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
.sr-author-box {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.5rem 1.75rem;
margin: 2.5rem 0 0;
background: var(--sr-surface-soft);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
}
.sr-author-box__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
border: 2px solid var(--sr-border);
}
.sr-author-box__body { min-width: 0; }
.sr-author-box__label {
margin: 0 0 .2em;
font-size: .72em;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sr-text-muted);
font-weight: 600;
}
.sr-author-box__name {
margin: 0 0 .45em;
font-size: 1.05em;
font-weight: 700;
color: var(--sr-text);
}
.sr-author-box__bio {
margin: 0 0 .85em;
color: var(--sr-text-muted);
line-height: 1.65;
font-size: .92em;
}
.sr-author-box__social {
display: flex;
gap: .6em;
flex-wrap: wrap;
}
.sr-author-box__social-btn {
display: inline-flex;
align-items: center;
gap: .35em;
padding: .38em .85em;
border-radius: 6px;
text-decoration: none;
font-size: .82em;
font-weight: 600;
color: #fff;
transition: opacity .18s;
}
.sr-author-box__social-btn:hover { opacity: .88; color: #fff; }
.sr-author-box__social-btn--fb  { background: #1877f2; }
.sr-author-box__social-btn--wa  { background: #25d366; }
@media (max-width: 480px) {
.sr-author-box {
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.25rem;
}
.sr-author-box__social { justify-content: center; }
} .sr-related-posts {
margin: 2.5rem 0 0;
padding: 2.5rem 0 3rem;
border-top: 1px solid var(--sr-border);
}
.sr-related-posts__title {
font-size: clamp(1.15rem, 2vw, 1.45rem);
font-weight: 700;
color: var(--sr-text);
margin: 0 0 1.5rem;
}
.sr-related-card { height: auto; }
.sr-related-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
background: var(--sr-surface);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.sr-related-card__link:hover {
box-shadow: var(--sr-shadow-md);
transform: translateY(-3px);
color: inherit;
}
.sr-related-card__thumb {
aspect-ratio: 16 / 9;
overflow: hidden;
flex-shrink: 0;
background: var(--sr-border);
}
.sr-related-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s;
border-radius: 0;
}
.sr-related-card__link:hover .sr-related-card__thumb img { transform: scale(1.04); }
.sr-related-card__thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sr-related-card__thumb-placeholder svg { width: 60%; height: 60%; }
.sr-related-card__body {
display: flex;
flex-direction: column;
gap: .4rem;
padding: 1rem 1.1rem 1.1rem;
flex: 1;
}
.sr-related-card__cat {
font-size: .7em;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sr-accent-primary);
}
.sr-related-card__heading {
font-size: .93rem;
font-weight: 600;
line-height: 1.4;
color: var(--sr-text);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sr-related-card__date {
font-size: .75em;
color: var(--sr-text-muted);
margin-top: auto;
}
.sr-related-swiper__pagination {
margin-top: 1.25rem;
position: static !important;
display: flex;
justify-content: center;
}
.sr-related-swiper__pagination .swiper-pagination-bullet {
background: var(--sr-border-strong);
opacity: 1;
}
.sr-related-swiper__pagination .swiper-pagination-bullet-active {
background: var(--sr-accent-primary);
}
@media (min-width: 1024px) {
.sr-related-swiper__pagination { display: none; }
} .sr-single-post-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.75rem;
}
.sr-single-post-thumb {
flex-shrink: 0;
width: clamp(140px, 28%, 320px);
border-radius: var(--sr-radius-md);
overflow: hidden;
box-shadow: var(--sr-shadow-sm);
}
.sr-single-post-thumb__img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0;
}
@media (max-width: 600px) {
.sr-single-post-head {
flex-direction: column-reverse;
gap: .75rem;
}
.sr-single-post-thumb {
width: 100%;
}
} .sr-share {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.25rem 1.75rem;
margin: 0 0 1.5rem;
background: var(--sr-surface-soft);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius-md);
}
.sr-share__label {
font-size: .82em;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--sr-text-muted);
white-space: nowrap;
}
.sr-share__buttons {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.sr-share__btn {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .42em .9em;
border-radius: 8px;
font-size: .82em;
font-weight: 600;
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
transition: opacity .18s, transform .15s;
line-height: 1;
}
.sr-share__btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.sr-share__btn:hover {
opacity: .85;
transform: translateY(-1px);
color: #fff;
}
.sr-share__btn--wa   { background: #25d366; }
.sr-share__btn--tg   { background: #2aabee; }
.sr-share__btn--vk   { background: #0077ff; }
.sr-share__btn--fb   { background: #1877f2; }
.sr-share__btn--copy {
background: var(--sr-surface);
color: var(--sr-text);
border: 1px solid var(--sr-border);
}
.sr-share__btn--copy svg { stroke: var(--sr-text-muted); }
.sr-share__btn--copy:hover { color: var(--sr-text); }
.sr-share__btn--copied {
background: var(--sr-success) !important;
color: #fff !important;
border-color: transparent !important;
}
@media (max-width: 480px) {
.sr-share {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}
.sr-share__btn span { display: none; }
.sr-share__btn {
padding: .55em .65em;
border-radius: 8px;
}
.sr-share__btn svg { width: 18px; height: 18px; }
} .sr-single-post-head__left {
display: flex;
flex-direction: column;
gap: .75rem;
flex: 1;
min-width: 0;
}
.sr-share--compact {
background: transparent;
border: none;
padding: 0;
margin: 0;
gap: .6rem;
}
.sr-share--compact .sr-share__label {
font-size: .75em;
}
.sr-share--compact .sr-share__btn {
padding: .32em .7em;
font-size: .78em;
}
.sr-share--compact .sr-share__btn svg {
width: 13px;
height: 13px;
} @media (max-width: 640px) { .sr-share {
flex-direction: column;
align-items: flex-start;
padding: 1rem 1.1rem;
gap: .65rem;
}
.sr-share__label {
font-size: .78em;
}
.sr-share__buttons {
display: flex;
gap: .5rem;
flex-wrap: nowrap;
} .sr-share__btn {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
justify-content: center;
font-size: 0; flex-shrink: 0;
}
.sr-share__btn svg {
width: 20px;
height: 20px;
} .sr-share__btn--copy {
background: var(--sr-surface);
border: 1.5px solid var(--sr-border);
}
.sr-share__btn--copy svg {
stroke: var(--sr-text-muted);
} .sr-share--compact {
background: transparent;
border: none;
padding: 0;
}
.sr-share--compact .sr-share__btn {
width: 36px;
height: 36px;
}
.sr-share--compact .sr-share__btn svg {
width: 16px;
height: 16px;
} .sr-author-box {
flex-direction: row;
align-items: center;
text-align: left;
padding: 1rem 1.1rem;
gap: .9rem;
margin-top: 1.75rem;
}
.sr-author-box__avatar {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.sr-author-box__label {
font-size: .68em;
}
.sr-author-box__name {
font-size: .97em;
margin-bottom: .25em;
}
.sr-author-box__bio {
font-size: .85em;
margin-bottom: .6em; display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sr-author-box__social {
gap: .4em;
justify-content: flex-start;
}
.sr-author-box__social-btn {
padding: .3em .65em;
font-size: .76em;
gap: .28em;
}
.sr-author-box__social-btn svg {
width: 12px;
height: 12px;
} .sr-related-posts {
padding: 1.75rem 0 2rem;
margin-top: 1.75rem;
}
.sr-related-posts__title {
font-size: 1.05rem;
margin-bottom: 1rem;
}
.sr-related-card__body {
padding: .75rem .85rem .85rem;
gap: .3rem;
}
.sr-related-card__heading {
font-size: .87rem;
-webkit-line-clamp: 2;
}
.sr-related-card__cat {
font-size: .65em;
}
.sr-related-card__date {
font-size: .7em;
}
.sr-related-swiper__pagination {
margin-top: 1rem;
}
}