/* Start:/local/templates/kladov/template_styles.css?1790606072121816*/
/* =========================================================
LOCAL WEB FONTS
Generated/self-hosted in /local/templates/kladov/fonts/
========================================================= */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src:
url("/local/templates/kladov/fonts/Manrope-Variable.woff2") format("woff2"),
url("/local/templates/kladov/fonts/Manrope-Variable.woff") format("woff"),
url("/local/templates/kladov/fonts/Manrope-Variable.ttf") format("truetype");
}
@font-face {
font-family: "Poiret One";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url("/local/templates/kladov/fonts/PoiretOne-Regular.woff2") format("woff2"),
url("/local/templates/kladov/fonts/PoiretOne-Regular.woff") format("woff"),
url("/local/templates/kladov/fonts/PoiretOne-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans TC Local";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url("/local/templates/kladov/fonts/NotoSansTC-Decorative.woff2") format("woff2"),
url("/local/templates/kladov/fonts/NotoSansTC-Decorative.woff") format("woff"),
url("/local/templates/kladov/fonts/NotoSansTC-Decorative.ttf") format("truetype");
/*
* The font is used only for the decorative Traditional Chinese text:
* 網絡 / 創意 / 人 / 成長
*/
unicode-range:
U+7DB2,
U+7D61,
U+5275,
U+610F,
U+4EBA,
U+6210,
U+9577;
}
@font-face {
font-family: "Noto Kufi Arabic";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src:
url("/local/templates/kladov/fonts/NotoKufiArabic-Variable.woff2") format("woff2"),
url("/local/templates/kladov/fonts/NotoKufiArabic-Variable.woff") format("woff"),
url("/local/templates/kladov/fonts/NotoKufiArabic-Variable.ttf") format("truetype");
}
/* =========================================================
Variables
========================================================= */
:root {
--bg-deep: #0D0F12;
--bg-main: #17181D;
--bg-card: #292C35;
--bg-soft: #41454F;
--bronze-dark: #A8632F;
--amber: #E09145;
--amber-hover: #F1AD68;
--champagne: #FCD9B8;
--text-main: #F0ECE7;
--text-secondary: #979BA2;
--text-dark: #17181D;
--border-dark: rgba(255, 255, 255, .10);
--border-gold: rgba(224, 145, 69, .65);
--font-display: "Poiret One", sans-serif;
--font-main: "Manrope", sans-serif;
--font-arabic: "Noto Kufi Arabic", sans-serif;
--content-width: 1040px;
}
/* =========================================================
Reset
========================================================= */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
html {
background: var(--bg-deep);
}
body {
position: relative;
font-family: var(--font-main);
color: var(--text-main);
background: var(--bg-deep);
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font-family: inherit;
}
/* =========================================================
Background
========================================================= */
.site-background {
position: fixed;
inset: 0;
z-index: 0;
width: 100%;
min-height: 100vh;
background:
url("/local/templates/kladov/img/bg-office.webp")
center center / cover no-repeat;
transform: none;
pointer-events: none;
}
.site-background-overlay {
position: fixed;
inset: 0;
z-index: 1;
min-height: 100vh;
background:
linear-gradient(
90deg,
rgba(13, 15, 18, .80) 0%,
rgba(13, 15, 18, .52) 31%,
rgba(13, 15, 18, .16) 62%,
rgba(13, 15, 18, .12) 100%
);
pointer-events: none;
}
/* =========================================================
Layout
========================================================= */
.site-shell {
position: relative;
z-index: 2;
min-height: 100vh;
}
.site-main {
min-height: calc(100vh - 180px);
}
/* =========================================================
Header
========================================================= */
.site-header {
position: relative;
z-index: 100;
padding: 28px 10% 20px;
}
.site-header__inner {
display: grid;
grid-template-columns:
minmax(220px, 1fr)
auto
minmax(220px, 1fr);
align-items: center;
max-width: 1180px;
margin: 0 auto;
padding-bottom: 24px;
border-bottom:
1px solid rgba(224, 145, 69, .18);
}
.site-logo {
justify-self: start;
width: 220px;
}
.site-logo img {
display: block;
width: 100%;
height: auto;
}
/* =========================================================
Navigation
========================================================= */
.main-nav {
display: flex;
align-items: center;
gap: 34px;
}
.main-nav a {
position: relative;
padding: 8px 0;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
transition: color .2s ease;
}
.main-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--amber);
transition: width .25s ease;
}
.main-nav a:hover {
color: var(--champagne);
}
.main-nav a:hover::after,
.main-nav a.is-active::after {
width: 100%;
}
/* =========================================================
Header actions
========================================================= */
.header-actions {
justify-self: end;
display: flex;
align-items: center;
gap: 28px;
}
.language-switcher {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
}
.language-switcher a {
color: var(--text-secondary);
}
.language-switcher a.is-active {
color: var(--champagne);
border-bottom:
1px solid var(--amber);
}
/* search */
.search-button {
position: relative;
width: 28px;
height: 28px;
}
.search-button::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
left: 2px;
top: 2px;
border: 2px solid var(--text-main);
border-radius: 50%;
}
.search-button::after {
content: "";
position: absolute;
width: 9px;
height: 2px;
background: var(--text-main);
transform:
rotate(45deg);
left: 16px;
top: 18px;
}
/* =========================================================
Mobile button
========================================================= */
.mobile-menu-button {
display: none;
width: 34px;
height: 28px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.mobile-menu-button span {
display: block;
width: 100%;
height: 1px;
margin: 7px 0;
background: var(--champagne);
}
/* =========================================================
Side Art-Deco decorations
========================================================= */
.side-decoration {
position: fixed;
z-index: 3;
top: 92px;
font-size: 11px;
line-height: 1.6;
letter-spacing: .15em;
color: rgba(252, 217, 184, .75);
}
.side-decoration--left {
left: 42px;
}
.side-decoration--right {
right: 42px;
text-align: center;
}
.side-decoration__line {
width: 1px;
height: 95px;
margin: 0 auto 16px;
background:
linear-gradient(
transparent,
var(--amber)
);
}
.side-decoration__accent {
width: 30px;
height: 1px;
margin-top: 14px;
background: var(--amber);
}
.side-decoration__hex {
width: 20px;
height: 20px;
margin: 0 auto 16px;
border: 1px solid var(--amber);
clip-path: polygon(
25% 6.7%,
75% 6.7%,
100% 50%,
75% 93.3%,
25% 93.3%,
0 50%
);
}
/* =========================================================
Geometric outline helpers
========================================================= */
/*
* Важно: обычный border + clip-path не рисует рамку по граням полигона.
* Поэтому контуры шестиугольников делаем через SVG-mask.
*/
.deco-hex-outline {
display: block;
width: 27px;
height: 27px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,6.7 75,6.7 100,50 75,93.3 25,93.3 0,50' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,6.7 75,6.7 100,50 75,93.3 25,93.3 0,50' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Ромб — тоже через mask, чтобы контур был чистым и одинаковым на любом фоне. */
.deco-diamond-outline {
display: block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,50 50,95 5,50' fill='none' stroke='black' stroke-width='6' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,50 50,95 5,50' fill='none' stroke='black' stroke-width='6' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* =========================================================
Typography
========================================================= */
.page-title,
.hero-title {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: .01em;
}
.page-title {
margin: 0;
font-size: clamp(38px, 4vw, 54px);
color: var(--text-dark);
}
.page-title--light {
color: var(--text-main);
}
/* =========================================================
Art Deco separator
========================================================= */
.deco-title-line {
width: 58px;
height: 1px;
margin: 15px 0 24px;
background:
linear-gradient(
90deg,
var(--amber),
var(--bronze-dark)
);
}
/* =========================================================
Inner page layout
========================================================= */
.inner-page {
width: min(
calc(100% - 80px),
var(--content-width)
);
margin: 20px auto 80px;
}
/* =========================================================
Glass panels
========================================================= */
.glass-panel {
position: relative;
padding: 34px 38px;
border:
1px solid rgba(224, 145, 69, .45);
box-shadow:
0 24px 60px rgba(0, 0, 0, .25);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.glass-panel--dark {
color: var(--text-main);
background:
linear-gradient(
135deg,
rgba(23, 24, 29, .86),
rgba(41, 44, 53, .66)
);
}
.glass-panel--light {
color: var(--text-dark);
background:
linear-gradient(
135deg,
rgba(255, 247, 236, .94),
rgba(252, 217, 184, .78)
);
}
/* =========================================================
Breadcrumbs
========================================================= */
.breadcrumbs {
display: flex;
gap: 10px;
margin-bottom: 28px;
font-size: 12px;
}
.glass-panel--light .breadcrumbs {
color: rgba(23, 24, 29, .65);
}
.glass-panel--dark .breadcrumbs {
color: rgba(240, 236, 231, .62);
}
/* =========================================================
Hexagonal arrow
========================================================= */
.hex-arrow {
position: relative;
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
flex: 0 0 40px;
color: var(--amber);
}
.hex-arrow::before {
content: "";
position: absolute;
inset: 2px;
border: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,6.7 75,6.7 100,50 75,93.3 25,93.3 0,50' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,6.7 75,6.7 100,50 75,93.3 25,93.3 0,50' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
clip-path: none;
}
.hex-arrow::after {
content: "→";
position: relative;
z-index: 2;
transition:
transform .2s ease;
}
a:hover .hex-arrow::after,
.hex-arrow:hover::after {
transform: translateX(3px);
}
/* =========================================================
Hero
========================================================= */
.home-hero {
min-height: calc(100vh - 112px);
display: flex;
align-items: center;
padding:
40px
max(14%, calc((100% - 1180px) / 2));
}
.home-hero__content {
max-width: 760px;
}
.home-hero__eyebrow {
margin-bottom: 30px;
font-size: 13px;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--champagne);
}
.hero-title {
margin: 0 0 46px;
font-size:
clamp(46px, 5.2vw, 78px);
line-height: 1.1;
text-shadow:
0 3px 24px rgba(0, 0, 0, .35);
}
.hero-more {
display: inline-flex;
align-items: center;
gap: 20px;
font-size: 20px;
}
.hero-more:hover {
color: var(--champagne);
}
/* =========================================================
Publications
========================================================= */
.publications-list {
margin-top: 20px;
}
.publication-card {
padding: 22px 0;
border-bottom:
1px solid rgba(224, 145, 69, .28);
}
.publication-card:last-child {
border-bottom: 0;
}
.publication-card__header {
display: flex;
align-items: center;
gap: 18px;
}
.publication-card__title {
margin: 0;
font-size: 20px;
font-weight: 400;
}
.publication-card__date {
margin-top: 6px;
color: var(--champagne);
font-size: 11px;
}
.publication-card__description {
max-width: 820px;
margin: 10px 0 0;
color: rgba(240, 236, 231, .75);
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
Clients
========================================================= */
.clients-intro {
max-width: 850px;
margin:
20px 0
34px;
line-height: 1.6;
color: rgba(23, 24, 29, .72);
}
.clients-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
}
.client-card {
position: relative;
min-height: 210px;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
border:
1px solid rgba(168, 99, 47, .40);
background:
rgba(255, 255, 255, .28);
transition:
transform .25s ease,
border-color .25s ease,
background .25s ease;
}
.client-card:hover {
transform: translateY(-4px);
border-color: var(--amber);
background:
rgba(255, 255, 255, .42);
}
.client-card img {
max-width: 75%;
max-height: 100px;
object-fit: contain;
}
.client-card .hex-arrow {
position: absolute;
right: 16px;
bottom: 16px;
color: var(--bronze-dark);
}
/* =========================================================
Footer
========================================================= */
.site-footer {
position: relative;
z-index: 5;
padding: 18px 10% 22px;
font-size: 10px;
color: rgba(240, 236, 231, .65);
}
.site-footer__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns:
1fr auto 1fr;
align-items: center;
gap: 30px;
}
.footer-center {
display: flex;
gap: 12px;
}
.social-link {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(252, 217, 184, .45);
clip-path: polygon(
25% 6.7%,
75% 6.7%,
100% 50%,
75% 93.3%,
25% 93.3%,
0 50%
);
transition:
background .2s ease,
color .2s ease;
}
.social-link:hover {
background: var(--amber);
color: var(--text-dark);
}
.footer-links {
justify-self: end;
display: flex;
gap: 24px;
}
/* =========================================================
HOME — exact viewport
========================================================= */
html,
body.page-home {
width: 100%;
height: 100%;
}
body.page-home {
overflow: hidden;
}
.page-home .site-shell {
display: grid;
grid-template-rows:
auto
minmax(0, 1fr)
auto;
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 0;
overflow: hidden;
}
.page-home .site-header {
position: relative;
z-index: 100;
flex: 0 0 auto;
}
.page-home .site-main {
min-height: 0;
height: 100%;
overflow: hidden;
}
.page-home .home-hero {
width: 100%;
height: 100%;
min-height: 0;
display: flex;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
}
.page-home .home-hero__content {
max-width: 720px;
}
.page-home .hero-title {
margin-bottom: 30px;
font-size:
clamp(48px, 4.4vw, 72px);
line-height: 1.08;
}
.page-home .site-footer {
flex: 0 0 auto;
}
.page-home .site-background {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background-image:
url("/local/templates/kladov/img/bg-office.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transform: none !important;
pointer-events: none;
}
.page-home .site-background-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
pointer-events: none;
}
/* =========================================================
LEFT BOTTOM HEXAGON DECORATION
========================================================= */
/*
* Геометрическая композиция в левом нижнем углу.
* Рисуется одним SVG-фоном, поэтому дополнительная HTML-разметка не нужна.
*/
body.page-home::before {
content: "";
position: fixed;
z-index: 3;
left: -38px;
bottom: -72px;
width: 255px;
height: 340px;
pointer-events: none;
opacity: .72;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 255 340' fill='none'%3E%3Cg stroke='%23E09145' stroke-width='1.15'%3E%3Cpolygon points='122,30 188,68 188,144 122,182 56,144 56,68'/%3E%3Cpolygon points='183,112 238,144 238,208 183,240 128,208 128,144'/%3E%3Cpolygon points='64,145 120,177 120,241 64,273 8,241 8,177'/%3E%3Cpolygon points='123,214 181,247 181,313 123,346 65,313 65,247'/%3E%3C/g%3E%3Cg stroke='%23FCD9B8' stroke-width='.65' opacity='.44'%3E%3Cpolygon points='183,112 238,144 238,208 183,240 128,208 128,144'/%3E%3Cpolygon points='64,145 120,177 120,241 64,273 8,241 8,177'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left bottom;
background-size: contain;
filter:
drop-shadow(0 2px 8px rgba(0, 0, 0, .22));
}
/* Часть линий уходит за край экрана, как в референсе */
body.page-home::after {
content: "";
position: fixed;
z-index: 3;
left: 0;
bottom: 112px;
width: 118px;
height: 1px;
background:
linear-gradient(
90deg,
rgba(224, 145, 69, .88),
rgba(224, 145, 69, .30),
transparent
);
transform: rotate(60deg);
transform-origin: left center;
pointer-events: none;
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1100px) {
body.page-home::before,
body.page-home::after {
display: none;
}
.side-decoration {
display: none;
}
.site-header {
padding-left: 30px;
padding-right: 30px;
}
.site-header__inner {
grid-template-columns:
auto 1fr auto;
}
.main-nav {
gap: 18px;
}
}
@media (max-width: 850px) {
.site-header__inner {
display: flex;
justify-content: space-between;
}
.site-logo {
width: 175px;
}
.mobile-menu-button {
display: block;
}
.main-nav {
position: fixed;
z-index: 200;
inset:
82px
20px
auto;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 30px;
background:
rgba(13, 15, 18, .97);
border:
1px solid var(--border-gold);
transform:
translateY(-20px);
opacity: 0;
visibility: hidden;
transition:
opacity .25s ease,
transform .25s ease,
visibility .25s;
}
.main-nav.is-open {
transform:
translateY(0);
opacity: 1;
visibility: visible;
}
.language-switcher {
display: none;
}
.inner-page {
width:
calc(100% - 30px);
}
.glass-panel {
padding:
26px 22px;
}
.clients-grid {
grid-template-columns: 1fr;
}
.home-hero {
padding:
40px 30px;
}
.hero-title {
font-size:
clamp(42px, 10vw, 64px);
}
.site-footer__inner {
grid-template-columns: 1fr;
text-align: center;
}
.footer-center,
.footer-links {
justify-self: center;
}
/* На мобильных разрешаем прокрутку,
если содержимое физически не помещается */
body.page-home {
overflow-y: auto;
}
.page-home .site-shell {
min-height: 100dvh;
height: auto;
overflow: visible;
}
.page-home .site-main {
overflow: visible;
}
.page-home .home-hero {
min-height: calc(100dvh - 160px);
height: auto;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* =========================================================
FINAL HOME OVERRIDES — readability + right decoration
========================================================= */
/* Final overlay: stronger left contrast, softer sun on the right,
darker header/footer zones without visible hard-edged panels. */
.site-background-overlay,
.page-home .site-background-overlay {
background:
radial-gradient(
circle at 92% 42%,
rgba(13, 15, 18, .02) 0%,
rgba(13, 15, 18, .06) 13%,
rgba(13, 15, 18, .13) 28%,
transparent 48%
),
linear-gradient(
90deg,
rgba(8, 10, 12, .90) 0%,
rgba(8, 10, 12, .86) 18%,
rgba(10, 12, 15, .76) 34%,
rgba(12, 14, 17, .58) 48%,
rgba(13, 15, 18, .30) 61%,
rgba(13, 15, 18, .10) 76%,
rgba(13, 15, 18, .02) 100%
),
linear-gradient(
180deg,
rgba(8, 10, 12, .35) 0%,
rgba(8, 10, 12, .12) 18%,
transparent 35%
),
linear-gradient(
0deg,
rgba(8, 10, 12, .58) 0%,
rgba(8, 10, 12, .20) 15%,
transparent 32%
);
}
.page-home .site-background {
background-position: 56% center;
background-size: cover;
transform: none !important;
}
.page-home .home-hero__content {
position: relative;
z-index: 2;
max-width: 760px;
}
.page-home .hero-title {
color: #F0ECE7;
text-shadow:
0 2px 14px rgba(0, 0, 0, .48),
0 5px 30px rgba(0, 0, 0, .24);
}
.page-home .home-hero__eyebrow {
color: #FCD9B8;
text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.page-home .hero-more {
color: #F0ECE7;
text-shadow: 0 2px 10px rgba(0, 0, 0, .50);
}
/* =========================================================
RIGHT ART-DECO DECORATION — CLEAN LIGHT VERSION
========================================================= */
.side-decoration--right {
position: fixed;
top: 78px;
right: 28px;
bottom: 28px;
z-index: 6;
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #292C35;
text-shadow: none;
pointer-events: none;
}
/* Без локальной тёмной подложки */
.side-decoration--right::before {
display: none;
}
.side-decoration--right .side-decoration__hex {
width: 27px;
height: 27px;
margin: 0 auto 18px;
border: 0;
background-color: #A8632F;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,6.7 75,6.7 100,50 75,93.3 25,93.3 0,50' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,6.7 75,6.7 100,50 75,93.3 25,93.3 0,50' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
clip-path: none;
filter: none;
}
.side-decoration--right .side-decoration__line {
width: 1px;
height: 78px;
margin: 0 auto 17px;
background: linear-gradient(
180deg,
#A8632F,
rgba(41, 44, 53, .65)
);
box-shadow: none;
}
.side-decoration--right .side-decoration__text {
font-size: 11px;
font-weight: 500;
line-height: 1.65;
letter-spacing: .17em;
color: #292C35;
text-shadow: none;
}
/* =========================================================
RIGHT LOWER BLOCK — C 2016 / СОЗДАЁМ / ЦЕННОСТЬ
========================================================= */
.side-decoration__bottom {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.side-decoration__bottom::before {
content: "";
display: block;
width: 1px;
height: 92px;
margin: 18px auto 18px;
background:
linear-gradient(
180deg,
rgba(252, 217, 184, .70),
rgba(224, 145, 69, .92)
);
}
.side-decoration__bottom-year {
position: relative;
margin-bottom: 8px;
font-size: 10px;
line-height: 1.25;
letter-spacing: .18em;
color: rgba(252, 217, 184, .82);
text-shadow: none;
}
.side-decoration__bottom-year::before {
content: "/";
display: block;
margin-bottom: 5px;
color: var(--amber);
}
.side-decoration__bottom-text {
font-size: 10px;
line-height: 1.55;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(252, 217, 184, .82);
text-shadow: none;
}
.side-decoration__bottom::after {
content: "";
display: block;
width: 1px;
height: 64px;
margin: 18px auto 0;
background:
linear-gradient(
180deg,
rgba(224, 145, 69, .92),
rgba(224, 145, 69, .18)
);
}
@media (max-width: 1100px) {
.side-decoration__bottom {
display: none;
}
}
/* =========================================================
HOME — wider hero, champagne third line, balanced CTA
2026-09-10. Scoped to the home page; other arrows are unchanged.
========================================================= */
.page-home .home-hero__content {
width: 100%;
min-width: 0;
max-width: 1180px;
}
/* Keep the existing mobile/tablet layout below the decor breakpoint. */
@media (min-width: 1101px) {
.page-home .home-hero {
padding-left: min(14vw, calc((100vw - 1000px) / 2));
padding-right: min(14vw, calc((100vw - 1000px) / 2));
}
.page-home .home-hero__content {
min-width: 1000px;
}
}
.page-home .hero-title .hero-title__accent {
color: var(--champagne, #FCD9B8);
}
.page-home .hero-more {
align-items: center;
gap: 24px;
min-height: 60px;
line-height: 1.35;
}
.page-home .hero-more > span:not(.hex-arrow) {
display: block;
}
.page-home .hero-more .hex-arrow {
position: relative;
width: 60px;
height: 60px;
flex: 0 0 60px;
align-self: center;
margin: 0;
padding: 0;
color: var(--champagne, #FCD9B8);
line-height: 1;
transform: none;
}
/* Inset vertices keep the complete thin outline inside the SVG canvas. */
.page-home .hero-more .hex-arrow::before {
inset: 0;
border: 0;
background-color: currentColor;
clip-path: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Draw the arrow geometrically so its centre is independent of font metrics. */
.page-home .hero-more .hex-arrow::after {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M18 30H42M33 21L42 30L33 39' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M18 30H42M33 21L42 30L33 39' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transform: none;
transition: transform .2s ease;
}
.page-home .hero-more:hover,
.page-home .hero-more:focus-visible {
color: var(--champagne, #FCD9B8);
}
.page-home .hero-more:hover .hex-arrow::after,
.page-home .hero-more:focus-visible .hex-arrow::after {
transform: translateX(2px);
}
@media (max-width: 850px) {
.page-home .hero-more {
gap: 20px;
min-height: 54px;
}
.page-home .hero-title {
font-size: clamp(32px, 10vw, 64px);
}
.page-home .hero-more .hex-arrow {
width: 54px;
height: 54px;
flex-basis: 54px;
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .hero-more .hex-arrow::after {
transition: none;
transform: none;
}
}
/* =========================================================
FOOTER — gold separators and SVG social icons
========================================================= */
.site-footer {
padding: 18px clamp(24px, 2.4vw, 46px) 22px;
color: rgba(240, 236, 231, .78);
font-size: 10px;
line-height: 1.5;
}
.site-footer__inner {
width: 100%;
max-width: 1760px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(24px, .45fr) auto minmax(24px, .45fr) minmax(0, 1fr);
align-items: center;
gap: clamp(14px, 1.8vw, 30px);
}
.site-footer__inner::before,
.site-footer__inner::after {
content: "";
display: block;
grid-row: 1;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--amber), rgba(252, 217, 184, .3));
pointer-events: none;
}
.site-footer__inner::before { grid-column: 2; }
.site-footer__inner::after {
grid-column: 4;
background: linear-gradient(90deg, rgba(252, 217, 184, .3), var(--amber));
}
.footer-copy {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.footer-center {
grid-column: 3;
grid-row: 1;
justify-self: center;
align-items: center;
gap: 12px;
color: var(--champagne);
}
.footer-socials {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-socials li { display: flex; }
.site-footer .social-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 0;
clip-path: none;
background: transparent;
color: var(--champagne);
line-height: 1;
text-shadow: none;
transition: color .2s ease;
}
/* Same hexagon geometry as the hero CTA, with an uncut thin outline. */
.site-footer .social-link::before {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
opacity: .75;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}
.site-footer .social-link svg {
position: relative;
display: block;
width: 19px;
height: 19px;
flex: 0 0 19px;
fill: currentColor;
}
.site-footer .social-link--telegram svg { transform: translate(1px, -1px); }
.site-footer .social-link--whatsapp svg { width: 21px; height: 21px; flex-basis: 21px; }
.site-footer .social-link:hover,
.site-footer .social-link:focus-visible { color: var(--amber-hover); background: transparent; }
.site-footer a:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
.footer-links {
grid-column: 5;
grid-row: 1;
justify-self: end;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
min-width: 0;
text-align: left;
}
.footer-links a { min-width: 0; transition: color .2s ease; }
.footer-links a:hover { color: var(--champagne); }
.footer-links a + a {
margin-left: 18px;
padding-left: 18px;
border-left: 1px solid rgba(252, 217, 184, .7);
}
@media (min-width: 851px) {
.footer-copy { justify-self: end; text-align: right; }
.footer-links { justify-self: start; justify-content: flex-start; }
}
@media (max-width: 1100px) and (min-width: 851px) {
.site-footer__inner { gap: 14px; grid-template-columns: minmax(0, 1fr) 32px auto 32px minmax(0, 1fr); }
.footer-links a + a { margin-left: 10px; padding-left: 10px; }
}
@media (max-width: 850px) {
.site-footer { padding: 18px 24px 22px; }
.site-footer__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
.footer-center { grid-column: 2; grid-row: 1; }
.site-footer__inner::before { grid-column: 1; }
.site-footer__inner::after { grid-column: 3; }
.footer-copy { grid-column: 1 / -1; grid-row: 2; text-align: center; }
.footer-links { grid-column: 1 / -1; grid-row: 3; justify-self: center; justify-content: center; text-align: center; }
.footer-links a + a { margin-left: 12px; padding-left: 12px; }
}
/* =========================================================
404 — interrupted signal / Art Deco
========================================================= */
body.page-404 { height: 100%; overflow: hidden; }
.page-404 .site-shell {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
height: 100vh;
height: 100dvh;
min-height: 0;
overflow: hidden;
}
.page-404 .site-main {
min-height: 0;
display: grid;
align-items: safe center;
/* Keep oversized text accessible at extreme zoom or very short heights. */
overflow: auto;
}
.page-404 .site-background { background-position: 56% center; }
.page-404 .site-background-overlay {
background: linear-gradient(90deg, rgba(8,10,12,.96), rgba(13,15,18,.88) 55%, rgba(13,15,18,.64)),
linear-gradient(0deg, rgba(8,10,12,.8), transparent 50%);
}
.error-page {
width: min(1180px, calc(100% - 120px));
margin: clamp(12px, 3vh, 36px) auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: clamp(40px, 7vw, 100px);
}
.error-page__visual {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
min-height: min(400px, 48vh);
isolation: isolate;
}
.error-page__frame {
position: absolute;
inset: 0;
z-index: -1;
background: var(--amber);
opacity: .28;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 440'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M250 8L438 116V324L250 432L62 324V116Z M250 25L424 125V315L250 415L76 315V125Z'/%3E%3Cpath d='M0 220H104M396 220H500M250 0V58M250 382V440'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 440'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M250 8L438 116V324L250 432L62 324V116Z M250 25L424 125V315L250 415L76 315V125Z'/%3E%3Cpath d='M0 220H104M396 220H500M250 0V58M250 382V440'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.error-page__coordinate {
color: var(--champagne);
font-size: 11px;
letter-spacing: .3em;
margin-bottom: 24px;
opacity: .6;
}
.error-page__code {
position: relative;
font-family: var(--font-display);
font-size: clamp(150px, 18vw, 260px);
font-weight: 400;
line-height: .95;
letter-spacing: -.045em;
padding-right: .045em;
color: var(--champagne);
text-shadow: 0 0 40px rgba(224,145,69,.08);
}
.error-page__code::before,
.error-page__code::after {
content: attr(data-code);
position: absolute;
inset: 0;
color: var(--amber);
opacity: 0;
pointer-events: none;
animation: error-signal 4.5s linear 1;
}
.error-page__code::after {
color: var(--text-main);
animation-name: error-signal-secondary;
}
.error-page__signal {
display: flex;
align-items: center;
gap: 16px;
margin-top: 34px;
color: var(--champagne);
font-size: 11px;
letter-spacing: .24em;
text-transform: uppercase;
}
.error-page__signal span { width: 24px; height: 1px; background: var(--amber); opacity: .6; }
.error-page__content { min-width: 0; padding: 12px 0 12px 34px; border-left: 1px solid rgba(224,145,69,.35); }
.error-page__eyebrow { margin: 0 0 24px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.error-page__title { margin: 0 0 26px; font-family: var(--font-display); font-size: clamp(42px, 4.3vw, 64px); line-height: 1.05; font-weight: 400; color: var(--text-main); }
.error-page__title span { color: var(--amber); }
.error-page__description { max-width: 360px; margin: 0; color: rgba(240,236,231,.76); font-size: 16px; line-height: 1.75; }
.error-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 32px; }
.error-page__home { display: inline-flex; align-items: center; gap: 20px; color: var(--champagne); font-size: 16px; min-height: 52px; }
.error-page__arrow {
position: relative;
display: block;
width: 52px;
height: 52px;
flex: 0 0 52px;
}
.error-page__arrow::before {
content: "";
position: absolute;
inset: 0;
border: 0;
background-color: currentColor;
clip-path: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}
.error-page__arrow::after {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M18 30H42M33 21L42 30L33 39' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M18 30H42M33 21L42 30L33 39' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transform: none;
transition: transform .2s ease;
}
.error-page__home:hover .error-page__arrow::after,
.error-page__home:focus-visible .error-page__arrow::after { transform: translateX(2px); }
.error-page__services { padding: 12px 0; color: rgba(240,236,231,.78); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(224,145,69,.6); text-underline-offset: 7px; }
.error-page__home:hover,.error-page__services:hover { color: var(--amber-hover); }
.error-page a:focus-visible { outline: 1px solid var(--champagne); outline-offset: 6px; }
@keyframes error-signal {
0%, 19%, 23%, 55%, 59%, 85%, 89%, 100% { opacity: 0; transform: none; }
20%, 22% { opacity: .65; transform: translateX(5px); clip-path: inset(22% 0 65% 0); }
56%, 58% { opacity: .55; transform: translateX(-4px); clip-path: inset(61% 0 29% 0); }
86%, 88% { opacity: .45; transform: translateX(3px); clip-path: inset(40% 0 54% 0); }
}
@keyframes error-signal-secondary {
0%, 19%, 23%, 55%, 59%, 85%, 89%, 100% { opacity: 0; transform: none; }
20%, 22% { opacity: .4; transform: translateX(-3px); clip-path: inset(70% 0 24% 0); }
56%, 58% { opacity: .3; transform: translateX(4px); clip-path: inset(30% 0 64% 0); }
86%, 88% { opacity: .4; transform: translateX(-3px); clip-path: inset(55% 0 38% 0); }
}
@media (max-width: 1100px) {
.error-page { width: calc(100% - 80px); gap: 30px; }
.error-page__content { padding-left: 24px; }
.error-page__visual { min-height: 330px; }
}
@media (max-width: 700px) {
.error-page { width: calc(100% - 48px); grid-template-columns: minmax(0,1fr); gap: 16px; margin: 12px auto; }
.error-page__visual { min-height: clamp(120px, 22vh, 210px); }
.error-page__code { font-size: clamp(90px, 18vh, 170px); }
.error-page__coordinate { margin-bottom: 8px; }
.error-page__signal { margin-top: 12px; font-size: 10px; }
.error-page__content { padding: 0; border-left: 0; text-align: center; }
.error-page__eyebrow { margin-bottom: 12px; }
.error-page__title { font-size: 38px; margin-bottom: 16px; }
.error-page__description { margin-inline: auto; }
.error-page__actions { justify-content: center; gap: 10px 20px; margin-top: 16px; }
.page-404 .site-header { padding-top: 16px; padding-bottom: 12px; }
.page-404 .site-header__inner { padding-bottom: 16px; }
.page-404 .site-footer { padding-top: 10px; padding-bottom: 12px; }
.page-404 .site-footer__inner { row-gap: 10px; }
}
@media (max-height: 740px) {
.error-page__visual { min-height: min(280px, 35vh); }
.error-page__code { font-size: clamp(90px, 24vh, 190px); }
.error-page__coordinate { margin-bottom: 8px; }
.error-page__signal { margin-top: 12px; }
.error-page__eyebrow { margin-bottom: 12px; }
.error-page__title { font-size: 36px; margin-bottom: 16px; }
.error-page__description { line-height: 1.5; }
.error-page__actions { margin-top: 16px; }
}
@media (max-width: 700px) and (max-height: 740px) {
.error-page__visual { min-height: 120px; }
.error-page__code { font-size: 96px; }
.error-page__coordinate, .error-page__signal { display: none; }
}
@media (max-width: 700px) and (max-height: 600px) {
.error-page__visual { display: none; }
}
@media (min-width: 701px) and (max-height: 600px) {
.page-404 .site-header { padding-top: 10px; padding-bottom: 8px; }
.page-404 .site-header__inner { padding-bottom: 10px; }
.page-404 .site-logo { width: 150px; }
.page-404 .site-footer { padding-top: 6px; padding-bottom: 8px; }
.page-404 .site-footer__inner { row-gap: 6px; }
.error-page { margin-block: 8px; gap: 24px; }
.error-page__content { padding-block: 0; }
.error-page__title { font-size: 30px; margin-bottom: 10px; }
.error-page__description { font-size: 14px; }
.error-page__eyebrow { margin-bottom: 8px; }
.error-page__actions { margin-top: 10px; gap: 10px 20px; }
.error-page__home { min-height: 44px; font-size: 14px; }
.error-page__arrow { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.error-page__code::before, .error-page__code::after { animation: none; display: none; }
}
@media (prefers-reduced-motion: reduce) {
.error-page__home .error-page__arrow::after { transition: none; transform: none; }
}
/* =========================================================
FINAL 404 VIEWPORT OVERRIDE
========================================================= */
body.page-404 {
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
max-height: 100vh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
.page-404 .site-shell {
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
max-height: 100vh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
.page-404 .site-main {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* =========================================================
BLOG / PUBLICATIONS PAGE
========================================================= */
body.page-blog {
min-height: 100vh;
}
.page-blog .site-main {
min-height: 0;
}
.blog-page {
width: min(1160px, calc(100% - 360px));
margin: clamp(20px, 3vh, 34px) auto 70px;
}
.blog-panel {
position: relative;
padding: 30px 44px 34px;
border: 1px solid rgba(224, 145, 69, .62);
border-radius: 8px;
color: var(--text-main);
background:
linear-gradient(
135deg,
rgba(23, 24, 29, .74),
rgba(41, 44, 53, .58)
);
box-shadow:
0 0 0 1px rgba(252, 217, 184, .08),
0 0 18px rgba(224, 145, 69, .24),
0 24px 60px rgba(0, 0, 0, .28);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.blog-page__title {
margin: 26px 0 0;
font-family: var(--font-display);
font-size: clamp(40px, 3vw, 54px);
font-weight: 400;
line-height: 1.05;
letter-spacing: .01em;
color: var(--text-main);
}
.blog-page__title-line {
width: 58px;
height: 1px;
margin: 14px 0 6px;
background:
linear-gradient(
90deg,
var(--amber),
rgba(224, 145, 69, .25)
);
}
/* =========================================================
BLOG — breadcrumb
========================================================= */
.kp-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 22px;
color: rgba(240, 236, 231, .74);
font-size: 12px;
line-height: 1.4;
}
.kp-breadcrumb__link,
.kp-breadcrumb__current {
position: relative;
}
.kp-breadcrumb__link {
transition: color .18s ease;
}
.kp-breadcrumb__link:hover,
.kp-breadcrumb__link:focus-visible {
color: var(--champagne);
}
.kp-breadcrumb__link:first-child::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -7px;
height: 1px;
background: rgba(224, 145, 69, .55);
}
.kp-breadcrumb__separator {
color: rgba(252, 217, 184, .55);
}
.kp-breadcrumb a:focus-visible {
outline: 1px solid var(--champagne);
outline-offset: 4px;
}
/* =========================================================
BLOG — article list
========================================================= */
.blog-list {
margin-top: 8px;
}
.blog-list__item {
position: relative;
padding: 22px 0 21px;
border-bottom:
1px solid rgba(252, 217, 184, .48);
}
.blog-list__item:last-of-type {
border-bottom-color: transparent;
}
.blog-list__heading-row {
display: flex;
align-items: center;
gap: 22px;
max-width: 100%;
}
.blog-list__heading {
min-width: 0;
max-width: 860px;
margin: 0;
font-family: var(--font-main);
font-size: clamp(19px, 1.45vw, 23px);
font-weight: 400;
line-height: 1.28;
letter-spacing: -.015em;
color: var(--text-main);
}
.blog-list__heading a {
transition: color .18s ease;
}
.blog-list__heading a:hover,
.blog-list__heading a:focus-visible {
color: var(--champagne);
}
.blog-list__date {
display: block;
margin-top: 7px;
color: var(--champagne);
font-size: 11px;
line-height: 1.3;
}
.blog-list__preview {
max-width: 920px;
margin-top: 9px;
color: rgba(240, 236, 231, .76);
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
BLOG — hexagonal article arrow
========================================================= */
.blog-list__arrow {
position: relative;
display: inline-flex;
width: 42px;
height: 42px;
flex: 0 0 42px;
color: var(--amber);
transition: color .18s ease;
}
.blog-list__arrow::before,
.blog-list__arrow::after {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
}
.blog-list__arrow::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.25' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.25' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.blog-list__arrow::after {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M18 30H42M33 21L42 30L33 39' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M18 30H42M33 21L42 30L33 39' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
transition: transform .18s ease;
}
.blog-list__arrow:hover,
.blog-list__arrow:focus-visible {
color: var(--amber-hover);
}
.blog-list__arrow:hover::after,
.blog-list__arrow:focus-visible::after,
.blog-list__heading:hover + .blog-list__arrow::after,
.blog-list__heading:focus-within + .blog-list__arrow::after {
transform: translateX(2px);
}
.blog-list a:focus-visible {
outline: 1px solid var(--champagne);
outline-offset: 4px;
}
/* =========================================================
BLOG — pagination
========================================================= */
.blog-list__pagination {
margin-top: 28px;
}
.blog-list__pagination .modern-page-navigation,
.blog-list__pagination .bx-pagination {
color: var(--text-main);
}
/* =========================================================
BLOG — detail
========================================================= */
.blog-detail {
padding-top: 22px;
}
.blog-detail__header {
padding-bottom: 24px;
border-bottom:
1px solid rgba(252, 217, 184, .34);
}
.blog-detail__title {
max-width: 920px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(38px, 3.2vw, 54px);
font-weight: 400;
line-height: 1.12;
color: var(--text-main);
}
.blog-detail__date {
display: block;
margin-top: 13px;
color: var(--champagne);
font-size: 11px;
}
.blog-detail__content {
max-width: 920px;
padding: 28px 0 8px;
color: rgba(240, 236, 231, .86);
font-size: 16px;
line-height: 1.75;
}
.blog-detail__content h2,
.blog-detail__content h3,
.blog-detail__content h4 {
font-family: var(--font-display);
font-weight: 400;
color: var(--text-main);
}
.blog-detail__content h2 {
margin: 1.3em 0 .55em;
font-size: 34px;
}
.blog-detail__content h3 {
margin: 1.2em 0 .5em;
font-size: 28px;
}
.blog-detail__content a {
color: var(--champagne);
text-decoration: underline;
text-decoration-color: rgba(224, 145, 69, .55);
text-underline-offset: 5px;
}
.blog-detail__content img {
max-width: 100%;
height: auto;
border:
1px solid rgba(224, 145, 69, .34);
}
.blog-detail__content pre {
max-width: 100%;
overflow: auto;
padding: 18px 20px;
border-left: 1px solid var(--amber);
background: rgba(13, 15, 18, .62);
color: var(--text-main);
}
.blog-detail__back {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 28px;
color: var(--champagne);
font-size: 14px;
}
.blog-detail__back-arrow {
position: relative;
width: 30px;
height: 30px;
flex: 0 0 30px;
transform: rotate(180deg);
}
.blog-detail__back-arrow::before,
.blog-detail__back-arrow::after {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
}
.blog-detail__back-arrow::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.blog-detail__back-arrow::after {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M19 30H41M33 22L41 30L33 38' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M19 30H41M33 22L41 30L33 38' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.blog-empty {
margin-top: 28px;
padding: 18px 20px;
border:
1px solid rgba(224, 145, 69, .42);
background:
rgba(13, 15, 18, .55);
color: rgba(240, 236, 231, .82);
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
BLOG — responsive
========================================================= */
@media (max-width: 1300px) {
.blog-page {
width: min(1080px, calc(100% - 240px));
}
}
@media (max-width: 1100px) {
.blog-page {
width: calc(100% - 80px);
}
}
@media (max-width: 850px) {
.blog-page {
width: calc(100% - 30px);
margin-top: 12px;
margin-bottom: 40px;
}
.blog-panel {
padding: 24px 22px 28px;
border-radius: 5px;
}
.blog-page__title {
margin-top: 22px;
font-size: 40px;
}
.blog-list__item {
padding: 19px 0;
}
.blog-list__heading-row {
align-items: flex-start;
gap: 14px;
}
.blog-list__heading {
flex: 1 1 auto;
font-size: 18px;
}
.blog-list__arrow {
width: 36px;
height: 36px;
flex-basis: 36px;
}
.blog-list__preview {
font-size: 13px;
}
.blog-detail__title {
font-size: 38px;
}
.blog-detail__content {
font-size: 15px;
line-height: 1.68;
}
}
@media (max-width: 520px) {
.blog-page {
width: calc(100% - 20px);
}
.blog-panel {
padding: 20px 16px 24px;
}
.kp-breadcrumb {
font-size: 11px;
}
.blog-list__heading-row {
gap: 10px;
}
.blog-list__arrow {
width: 32px;
height: 32px;
flex-basis: 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.blog-list__arrow::after {
transition: none;
}
}
/* =========================================================
BLOG DETAIL — TYPOGRAPHY & LIST MARKERS
========================================================= */
/* Более заметные смысловые акценты в тексте статьи */
.blog-detail__content b,
.blog-detail__content strong {
font-weight: 600;
color: var(--champagne);
}
/* ---------------------------------------------------------
UL — маркер в виде контурного шестиугольника
--------------------------------------------------------- */
.blog-detail__content ul {
margin: 1.15em 0;
padding: 0;
list-style: none;
}
.blog-detail__content ul > li {
position: relative;
margin: .55em 0;
padding-left: 30px;
}
.blog-detail__content ul > li::before {
content: "";
position: absolute;
left: 2px;
top: .48em;
width: 12px;
height: 12px;
background-color: var(--amber);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* ---------------------------------------------------------
OL — цифра внутри контурного шестиугольника
--------------------------------------------------------- */
.blog-detail__content ol {
margin: 1.15em 0;
padding: 0;
list-style: none;
counter-reset: blog-detail-list;
}
.blog-detail__content ol > li {
position: relative;
margin: .65em 0;
padding-left: 42px;
counter-increment: blog-detail-list;
}
.blog-detail__content ol > li::before {
content: counter(blog-detail-list);
position: absolute;
left: 0;
top: .08em;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
color: var(--champagne);
font-size: 10px;
font-weight: 600;
line-height: 1;
text-align: center;
}
.blog-detail__content ol > li::after {
content: "";
position: absolute;
left: 0;
top: .08em;
z-index: 1;
width: 27px;
height: 27px;
background-color: var(--amber);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Вложенные списки — чуть компактнее */
.blog-detail__content li > ul,
.blog-detail__content li > ol {
margin-top: .55em;
margin-bottom: .55em;
}
@media (max-width: 520px) {
.blog-detail__content ol > li {
padding-left: 38px;
}
.blog-detail__content ol > li::before,
.blog-detail__content ol > li::after {
width: 24px;
height: 24px;
}
.blog-detail__content ul > li {
padding-left: 26px;
}
}
/* =========================================================
CLIENTS — NEWS.LIST ACCORDION
========================================================= */
/*
* Структура:
* - 2 карточки в ряд;
* - каждая карточка — кнопка с логотипом;
* - открытое описание занимает всю ширину сетки;
* - grid-auto-flow:dense позволяет второй карточке остаться
* рядом с первой, даже если DOM-панель описания стоит после неё.
*/
.clients-accordion {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
grid-auto-flow: row dense;
gap: 20px;
width: 100%;
}
.clients-accordion__item {
display: contents;
}
/* =========================================================
Client card
========================================================= */
.clients-accordion__card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 210px;
padding: 30px 68px 30px 30px;
border:
1px solid rgba(168, 99, 47, .48);
border-radius: 6px;
background:
rgba(255, 255, 255, .22);
color: var(--text-dark);
cursor: pointer;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .08);
transition:
transform .22s ease,
border-color .22s ease,
background .22s ease,
box-shadow .22s ease;
}
.clients-accordion__card:hover,
.clients-accordion__card:focus-visible,
.clients-accordion__card.is-open {
border-color:
rgba(168, 99, 47, .82);
background:
rgba(255, 255, 255, .34);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .12),
0 10px 26px rgba(70, 44, 20, .10);
}
.clients-accordion__card:hover {
transform: translateY(-2px);
}
.clients-accordion__card:focus-visible {
outline:
1px solid var(--bronze-dark);
outline-offset: 4px;
}
.clients-accordion__logo-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
}
.clients-accordion__logo {
display: block;
max-width: min(78%, 360px);
max-height: 110px;
width: auto;
height: auto;
object-fit: contain;
}
.clients-accordion__fallback-name {
max-width: 100%;
color: var(--text-dark);
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 42px);
line-height: 1.1;
text-align: center;
}
/* =========================================================
Hexagonal card arrow
========================================================= */
.clients-accordion__arrow {
position: absolute;
right: 20px;
bottom: 18px;
width: 38px;
height: 38px;
color: var(--bronze-dark);
pointer-events: none;
}
.clients-accordion__arrow::before,
.clients-accordion__arrow::after {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
}
.clients-accordion__arrow::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.clients-accordion__arrow::after {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M19 30H41M33 22L41 30L33 38' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M19 30H41M33 22L41 30L33 38' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
transition:
transform .2s ease;
}
.clients-accordion__card:hover .clients-accordion__arrow::after,
.clients-accordion__card:focus-visible .clients-accordion__arrow::after {
transform:
translateX(2px);
}
/* При открытом описании стрелка превращается в "назад/закрыть". */
.clients-accordion__card.is-open .clients-accordion__arrow::after {
transform:
rotate(180deg);
}
/* =========================================================
Full-width company description
========================================================= */
.clients-accordion__description {
grid-column: 1 / -1;
min-width: 0;
border:
1px solid rgba(168, 99, 47, .50);
border-radius: 6px;
background:
linear-gradient(
135deg,
rgba(255, 250, 242, .92),
rgba(252, 217, 184, .72)
);
color: var(--text-dark);
box-shadow:
0 12px 34px rgba(70, 44, 20, .10);
}
.clients-accordion__description[hidden] {
display: none;
}
.clients-accordion__description-inner {
position: relative;
padding: 28px 34px 30px;
}
.clients-accordion__description-inner::before {
content: "";
position: absolute;
left: 34px;
top: 0;
width: 58px;
height: 1px;
background:
linear-gradient(
90deg,
var(--bronze-dark),
var(--amber)
);
}
.clients-accordion__name {
margin: 0 0 14px;
font-family: var(--font-display);
font-size: clamp(27px, 2.2vw, 38px);
font-weight: 400;
line-height: 1.1;
color: var(--text-dark);
}
.clients-accordion__text {
max-width: 980px;
color: rgba(23, 24, 29, .78);
font-size: 15px;
line-height: 1.7;
}
.clients-accordion__text p {
margin:
0 0 1em;
}
.clients-accordion__text p:last-child {
margin-bottom: 0;
}
.clients-accordion__text a {
color: var(--bronze-dark);
text-decoration: underline;
text-decoration-color: rgba(168, 99, 47, .55);
text-underline-offset: 4px;
}
/* =========================================================
Clients accordion responsive
========================================================= */
@media (max-width: 850px) {
.clients-accordion {
grid-template-columns: 1fr;
gap: 14px;
}
.clients-accordion__card {
min-height: 170px;
padding:
24px 58px
24px 24px;
}
.clients-accordion__logo {
max-width: min(82%, 320px);
max-height: 92px;
}
.clients-accordion__description {
grid-column: 1;
}
.clients-accordion__description-inner {
padding: 24px 22px 26px;
}
.clients-accordion__description-inner::before {
left: 22px;
}
.clients-accordion__text {
font-size: 14px;
line-height: 1.65;
}
}
@media (max-width: 520px) {
.clients-accordion__card {
min-height: 145px;
}
.clients-accordion__arrow {
right: 14px;
bottom: 13px;
width: 34px;
height: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
.clients-accordion__card,
.clients-accordion__arrow::after {
transition: none;
}
}
/* =========================================================
CLIENTS PAGE — BLOG WIDTH / LIGHT PANEL
========================================================= */
/*
* По ширине и внешним отступам страница клиентов повторяет блог.
* Отличается только светлая внутренняя панель.
*/
.clients-page {
width: min(1160px, calc(100% - 360px));
margin:
clamp(20px, 3vh, 34px)
auto
70px;
}
.clients-panel {
position: relative;
padding:
30px 44px
38px;
border:
1px solid rgba(224, 145, 69, .62);
border-radius: 8px;
color: var(--text-dark);
background:
linear-gradient(
135deg,
rgba(255, 250, 242, .95),
rgba(252, 217, 184, .78)
);
box-shadow:
0 0 0 1px rgba(255, 255, 255, .20),
0 0 18px rgba(224, 145, 69, .22),
0 24px 60px rgba(0, 0, 0, .22);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
/* Breadcrumb on the light clients panel */
.page-clients .kp-breadcrumb {
color:
rgba(23, 24, 29, .68);
}
.page-clients .kp-breadcrumb__separator {
color:
rgba(168, 99, 47, .60);
}
.page-clients .kp-breadcrumb__link:hover,
.page-clients .kp-breadcrumb__link:focus-visible {
color:
var(--bronze-dark);
}
.page-clients .kp-breadcrumb__link:first-child::after {
background:
rgba(168, 99, 47, .58);
}
/* Page title */
.clients-page__title {
margin:
26px 0 0;
font-family:
var(--font-display);
font-size:
clamp(40px, 3vw, 54px);
font-weight: 400;
line-height: 1.05;
letter-spacing: .01em;
color:
var(--text-dark);
}
.clients-page__title-line {
width: 58px;
height: 1px;
margin:
14px 0
24px;
background:
linear-gradient(
90deg,
var(--amber),
var(--bronze-dark)
);
}
.clients-page__intro {
max-width: 940px;
margin-bottom: 30px;
color:
rgba(23, 24, 29, .74);
font-size: 16px;
line-height: 1.6;
}
.clients-page__list {
width: 100%;
}
.clients-page__empty {
margin-top: 28px;
padding:
18px 20px;
border:
1px solid rgba(168, 99, 47, .40);
background:
rgba(255, 255, 255, .28);
color:
rgba(23, 24, 29, .78);
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
CLIENT CARDS — preview picture only
========================================================= */
/*
* В карточке всегда показываем PREVIEW_PICTURE.
* Текст NAME визуально появляется только в раскрытом описании.
*/
.clients-accordion__logo-wrap {
min-height: 110px;
}
.clients-accordion__logo {
display: block;
max-width:
min(82%, 390px);
max-height: 110px;
width: auto;
height: auto;
object-fit: contain;
}
/* =========================================================
CLIENTS PAGE — responsive
========================================================= */
@media (max-width: 1300px) {
.clients-page {
width:
min(
1080px,
calc(100% - 240px)
);
}
}
@media (max-width: 1100px) {
.clients-page {
width:
calc(100% - 80px);
}
}
@media (max-width: 850px) {
.clients-page {
width:
calc(100% - 30px);
margin-top: 12px;
margin-bottom: 40px;
}
.clients-panel {
padding:
24px 22px
28px;
border-radius: 5px;
}
.clients-page__title {
margin-top: 22px;
font-size: 40px;
}
.clients-page__intro {
margin-bottom: 24px;
font-size: 14px;
line-height: 1.6;
}
}
@media (max-width: 520px) {
.clients-page {
width:
calc(100% - 20px);
}
.clients-panel {
padding:
20px 16px
24px;
}
.clients-accordion__logo-wrap {
min-height: 90px;
}
.clients-accordion__logo {
max-height: 90px;
}
}
/* =========================================================
CLIENT CONTACT BUTTONS
========================================================= */
.clients-accordion__contacts {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.clients-accordion__contact {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
color: var(--bronze-dark);
text-decoration: none !important;
transition:
color .18s ease,
transform .18s ease;
}
.clients-accordion__contact::before {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.clients-accordion__contact-icon {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
background-color: currentColor;
}
/* Globe */
.clients-accordion__contact--site .clients-accordion__contact-icon {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.3 2.4 3.5 5.2 3.5 8.5S14.3 18.1 12 20.5M12 3.5C9.7 5.9 8.5 8.7 8.5 12S9.7 18.1 12 20.5'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.3 2.4 3.5 5.2 3.5 8.5S14.3 18.1 12 20.5M12 3.5C9.7 5.9 8.5 8.7 8.5 12S9.7 18.1 12 20.5'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Phone */
.clients-accordion__contact--phone .clients-accordion__contact-icon {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 4.1l2 4.2-2.1 1.8c1 2.5 2.8 4.4 5.4 5.5l1.9-2.2 4.2 2c.6.3.9.9.7 1.5-.4 1.5-1.6 3.1-3.5 3.1C9 20 4 15 4 8.2c0-1.9 1.6-3.1 3.1-3.5.1 0 .1 0 .1 0z' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 4.1l2 4.2-2.1 1.8c1 2.5 2.8 4.4 5.4 5.5l1.9-2.2 4.2 2c.6.3.9.9.7 1.5-.4 1.5-1.6 3.1-3.5 3.1C9 20 4 15 4 8.2c0-1.9 1.6-3.1 3.1-3.5.1 0 .1 0 .1 0z' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* E-mail */
.clients-accordion__contact--email .clients-accordion__contact-icon {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='M4.5 7l7.5 6 7.5-6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='M4.5 7l7.5 6 7.5-6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
.clients-accordion__contact:hover,
.clients-accordion__contact:focus-visible {
color: var(--amber);
transform: translateY(-2px);
}
.clients-accordion__contact:focus-visible {
outline: 1px solid var(--bronze-dark);
outline-offset: 4px;
}
/* C_LOGO can be PNG / WEBP / SVG — img sizing is format-independent. */
.clients-accordion__logo {
display: block;
max-width: min(82%, 390px);
max-height: 110px;
width: auto;
height: auto;
object-fit: contain;
}
/* Raw PREVIEW_TEXT may contain its own HTML. */
.clients-accordion__text > :first-child {
margin-top: 0;
}
.clients-accordion__text > :last-child {
margin-bottom: 0;
}
@media (max-width: 520px) {
.clients-accordion__contacts {
gap: 10px;
margin-top: 20px;
}
.clients-accordion__contact {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.clients-accordion__contact-icon {
width: 18px;
height: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.clients-accordion__contact {
transition: none;
}
}
/* Kladov Production: service-page decoration spacing and legibility. */
body:has(.svc-root) .side-decoration--right,
body:has(.svc-root) .side-decoration--right .side-decoration__text {
color: rgba(252, 217, 184, .82);
}
/* Reserve independent side gutters for fixed decorations on service pages. */
@media (min-width: 1280px) {
body:has(.svc-root) .svc-root {
width: calc(100% - 280px);
max-width: 1240px;
margin-inline: auto;
}
body:has(.svc-root) .site-footer {
width: calc(100% - 280px);
max-width: 1240px;
margin-inline: auto;
padding-inline: 40px;
}
body:has(.svc-root) .side-decoration {
pointer-events: none;
}
}
/* Override the later display:flex rule that used to reveal the right rail on mobile. */
@media (max-width: 1279.98px) {
body:has(.svc-root) .side-decoration {
display: none;
}
}
/* Fixed rails cannot fit comfortably in a short landscape viewport. */
@media (max-height: 619.98px) {
body:has(.svc-root) .side-decoration {
display: none;
}
body:has(.svc-root) .svc-root,
body:has(.svc-root) .site-footer {
width: 100%;
}
}
/* Unified breadcrumbs — Kladov Production.
Scope includes component breadcrumbs and the shared Bitrix breadcrumb template. */
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb){
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
min-height:22px;
margin:0 0 26px;
padding:0;
font-family:var(--font-main,Manrope,sans-serif);
font-size:12px;
font-weight:400;
line-height:1.4;
letter-spacing:normal;
text-transform:none;
color:rgba(240,236,231,.74);
}
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>a{
position:relative;
display:inline-block;
margin:0;
padding:0;
color:inherit;
border:0;
text-decoration:none;
transition:color .18s ease;
}
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>a:first-child::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-7px;
height:1px;
background:rgba(224,145,69,.55);
}
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>a:hover,
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>a:focus-visible{
color:var(--champagne,#fcd9b8);
}
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>a:focus-visible{
outline:1px solid currentColor;
outline-offset:4px;
}
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>span:not([aria-current]):not(.kp-breadcrumb__current){
color:rgba(252,217,184,.55);
}
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>:is([aria-current],.kp-breadcrumb__current){color:inherit}
/* The 26px gap now belongs to the breadcrumb, not the following heading. */
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)+:is(h1,header,section){margin-top:0}
/* Preserve the reference page's light-panel contrast. */
body .site-main .clients-panel nav.kp-breadcrumb{color:rgba(23,24,29,.68)}
/* More specific than the shared separator rule, including its :not() selectors. */
body .site-main .clients-panel nav.kp-breadcrumb>span.kp-breadcrumb__separator:not([aria-current]){color:#a8632f}
body .site-main .clients-panel nav.kp-breadcrumb>a:first-child::after{background:rgba(168,99,47,.58)}
body .site-main .clients-panel nav.kp-breadcrumb>a:hover,
body .site-main .clients-panel nav.kp-breadcrumb>a:focus-visible{color:var(--bronze-dark,#a8632f)}
@media(max-width:640px){
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb){font-size:11px}
}
@media(prefers-reduced-motion:reduce){
body .site-main nav:is(.kp-breadcrumb,.svc-breadcrumb,.pf-breadcrumb,.ka-breadcrumb,.kc-breadcrumb)>a{transition:none}
}
/* =========================================================
BLOG — code labels, scrollbars, tables and reading time
2026-09-25
========================================================= */
/* Date + reading-time metadata */
.blog-list__meta,
.blog-detail__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
color: var(--champagne);
font-size: 11px;
line-height: 1.35;
}
.blog-list__meta {
margin-top: 7px;
}
.blog-detail__meta {
margin-top: 13px;
}
.blog-list__meta .blog-list__date,
.blog-detail__meta .blog-detail__date {
display: inline;
margin: 0;
}
.blog-reading-time {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(240, 236, 231, .68);
white-space: nowrap;
}
.blog-reading-time::before {
content: "";
width: 1px;
height: 12px;
margin-right: 1px;
background: rgba(224, 145, 69, .55);
}
/* Code blocks are enhanced by script.js of the blog detail template. */
.blog-code-block {
margin: 1.35em 0;
overflow: hidden;
border-left: 1px solid var(--amber);
border-radius: 0 5px 5px 0;
background:
linear-gradient(
135deg,
rgba(13, 15, 18, .76),
rgba(23, 24, 29, .66)
);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .035);
}
.blog-code-block__label {
display: flex;
align-items: center;
min-height: 34px;
padding: 8px 14px;
border-bottom:
1px solid rgba(224, 145, 69, .24);
color: var(--champagne);
background: rgba(224, 145, 69, .055);
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
}
.blog-code-block .blog-code-block__label::first-letter {
color: var(--amber);
}
.blog-detail__content .blog-code-block pre {
margin: 0;
padding: 18px 20px 16px;
border-left: 0;
border-radius: 0;
background: transparent;
}
.blog-detail__content pre {
scrollbar-width: thin;
scrollbar-color:
var(--amber)
rgba(255, 255, 255, .055);
}
.blog-detail__content pre::-webkit-scrollbar,
.blog-table-scroll::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.blog-detail__content pre::-webkit-scrollbar-track,
.blog-table-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .045);
border-radius: 999px;
}
.blog-detail__content pre::-webkit-scrollbar-thumb,
.blog-table-scroll::-webkit-scrollbar-thumb {
border: 2px solid rgba(13, 15, 18, .70);
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--bronze-dark),
var(--amber)
);
background-clip: padding-box;
}
.blog-detail__content pre::-webkit-scrollbar-thumb:hover,
.blog-table-scroll::-webkit-scrollbar-thumb:hover {
background:
linear-gradient(
90deg,
var(--amber),
var(--amber-hover)
);
background-clip: padding-box;
}
.blog-detail__content pre::-webkit-scrollbar-corner,
.blog-table-scroll::-webkit-scrollbar-corner {
background: transparent;
}
.blog-detail__content pre code {
font-family:
"SFMono-Regular",
Consolas,
"Liberation Mono",
Menlo,
monospace;
font-size: .9em;
line-height: 1.65;
tab-size: 4;
}
/* Tables inside articles */
.blog-table-scroll {
width: 100%;
margin: 1.4em 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color:
var(--amber)
rgba(255, 255, 255, .055);
}
.blog-detail__content .blog-table-scroll table {
margin: 0;
}
.blog-detail__content table {
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
border:
1px solid rgba(224, 145, 69, .28);
border-radius: 5px;
overflow: hidden;
background: rgba(13, 15, 18, .26);
font-size: 14px;
line-height: 1.55;
}
.blog-detail__content thead th {
padding: 12px 16px;
color: var(--champagne);
background: rgba(224, 145, 69, .10);
font-weight: 600;
text-align: left;
vertical-align: top;
border-bottom:
1px solid rgba(224, 145, 69, .34);
}
.blog-detail__content tbody td {
padding: 12px 16px;
vertical-align: top;
overflow-wrap: anywhere;
border-bottom:
1px solid rgba(255, 255, 255, .08);
}
.blog-detail__content th + th,
.blog-detail__content td + td {
border-left:
1px solid rgba(255, 255, 255, .065);
}
.blog-detail__content tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, .025);
}
.blog-detail__content tbody tr:hover td {
background: rgba(224, 145, 69, .055);
}
.blog-detail__content tbody tr:last-child td {
border-bottom: 0;
}
@media (max-width: 520px) {
.blog-list__meta,
.blog-detail__meta {
gap: 7px;
font-size: 10px;
}
.blog-code-block__label {
padding-inline: 12px;
}
.blog-detail__content .blog-code-block pre,
.blog-detail__content pre {
padding-left: 14px;
padding-right: 14px;
}
.blog-detail__content table {
min-width: 540px;
font-size: 13px;
}
.blog-detail__content thead th,
.blog-detail__content tbody td {
padding: 10px 12px;
}
}
/* =========================================================
GLOBAL POPUP STANDARD + LANGUAGE POPUP
2026-09-28
- no rounded corners
- cut top-left / bottom-right corners
- subtle glitch on open
- thin close cross
========================================================= */
/* Standard shape for all modal popup windows. */
.modal .modal-content {
--kp-popup-cut: 16px;
--kp-popup-border: rgba(224, 145, 69, .72);
--kp-popup-frame-width: 1px;
position: relative;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden;
clip-path:
polygon(
var(--kp-popup-cut) 0,
100% 0,
100% calc(100% - var(--kp-popup-cut)),
calc(100% - var(--kp-popup-cut)) 100%,
0 100%,
0 var(--kp-popup-cut)
);
isolation: isolate;
}
/*
* SVG frame is injected by /js/kp-popup-frame.js.
* The same SVG path draws straight and diagonal segments,
* so the perceived stroke thickness stays uniform.
*/
.modal .modal-content::before {
content: none !important;
}
.modal .modal-content > .kp-popup-frame-svg {
position: absolute;
inset: 0;
z-index: 6;
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.modal .modal-content > .kp-popup-frame-svg .kp-popup-frame-svg__path {
fill: none;
stroke:
var(--kp-popup-border);
vector-effect:
non-scaling-stroke;
shape-rendering:
geometricPrecision;
stroke-linecap:
butt;
stroke-linejoin:
miter;
}
/* Short attention-catching glitch layer. */
.modal .modal-content::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(224, 145, 69, .12) 23%,
transparent 42%,
rgba(252, 217, 184, .08) 66%,
transparent 82%
);
mix-blend-mode: screen;
}
.modal.show .modal-dialog {
animation:
kpPopupGlitchIn .48s
cubic-bezier(.2, .75, .25, 1)
both;
}
.modal.show .modal-content::after {
animation:
kpPopupGlitchOverlay .48s
steps(1, end)
both;
}
/* Thin geometric close cross for popup windows. */
.modal .btn-close {
position: relative;
width: 30px;
height: 30px;
min-width: 30px;
padding: 0;
border: 0;
border-radius: 0;
background: none !important;
background-image: none !important;
color:
rgba(240, 236, 231, .66);
opacity: 1;
box-shadow: none !important;
cursor: pointer;
transition:
color .18s ease,
opacity .18s ease;
}
.modal .btn-close::before,
.modal .btn-close::after {
content: "";
position: absolute;
left: auto;
right: 3px;
top: 50%;
width: 15px;
height: 1px;
background:
currentColor;
transform-origin:
center;
}
.modal .btn-close::before {
transform:
translate(-50%, -50%)
rotate(45deg);
}
.modal .btn-close::after {
transform:
translate(-50%, -50%)
rotate(-45deg);
}
.modal .btn-close:hover,
.modal .btn-close:focus-visible {
color:
var(--champagne);
}
.modal .btn-close:focus-visible {
outline:
1px solid rgba(252, 217, 184, .72);
outline-offset: 3px;
}
@keyframes kpPopupGlitchIn {
0% {
opacity: 0;
transform:
translate3d(0, 14px, 0)
scale(.987);
filter:
blur(1px);
}
16% {
opacity: 1;
transform:
translate3d(-2px, 6px, 0)
scale(1);
}
27% {
transform:
translate3d(2px, 3px, 0)
skewX(.22deg);
}
38% {
transform:
translate3d(-1px, 1px, 0)
skewX(-.16deg);
}
55% {
transform:
translate3d(1px, 0, 0);
}
100% {
opacity: 1;
transform:
translate3d(0, 0, 0)
scale(1);
filter:
none;
}
}
@keyframes kpPopupGlitchOverlay {
0%,
9%,
100% {
opacity: 0;
clip-path:
inset(0 0 0 0);
transform:
translateX(0);
}
10% {
opacity: .48;
clip-path:
inset(18% 0 68% 0);
transform:
translateX(5px);
}
17% {
opacity: .22;
clip-path:
inset(55% 0 30% 0);
transform:
translateX(-4px);
}
25% {
opacity: .34;
clip-path:
inset(36% 0 53% 0);
transform:
translateX(3px);
}
34% {
opacity: .12;
clip-path:
inset(72% 0 19% 0);
transform:
translateX(-2px);
}
46% {
opacity: 0;
clip-path:
inset(0 0 0 0);
transform:
translateX(0);
}
}
/* ---------------------------------------------------------
Language suggestion uses the same .modal .modal-content
standard, but behaves as a non-blocking corner popup.
--------------------------------------------------------- */
.kp-language-modal {
position: fixed;
inset: 0;
z-index: 1060;
display: block !important;
width: 100%;
height: 100%;
overflow: visible;
padding: 0 !important;
background: transparent;
pointer-events: none;
}
.kp-language-modal .modal-dialog {
position: absolute;
right: 28px;
bottom: 68px;
width:
min(420px, calc(100vw - 40px));
max-width: none;
margin: 0;
pointer-events: auto;
transform: none;
}
.kp-language-modal .modal-content {
--kp-popup-border: rgba(224, 145, 69, .82);
--kp-popup-frame-width: 1px;
border: 0;
background:
linear-gradient(
135deg,
rgba(23, 24, 29, .98),
rgba(41, 44, 53, .96)
);
color:
var(--text-main);
box-shadow:
0 0 0 1px rgba(252, 217, 184, .05),
0 18px 50px rgba(0, 0, 0, .42);
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}
.kp-language-modal .modal-body {
position: relative;
z-index: 2;
padding:
24px 26px
22px;
}
.kp-language-modal .kp-language-suggest__close {
position: absolute;
z-index: 5;
top: 10px;
right: 12px;
}
.kp-language-suggest__title {
padding-right: 32px;
font-family:
var(--font-display);
font-size: 27px;
font-weight: 400;
line-height: 1.15;
color:
var(--champagne);
}
.kp-language-suggest__text {
margin-top: 10px;
color:
rgba(240, 236, 231, .78);
font-size: 14px;
line-height: 1.6;
}
.kp-language-suggest__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 20px;
margin-top: 20px;
}
.kp-language-suggest__switch {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding:
0 20px;
border:
1px solid var(--amber);
border-radius: 0;
color:
var(--text-dark);
background:
var(--amber);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition:
color .18s ease,
background .18s ease,
border-color .18s ease;
}
.kp-language-suggest__switch:hover,
.kp-language-suggest__switch:focus-visible {
color:
var(--text-dark);
background:
var(--amber-hover);
border-color:
var(--amber-hover);
}
.kp-language-suggest__stay {
padding:
8px 0;
border: 0;
border-radius: 0;
background:
transparent;
color:
var(--champagne);
font-size: 13px;
cursor: pointer;
transition:
color .18s ease;
}
.kp-language-suggest__stay:hover,
.kp-language-suggest__stay:focus-visible {
color:
var(--amber-hover);
}
.kp-language-suggest__switch:focus-visible,
.kp-language-suggest__stay:focus-visible {
outline:
1px solid var(--champagne);
outline-offset: 4px;
}
@media (max-width: 600px) {
.modal .modal-content {
--kp-popup-cut: 12px;
}
.kp-language-modal .modal-dialog {
right: 12px;
bottom: 12px;
width:
calc(100vw - 24px);
}
.kp-language-modal .modal-body {
padding:
21px 20px
20px;
}
.kp-language-suggest__title {
font-size: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.modal.show .modal-dialog,
.modal.show .modal-content::after {
animation: none !important;
}
.modal .btn-close,
.kp-language-suggest__switch,
.kp-language-suggest__stay {
transition: none;
}
}
/* =========================================================
NOTICE STACK — LANGUAGE ABOVE COOKIES
2026-09-28
========================================================= */
.kp-notice-stack {
position: fixed;
z-index: 1060;
right: 28px;
bottom: 68px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 28px;
width:
min(420px, calc(100vw - 40px));
pointer-events: none;
}
/*
* Each notice becomes an ordinary stack item.
* No notice keeps its own fixed/absolute viewport positioning here.
*/
.kp-notice-stack > .modal {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
background: transparent;
pointer-events: none;
}
.kp-notice-stack > .modal .modal-dialog {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
transform: none;
pointer-events: auto;
}
/*
* Strict order:
* language is physically ABOVE the cookie notice.
*/
.kp-notice-stack > .kp-language-modal {
order: 1;
z-index: 2;
}
.kp-notice-stack > .kp-cookie-modal {
order: 2;
z-index: 1;
}
/* Cookie popup uses the same visual standard as every modal. */
.kp-cookie-modal .modal-content {
--kp-popup-border: rgba(224, 145, 69, .82);
--kp-popup-frame-width: 1px;
border: 0;
background:
linear-gradient(
135deg,
rgba(23, 24, 29, .98),
rgba(41, 44, 53, .96)
);
color:
var(--text-main);
box-shadow:
0 0 0 1px rgba(252, 217, 184, .05),
0 18px 50px rgba(0, 0, 0, .42);
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
}
.kp-cookie-modal .modal-body {
position: relative;
z-index: 2;
padding:
22px 26px
22px;
}
.kp-cookie-consent__title {
padding-right: 10px;
font-family:
var(--font-display);
font-size: 25px;
font-weight: 400;
line-height: 1.16;
color:
var(--champagne);
}
.kp-cookie-consent__text {
margin-top: 10px;
color:
rgba(240, 236, 231, .78);
font-size: 13px;
line-height: 1.65;
}
.kp-cookie-consent__text a {
color:
var(--champagne);
text-decoration:
underline;
text-decoration-color:
rgba(224, 145, 69, .58);
text-underline-offset:
4px;
transition:
color .18s ease;
}
.kp-cookie-consent__text a:hover,
.kp-cookie-consent__text a:focus-visible {
color:
var(--amber-hover);
}
.kp-cookie-consent__actions {
margin-top: 18px;
}
.kp-cookie-consent__agree {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding:
0 24px;
border:
1px solid var(--amber);
border-radius: 0;
background:
var(--amber);
color:
var(--text-dark);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
transition:
background .18s ease,
border-color .18s ease;
}
.kp-cookie-consent__agree:hover,
.kp-cookie-consent__agree:focus-visible {
background:
var(--amber-hover);
border-color:
var(--amber-hover);
}
.kp-cookie-consent__agree:focus-visible,
.kp-cookie-consent__text a:focus-visible {
outline:
1px solid var(--champagne);
outline-offset: 4px;
}
@media (max-width: 600px) {
.kp-notice-stack {
right: 12px;
bottom: 12px;
gap: 14px;
width:
calc(100vw - 24px);
}
.kp-cookie-modal .modal-body {
padding:
20px 20px
20px;
}
.kp-cookie-consent__title {
font-size: 23px;
}
}
@media (prefers-reduced-motion: reduce) {
.kp-cookie-consent__agree,
.kp-cookie-consent__text a {
transition: none;
}
}
/* =========================================================
BACK TO TOP BUTTON
2026-09-28
========================================================= */
.kp-back-to-top {
--kp-back-to-top-bottom: 68px;
position: fixed;
z-index: 1050;
right: 28px;
bottom: var(--kp-back-to-top-bottom);
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--champagne);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform:
translateY(10px)
scale(.96);
pointer-events: none;
transition:
opacity .22s ease,
visibility .22s ease,
transform .22s ease,
color .18s ease,
bottom .22s ease;
}
.kp-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
pointer-events: auto;
}
.kp-back-to-top:hover,
.kp-back-to-top:focus-visible {
color:
var(--amber-hover);
}
.kp-back-to-top:focus-visible {
outline:
1px solid var(--champagne);
outline-offset: 5px;
}
.kp-back-to-top__svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.kp-back-to-top__hex,
.kp-back-to-top__arrow {
fill: none;
stroke:
currentColor;
vector-effect:
non-scaling-stroke;
shape-rendering:
geometricPrecision;
}
.kp-back-to-top__hex {
stroke-width: 1.2;
stroke-linejoin:
miter;
}
.kp-back-to-top__arrow {
stroke-width: 1.25;
stroke-linecap:
round;
stroke-linejoin:
round;
transition:
transform .18s ease;
transform-origin:
center;
}
.kp-back-to-top:hover .kp-back-to-top__arrow,
.kp-back-to-top:focus-visible .kp-back-to-top__arrow {
transform:
translateY(-2px);
}
@media (max-width: 600px) {
.kp-back-to-top {
--kp-back-to-top-bottom: 12px;
right: 12px;
width: 52px;
height: 52px;
}
}
@media (prefers-reduced-motion: reduce) {
.kp-back-to-top,
.kp-back-to-top__arrow {
transition: none;
}
}
/* =========================================================
NOTICE LEGACY / CACHE SAFETY
2026-09-28
========================================================= */
/*
* Old cached versions of kp-language-suggest.js created a direct child:
*
* ...
*
* Current versions use .modal.kp-language-modal instead.
* Never allow the obsolete node to participate in page layout while
* the browser switches to the new cache-busted script.
*/
body > .kp-language-suggest,
body > .kp-cookie-consent {
display: none !important;
position: fixed !important;
inset: auto !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* An empty notice stack must never affect anything visually. */
.kp-notice-stack:empty {
display: none !important;
}
/* =========================================================
RIGHT DECORATION — TRADITIONAL CHINESE / EN VERSION
2026-09-28
========================================================= */
/*
* The English site uses Traditional Chinese characters as a decorative
* counterpart to WEB / IDEAS / PEOPLE / GROWTH on the Russian site.
*/
.side-decoration--right .side-decoration__text--zh {
font-family:
"Noto Sans TC Local",
"Noto Sans TC",
"PingFang TC",
"Microsoft JhengHei",
"Microsoft YaHei",
sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.9;
letter-spacing: .16em;
text-align: center;
text-transform: none;
word-break: keep-all;
white-space: nowrap;
/*
* Keep the colour from the existing right-decoration rules:
* dark on the home/light area, champagne where service-page
* overrides already change the decoration colour.
*/
color: inherit;
}
@media (max-width: 1100px) {
.side-decoration--right .side-decoration__text--zh {
font-size: 12px;
line-height: 1.8;
letter-spacing: .13em;
}
}
/* =========================================================
MOBILE MENU
2026-09-28
high z-index + SVG cut-corner frame
========================================================= */
/* Dedicated button: not touched by the legacy script.js handler. */
.kp-mobile-menu-button {
display: none;
position: relative;
z-index: 2;
width: 34px;
height: 30px;
flex: 0 0 34px;
padding: 0;
border: 0;
background: transparent;
color: var(--champagne);
cursor: pointer;
}
.kp-mobile-menu-button span {
position: absolute;
left: 2px;
width: 30px;
height: 1px;
background: currentColor;
transform-origin: center;
transition:
top .22s ease,
transform .22s ease,
opacity .18s ease;
}
.kp-mobile-menu-button span:nth-child(1) {
top: 6px;
}
.kp-mobile-menu-button span:nth-child(2) {
top: 14px;
}
.kp-mobile-menu-button span:nth-child(3) {
top: 22px;
}
.kp-mobile-menu-button.is-open span:nth-child(1) {
top: 14px;
transform:
rotate(45deg);
}
.kp-mobile-menu-button.is-open span:nth-child(2) {
opacity: 0;
}
.kp-mobile-menu-button.is-open span:nth-child(3) {
top: 14px;
transform:
rotate(-45deg);
}
.kp-mobile-menu-button:focus-visible {
outline:
1px solid var(--champagne);
outline-offset: 5px;
}
/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
.kp-mobile-menu {
display: none;
}
@media (max-width: 850px) {
.site-header .main-nav {
display: none !important;
}
/*
* Keep the logo + mobile toggle above page content, popup notices,
* service blocks and decorative layers.
*/
.site-header {
position: relative;
z-index: 12020 !important;
}
.site-header__inner,
.site-logo,
.header-actions {
position: relative;
z-index: 2;
}
.kp-mobile-menu-button {
display: block;
}
body.kp-mobile-menu-open {
overflow: hidden;
}
.kp-mobile-menu {
--kp-mobile-menu-cut: 14px;
--kp-mobile-menu-frame-width: 1px;
--kp-mobile-menu-frame-color: rgba(224, 145, 69, .88);
position: fixed;
/*
* High enough to stay over service-page content and notification
* layers, but slightly below the header/logo itself.
*/
z-index: 12010 !important;
/*
* Lower than before so the full KLADOV logo/header remains visible.
*/
top: 94px;
left: 10px;
right: 10px;
display: block;
max-height:
calc(100dvh - 112px);
overflow: hidden;
border: 0;
clip-path:
polygon(
var(--kp-mobile-menu-cut) 0,
100% 0,
100% calc(100% - var(--kp-mobile-menu-cut)),
calc(100% - var(--kp-mobile-menu-cut)) 100%,
0 100%,
0 var(--kp-mobile-menu-cut)
);
background:
linear-gradient(
145deg,
rgba(13, 15, 18, .992),
rgba(23, 24, 29, .982)
);
box-shadow:
0 20px 54px rgba(0, 0, 0, .54);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
opacity: 0;
transform:
translateX(calc(100% + 24px));
pointer-events: none;
isolation: isolate;
transition:
opacity .2s ease,
transform .2s ease;
}
.kp-mobile-menu[hidden] {
display: none !important;
}
.kp-mobile-menu.is-open {
opacity: 1;
transform:
translateX(0);
pointer-events: auto;
}
/*
* Scrolling is moved to the inner block so the SVG frame itself
* always stays fixed around the visible panel.
*/
.kp-mobile-menu__inner {
position: relative;
z-index: 2;
max-height:
calc(100dvh - 112px);
padding:
18px 18px
20px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior:
contain;
}
}
/* ---------------------------------------------------------
SVG frame
--------------------------------------------------------- */
.kp-mobile-menu-frame-svg {
position: absolute;
inset: 0;
z-index: 5;
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.kp-mobile-menu-frame-svg__path {
fill: none;
stroke:
var(--kp-mobile-menu-frame-color);
vector-effect:
non-scaling-stroke;
shape-rendering:
geometricPrecision;
stroke-linecap:
butt;
stroke-linejoin:
miter;
}
/* ---------------------------------------------------------
Main navigation
--------------------------------------------------------- */
.kp-mobile-nav,
.kp-mobile-nav__submenu {
margin: 0;
padding: 0;
list-style: none;
}
.kp-mobile-nav__item {
border-bottom:
1px solid rgba(252, 217, 184, .15);
}
.kp-mobile-nav__item:last-child {
border-bottom: 0;
}
.kp-mobile-nav__row {
display: grid;
grid-template-columns:
minmax(0, 1fr)
min(50vw, 50%);
align-items: stretch;
}
.kp-mobile-nav__link {
display: flex;
align-items: center;
min-height: 48px;
padding:
11px 8px
11px 2px;
color:
rgba(240, 236, 231, .94);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
letter-spacing: .045em;
text-transform:
uppercase;
transition:
color .18s ease;
}
.kp-mobile-nav__link:hover,
.kp-mobile-nav__link:focus-visible,
.kp-mobile-nav__link.is-active,
.kp-mobile-nav__item.is-active > .kp-mobile-nav__row .kp-mobile-nav__link {
color:
var(--champagne);
}
.kp-mobile-nav__link:focus-visible,
.kp-mobile-nav__submenu-link:focus-visible,
.kp-mobile-nav__submenu-toggle:focus-visible {
outline:
1px solid var(--champagne);
outline-offset:
-3px;
}
/* ---------------------------------------------------------
Submenu toggle
--------------------------------------------------------- */
.kp-mobile-nav__submenu-toggle {
position: relative;
width: 100%;
min-width: 50vw;
min-height: 48px;
padding: 0;
border: 0;
background:
transparent;
color:
var(--amber);
cursor: pointer;
}
.kp-mobile-nav__submenu-toggle span::before,
.kp-mobile-nav__submenu-toggle span::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 1px;
background:
currentColor;
transform:
translateY(-50%);
transition:
transform .2s ease;
}
.kp-mobile-nav__submenu-toggle span::after {
transform:
translateY(-50%)
rotate(90deg);
}
.kp-mobile-nav__submenu-toggle[aria-expanded="true"] span::after {
transform:
translateY(-50%)
rotate(0);
}
/* ---------------------------------------------------------
Second level
--------------------------------------------------------- */
.kp-mobile-nav__submenu {
margin:
0 0 9px;
padding:
2px 0 8px
15px;
border-left:
1px solid rgba(224, 145, 69, .36);
}
.kp-mobile-nav__submenu[hidden] {
display: none !important;
}
.kp-mobile-nav__submenu-link {
display: block;
padding:
8px 10px
8px 14px;
color:
rgba(240, 236, 231, .68);
font-size: 13px;
line-height: 1.45;
transition:
color .18s ease,
padding-left .18s ease;
}
.kp-mobile-nav__submenu-link:hover,
.kp-mobile-nav__submenu-link:focus-visible,
.kp-mobile-nav__submenu-link.is-active {
padding-left: 18px;
color:
var(--champagne);
}
/* ---------------------------------------------------------
Language switcher — between navigation and social icons
--------------------------------------------------------- */
.kp-mobile-menu__language {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin-top: 18px;
padding:
17px 0
16px;
border-top:
1px solid rgba(224, 145, 69, .30);
border-bottom:
1px solid rgba(224, 145, 69, .30);
color:
rgba(240, 236, 231, .48);
font-size: 13px;
font-weight: 500;
letter-spacing:
.10em;
}
.kp-mobile-menu__language a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
min-height: 34px;
padding:
4px 8px;
color:
rgba(240, 236, 231, .66);
transition:
color .18s ease;
}
.kp-mobile-menu__language a:hover,
.kp-mobile-menu__language a:focus-visible,
.kp-mobile-menu__language a.is-active {
color:
var(--champagne);
}
.kp-mobile-menu__language a.is-active {
position: relative;
}
.kp-mobile-menu__language a.is-active::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 2px;
height: 1px;
background:
var(--amber);
}
.kp-mobile-menu__language a:focus-visible {
outline:
1px solid var(--champagne);
outline-offset: 3px;
}
/*
* The language block already has a lower separator, so social icons
* only need spacing, not a second line.
*/
.kp-mobile-menu__language + .kp-mobile-menu__socials {
margin-top: 0;
padding-top: 18px;
border-top: 0;
}
/* ---------------------------------------------------------
Social icons — cloned from the existing footer
--------------------------------------------------------- */
.kp-mobile-menu__socials {
margin-top: 19px;
padding-top: 18px;
border-top:
1px solid rgba(224, 145, 69, .30);
}
.kp-mobile-menu__socials:empty {
display: none;
}
.kp-mobile-menu__socials .footer-socials,
.kp-mobile-menu__socials .kp-mobile-socials__list {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.kp-mobile-menu__socials .footer-socials li,
.kp-mobile-menu__socials .kp-mobile-socials__list li {
display: flex;
}
.kp-mobile-menu__socials .social-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
padding: 0;
border: 0;
border-radius: 0;
clip-path: none;
background:
transparent;
color:
var(--champagne);
line-height: 1;
transition:
color .18s ease,
transform .18s ease;
}
.kp-mobile-menu__socials .social-link::before {
content: "";
position: absolute;
inset: 0;
background-color:
currentColor;
opacity: .78;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M16 5.75H44L58 30L44 54.25H16L2 30Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E")
center / contain no-repeat;
pointer-events: none;
}
.kp-mobile-menu__socials .social-link svg {
position: relative;
z-index: 2;
display: block;
width: 19px;
height: 19px;
flex: 0 0 19px;
fill:
currentColor;
}
.kp-mobile-menu__socials .social-link--telegram svg {
transform:
translate(1px, -1px);
}
.kp-mobile-menu__socials .social-link--whatsapp svg {
width: 21px;
height: 21px;
flex-basis: 21px;
}
.kp-mobile-menu__socials .social-link:hover,
.kp-mobile-menu__socials .social-link:focus-visible {
color:
var(--amber-hover);
transform:
translateY(-1px);
}
.kp-mobile-menu__socials .social-link:focus-visible {
outline:
1px solid var(--champagne);
outline-offset:
4px;
}
@media (max-width: 520px) {
.kp-mobile-menu {
--kp-mobile-menu-cut: 12px;
top: 86px;
left: 8px;
right: 8px;
max-height:
calc(100dvh - 100px);
}
.kp-mobile-menu__inner {
max-height:
calc(100dvh - 100px);
padding:
14px 14px
18px;
}
.kp-mobile-nav__link {
min-height: 45px;
font-size: 13px;
}
.kp-mobile-nav__submenu-toggle {
min-width: 75vw;
min-height: 45px;
}
}
@media (prefers-reduced-motion: reduce) {
.kp-mobile-menu,
.kp-mobile-menu-button span,
.kp-mobile-nav__submenu-toggle span::after,
.kp-mobile-nav__submenu-link,
.kp-mobile-menu__socials .social-link {
transition: none;
}
}
/* =========================================================
RESPONSIVE HEADER / LEFT DECORATION
2026-09-28
========================================================= */
/*
* Mobile: hide the visible parts of the left decorative rail.
* The container itself may remain in the DOM, but it no longer
* shows the hexagon, line or text.
*/
@media (max-width: 850px) {
.side-decoration--left .side-decoration__hex,
.side-decoration--left .side-decoration__line,
.side-decoration--left .side-decoration__text {
display: none !important;
}
}
/*
* Tablet: give the logo a little more breathing room before
* navigation / header controls.
*/
@media (min-width: 851px) and (max-width: 1279.98px) {
.site-logo {
margin-right: 36px;
}
}
/* =========================================================
MOBILE — HIDE ALL SIDE DECORATIONS
2026-09-28
========================================================= */
/*
* Hide both decorative rails completely on phones/tablets.
* This final override is intentionally placed at the end of the file
* and uses !important so later/older rules cannot reveal them again.
*/
@media (max-width: 850px) {
.side-decoration,
.side-decoration--left,
.side-decoration--right {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.side-decoration__hex,
.side-decoration__line,
.side-decoration__text,
.side-decoration__accent {
display: none !important;
}
}
/* =========================================================
ARABIC TYPOGRAPHY
Future /ar/ version
========================================================= */
:lang(ar) {
font-family:
var(--font-arabic);
}
html[lang^="ar"] body,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select {
font-family:
var(--font-arabic);
}
html[lang^="ar"] {
direction: rtl;
}
/* End */
/* Start:/local/templates/kladov/components/bitrix/menu/kladov_top/style.css?17890509959892*/
/* =========================================================
KLADOV Production — bitrix:menu / header_menu
Level 1: horizontal
Level 2: exactly TWO COLUMNS
========================================================= */
.kp-menu {
position: relative;
z-index: 120;
}
.kp-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.kp-menu__root {
display: flex;
align-items: center;
gap: 30px;
}
.kp-menu__item--root {
position: static;
}
.kp-menu__root-row {
position: relative;
display: flex;
align-items: center;
gap: 5px;
}
.kp-menu__link--root {
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 0;
color: var(--text-main, #F0ECE7);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
transition: color .2s ease;
}
/* Перекрываем старое .main-nav a::after */
.kp-menu .kp-menu__link--root::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 2px;
width: auto;
height: 1px;
background: var(--amber, #E09145);
transition: right .22s ease;
}
.kp-menu__item--root:hover .kp-menu__link--root,
.kp-menu__item--root:focus-within .kp-menu__link--root,
.kp-menu__item--root.is-active .kp-menu__link--root {
color: var(--champagne, #FCD9B8);
}
.kp-menu__item--root:hover .kp-menu__link--root::after,
.kp-menu__item--root:focus-within .kp-menu__link--root::after,
.kp-menu__item--root.is-active .kp-menu__link--root::after {
right: 0;
}
/* =========================================================
Small arrow next to parent item
========================================================= */
.kp-menu__toggle {
position: relative;
width: 16px;
height: 20px;
flex: 0 0 16px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--amber, #E09145);
cursor: pointer;
}
.kp-menu__toggle-icon {
position: absolute;
left: 50%;
top: 43%;
width: 5px;
height: 5px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translate(-50%, -50%) rotate(45deg);
transition: transform .18s ease;
}
.kp-menu__item--root.is-open .kp-menu__toggle-icon {
top: 57%;
transform: translate(-50%, -50%) rotate(225deg);
}
/* =========================================================
Pointer from selected parent to dropdown
========================================================= */
/*
* Стрелка теперь привязана к самому пункту меню,
* а не к центру выпадающей панели.
*/
.kp-menu__pointer {
position: absolute;
left: 50%;
bottom: -18px;
z-index: 170;
width: 12px;
height: 12px;
background: rgba(23, 24, 29, .98);
border-top: 1px solid rgba(224, 145, 69, .72);
border-left: 1px solid rgba(224, 145, 69, .72);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) rotate(45deg);
pointer-events: none;
transition:
opacity .18s ease,
visibility .18s ease;
}
.kp-menu__item--root:hover .kp-menu__pointer,
.kp-menu__item--root:focus-within .kp-menu__pointer,
.kp-menu__item--root.is-open .kp-menu__pointer {
opacity: 1;
visibility: visible;
}
/* =========================================================
Second level
========================================================= */
.kp-menu__dropdown {
position: absolute;
left: 50%;
top: 100%;
z-index: 160;
width: min(860px, calc(100vw - 80px));
padding-top: 18px;
opacity: 0;
visibility: hidden;
transform: translate(-50%, 8px);
pointer-events: none;
transition:
opacity .18s ease,
transform .18s ease,
visibility .18s ease;
}
/* Старую стрелку из центра панели убираем */
.kp-menu__dropdown::before {
display: none;
}
.kp-menu__dropdown-inner {
position: relative;
width: 100%;
padding: 24px 28px;
border: 1px solid rgba(224, 145, 69, .55);
background:
linear-gradient(
135deg,
rgba(18, 20, 24, .98),
rgba(41, 44, 53, .95)
);
box-shadow:
0 22px 54px rgba(0, 0, 0, .35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* =========================================================
Two columns
========================================================= */
.kp-menu__submenu {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
column-gap: 48px;
}
.kp-menu__column {
min-width: 0;
}
.kp-menu__submenu-item {
min-width: 0;
}
.kp-menu .kp-menu__link--child {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 42px;
padding: 9px 0;
border-bottom:
1px solid rgba(252, 217, 184, .24);
color:
rgba(240, 236, 231, .86);
font-size: 13px;
font-weight: 400;
line-height: 1.35;
letter-spacing: .01em;
text-transform: none;
transition:
color .18s ease,
border-color .18s ease;
}
.kp-menu .kp-menu__link--child::after {
display: none;
}
.kp-menu__link--child > span:first-child {
min-width: 0;
}
.kp-menu__child-mark {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-top:
1px solid var(--amber, #E09145);
border-right:
1px solid var(--amber, #E09145);
opacity: 0;
transform:
translateX(-4px)
rotate(45deg);
transition:
opacity .18s ease,
transform .18s ease;
}
.kp-menu__link--child:hover,
.kp-menu__link--child:focus-visible,
.kp-menu__submenu-item.is-active .kp-menu__link--child {
color:
var(--champagne, #FCD9B8);
border-color:
rgba(224, 145, 69, .62);
}
.kp-menu__link--child:hover .kp-menu__child-mark,
.kp-menu__link--child:focus-visible .kp-menu__child-mark,
.kp-menu__submenu-item.is-active .kp-menu__child-mark {
opacity: 1;
transform:
translateX(0)
rotate(45deg);
}
.kp-menu__item--root:hover > .kp-menu__dropdown,
.kp-menu__item--root:focus-within > .kp-menu__dropdown,
.kp-menu__item--root.is-open > .kp-menu__dropdown {
opacity: 1;
visibility: visible;
transform:
translate(-50%, 0);
pointer-events: auto;
}
/* =========================================================
Accessibility
========================================================= */
.kp-menu a:focus-visible,
.kp-menu button:focus-visible {
outline:
1px solid var(--champagne, #FCD9B8);
outline-offset: 4px;
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1100px) {
.kp-menu__root {
gap: 18px;
}
.kp-menu__dropdown {
width:
min(760px, calc(100vw - 50px));
}
.kp-menu__submenu {
column-gap: 34px;
}
}
@media (max-width: 850px) {
.kp-menu.main-nav {
align-items: stretch;
}
.kp-menu__root {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.kp-menu__item--root {
width: 100%;
}
.kp-menu__root-row {
width: 100%;
justify-content: space-between;
border-bottom:
1px solid rgba(252, 217, 184, .14);
}
.kp-menu__link--root {
flex: 1 1 auto;
padding: 14px 0;
}
.kp-menu__toggle {
width: 42px;
height: 42px;
flex-basis: 42px;
}
.kp-menu__pointer {
display: none;
}
.kp-menu__dropdown {
position: static;
width: 100%;
max-width: none;
padding-top: 0;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
display: none;
}
.kp-menu__item--root.is-open > .kp-menu__dropdown {
display: block;
}
.kp-menu__dropdown-inner {
width: 100%;
padding: 8px 0 14px 18px;
border: 0;
border-left:
1px solid rgba(224, 145, 69, .38);
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.kp-menu__submenu {
display: block;
}
.kp-menu__column {
width: 100%;
}
.kp-menu .kp-menu__link--child {
min-height: 38px;
padding: 8px 0;
border-color:
rgba(252, 217, 184, .12);
}
}
@media (prefers-reduced-motion: reduce) {
.kp-menu *,
.kp-menu *::before,
.kp-menu *::after {
transition: none !important;
}
}
/* =========================================================
MENU V3 — hover bridge + pointer alignment
========================================================= */
/*
* Dropdown начинается сразу от нижней границы навигации.
* Визуальный зазор создаётся внутренним padding-top, поэтому курсор
* всё время остаётся внутри descendant-области родительского .
* Это убирает исчезновение меню при движении мыши вниз.
*/
@media (min-width: 851px) {
.kp-menu__dropdown {
top: 100%;
padding-top: 18px;
}
/* Указатель под активным пунктом чуть выше, ближе к линии меню. */
.kp-menu__pointer {
bottom: -24px;
}
}
/* End */
/* /local/templates/kladov/template_styles.css?1790606072121816 */
/* /local/templates/kladov/components/bitrix/menu/kladov_top/style.css?17890509959892 */