body{ width: 100%; height: auto; /* background-image: url('/image/main-fon.jpg'); */ background-color: #000; /* background: linear-gradient(to bottom, #b3d9f7, #dff7d1); */ background: linear-gradient(135deg, #b19cd9, #d1c3f5, #d9eaf5, #aad4f3, #b2ebd2, #f9f7d9); background-size: 300% 300%; animation: gradientAnimation 7s infinite alternate; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .content{ padding: 16px; } .header-top{ display: flex; flex-direction: column; } .message-fixed{ display: flex; flex-direction: column; position: fixed; top: 0; width: 100%; z-index: 1; padding-top: 70px; padding-left: 14px; padding-right: 14px; padding-bottom: 14px; background-color: transparent; } .message-fixed.active{ background-color: #b3d9f7; } .message-fixed span{ font-size: 24px; font-family: 'UaLight'; } .header-top span{ font-size: 24px; } .header-top span:last-child{ font-size: 14px; margin-top: 110px; } #mss1{ font-family: 'UaLight'; } .header-top-top, .news-top-top { overflow: hidden; position: relative; width: 100%; margin-top: 14px; } .new-notify, .news-notify { display: flex; transition: transform 0.3s ease; } .new-notify .message { flex: 0 0 95%; min-width: 95%; margin-right: 10px; background-color: #fff; border-radius: 12px; padding: 16px; } .new-notify #message-1{ margin-left: 0; } .news-notify .news { flex: 0 0 95%; min-width: 95%; margin-right: 10px; background-color: #fff; border-radius: 12px; } .news-notify #news-1 { min-width: 100%; flex: 0 0 100%; } .news-notify #news-1 img, .news-notify #news-2 img, .news-notify #news-3 img{ width: 100%; border-radius: 12px; } .new-notify #message-2{ min-width: 85%; flex: 0 0 85%; } .news-notify #news-2 { min-width:100%; flex: 0 0 100%; margin-left: -10px; } .news-notify #news-3{ min-width: 100%; flex: 0 0 100%; margin-left: -10px; } .message span, .news span { display: block; margin-bottom: 8px; font-size: 12px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } #message-3, #news-3{ text-align: center; align-items: center; display: flex; justify-content: center; background-color: rgba(213, 231, 243); } #message-3 i, #news-3 i{ font-size: 18px; margin-right: 5px; } #message-3 span, #news-3 span{ display: flex; font-size: 13px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .message span:last-child, .news span:last-child{ font-size: 16px; } .message:last-child span, .news:last-child span { margin-bottom: 0; } .count-message, .count-news { text-align: center; margin-top: 10px; } .count-message span, .count-news span { display: inline-block; width: 10px; height: 10px; background-color: #fff; border-radius: 100px; margin-left: 5px; cursor: pointer; outline: none; } .count-message span.active, .count-news span.active { background-color: #000; color: #fff; } .header-bottom{ margin-top: 20px; } .nezlamnist{ display: flex; flex-direction: column; width: 100%; padding: 16px; background-color: rgba(213, 231, 243); border-radius: 12px; } .nezlamnist span{ font-size: 20px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 600; } #mapa-nez-box{ font-size: 13px; font-weight: 400; margin-top: 5px; } .nezlamnist div { margin-top: 8px; display: flex; justify-content: space-between; text-align: center; align-items:center; } .nezlamnist div img{ width: 50px; } #right-right{ font-size: 22px; } .header-bottom-bottom{ margin-top: 30px; display: flex; justify-content: space-around; } .header-bottom-bottom .qr-code, .header-bottom-bottom .viyskovi-obligacii, .header-bottom-bottom .chatbot-e-vorog{ display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; } .header-bottom-bottom .qr-code span, .header-bottom-bottom .viyskovi-obligacii span, .header-bottom-bottom .chatbot-e-vorog span{ margin-top: 5px; font-size: 14px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .header-bottom-bottom .qr-code #qr-code-img, .header-bottom-bottom .viyskovi-obligacii #viyskovi-obligacii-img, .header-bottom-bottom .chatbot-e-vorog #chatbot-e-vorog{ display: flex; justify-content: center; text-align: center; align-items: center; background-color: #000; width: 50px; height: 50px; border-radius: 15px; } .header-bottom-bottom .qr-code #qr-code-img img, .header-bottom-bottom .viyskovi-obligacii #viyskovi-obligacii-img img, .header-bottom-bottom .chatbot-e-vorog #chatbot-e-vorog img{ width: 30px; } .card-1000grn{ margin-top: 30px; } .card-1000grn img{ width: 100%; height: 100%; border-radius: 10px; } .news{ margin-top: 20px; } .news span{ font-size: 15px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .popularni-poslugy{ margin-top: 10px; margin-bottom: 75px; } .popularni-poslugy span{ font-size: 15px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .box-popularnyh-poslug{ width: 100%; height: auto; background-color: #fff; margin-top: 15px; border-radius: 12px; } .box-popularnyh-poslug div{ padding: 12px; display: flex; justify-content: space-between; text-align: center; align-items: center; } .box-popularnyh-poslug div span{ font-size: 15px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .box-popularnyh-poslug div i{ font-size: 20px; } .box-popularnyh-poslug hr{ border: 1px solid rgba(213, 231, 243); } /* menu */ .menu-mobile{ position: fixed; bottom: 0; width: 100%; height: 85px; background-color: #000; } .menu-mobile ul{ display: flex; flex: 1; justify-content: space-around; padding: 6px; } .menu-mobile ul li{ color: #fff; display: flex; flex-direction: column; text-align: center; align-items: center; padding: 5px; } .menu-mobile ul li img{ width: 26px; height: 26px; } #icon-menu-4{ width: 30px; height: 28px; } #icon-menu-1-hover, #icon-menu-2-hover, #icon-menu-3-hover, #icon-menu-4-hover{ display: none; width: 26px; height: 26px; } #icon-menu-4.active{ width: 999px; } .menu-mobile ul li a{ font-size: 12px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin-top: 5px; } /* position: relative; overflow: hidden; */ #document { width: 100%; height: 90vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #f1e5f9 5%, /* Фиолетовый сверху */ #f9f4d2 20%, /* Желтый заливающий фон */ #dce9f9 50%, /* Голубой основной */ #d5f9e3 70%, /* Голубой с зеленым оттенком справа */ #f9f2d2 90% /* Желтый слева снизу */ ); background-size: 600% 600%; animation: gradientAnimation 16s ease infinite; } @keyframes gradientAnimation { 0% { background-position: 0% 0%; } 25% { background-position: 50% 50%; } 50% { background-position: 100% 100%; } 75% { background-position: 50% 50%; } 100% { background-position: 0% 0%; } } #list-document { overflow: hidden; position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; align-items: center; gap: 15px; width: 100%; height: 100%; padding: 0 20px; box-sizing: border-box; position: relative; scroll-padding-left: 20px; transition: transform 0.3s ease, opacity 0.3s ease; padding-top: 80px; } .document.active { width: 84%; height: 63.5%; opacity: 1; visibility: visible; } .document.inactive { height: 53%; opacity: 1; } .document-1{ margin-left: 15px; } .document { min-width: 90%; height: 40%; background: linear-gradient(180deg, #ffffff, #e2dff8); border-radius: 15px; position: relative; transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; scroll-snap-align: center; margin-top: -30px; } .document .content-doc.active { opacity: 1; } .document .content-doc.inactive { opacity: 0; } .content-doc{ margin-top: 10px; } #nazva-doc { width: 100%; height: 40px; margin-left: 12px; font-size: 22px; font-weight: 500; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .hr-line { overflow: hidden; white-space: nowrap; width: 100%; background: linear-gradient(90deg, #afffc4, #85dcc4); position: relative; padding: 5px; text-align: center; align-items: center; font-family: "UaUltraLight"; font-weight: 700; font-size: 12px; } #line-span { display: inline-block; font-family: "UaUltraLight"; line-height: 1.5; font-size: 12px; } .box-doc { display: flex; } .box-doc img { width: 150px; height: 186px; border-radius: 10px; object-fit: cover; object-position: center; margin-top: 20px; margin-bottom: 20px; margin-left: 12px; } #block-data-of-birht { display: flex; flex-direction: column; margin-left: 25px; margin-top: 20px; font-family:'UaLight'; } #block-data-of-birht span { font-size: 14px; } #block-data-of-birht span:last-child { margin-top: 10px; } .hr-line { margin-top: 30px; } .data-user { margin-left: 12px; margin-top: 15px; display: flex; flex-direction: column; font-size: 24px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .data-user span { margin-top: 4px; font-weight: 450; font-family:'UaHeadRegular'; } .data-user div { display: flex; justify-content: space-between; margin-right: 12px; } .data-user div i { background-color: #000; color: #fff; border-radius: 100px; display: flex; justify-content: center; align-items: center; text-align: center; padding: 4px; } #document #count-document{ display: flex; text-align: center; justify-content: center; position: absolute; bottom: 0; left: calc(40%); top: 82%; } #document #count-document span{ margin-left: 4px; margin-right: 4px; background-color: #eee; width: 8px; height: 8px; border-radius: 100px; margin-top: 15px; margin-bottom: 20px; color: transparent; } #document #count-document span { cursor: pointer; transition: background-color 0.3s ease; } #document #count-document span.active { background-color: #fff; /* Цвет кнопки при активном слайде */ } /* more info doc */ .more-info-document-1{ border-top-left-radius: 10px; border-top-right-radius: 10px; position: fixed; top: 0; background-color: #ebebeb; width: 100%; left: 0; right: 0; bottom: 0; z-index: 999; display: none; } #close-doc-1-menu{ width: 100%; padding: 6px; background-color: #fff; display: flex; justify-content: center; text-align: center; align-items: center; } #close-doc-1-menu span{ width: 100px; height: 6px; border-radius: 100px; background-color: #eee; } .doc-dta .head-logo{ font-size: 23px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; padding: 20px; background-color: #fff; } .doc-dta .hr-line{ margin-top: 0; } .ddc-dcc-d-1{ padding: 20px; } .ddt-ddc-more, .ddt-dcc-more-2{ width: 100%; height: 100%; background-color: #fff; padding: 14px; border-radius: 12px; } .ddt-dcc-more-2{ margin-top: 10px; } .ddt-ddc-more-2{ margin-top: 10px; width: 100%; height: 100%; background-color: #fff; padding: 14px; border-radius: 12px; } .ddt-ddc-more-2 .blocxx-1{ display: flex; justify-content: space-between; width: 50%; } .ddt-ddc-more-2 .blocxx-1 span:last-child{ font-size: 12px; } .n-l-o{ display: flex; flex-direction: column; } .n-l-o #name-lastname{ display: flex; } #name-lastname span{ margin-right: 10px; font-size: 20px; } .n-l-o span{ font-size: 20px; } #otchestvo-info-more{ margin-top: 2px; } #name-lastname-en{ display: flex; margin-top: 10px; } #name-lastname-en span{ margin-right: 5px; } .ddta-2{ display: flex; margin-top: 10px; } #user-more-info{ width: 150px; height: 180px; } .ddta-2 #blocx-2{ display: flex; flex-direction: column; margin-left: 15px; } .document { display: flex; perspective: 1000px; width: 100%; height: 400px; position: relative; transition: background 1s ease; } .content-doc, .content-ugol-doc { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: transform 0.30s ease; } .content-doc { width: 100%; height: 100%; border-radius: 12px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(180deg, #ffffff, #e2dff8);; } .content-ugol-doc { background-color: white; border-radius: 12px; transform: rotateY(180deg); } .document.activee .content-doc { transform: rotateY(-180deg); } .document.activee .content-ugol-doc { transform: rotateY(0deg); } #menu-doc-1, #menu-doc-2, #menu-doc-3{ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.404); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; padding: 0; margin: 0; display: none; box-sizing: border-box; justify-content: center; } .menu-doc-1-block-active, .menu-doc-2-block-active, .menu-doc-3-block-active{ position: absolute; bottom: 10px; width: 95%; } .menu-doc-1-block-active div, .menu-doc-2-block-active div, .menu-doc-3-block-active div{ background-color: #fff; margin-bottom: 10px; padding: 12px; border-radius: 20px; font-size: 14px; font-family: "UaLight"; font-weight: 700; text-align: center; align-items: center; } .menu-doc-1-block-active div div, .menu-doc-2-block-active div div, .menu-doc-3-block-active div div{ display: flex; } .menu-doc-1-block-active div div img, .menu-doc-2-block-active div div img, .menu-doc-3-block-active div div img{ width: 22px; } .menu-doc-1-block-active div div span, .menu-doc-2-block-active div div span, .menu-doc-3-block-active div div span{ margin-left: 13px; } .menu-doc-1-block-active div:last-child button, .menu-doc-2-block-active div:last-child button, .menu-doc-3-block-active div:last-child button{ width: 100%; background-color: transparent; border: none; font-size: 14px; font-family: "UaLight"; font-weight: 700; } .document, .content-doc { transition: transform 0.2s ease, opacity 0.2s ease; } .document.active, .content-doc.active { opacity: 1; } .document.inactive, .content-doc.inactive { opacity: 0.5; } .profile { display: none; background-color: #fff; border-radius: 10px; padding: 20px; width: 100%; text-align: center; } .profile button{ margin-bottom: 20px; } .profile div { display: flex; flex-direction: column; align-items: center; } .profile img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; background-color: #ddd; } .profile input[type="text"], .profile input[type="date"], .profile select { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; outline: none; } .profile input[type="text"]::placeholder, .profile input[type="date"]::placeholder { color: #aaa; } .profile span { display: block; margin-top: 10px; font-size: 14px; color: #666; } .profile #add-podpis { width: 100%; height: 150px; border: 1px dashed #ccc; background-color: #f9f9f9; cursor: crosshair; margin-top: 20px; position: relative; margin-bottom: 100px; } .profile #add-podpis canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .profile #add-podpis span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #999; pointer-events: none; } .profile button { margin-top: 20px; padding: 10px 15px; border: none; border-radius: 5px; background-color: #007bff; color: white; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .profile button:hover { background-color: #0056b3; } .signature-component { text-align: left; display: inline-block; } .signature-component h1 { margin-bottom: 0; } .signature-component h2 { margin: 0; font-size: 100%; } .signature-component canvas { display: block; position: relative; border: 1px solid; } .signature-component img { position: absolute; left: 0; top: 0; } /* services page */ #services{ width: 100%; height: 100vh; } .message-services { padding-top: 50px; padding-left: 14px; padding-right: 14px; padding-bottom: 14px; position: fixed; top: 0; width: 100%; z-index: 1; background-color: transparent; } .message-services.active { background-color: #b3d9f7; } .message-services span { font-size: 24px; font-weight: 450; color: #000; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .content-serv{ padding: 16px; margin-top: 60px; } .content-serv .search{ display: flex; width: 100%; background-color: #fff; padding: 12px; border-radius: 14px; text-align: center; align-items: center; margin-top: 15px; } .content-serv .search input{ width: 100%; outline: none; border: none; color: #ccc; margin-left: 6px; background-color: transparent; } .content-serv .search i{ margin-left: 2px; font-size: 18px; color: #ccc; } .content-center-services { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 65px; } .boxes-serv { display: flex; flex-direction: column; border-radius: 12px; width: 175px; height: 120px; padding: 12px; position: relative; background-color: rgb(220, 235, 245); } .boxes-serv img{ width: 35px; height: 35px; } .boxes-serv span{ position: absolute; bottom: 0; margin-bottom: 12px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 14px; } /* settings page */ #profile{ width: 100%; height: 92vh; } #profile .message-settings { display: flex; flex-direction: column; position: fixed; top: 0; width: 100%; z-index: 1; padding-top: 70px; padding-left: 14px; padding-right: 14px; padding-bottom: 14px; background-color: transparent; } .message-settings.active { background-color: #b3d9f7; } .message-settings span { font-size: 24px; font-weight: 450; color: #000; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .message-settings span:last-child{ font-size: 14px; margin-top: 8px; color: #9e9d9d; } .settings-center{ margin-top: 115px; display: flex; flex-direction: column; padding: 16px; } .boxes-profile{ margin-top: 13px; } .boxes-profile div{ display: flex; align-items: center; padding: 14px; border-radius: 12px; background-color: #fff; } .boxes-profile-2 { display: flex; flex-direction: column; margin-top: 13px; border-radius: 12px; background-color: #fff; } .boxes-profile-2 div{ display: flex; width: 100%; padding: 14px; align-items: center; } .boxes-profile div span, .boxes-profile-2 div span{ margin-left: 10px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 14px; } .boxes-profile div img, .boxes-profile-2 div img{ width: 25px; } .button-settings{ width: 100%; display: flex; justify-content: center; } .button-settings button{ width: 43%; font-size: 15px; color: #fff; border-radius: 25px; border: none; background-color: #000; padding: 15px; margin-top: 10px; } #text-fixed-settings-bottom{ width: 100%; text-align: center; align-items: center; display: flex; justify-content: center; margin-top: 25px; font-size: 14px; color: #000; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-decoration: underline; }