diff --git a/src/components/socials.astro b/src/components/socials.astro index df56fc4..a6949b6 100644 --- a/src/components/socials.astro +++ b/src/components/socials.astro @@ -1,9 +1,73 @@ +--- +interface Props { + type?: 'footer' | 'header' | string; + vkUrl?: string; + tgUrl?: string; + dzenUrl?: string; + rutubeUrl?: string; +} + +const { + type = 'default', + vkUrl = 'https://vk.com/yourpage', + tgUrl = 'https://vk.com/yourpage', + dzenUrl = 'https://vk.com/yourpage', + rutubeUrl = 'https://vk.com/yourpage', +} = Astro.props; + +const isFooter = type === 'footer'; +--- +
- - - - + + + + +
- diff --git a/src/components/spicker_right.astro b/src/components/spicker_right.astro index 93742ce..6d08aa8 100644 --- a/src/components/spicker_right.astro +++ b/src/components/spicker_right.astro @@ -18,7 +18,7 @@ const { name, role, photo, link, phrase } = Astro.props as Props;

{name}

{role}
-
+
{name} diff --git a/src/data/speakers.ts b/src/data/speakers.ts index 2296eac..afee75d 100644 --- a/src/data/speakers.ts +++ b/src/data/speakers.ts @@ -2,7 +2,7 @@ export const speakers = [ { name: 'Оксана Лут', role: 'Министр сельского хозяйства РФ', - photo: 'public/1.jpg', + photo: '1.jpg', phrase: '

Все направления будем развивать, поддерживать. Деньги у нас на это есть. Сейчас самое главное — создать базу для селекции.

Задача на ближайшее время — создать базу для информации, с которой дальше любой селекционер и научный институт могли бы работать

', link: 'https://agroexpert.press/rasteniya/oksana-lut-selekcziyu-budem-razvivat-i-podderzhivat-sredstva-na-eto-est/' }, @@ -10,7 +10,7 @@ export const speakers = [ { name: 'Сергей Данкверт', role: 'Руководитель Россельхознадзора', - photo: 'public/1.jpg', + photo: '1.jpg', phrase: '

Надзор должен быть не в магазине, а надзор должен быть в процессе выращивания

', link: 'https://agroexpert.press/all-events/sergej-dankvert-desyat-krylatyh-czitat-k-yubileyu-rukovoditelya-rosselhoznadzora/
' }, @@ -19,10 +19,75 @@ export const speakers = [ { name: 'Илья Шестаков', role: 'Руководитель Росрыболовства', - photo: 'public/1.jpg', + photo: '1.jpg', phrase: '

Мы за счет нашей науки смогли провести молекулярно-генетическую идентификацию всех видов осетровых. По русскому осетру сейчас 80% запасов — это мальки, которые были выпущены с рыбоводных заводов

', link: 'https://agroexpert.press/all-events/rosrybolovstvo-schitaet-nuzhnym-prodlit-kommercheskij-zapret-na-vylov-osetrovyh-v-kaspijskom-more/' }, + { + name: 'Дмитрий Рылько', + role: 'Генеральный директор «Институт конъюнктуры аграрного рынка', + photo: '1.jpg', + phrase: '

Никаких оснований для паники мы не видим

', + link: 'https://agroexpert.press/zerno/pochemu-snizhaetsya-posevnye-pod-rozhyu-i-grozit-li-rossii-ee-deficzit/' + }, + + { + name: 'Герман Зверев', + role: 'Президент Всероссийской ассоциации рыбохозяйств', + photo: '1.jpg', + phrase: '

Включение блюд из рыбы в детское питание — это не просто вопрос разнообразия рациона, а важный шаг в формировании правильных пищевых привычек, культуры потребления рыбы среди молодого поколения

', + link: 'https://agroexpert.press/all-events/rybnye-blyuda-stanovyatsya-trendom-v-shkolnom-pitanii-varpe/' + }, + + + { + name: 'Сергей Юшин', + role: 'Руководитель Национальной мясной ассоциации (НМА)', + photo: '1.jpg', + phrase: '

Думайте о рентабельности, потому что иначе все завоевания, которые сделаны за последние 20 лет, постепенно начнем терять. У нас задача — войти в десятку экспортеров. Многие экономики, а не только Россия, ставят планы увеличения экспорта. Поэтому нам нужно идти в два раза быстрее, чтобы войти в эту десятку

', + link: 'https://agroexpert.press/products/signaly-novogo-goda-sledit-za-rentabelnostyu-agrariev/
' + }, + + + + { + name: 'Михаил Мальцев', + role: 'Исполнительный директор Масложирового союза России', + photo: '1.jpg', + phrase: '

Если в прошлом году общий объем по сырью загружал наши мощности в лучшем случае под 80%, то в этом году мы можем перевалить за 90%. <…> Мы ожидаем, что этот год [2025] будет годом покупателя

', + link: 'https://agroexpert.press/products/signaly-novogo-goda-sledit-za-rentabelnostyu-agrariev/
' + }, + + + { + name: 'Павел Косов', + role: 'Генеральный директор Росагролизинга', + photo: '1.jpg', + phrase: '

Наша задача — научиться зарабатывать внутри себя и на смежных вещах для того, чтобы зависимость от поддержки государства сводилась к минимуму. И когда это будет рабочая коммерческая бизнес-модель, тогда мы можем говорить, что привлекательны для инвесторов. Я не сомневаюсь, что у нас это получится

', + link: 'https://agroexpert.press/tehnika/rosagrolizing-naczelivaetsya-na-ipo-do-2030-goda/' + }, + + + { + name: 'Виктор Линник', + role: 'Президент АПХ «Мираторг»', + photo: '1.jpg', + phrase: '

Сейчас для любой российской компании экспортировать — это значит соответствовать высоким требованиям качества и безопасности продукции

', + link: 'https://agroexpert.press/eksport-import/miratorg-v-2025-godu-rasschityvaet-eksportirovat-produkczii-na-summu-bolee-polmilliarda-dollarov/' + }, + + + { + name: 'Штефан Дюрр', + role: 'Президент ГК «ЭкоНива»', + photo: '1.jpg', + phrase: '

Если мы говорим о ценах, самое страшное, когда ситуация здесь напоминает американские горки: то вверх, то вниз…

', + link: 'https://agroexpert.press/products/shtefan-dyurr-dlya-stabilizaczii-czen-vazhno-perehodit-na-dolgosrochnye-kontrakty/' + } + + + + ]; \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index b620aaf..8caae82 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -19,32 +19,35 @@ import { speakers } from '../data/speakers'; - - - Astro + + Спикеры года - Агроэксперт - +
-
- - -
- -
-

Спикеры года

-
-

Мы с гордостью представляем вам топ-10 спикеров года по версии издания «Агроэксперт». Он составлен на основе big data: мы проанализировали упоминания во всех публикациях сайта за 2025 год.

-

В рейтинг вошли люди, которые открывают новые горизонты агропромышленного комплекса России: бизнесмены, чиновники и эксперты отрасли.

+
+ + +

Спикеры года

+
+

Мы с гордостью представляем вам топ-10 спикеров года по версии издания «Агроэксперт». Он составлен на основе big data: мы проанализировали упоминания во всех публикациях сайта за 2025 год.

+

В рейтинг вошли люди, которые открывают новые горизонты агропромышленного комплекса России: бизнесмены, чиновники и эксперты отрасли.

+
-
- -
-
- -
+
+ + +
+ +
@@ -72,8 +75,31 @@ import { speakers } from '../data/speakers';
+
+ diff --git a/src/styles/footer.css b/src/styles/footer.css new file mode 100644 index 0000000..1876bb0 --- /dev/null +++ b/src/styles/footer.css @@ -0,0 +1,96 @@ +footer { + display: flex; /* включаем flex-контейнер */ /* [web:7] */ + justify-content: flex-end; /* весь контент прижать вправо */ /* [web:7] */ + position: relative; + margin-top: 130px; + background-color: #E2E2E2; + margin-top: 400px; + padding: 10px; + width: 100%; + overflow: visible; +} + +.footer-content{ + display: flex; + gap: 25px; + flex-direction: column; + margin-right: 120px; + padding: 50px; + +} + + + +footer::after{ + content: ""; + position: absolute; + + left: 0; /* прижали к левому краю */ /* [web:61] */ + right: auto; /* на всякий случай сбросили */ /* [web:62] */ + top: 0; + + transform: translate(0, -60%); /* только вверх, без сдвига влево */ /* [web:42][web:45] */ + + width: clamp(320px, 80vw, 1425px); + height: calc(clamp(320px, 80vw, 1425px) * (510 / 1425)); + background-size: contain; + + background: url('/footer.svg') no-repeat; + background-size: contain; + background-position: left top; /* совпадает с left:0 */ /* [web:66] */ + + pointer-events: none; + z-index: 0; + +} + + + .to-top { + position: absolute; + right: 20%; + top: 0; + transform: translate(-50%, -50%); /* половина кнопки за пределами футера */ + + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 24px; + background: #22353A; + color: #fff; + text-decoration: none; + z-index: 10; + cursor: pointer; +} + + +@media (max-width: 767px) { + + footer{ + margin-top: 70px; + width: 100%; + max-width: 100%; + } + + + .footer-content{ + width: 100%; + } + + footer::after{ + background: url("public/footer-mob.svg") no-repeat; + transform: translate(0, -26%); + + } + + .to-top { + right: 5%; + } + + + + + + +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 92a31c8..ecd941b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,39 +1,70 @@ @import './reset.css'; @import './social.css'; @import './spickers.css'; +@import './footer.css'; -body{ - background-color: #263B40; + +html { + scroll-behavior: smooth; /* плавный переход к #top [web:61][web:65] */ } + body { - max-width: 1440px; - margin: 0 auto; - padding: 40px 20px; + background-color: #263B40; color: white; font-family: Roboto, sans-serif; } +.container{ + max-width: 1440px; + margin: 0 auto; + padding: 40px 20px; + +} + header { display: flex; + position: relative; + width: 100%; } + +header::after{ + content: ""; + position: absolute; + + right: 0; /* прижали к левому краю */ /* [web:61] */ + /* на всякий случай сбросили */ /* [web:62] */ + top: 0; + + width: clamp(320px, 80vw, 1425px); + height: calc(clamp(320px, 80vw, 1425px) * (510 / 1425)); + background-size: contain; + + background: url('/header.svg') no-repeat; + background-size: contain; + background-position: right top; /* совпадает с left:0 */ /* [web:66] */ + + pointer-events: none; + z-index: 0; + +} + .header-block{ - display: flex; - gap: 18px; - flex-direction: column; + max-width: 1440px; + margin: 0 auto; + padding: 40px 20px; + } -.left-header { +.header-content { display: flex; flex-direction: column; gap: 48px; - width: 40%; + width: 50%; padding: 20px; - z-index: 2; - position: relative; } .right-header { @@ -48,14 +79,59 @@ h1{ } + + + @media (max-width: 767px) { + body{ + width: 100%; + max-width: 100%; + } + header { display: flex; flex-direction: column; width: 100%; } + header::after{ + content: ""; + position: absolute; + right: 0; /* прижали к левому краю */ /* [web:61] */ + /* на всякий случай сбросили */ /* [web:62] */ + top: 0; + + width: clamp(320px, 80vw, 1425px); + height: calc(clamp(320px, 80vw, 1425px) * (510 / 1425)); + background-size: contain; + + background: url('/header-mob.svg') no-repeat; + background-size: contain; + background-position: right top; /* совпадает с left:0 */ /* [web:66] */ + + pointer-events: none; + z-index: 0; +} + + + .header-block{ + width: 100%; + max-width: 100%; + margin: 0; + } + + .header-content{ + width: 100%; + max-width: 100%; + } + + .container{ + width: 100%; + margin: 0; + padding: 0; + } + .left-header{ width: 100%; } diff --git a/src/styles/reset.css b/src/styles/reset.css index ce11ae1..790c972 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -40,13 +40,6 @@ p { margin-bottom: 1rem; } -/* Media */ -img, picture, video, canvas, svg { - display: block; - max-width: 100%; - height: auto; -} - /* Forms */ input, button, textarea, select { font: inherit; diff --git a/src/styles/social.css b/src/styles/social.css index 31e7b5d..b847efd 100644 --- a/src/styles/social.css +++ b/src/styles/social.css @@ -11,6 +11,10 @@ transition: background-color 0.3s ease; } +.social-icon-footer { + background-color: #E2E2E2; +} + .social-icon-vk{ background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' rx='10' fill='%23006842'/%3E%3Cpath d='M18.8932 25C12.06 25 8.1624 20.1201 8 12H11.4229C11.5353 17.96 14.0587 20.4845 16.0575 21.005V12H19.2805V17.1401C21.2542 16.9189 23.3279 14.5766 24.0275 12H27.2505C26.9869 13.3363 26.4614 14.6015 25.7069 15.7166C24.9524 16.8317 23.9852 17.7726 22.8657 18.4805C24.1153 19.1273 25.2191 20.0428 26.1041 21.1666C26.9891 22.2904 27.6353 23.597 28 25H24.4522C24.1248 23.7814 23.4594 22.6905 22.5394 21.8641C21.6194 21.0376 20.4858 20.5125 19.2805 20.3544V25H18.8932Z' fill='white'/%3E%3C/svg%3E"); } @@ -25,4 +29,5 @@ .social-icon-rutube { background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' rx='10' fill='%23006842'/%3E%3Cpath d='M21.0246 18.5434H14.6875V16.2053H21.0246C21.3948 16.2053 21.6522 16.2654 21.7813 16.3705C21.9105 16.4755 21.9905 16.6704 21.9905 16.955V17.7946C21.9905 18.0945 21.9105 18.2893 21.7813 18.3944C21.6522 18.4994 21.3948 18.5443 21.0246 18.5443V18.5434ZM21.4594 14.0009H12V24H14.6875V20.7469H19.6404L21.9905 24H25L22.4089 20.7316C23.3642 20.5996 23.7931 20.3267 24.1469 19.8768C24.5007 19.427 24.678 18.7077 24.678 17.7479V16.9981C24.678 16.4288 24.6135 15.979 24.5007 15.6342C24.3879 15.2894 24.1951 14.9895 23.9213 14.7201C23.6321 14.4651 23.3102 14.2855 22.9236 14.1652C22.5371 14.0602 22.0541 14 21.4594 14V14.0009Z' fill='white'/%3E%3Cpath d='M27 14C28.1046 14 29 13.1046 29 12C29 10.8954 28.1046 10 27 10C25.8954 10 25 10.8954 25 12C25 13.1046 25.8954 14 27 14Z' fill='white'/%3E%3C/svg%3E"); -} \ No newline at end of file +} + \ No newline at end of file diff --git a/src/styles/spickers.css b/src/styles/spickers.css index 790408b..fd949c7 100644 --- a/src/styles/spickers.css +++ b/src/styles/spickers.css @@ -46,10 +46,15 @@ height: 254px; padding: 28px; background-color: #006842; - margin-top:22px; + margin-top: 18px; overflow: visible; /* Разрешаем элементам выходить за границы */ } +.spicker-content{ + position: relative; + overflow: visible; +} + .spicker_quote-left::after { @@ -70,7 +75,7 @@ } -.spicker_quote-right::after { +.spicker_quote-right::before { content: ''; position: absolute; left: -69px; /* Выходит за правую границу */ @@ -78,7 +83,7 @@ transform: translateY(-50%); width: 70px; height: 200px; - background-image: url("public/quote-left.svg"); + background-image: url("/quote-left.svg"); background-size: contain; background-repeat: no-repeat; background-position: right center; @@ -88,22 +93,9 @@ } -/* Адаптивность */ -@media (max-width: 768px) { - .spicker_quote::after { - right: -15px; - width: clamp(30px, 12%, 60px); - height: calc(clamp(30px, 12%, 60px) * 142 / 71); - } -} -@media (max-width: 480px) { - .spicker_quote::after { - right: -10px; - width: 25px; - height: calc(25px * 142 / 71); - } -} + + .spicker-photo { position: relative; @@ -114,6 +106,7 @@ .spicker-photo img { display: block; width: 375px; + max-width: auto; height: auto; } @@ -152,20 +145,6 @@ } -.spicker-photo-right::after { - content: ''; - position: absolute; - left : 0; - bottom: 55px; - width: 70px; - height: 200px; /* 3 × 50px для трех иконок */ - background-image: url('public/quote-right.svg'); - background-repeat: no-repeat; - background-position: right bottom; - opacity: 0.8; - pointer-events: none; - z-index: 2; -} @@ -188,13 +167,60 @@ @media (max-width: 767px) { + + + .spickers{ + gap: 80px; + width: 100%; + } + + .spicker-left, .spicker-right{ display: flex; flex-direction: column; - gap: 5px; + gap: 25px; + margin: 8px; + width: 100%; } + + .spicker-right .spicker-content { + order: 2; + } + + + + .spicker-photo::after { + content: ''; + position: absolute; + left: -22px; + /* Выходит за правую границу на половину ширины (34/2) */ + top: 370px; + transform: translateY(-50%); + width: 34px; /* Половина от 34px */ + height: 128px; /* Половина от 128px */ + background-image: url("data:image/svg+xml,%3Csvg width='34' height='128' viewBox='0 0 34 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Csvg y='0' width='33' height='34' viewBox='0 0 33 34'%3E%3Cpath d='M0.292881 0.5H32.4168V32.5886H0.292881V0.5Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M32.5377 32.7086L0.17244 0.379456' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M6.70544 32.6578L0.292935 26.2524' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M18.5638 32.4002L0.349588 14.2061' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M12.4503 32.5533L0.293116 20.4094' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M25.546 32.7323L0.320614 7.53473' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M32.4914 0.596924L16.4409 16.6297' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M32.4168 8.41962L20.2555 20.5677' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M32.4168 15.6585L23.9542 24.1117' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M32.3647 22.457L27.2884 27.5276' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M24.5535 0.487854L12.3922 12.636' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M32.3487 28.6687L30.4916 30.5235' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3C/svg%3E%3Csvg y='34' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M0.191551 0.5H32.5377V32.8527H0.191551V0.5Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.5215 0.542786C32.4226 9.39076 25.2227 16.5336 16.3531 16.5348C16.4521 7.68683 23.652 0.543952 32.5215 0.542786Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.184692 0.542969C0.2836 9.39095 7.48358 16.5338 16.3531 16.535C16.2542 7.68701 9.0542 0.544135 0.184692 0.542969Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.5213 16.535C32.4224 25.3829 25.2224 32.5256 16.3529 32.527C16.4518 23.679 23.6518 16.5364 32.5213 16.535Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.184692 16.535C0.2836 25.3829 7.48358 32.5256 16.3531 32.527C16.2542 23.679 9.0542 16.5364 0.184692 16.535Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath d='M16.3646 0.499573V32.5223' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3C/svg%3E%3Csvg y='68' width='34' height='60' viewBox='0 0 34 60'%3E%3Cpath d='M-25.3517 0.634521H32.9999V58.9214H-25.3517V0.634521Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M-25.2663 27.3545L3.85944 44.1516V58.921L-25.2663 42.1239V27.3545Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M32.9852 27.3545L3.85944 44.1516V58.921L32.9852 42.1239V27.3545Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M-25.2663 0.500019L3.85944 17.2971V32.0665L-25.2663 15.2694V0.500019Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M32.9852 0.500019L3.85944 17.2971V32.0665L32.9852 15.2694V0.500019Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3C/svg%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: right center; + opacity: 0.8; + pointer-events: none; + z-index: 2; +} + + + +.spicker-info{ + padding-top: 8px; + padding-bottom: 8px; + gap: 2px; +} + +.spicker-photo IMG{ + margin-left: 12px; +} + .spicker-photo-left{ background-image: none; } @@ -203,6 +229,88 @@ background-image: none; } + + + .spicker-photo-left::before, + .spicker-photo-right::before { + content: none; /* псевдоэлемент вообще не создаётся */ + /* на всякий случай можно обнулить размеры */ + width: 0; + height: 0; + background: none; + } + + +.spicker_quote{ + width: 100%; /* вместо фиксированной ширины */ + max-width: calc(100vw - 36px); /* учитываем отступы */ + box-sizing: border-box; + min-height: 131px; + height: auto; + margin: 8px; /* Добавляем отступы по бокам */ + position: relative; + box-sizing: border-box; /* Важно для правильного расчета ширины */ +} + + +.spicker_quote::after { + content: ''; + position: absolute; + left: -34px; + top: 16px; + width: 33px; + height: 33px; + background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='33' height='33' fill='%23162427'/%3E%3Cpath d='M20.6508 8.93373L21.0525 9.90461C19.8473 10.284 18.9322 10.8085 18.3073 11.4781C17.7046 12.1254 17.4033 12.8172 17.4033 13.5538C17.4033 14.0671 17.6042 14.3238 18.006 14.3238C18.2291 14.3238 18.4635 14.2791 18.709 14.1899C18.9768 14.1006 19.2781 14.056 19.6129 14.056C20.2825 14.056 20.807 14.268 21.1864 14.6921C21.5882 15.0938 21.789 15.6183 21.789 16.2655C21.789 16.9798 21.5324 17.5712 21.019 18.0399C20.5057 18.4863 19.8584 18.7095 19.0773 18.7095C18.1175 18.7095 17.3587 18.3524 16.8007 17.6382C16.2427 16.924 15.9638 15.9642 15.9638 14.759C15.9638 13.3083 16.3655 12.0919 17.169 11.1098C17.9725 10.1278 19.1331 9.40243 20.6508 8.93373ZM12.9842 8.93373L13.3859 9.90461C12.1807 10.284 11.2656 10.8085 10.6407 11.4781C10.038 12.1254 9.73673 12.8172 9.73673 13.5538C9.73673 14.0671 9.9376 14.3238 10.3393 14.3238C10.5625 14.3238 10.7969 14.2791 11.0424 14.1899C11.3102 14.1006 11.6115 14.056 11.9463 14.056C12.6159 14.056 13.1404 14.268 13.5198 14.6921C13.9216 15.0938 14.1224 15.6183 14.1224 16.2655C14.1224 16.9798 13.8658 17.5712 13.3524 18.0399C12.8391 18.4863 12.1918 18.7095 11.4107 18.7095C10.4509 18.7095 9.69209 18.3524 9.13411 17.6382C8.57613 16.924 8.29715 15.9642 8.29715 14.759C8.29715 13.3083 8.69889 12.0919 9.50238 11.1098C10.3059 10.1278 11.4665 9.40243 12.9842 8.93373Z' fill='%23F18917'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: left top; + pointer-events: none; + z-index: 2; +} + +.spicker_quote::before { + content: ''; + position: absolute; + right: -35px; + top: 0px; + width: 34px; + height: 132px; + background-image: url("data:image/svg+xml,%3Csvg width='34' height='132' viewBox='0 0 34 132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_69_1272)'%3E%3Crect width='33' height='33' transform='translate(0.500046)' fill='%23162427'/%3E%3Crect x='-0.499954' y='-3' width='37' height='37' fill='%23162427'/%3E%3Cpath d='M12.0153 21.9681L11.647 20.9972C12.83 20.6178 13.7339 20.1044 14.3588 19.4572C14.9837 18.7876 15.2962 18.0846 15.2962 17.348C15.2962 16.8124 15.0953 16.5445 14.6936 16.5445C14.4704 16.5445 14.2249 16.6003 13.9571 16.7119C13.7116 16.8012 13.4102 16.8459 13.0531 16.8459C12.4059 16.8459 11.8814 16.645 11.4796 16.2432C11.1002 15.8192 10.9105 15.2835 10.9105 14.6363C10.9105 13.9221 11.156 13.3418 11.647 12.8954C12.1604 12.4267 12.8188 12.1923 13.6223 12.1923C14.5597 12.1923 15.3074 12.5494 15.8653 13.2636C16.4233 13.9555 16.7023 14.9153 16.7023 16.1428C16.7023 17.5935 16.3006 18.8099 15.4971 19.792C14.7159 20.7517 13.5553 21.4771 12.0153 21.9681ZM19.6819 21.9681L19.3136 20.9972C20.4966 20.6178 21.4005 20.1044 22.0254 19.4572C22.6504 18.7876 22.9628 18.0846 22.9628 17.348C22.9628 16.8124 22.7619 16.5445 22.3602 16.5445C22.137 16.5445 21.8915 16.6003 21.6237 16.7119C21.3782 16.8012 21.0769 16.8459 20.7197 16.8459C20.0725 16.8459 19.548 16.645 19.1463 16.2432C18.7668 15.8192 18.5771 15.2835 18.5771 14.6363C18.5771 13.9221 18.8226 13.3418 19.3136 12.8954C19.827 12.4267 20.4854 12.1923 21.2889 12.1923C22.2263 12.1923 22.974 12.5494 23.532 13.2636C24.0899 13.9555 24.3689 14.9153 24.3689 16.1428C24.3689 17.5935 23.9672 18.8099 23.1637 19.792C22.3825 20.7517 21.2219 21.4771 19.6819 21.9681Z' fill='%23F18917'/%3E%3C/g%3E%3Cpath d='M0.499996 33.0001H33.5V66H0.499996V33.0001Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.9999 66V49.5C16.9999 40.425 24.4249 33 33.5 33V49.4999C33.5 58.575 26.0749 66 16.9999 66Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.0001 66V49.5C17.0001 40.425 9.57509 33 0.500051 33V49.4999C0.500051 58.575 7.92506 66 17.0001 66Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M0.62236 66.1226H33.2954V98.7597H0.62236V66.1226Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M33.4184 98.8818L0.499947 66' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M7.14449 98.8301L0.622355 92.3152' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M19.2056 98.5681L0.679973 80.063' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M12.9876 98.7239L0.6226 86.3724' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M26.3071 98.9059L0.650562 73.2776' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M33.3714 66.2212L17.0465 82.528' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M33.2954 74.1776L20.9262 86.5334' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M33.2954 81.5403L24.6882 90.138' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M33.2426 88.455L28.0795 93.6123' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M25.2977 66.1102L12.9285 78.466' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M33.2262 94.7728L31.3373 96.6593' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M1.24998 98.9065H33.337V131H1.24998V98.9065Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.321 98.949C33.2229 107.726 26.0806 114.812 17.2821 114.813C17.3803 106.036 24.5226 98.9501 33.321 98.949Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.24299 98.9491C1.3411 107.726 8.48341 114.812 17.2819 114.813C17.1838 106.036 10.0415 98.9503 1.24299 98.9491Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.3206 114.813C33.2224 123.59 26.0801 130.676 17.2817 130.677C17.3798 121.9 24.5221 114.814 33.3206 114.813Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.24299 114.813C1.3411 123.59 8.48341 130.676 17.2819 130.677C17.1838 121.9 10.0415 114.814 1.24299 114.813Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath d='M17.2933 98.906V130.672' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cdefs%3E%3CclipPath id='clip0_69_1272'%3E%3Crect width='33' height='33' fill='white' transform='translate(0.500046)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: left top; + pointer-events: none; + z-index: 2; +} + +.spicker-left::after{ + content: ''; + position: absolute; + right: -119px; /* Ширина SVG 119px - размещаем полностью справа */ + bottom: -60px; /* Высота SVG 60px - размещаем полностью снизу */ + width: 119px; + height: 60px; + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22119%22%20height%3D%2260%22%20viewBox%3D%220%200%20119%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M60%200.634888H119V58.5014H60V0.634888Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22%20stroke-linejoin%3D%22bevel%22/%3E%3Cpath%20d%3D%22M60.0865%2027.1621L89.5359%2043.838V58.5009L60.0865%2041.8249V27.1621Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22%20stroke-linejoin%3D%22bevel%22/%3E%3Cpath%20d%3D%22M118.985%2027.1621L89.5359%2043.838V58.5009L118.985%2041.8249V27.1621Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22%20stroke-linejoin%3D%22bevel%22/%3E%3Cpath%20d%3D%22M60.0865%200.501289L89.5359%2017.1772V31.8401L60.0865%2015.1642V0.501289Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22%20stroke-linejoin%3D%22bevel%22/%3E%3Cpath%20d%3D%22M118.985%200.501289L89.5359%2017.1772V31.8401L118.985%2015.1642V0.501289Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22%20stroke-linejoin%3D%22bevel%22/%3E%3Cpath%20d%3D%22M30.7693%200.501343H59.7693V29.5013H30.7693V0.501343Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20d%3D%22M45.2693%2029.5013C37.2612%2029.5013%2030.7693%2023.0095%2030.7693%2015.0013C30.7693%206.99321%2037.2612%200.501343%2045.2693%200.501343C53.2774%200.501343%2059.7693%206.99321%2059.7693%2015.0013C59.7693%2023.0095%2053.2774%2029.5013%2045.2693%2029.5013Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20d%3D%22M45.2697%2019.5952C42.7325%2019.5952%2040.6757%2017.5384%2040.6757%2015.0012C40.6757%2012.464%2042.7325%2010.4072%2045.2697%2010.4072C47.8069%2010.4072%2049.8636%2012.464%2049.8636%2015.0012C49.8636%2017.5384%2047.8069%2019.5952%2045.2697%2019.5952Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20d%3D%22M45.2695%2024.5051C40.0206%2024.5051%2035.7655%2020.2501%2035.7655%2015.0012C35.7655%209.75235%2040.0206%205.49731%2045.2695%205.49731C50.5184%205.49731%2054.7734%209.75235%2054.7734%2015.0012C54.7734%2020.2501%2050.5184%2024.5051%2045.2695%2024.5051Z%22%20stroke%3D%22%23006842%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20d%3D%220.683838%200.501343H29.6838V29.5013H0.683838V0.501343Z%22%20stroke%3D%22%23F18917%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.184%2029.4973C23.1151%2029.4085%2029.5175%2022.9533%2029.5188%2015.0015C21.5877%2015.0903%2015.1852%2021.5453%2015.184%2029.4973Z%22%20stroke%3D%22%23F18917%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.184%200.505615C23.1151%200.594243%2029.5176%207.04942%2029.5189%2015.0014C21.5878%2014.9128%2015.1853%208.45763%2015.184%200.505615Z%22%20stroke%3D%22%23F18917%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.1838%2029.4973C7.25273%2029.4085%200.850207%2022.9533%200.849161%2015.0015C8.78027%2015.0903%2015.1828%2021.5453%2015.1838%2029.4973Z%22%20stroke%3D%22%23F18917%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.1837%200.505615C7.25261%200.594243%200.850085%207.04942%200.849039%2015.0014C8.78015%2014.9128%2015.1827%208.45763%2015.1837%200.505615Z%22%20stroke%3D%22%23F18917%22%20stroke-miterlimit%3D%2222.9256%22/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + pointer-events: none; + z-index: 10; +} + +.spicker-content::after { + content: ''; + position: absolute; + right: -27px; /* Выходим за правую границу на ширину SVG */ + bottom: -55px; /* Выходим за нижнюю границу на высоту SVG */ + width: 119px; + height: 60px; + background-image: url("data:image/svg+xml,%3Csvg width='119' height='60' viewBox='0 0 119 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0.634888H119V58.5014H60V0.634888Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M60.0865 27.1621L89.5359 43.838V58.5009L60.0865 41.8249V27.1621Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M118.985 27.1621L89.5359 43.838V58.5009L118.985 41.8249V27.1621Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M60.0865 0.501289L89.5359 17.1772V31.8401L60.0865 15.1642V0.501289Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M118.985 0.501289L89.5359 17.1772V31.8401L118.985 15.1642V0.501289Z' stroke='%23006842' stroke-miterlimit='22.9256' stroke-linejoin='bevel'/%3E%3Cpath d='M30.7693 0.501343H59.7693V29.5013H30.7693V0.501343Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M45.2693 29.5013C37.2612 29.5013 30.7693 23.0095 30.7693 15.0013C30.7693 6.99321 37.2612 0.501343 45.2693 0.501343C53.2774 0.501343 59.7693 6.99321 59.7693 15.0013C59.7693 23.0095 53.2774 29.5013 45.2693 29.5013Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M45.2697 19.5952C42.7325 19.5952 40.6757 17.5384 40.6757 15.0012C40.6757 12.464 42.7325 10.4072 45.2697 10.4072C47.8069 10.4072 49.8636 12.464 49.8636 15.0012C49.8636 17.5384 47.8069 19.5952 45.2697 19.5952Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M45.2695 24.5051C40.0206 24.5051 35.7655 20.2501 35.7655 15.0012C35.7655 9.75235 40.0206 5.49731 45.2695 5.49731C50.5184 5.49731 54.7734 9.75235 54.7734 15.0012C54.7734 20.2501 50.5184 24.5051 45.2695 24.5051Z' stroke='%23006842' stroke-miterlimit='22.9256'/%3E%3Cpath d='M0.683838 0.501343H29.6838V29.5013H0.683838V0.501343Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.184 29.4973C23.1151 29.4085 29.5175 22.9533 29.5188 15.0015C21.5877 15.0903 15.1852 21.5453 15.184 29.4973Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.184 0.505615C23.1151 0.594243 29.5176 7.04942 29.5189 15.0014C21.5878 14.9128 15.1853 8.45763 15.184 0.505615Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1838 29.4973C7.25273 29.4085 0.850207 22.9533 0.849161 15.0015C8.78027 15.0903 15.1828 21.5453 15.1838 29.4973Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1837 0.505615C7.25261 0.594243 0.850085 7.04942 0.849039 15.0014C8.78015 14.9128 15.1827 8.45763 15.1837 0.505615Z' stroke='%23F18917' stroke-miterlimit='22.9256'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + pointer-events: none; + z-index: 10; +} + }