src/style/style.css - master - Saypi/test-task-only

src/style/style.css
275 строк6 KB
Saipykurbanov
UPD
02 авг 2025, 02:36
02 авг 2025, 02:369167ada
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
/*-------------Миксины----------------*/
/*--------------*/
:root {
  --main-font: "PT Sans", sans-serif;
  --bebas: "Bebas Neue", sans-serif;
  --black-blue: #42567A;
  --black-blue-20: #42567a33;
  --blue: #3877EE;
  --purple: #EF5DA8;
  --iris: #5D5FEF;
  --background: #ffffff;
  --grey: #C7CDD9;
}

/*--------Обнуление----------*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

[inert], [inert] * {
  opacity: 0.3;
}

html, body {
  max-width: 100%;
  min-width: 320px;
  font-size: 100%;
  font-weight: 400;
  line-height: 1;
  font-size: 14px;
  font-family: var(--main-font);
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color: var(--text-color-light);
  background: var(--background);
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
  background: transparent;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
  background: transparent;
}

a, a:visited {
  text-decoration: none;
  color: var(--text-color-light);
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 400;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
  background-color: var(--background) !important;
  color: var(--text-color-light) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--background) inset !important;
  -webkit-text-fill-color: var(--text-color-light) !important;
  -webkit-transition: background-color 0s 600000s, color 0s 600000s;
  transition: background-color 0s 600000s, color 0s 600000s;
  caret-color: var(--text-color-light);
  box-shadow: 0 0 0px 1000px white inset !important; /* Заливаем белым */
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s; /* Убираем анимацию */
  caret-color: var(--black-grey) !important;
}

input::-moz-placeholder {
  color: #000;
}

input::placeholder {
  color: #000;
}
@media (max-width: 768px) {
  input::-moz-placeholder {
    font-size: calc(14px + 3.4 * (100vw - 320px) / 1920);
  }
  input::placeholder {
    font-size: calc(14px + 3.4 * (100vw - 320px) / 1920);
  }
}
@media (min-width: 768px) {
  input::-moz-placeholder {
    font-size: calc(14px + 2 * 0.0520833333vw);
  }
  input::placeholder {
    font-size: calc(14px + 2 * 0.0520833333vw);
  }
}

input {
  border-radius: 0 !important;
  caret-color: #000 !important;
}
input:disabled {
  background-color: transparent !important;
}

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* для старых версий WebKit (Safari, Chrome до версии 76) */
  -moz-user-select: none; /* для Firefox */
  -ms-user-select: none; /* для Internet Explorer/Edge */ /* стандартное свойство */
}

hr {
  width: 100%;
  height: 1px;
  background-color: var(--grey3);
}

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--grey3);
}
body::before {
  content: "";
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(31, 32, 34, 0.2);
  z-index: 99;
  -webkit-backdrop-filter: blur(1.5px);
          backdrop-filter: blur(1.5px);
  animation: Open 1s forwards ease;
}

.main_container {
  position: relative;
  width: 100%;
  max-width: 1760px;
  padding: 0 160px;
  margin-left: auto;
}
@media screen and (max-width: 1700px) and (max-width: 768px) {
  .main_container {
    padding-left: calc(0px + 170 * (100vw - 320px) / 1920);
  }
}
@media screen and (max-width: 1700px) and (min-width: 768px) {
  .main_container {
    padding-left: calc(0px + 100 * 0.0520833333vw);
  }
}
@media screen and (max-width: 1700px) and (max-width: 768px) {
  .main_container {
    padding-right: calc(0px + 170 * (100vw - 320px) / 1920);
  }
}
@media screen and (max-width: 1700px) and (min-width: 768px) {
  .main_container {
    padding-right: calc(0px + 100 * 0.0520833333vw);
  }
}
@media screen and (max-width: 768px) {
  .main_container {
    padding: 0 20px;
  }
}
.main_container .wrapper {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  border-left: 1px solid var(--black-blue-20);
  border-right: 1px solid var(--black-blue-20);
  display: flex;
  flex-direction: column;
  gap: 0px;
}
@media (max-width: 768px) {
  .main_container .wrapper {
    padding-top: calc(60px + 187 * (100vw - 320px) / 1920);
  }
}
@media (min-width: 768px) {
  .main_container .wrapper {
    padding-top: calc(60px + 110 * 0.0520833333vw);
  }
}
@media (max-width: 768px) {
  .main_container .wrapper {
    padding-bottom: calc(15px + 59.5 * (100vw - 320px) / 1920);
  }
}
@media (min-width: 768px) {
  .main_container .wrapper {
    padding-bottom: calc(15px + 35 * 0.0520833333vw);
  }
}
.main_container .wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: var(--black-blue-20);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 991px) {
  .main_container .wrapper {
    border: 0;
  }
  .main_container .wrapper::after {
    display: none;
  }
}

@keyframes Open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}/*# sourceMappingURL=style.css.map */