src/css/style.css - master - engineunity_sub/doxml_work_site

src/css/style.css
308 строк8 KB
PauloChaser
move content from branch dev to master
12 фев 2025, 18:06
12 фев 2025, 18:06a2e2735
@import "fonts.css";

@import "blocks/container.css";
@import "blocks/banner.css";
@import "blocks/breadcrumbs.css";
@import "blocks/cookie.css";
@import "blocks/form.css";
@import "blocks/modal.css";
@import "blocks/splider.css";
@import "blocks/textContent.css";

@import "sections/header.css";
@import "sections/mainBanner.css";
@import "sections/feedbackPage.css";
@import "sections/mainAbout.css";
@import "sections/footer.css";
@import "sections/about.css";
@import "sections/faqAccordion.css";
@import "sections/faqBanner.css";
@import "sections/contacts.css";
@import "sections/tariffs.css";



:root {
  --black: #1d1e21;
  --gray: #a5a5a5;
  --gray-2: #cfcfcf;
  --light-gray: #9F9F9F19;
  --blue: #3384ff;
  --bg-color: #3384FF19;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:focus-visible {
  outline: none
}

/* scroll */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 150, 150, 0.5) transparent;
}

*::-webkit-scrollbar {
  height: 12px;
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.5);
  border-radius: 5px;
  border: 3px solid transparent;
}

/* end - scroll */

html,
body {
  font-family: "Grandis", sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100vw;
  scroll-behavior: smooth;
}

body {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTczNyIgaGVpZ2h0PSIxMjA2IiB2aWV3Qm94PSIwIDAgMTczNyAxMjA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTczNi45MiAyMzAuMTQ4VjM3Mi40NzdMMTUyMC40MyA2MDIuNjI1SDE0MjIuMjRWNTAyLjMxNEgxNDgxLjM5TDE2NzAuMiAzMDEuMzEyTDE0ODMuOTkgMTAzLjA4N0wxNDg0LjU4IDEwMS42OTlMMTQ4My40IDEwMC40MzdIMTQ4MS41MUwxNDgyLjY5IDEwMS42OTlMMTQ4My45OSAxMDMuMDg3TDE0MjcuOCAyNDAuNDk1QzE0MTUuMjYgMjcxLjE1NiAxNDAyLjcyIDMwMS44MTcgMTM5MC4xOCAzMzIuNDc4TDEyODEuNDYgNTk4LjQ2MUwxMjc5LjgxIDYwMi42MjVIMTE4Mi4wOUw5NjMgMzcyLjQ3N1YyMzAuMTQ4TDExODIuMDkgMEgxMjgxLjQ2VjEwMC40MzdIMTIyMS40OUwxMDMwLjMxIDMwMS4zMTJMMTIxOS4xMiA0OTkuNjY0TDEyMTguMDUgNTAyLjMxNEgxMjIxLjZMMTIxOS4xMiA0OTkuNjY0TDEzMDMuOTQgMjkyLjM1NEMxMzE2LjQ4IDI2MS42OTMgMTMyOS4wMiAyMzEuMDMxIDEzNDEuNTYgMjAwLjI0NEwxNDIyLjI0IDMuMDI4MjdMMTQyMy40MiAwLjEyNjE3OEgxNTIwLjQzTDE1MjMuMTUgMi45MDIwOUwxNzM2LjkyIDIzMC4xNDhaIiBmaWxsPSIjMzM4NEZGIiBmaWxsLW9wYWNpdHk9IjAuMSIvPgo8cGF0aCBkPSJNNzczLjkxOCA4MzMuMTQ4Vjk3NS40NzdMNTU3LjQyOSAxMjA1LjYySDQ1OS4yNFYxMTA1LjMxSDUxOC4zOUw3MDcuMTk2IDkwNC4zMTJMNTIwLjk5MiA3MDYuMDg3TDUyMS41ODQgNzA0LjY5OUw1MjAuNDAxIDcwMy40MzdINTE4LjUwOEw1MTkuNjkxIDcwNC42OTlMNTIwLjk5MiA3MDYuMDg3TDQ2NC44IDg0My40OTVDNDUyLjI2IDg3NC4xNTYgNDM5LjcyMSA5MDQuODE3IDQyNy4xODEgOTM1LjQ3OEwzMTguNDYzIDEyMDEuNDZMMzE2LjgwNyAxMjA1LjYySDIxOS4wOTFMMCA5NzUuNDc3VjgzMy4xNDhMMjE5LjA5MSA2MDNIMzE4LjQ2M1Y3MDMuNDM3SDI1OC40ODVMNjcuMzEyNiA5MDQuMzEyTDI1Ni4xMTkgMTEwMi42NkwyNTUuMDU0IDExMDUuMzFIMjU4LjYwM0wyNTYuMTE5IDExMDIuNjZMMzQwLjk0IDg5NS4zNTRDMzUzLjQ4IDg2NC42OTMgMzY2LjAyIDgzNC4wMzEgMzc4LjU1OSA4MDMuMjQ0TDQ1OS4yNCA2MDYuMDI4TDQ2MC40MjMgNjAzLjEyNkg1NTcuNDI5TDU2MC4xNSA2MDUuOTAyTDc3My45MTggODMzLjE0OFoiIGZpbGw9IiM5RjlGOUYiIGZpbGwtb3BhY2l0eT0iMC4xIi8+Cjwvc3ZnPgo=");
  background-size: 120%;
  background-position: top 45px left 0;
  background-attachment: scroll;
}

.title {
  line-height: 130%;
  color: var(--black)
}

.userAgreement,
.cookiePolicy {
  margin-bottom: 40px;
}

.form {
  position: relative
}

.cookie__link {
  text-decoration: none
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

input, textarea {
  outline: 0;
  border: none
}

.title {
  font-weight: 700
}

.title--h2 {
  font-size: 40px
}

.text {
  line-height: 150%;
}

.text--p1, .title--h3 {
  font-size: 22px
}

.text {
  font-weight: 400
}

.text--p2 {
  font-size: 18px
}

.text--p3 {
  font-size: 16px
}

.text--gray {
  color: var(--gray)
}

.loading .form__buttonText {
  display: none
}

.privacyPolicy {
  padding: 40px;
}

#open-privacy-policy-modal {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer
}

@media screen and (max-width: 991px) {
  body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMyIgdmlld0JveD0iMCAwIDQwMCA2MDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01OTEuOTU5IDExNS4wNzRWMTg2LjIzOEw0ODMuNzE0IDMwMS4zMTJINDM0LjYyVjI1MS4xNTdINDY0LjE5NUw1NTguNTk4IDE1MC42NTZMNDY1LjQ5NiA1MS41NDM2TDQ2NS43OTIgNTAuODQ5Nkw0NjUuMjAxIDUwLjIxODdINDY0LjI1NEw0NjQuODQ2IDUwLjg0OTZMNDY1LjQ5NiA1MS41NDM2TDQzNy40IDEyMC4yNDdDNDMxLjEzIDEzNS41NzggNDI0Ljg2IDE1MC45MDkgNDE4LjU5IDE2Ni4yMzlMMzY0LjIzMiAyOTkuMjMxTDM2My40MDMgMzAxLjMxMkgzMTQuNTQ2TDIwNSAxODYuMjM4VjExNS4wNzRMMzE0LjU0NiAwSDM2NC4yMzJWNTAuMjE4N0gzMzQuMjQzTDIzOC42NTYgMTUwLjY1NkwzMzMuMDYgMjQ5LjgzMkwzMzIuNTI3IDI1MS4xNTdIMzM0LjMwMkwzMzMuMDYgMjQ5LjgzMkwzNzUuNDcgMTQ2LjE3N0MzODEuNzQgMTMwLjg0NiAzODguMDEgMTE1LjUxNiAzOTQuMjggMTAwLjEyMkw0MzQuNjIgMS41MTQxM0w0MzUuMjExIDAuMDYzMDg4OUg0ODMuNzE0TDQ4NS4wNzUgMS40NTEwNEw1OTEuOTU5IDExNS4wNzRaIiBmaWxsPSIjMzM4NEZGIiBmaWxsLW9wYWNpdHk9IjAuMSIvPgo8cGF0aCBkPSJNMjI5Ljk1OSA0MTYuNTc0VjQ4Ny43MzhMMTIxLjcxNCA2MDIuODEySDcyLjYyVjU1Mi42NTdIMTAyLjE5NUwxOTYuNTk4IDQ1Mi4xNTZMMTAzLjQ5NiAzNTMuMDQ0TDEwMy43OTIgMzUyLjM1TDEwMy4yMDEgMzUxLjcxOUgxMDIuMjU0TDEwMi44NDYgMzUyLjM1TDEwMy40OTYgMzUzLjA0NEw3NS40IDQyMS43NDdDNjkuMTMwMSA0MzcuMDc4IDYyLjg2MDMgNDUyLjQwOSA1Ni41OTA0IDQ2Ny43MzlMMi4yMzE1OCA2MDAuNzMxTDEuNDAzNDkgNjAyLjgxMkgtNDcuNDU0M0wtMTU3IDQ4Ny43MzhWNDE2LjU3NEwtNDcuNDU0MyAzMDEuNUgyLjIzMTU4VjM1MS43MTlILTI3Ljc1NzRMLTEyMy4zNDQgNDUyLjE1NkwtMjguOTQwNCA1NTEuMzMyTC0yOS40NzI4IDU1Mi42NTdILTI3LjY5ODNMLTI4Ljk0MDQgNTUxLjMzMkwxMy40NzAxIDQ0Ny42NzdDMTkuNzQgNDMyLjM0NiAyNi4wMDk4IDQxNy4wMTYgMzIuMjc5NyA0MDEuNjIyTDcyLjYyIDMwMy4wMTRMNzMuMjExNSAzMDEuNTYzSDEyMS43MTRMMTIzLjA3NSAzMDIuOTUxTDIyOS45NTkgNDE2LjU3NFoiIGZpbGw9IiM5RjlGOUYiIGZpbGwtb3BhY2l0eT0iMC4xIi8+Cjwvc3ZnPgo=");
    background-size: 100%;
    background-position: top 15px center
  }

  .title--h2 {
    font-size: 24px;
  }

  .text--p1, .title--h3 {
    font-size: 14px
  }

  .form__input, .text--p2 {
    font-size: 12px
  }

  .text--p3 {
    font-size: 12px;
  }

  .privacyPolicy {
    padding-top: 0;
  }

}


/*Страница about - Advantages Section
 Плюс страница links.html и products.html
 */
.advantages,
.links,
.products {
  text-align: center;
  margin-bottom: 80px;
}

.advantages__title {
  margin-bottom: 30px;
  text-align: start;
}

.advantages__cards,
.links__items,
.products__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.advantages__card,
.links__item,
.links__text,
.products__item,
.products__text {
  max-width: 900px;
  text-align: left;
}

.links__item,
.products__item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}

.advantages__cardTitle,
.links__itemTitle,
.products__itemTitle {
  color: var(--black);
  margin-bottom: 10px;
}

.advantages__cardText,
.links__itemText,
.links__text,
.products__itemText,
.products__text {
  color: var(--gray);
}

.links__text,
.products__text {
  margin-bottom: 30px;
}

.links__item a,
.products__item a {
  color: var(--blue);
  text-decoration: none;
  margin-left: 10px;
}

.links__item a:hover,
.products__item a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .aboutBanner,
  .bannerLinks,
  .bannerProducts {
    padding: 40px;
    margin-bottom: 60px;
  }

  .links__item,
  .products__item {
    gap: 20px;
    margin-top: 10px;
  }

  .links__text {
    margin-bottom: 20px;
  }

}

@media (max-width: 768px) {
  .aboutBanner,
  .bannerLinks,
  .bannerProducts {
    min-height: 400px;
  }
}

@media (max-width: 550px) {
  .aboutBanner,
  .bannerLinks,
  .bannerProducts {
    min-height: 300px;
  }

  .advantages__cards {
    flex-direction: column;
  }



  .advantages__card {
    width: 100%;
  }
}