diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..66fc092 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,8950 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +@import url(fonts.css); +@import url(jquery.fancybox.css); +@import url(jquery.select2.css); +@import url(star-rating.min.css); +@import url(swiper.css); +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type=checkbox], +[type=radio] { + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type=search] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +.green { + color: #377d87; +} + +.red { + color: #eb5757; +} + +.rotate180 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +::-moz-selection { + color: #000; + background: #acc0e6; +} + +::selection { + color: #000; + background: #acc0e6; +} + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + border-radius: 999px; + background-color: #fff; +} + +::-webkit-scrollbar-thumb { + border-radius: 999px; + background-color: #377d87; +} + +::-webkit-input-placeholder { + color: #9c9d9d; + opacity: 1; +} + +:focus::-webkit-input-placeholder { + color: transparent; +} + +:-ms-input-placeholder { + color: #9c9d9d; + opacity: 1; +} + +:focus:-ms-input-placeholder { + color: transparent; +} + +::-ms-input-placeholder { + color: #9c9d9d; + opacity: 1; +} + +:focus::-ms-input-placeholder { + color: transparent; +} + +::-moz-placeholder { + color: #9c9d9d; + opacity: 1; +} + +:focus::-moz-placeholder { + color: transparent; +} + +::-webkit-input-placeholder { + color: #9c9d9d; + opacity: 1; +} + +::-moz-placeholder { + color: #9c9d9d; + opacity: 1; +} + +:-ms-input-placeholder { + color: #9c9d9d; + opacity: 1; +} + +::-ms-input-placeholder { + color: #9c9d9d; + opacity: 1; +} + +::placeholder { + color: #9c9d9d; + opacity: 1; +} + +:focus::-webkit-input-placeholder { + color: transparent; +} + +:focus::-moz-placeholder { + color: transparent; +} + +:focus:-ms-input-placeholder { + color: transparent; +} + +:focus::-ms-input-placeholder { + color: transparent; +} + +:focus::placeholder { + color: transparent; +} + +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +a, +button, +select { + color: inherit; +} + +a { + text-decoration: none; +} + +a, +input[type=button], +input[type=submit], +button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: 0.3s; + transition: 0.3s; + cursor: pointer; +} + +[type=tel] { + letter-spacing: 1px; +} + +.br, +img, +svg { + display: block; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.clear-both:after { + content: ""; + display: block; + clear: both; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +#body { + font-family: "Circe", sans-serif; + color: #000; + background: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 50px; + min-width: 320px; + min-height: 100vh; + line-height: 1.25; +} +@media (min-width: 768px) { + #body { + gap: 60px; + } +} +#body.pdf { + gap: 0; +} + +.container { + width: 100%; + max-width: 1280px; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; +} +@media (min-width: 768px) { + .container { + padding-left: 20px; + padding-right: 20px; + } +} + +.to-top { + position: fixed; + right: 10px; + bottom: 10px; + border-radius: 999px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #fff; + background: #377d87; + width: 40px; + height: 40px; + -webkit-transition: 0.3s; + transition: 0.3s; + margin-right: -100px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + z-index: 99; + border: 1px solid #377d87; +} +.to-top:hover { + background: #fff; + color: #377d87; +} +.to-top svg { + width: 10px; + height: 10px; +} +@media (min-width: 768px) { + .to-top { + width: 50px; + height: 50px; + right: 20px; + bottom: 20px; + } + .to-top svg { + width: 12px; + height: 12px; + } +} + +.begin .to-top { + margin-right: 0; +} + +.socials { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + gap: 8px; +} +.socials a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + border: 1px solid #377d87; + color: #377d87; + border-radius: 999px; + width: 38px; + height: 38px; +} +.socials a:hover { + background: #377d87; + color: #fff; +} +.socials svg { + width: 12px; + height: 12px; +} + +.nls { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: #000; + text-align: left; +} +.nls:hover { + color: #377d87; +} +.nls svg { + width: 30px; + height: 40px; +} +@media (min-width: 768px) { + .nls svg { + width: 24px; + height: 31px; + } +} +.nls span { + width: calc(100% - 30px); + padding-left: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 12px; + line-height: 1.4; +} +@media (min-width: 768px) { + .nls span { + width: calc(100% - 24px); + } +} +.nls b { + font-weight: 400; +} + +.title, +h1 { + margin: 0; + font-weight: 700; + font-size: 32px; +} +@media (min-width: 768px) { + .title, + h1 { + font-size: 40px; + } +} +@media (min-width: 992px) { + .title, + h1 { + font-size: 48px; + } +} +@media (min-width: 1280px) { + .title, + h1 { + font-size: 64px; + } +} + +.swiper-pagination { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: static; + margin-top: 20px; + gap: 8px; +} +@media (min-width: 768px) { + .swiper-pagination { + margin-top: 30px; + } +} +.swiper-pagination-bullet { + width: 16px; + height: 16px; + opacity: 1; + border: 1px solid #cdcece; + -webkit-transition: 0.3s; + transition: 0.3s; + background: transparent; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 !important; +} +.swiper-pagination-bullet:before { + content: ""; + width: 6px; + height: 6px; + border-radius: 999px; + background: #377d87; + opacity: 0; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.swiper-pagination-bullet:hover { + border-color: #377d87; +} +.swiper-pagination-bullet-active { + border-color: #377d87; +} +.swiper-pagination-bullet-active:before { + opacity: 1; +} + +.navs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 20px; + width: 80px; +} +.navs button { + color: #377d87; + background: none; + border: none; + padding: 0; +} +.navs button[disabled] { + cursor: not-allowed; + color: #cddee1; +} +.navs svg { + width: 14px; + height: 28px; +} + +.select { + position: relative; +} +.select2 { + width: 100% !important; +} +.select2-container { + font-size: 12px; +} +@media (min-width: 768px) { + .select2-container { + font-size: 16px; + } +} +.select2-container--open .select2-selection { + border-color: #377d87 !important; +} +.select2-container--open .select2-selection__arrow svg { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.select2-selection { + min-height: 30px !important; + border-radius: 8px !important; + border-color: #e7e7e7 !important; + -webkit-transition: 0.3s; + transition: 0.3s; +} +@media (min-width: 768px) { + .select2-selection { + min-height: 50px !important; + } +} +.select2-selection__rendered { + line-height: 28px !important; + padding: 0 30px 0 10px !important; +} +@media (min-width: 768px) { + .select2-selection__rendered { + line-height: 48px !important; + padding: 0 46px 0 20px !important; + } +} +.select2-selection--multiple .select2-selection__rendered { + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 10px; + padding-top: 10px !important; + padding-bottom: 10px !important; +} +.select2-selection--multiple .select2-selection__rendered .select2-selection__choice { + margin: 0; +} +.select2-selection__arrow { + top: 0 !important; + right: 0 !important; + width: 30px !important; + height: 100% !important; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #377d87; +} +@media (min-width: 768px) { + .select2-selection__arrow { + width: 50px !important; + } +} +.select2-selection__arrow svg { + width: 12px; + height: 12px; + -webkit-transition: 0.3s; + transition: 0.3s; +} +@media (min-width: 768px) { + .select2-selection__arrow svg { + width: 14px; + height: 14px; + } +} +.select2-selection__choice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + gap: 4px; + padding: 0 4px 0 6px !important; + background: #377d87 !important; + border: none !important; + border-radius: 6px !important; + line-height: 1 !important; + color: #fff; + height: 24px; +} +@media (min-width: 768px) { + .select2-selection__choice { + height: 32px; + gap: 6px; + padding: 0 6px 0 10px !important; + border-radius: 8px !important; + } +} +.select2-selection__choice__remove { + width: 14px; + height: 14px; + padding-top: 4px; + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #fff !important; + font-weight: 400 !important; + font-size: 26px; +} +.select2-search { + display: none; +} +.select2-dropdown { + z-index: 99999; + border: none; + border-radius: 0; + background: none; + padding: 5px 0; +} +@media (min-width: 768px) { + .select2-dropdown { + padding: 10px 0; + } +} +.select2-results { + background: #fff; + border-radius: 8px; + border: 1px solid #377d87; + overflow: hidden; +} +@media (min-width: 768px) { + .select2-results__option { + padding: 10px 14px; + } +} +.select2-results__option--highlighted { + background: #377d87 !important; +} +@media (min-width: 768px) { + .select_search .select2-selection__rendered { + padding-left: 60px !important; + } +} +.select_search .select__icon { + display: none; + height: 28px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-right: 12px; + z-index: 2; + position: absolute; + top: 50%; + left: 15px; + margin-top: -14px; +} +@media (min-width: 768px) { + .select_search .select__icon { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.select_search .select__icon:after { + content: ""; + width: 1px; + height: 100%; + border-radius: 999px; + position: absolute; + top: 0; + right: 0; + background: #cecece; +} +.select_search .select__icon svg { + color: #9c9d9d; + width: 20px; + height: 20px; +} + +.form-group { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 4px; +} +.form-group__label { + font-size: 12px; +} +@media (min-width: 768px) { + .form-group__label { + font-size: 16px; + } +} +.form-group__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: relative; +} + +.input { + display: block; + height: 30px; + border: 1px solid #cecece; + background: #fff; + font-size: 12px; + border-radius: 8px; + padding: 0 10px; + color: #000; + -webkit-transition: 0.3s; + transition: 0.3s; + position: relative; + z-index: 1; +} +@media (min-width: 768px) { + .input { + padding: 0 20px; + height: 44px; + font-size: 16px; + } +} +.input:focus { + border-color: #377d87; +} +.input[disabled] { + color: #9c9d9d; + background: #e7e7e7; +} +.input[type=date] { + text-transform: uppercase; +} + +.textarea { + resize: none; + display: block; + width: 100%; + border-radius: 8px; + border: 1px solid #cecece; + background: #fff; + -webkit-transition: 0.3s; + transition: 0.3s; + font-size: 12px; + line-height: 1.4; + padding: 10px; + aspect-ratio: 8/3; + max-height: 250px; +} +@media (min-width: 768px) { + .textarea { + padding: 20px; + font-size: 16px; + height: 280px; + } +} +.textarea:focus { + border-color: #377d87; +} + +.button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #fff; + background: #377d87; + height: 30px; + border-radius: 8px; + padding: 0 12px; + border: 1px solid #377d87; + font-weight: 700; + font-size: 12px; + text-align: center; + line-height: 1; + gap: 6px; + -webkit-transition: 0.3s; + transition: 0.3s; + cursor: pointer; +} +@media (min-width: 768px) { + .button { + padding: 0 24px; + font-size: 16px; + height: 44px; + gap: 12px; + } +} +@media (min-width: 992px) { + .button { + padding: 0 36px; + } +} +.button:hover { + background: transparent; + color: #377d87; +} +.button img, +.button svg { + width: 12px; + height: 12px; +} +@media (min-width: 768px) { + .button img, + .button svg { + width: 18px; + height: 18px; + } +} +.button_more span + span { + display: none; +} +.button_more.active span { + display: none; +} +.button_more.active span + span { + display: block; +} +.button_light { + background: transparent; + color: #377d87; +} +.button_light:hover { + background: #377d87; + color: #fff; +} +.button_whited { + background: #fff; + color: #377d87; + border-color: #fff; +} +.button_whited:hover { + background: #377d87; + color: #fff; +} + +.search { + width: 100%; + position: relative; + background: #fff; + border-radius: 8px; +} +.search span { + display: none; + height: 28px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-right: 12px; + z-index: 1; + position: absolute; + top: 50%; + left: 15px; + margin-top: -14px; +} +@media (min-width: 768px) { + .search span { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.search span:after { + content: ""; + width: 1px; + height: 100%; + border-radius: 999px; + position: absolute; + top: 0; + right: 0; + background: #cecece; +} +.search span svg { + color: #9c9d9d; + width: 20px; + height: 20px; +} +.search input { + width: 100%; + padding-right: 150px; + position: relative; + z-index: 2; + background: none; +} +@media (min-width: 768px) { + .search input { + padding-left: 60px; + padding-right: 220px; + } +} +.search button { + width: 140px; + position: absolute; + padding: 0; + top: 0; + right: 0; + z-index: 3; +} +@media (min-width: 768px) { + .search button { + width: 200px; + } +} + +.breadcrumbs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 12px 6px; + margin: 0; + padding: 0; + font-size: 11px; + color: #cecece; + line-height: 1; +} +@media (min-width: 992px) { + .breadcrumbs { + font-size: 13px; + } +} +@media (min-width: 1280px) { + .breadcrumbs { + font-size: 16px; + } +} +.breadcrumbs li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 6px; +} +.breadcrumbs li:before { + content: ""; + width: 4px; + height: 4px; + background: #cecece; + border-radius: 999px; + position: relative; + top: -1px; +} +.breadcrumbs li:first-child:before { + display: none; +} +.breadcrumbs li:last-child:before { + background: #377d87; +} +.breadcrumbs a:hover { + color: #377d87; +} +.breadcrumbs b { + color: #377d87; + font-weight: 700; +} + +.pagination { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + line-height: 1; + color: #000; + font-size: 12px; + margin: 0 auto; +} +@media (min-width: 768px) { + .pagination { + font-size: 14px; + gap: 3px; + } +} +.pagination__item { + width: 40px; + height: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + padding: 0; + border: 1px solid transparent; + border-radius: 8px; +} +.pagination__item:hover { + -webkit-transition: 0s; + transition: 0s; + color: #377d87; + font-weight: 700; +} +.pagination__item.active { + font-weight: 700; + color: #fff; + background: #377d87; + border-color: #377d87; +} +.pagination__dots { + width: 40px; + height: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.pagination__dots svg { + width: 15px; + height: 15px; +} +.pagination__nav { + width: 40px; + height: 40px; + display: none; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + padding: 0; + border: 1px solid #cddee1; + color: #377d87; + border-radius: 8px; +} +@media (min-width: 768px) { + .pagination__nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.pagination__nav:hover { + border-color: #377d87; + background: #377d87; + color: #fff; +} +.pagination__nav svg { + width: 10px; + height: 10px; +} +.pagination__nav_prev { + margin-right: 37px; +} +.pagination__nav_prev svg { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.pagination__nav_next { + margin-left: 37px; +} + +.filters { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .filters { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +.filters__label { + color: #377d87; + font-size: 12px; + font-weight: 700; +} +@media (min-width: 768px) { + .filters__label { + font-size: 16px; + } +} +@media (min-width: 992px) { + .filters__label { + font-size: 18px; + } +} +.filters__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 768px) { + .filters__body { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +@media (min-width: 768px) { + .filters__select { + width: 250px; + } +} +@media (min-width: 992px) { + .filters__select { + width: 310px; + } +} +.filters__item { + display: none; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 50px; + height: 50px; + padding: 0; + background: #fff; + border: 1px solid #377d87; + color: #377d87; + border-radius: 8px; + margin-left: 20px; +} +@media (min-width: 768px) { + .filters__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.filters__item svg { + width: 24px; + height: 24px; +} +.filters__item.active { + background: #377d87; + color: #fff; +} +.filters__item + .filters__item { + margin-left: 8px; +} + +.like, +.chat { + width: 30px; + height: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: none; + border: 1px solid #377d87; + padding: 0; + color: #377d87; + border-radius: 6px; +} +@media (min-width: 768px) { + .like, + .chat { + width: 44px; + height: 44px; + } +} +.like.active, +.chat.active { + background: #377d87; + color: #fff; +} +.like svg, +.chat svg { + width: 14px; + height: 14px; +} +@media (min-width: 768px) { + .like svg, + .chat svg { + width: 20px; + height: 20px; + } +} + +.like.active { + background: #eb5757; + border-color: #eb5757; +} + +.checkbox { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + cursor: pointer; + position: relative; +} +.checkbox__input { + position: absolute; + z-index: 1; + width: 14px; + height: 14px; + padding: 0; + background: none; + border: none; + opacity: 0; +} +@media (min-width: 768px) { + .checkbox__input { + width: 20px; + height: 20px; + } +} +.checkbox__icon { + width: 14px; + height: 14px; + border: 1px solid #cfcfcf; + background: #fff; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 4px; + -webkit-transition: 0.3s; + transition: 0.3s; + position: relative; + z-index: 2; +} +@media (min-width: 768px) { + .checkbox__icon { + width: 20px; + height: 20px; + } +} +.checkbox__icon svg { + width: 8px; + height: 8px; + opacity: 0; +} +@media (min-width: 768px) { + .checkbox__icon svg { + width: 10px; + height: 10px; + } +} +.checkbox__input:checked + .checkbox__icon { + border-color: #377d87; + background: #377d87; +} +.checkbox__input:checked + .checkbox__icon svg { + opacity: 1; +} +.checkbox__text { + width: calc(100% - 14px); + padding-left: 6px; + font-size: 12px; + line-height: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 14px; +} +@media (min-width: 768px) { + .checkbox__text { + width: calc(100% - 20px); + padding-left: 12px; + font-size: 15px; + min-height: 20px; + } +} +.checkbox__text a { + color: #377d87; + text-decoration: underline; +} + +.file { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.file__input input { + display: none; +} +.file__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.file__list-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + margin-top: 16px; +} +.file__list-item-left { + width: calc(100% - 16px); + min-height: 16px; + color: #9c9d9d; + font-size: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +@media (min-width: 768px) { + .file__list-item-left { + width: auto; + max-width: calc(100% - 16px); + font-size: 16px; + } +} +.file__list-item-left svg { + width: 16px; + height: 16px; +} +.file__list-item-left span { + width: calc(100% - 16px); + min-height: 16px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 8px; +} +.file__list-item-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + background: none; + border: none; + width: 16px; + height: 16px; + color: #377d87; +} +.file__list-item-right:hover { + color: #000; +} +.file__list-item-right svg { + width: 10px; + height: 10px; +} +.file__list-item + .file__list-item { + margin-top: 10px; +} + +.rate { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; +} +@media (min-width: 768px) { + .rate { + gap: 20px; + } +} +.rate__label { + font-size: 12px; + font-weight: 700; + line-height: 1; +} +@media (min-width: 768px) { + .rate__label { + font-size: 18px; + } +} +.rate__stars { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.back { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 14px; + color: #377d87; + font-weight: 700; +} +@media (min-width: 768px) { + .back { + font-size: 18px; + } +} +.back:hover { + color: #4d88d9; +} +.back svg { + width: 16px; + height: 16px; +} +@media (min-width: 768px) { + .back svg { + width: 26px; + height: 26px; + } +} +.back span { + width: calc(100% - 16px); + padding-left: 10px; +} +@media (min-width: 768px) { + .back span { + width: calc(100% - 26px); + padding-left: 20px; + } +} + +.callback { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; +} +@media (min-width: 992px) { + .callback { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 20px 0; + } +} +.callback__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; +} +@media (min-width: 992px) { + .callback__body { + width: calc(50% - 10px); + gap: 10px; + } +} +@media (min-width: 992px) { + .callback__textarea { + width: calc(50% - 10px); + height: auto; + } +} +.callback__bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; +} +@media (min-width: 768px) { + .callback__bottom { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } +} +@media (min-width: 992px) { + .callback__bottom { + width: 100%; + gap: 20px; + } +} + +.error .input, +.error .textarea { + border-color: #eb5757; +} +.error label { + display: block; +} + +.eye { + position: absolute; + z-index: 2; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + right: 10px; + aspect-ratio: 1/1; + width: 16px; + padding: 0; + border: none; + background: none; + color: #9c9d9d; +} +@media (min-width: 768px) { + .eye { + width: 24px; + right: 20px; + } +} +.eye svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.eye svg + svg { + display: none; +} +.eye.active { + color: #377d87; +} +.eye.active svg { + display: none; +} +.eye.active svg + svg { + display: block; +} + +.del { + width: 32px; + aspect-ratio: 1/1; + background: #377d87; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 8px; + padding: 0; + border: 1px solid #377d87; +} +.del:hover { + background: #fff; + color: #377d87; +} +.del svg { + width: 50%; + aspect-ratio: 1/1; +} + +.notify { + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + padding: 6px 12px; + border-radius: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +@media (min-width: 768px) { + .notify { + padding: 12px 20px; + } +} +.notify_red { + background: #f9cdcd; +} +.notify svg { + color: #4d88d9; + width: 20px; + aspect-ratio: 1/1; +} +.notify span { + font-size: 12px; + padding-left: 10px; + min-height: 20px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .notify span { + font-size: 16px; + } +} + +.table { + margin: 0 -10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +@media (min-width: 768px) { + .table { + margin: 0; + gap: 30px; + } +} +.table__button { + display: none; +} +.table_spoiler .table__button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.table__scroll { + overflow: hidden; + overflow-x: auto; + padding: 0 10px; + width: 100%; +} +@media (min-width: 768px) { + .table__scroll { + padding: 0; + } +} +.table__body { + border-radius: 8px; + overflow: hidden; +} +.table__body_min-width { + min-width: 580px; +} +.table table { + border-collapse: collapse; + width: 100%; + font-size: 12px; + border-radius: 8px; +} +@media (min-width: 768px) { + .table table { + font-size: 14px; + } +} +@media (min-width: 1280px) { + .table table { + font-size: 16px; + } +} +.table thead tr th, +.table thead tr td { + background: #377d87; + color: #fff; + font-weight: 700; + border-top-color: #377d87; +} +.table thead tr th:first-child, +.table thead tr td:first-child { + border-left-color: #377d87; +} +.table thead tr th:last-child, +.table thead tr td:last-child { + border-right-color: #377d87; +} +.table_spoiler tr { + display: none; +} +.table_spoiler tr:nth-of-type(1), .table_spoiler tr:nth-of-type(2), .table_spoiler tr:nth-of-type(3), .table_spoiler tr:nth-of-type(4), .table_spoiler tr:nth-of-type(5), .table_spoiler tr:nth-of-type(6) { + display: table-row; +} +.table_spoiler.active tr { + display: table-row; +} +.table th, +.table td { + text-align: left; + padding: 10px; + border: 1px solid #cecece; +} +@media (min-width: 768px) { + .table td { + padding: 14px 10px; + } +} +.table__status { + color: #9c9d9d; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 6px; + position: relative; + padding-left: 14px; +} +.table__status i { + background: #9c9d9d; + width: 8px; + aspect-ratio: 1/1; + border-radius: 999px; + position: absolute; + top: 4px; + left: 0; +} +.table__status.green { + color: #377d87; +} +.table__status.green i { + background: #377d87; +} +.table__link { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; + color: #4d88d9; +} +@media (min-width: 768px) { + .table__link { + gap: 6px; + } +} +.table__link:hover { + color: #000; +} +.table__link svg { + width: 12px; + aspect-ratio: 1/1; +} +@media (min-width: 768px) { + .table__link svg { + width: 16px; + } +} +.table__controls { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 8px; +} +@media (min-width: 1280px) { + .table__controls { + gap: 12px; + } +} +.table__controls-item { + width: 24px; + aspect-ratio: 1/1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 1px solid #377d87; + border-radius: 8px; + color: #377d87; + background: none; + padding: 0; +} +@media (min-width: 1280px) { + .table__controls-item { + width: 30px; + } +} +.table__controls-item:hover { + background: #377d87; + color: #fff; +} +.table__controls-item svg { + width: 60%; + aspect-ratio: 1/1; +} +.table__controls-item:nth-of-type(4) svg { + width: 80%; +} + +.gl-star-rating--stars:before, .gl-star-rating--stars:after { + display: none; +} +.gl-star-rating--stars span { + width: 22px !important; + height: 22px !important; + background-size: 22px 22px !important; +} +@media (min-width: 768px) { + .gl-star-rating--stars span { + width: 30px !important; + height: 30px !important; + background-size: 30px 30px !important; + } +} + +.more { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.more_mt { + margin-top: 20px; +} +.more .button { + min-width: 100px; + padding: 0; +} +@media (min-width: 768px) { + .more .button { + min-width: 180px; + } +} + +.header { + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + background: #fff; + position: relative; + z-index: 5; + overflow: hidden; +} +@media (min-width: 768px) { + .header { + -webkit-box-shadow: none; + box-shadow: none; + } +} +.header__body { + height: 42px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .header__body { + height: 70px; + } +} +.header__left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 40px; +} +.header__right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 14px; +} +@media (min-width: 768px) { + .header__right { + gap: 20px; + } +} +.header__right-line { + width: 1px; + height: 32px; + background: #e6e7e7; + border-radius: 999px; +} +@media (min-width: 992px) { + .header__right-line { + display: none; + } +} +.header__logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #377d87; +} +.header__logo svg { + width: 105px; + height: 31px; +} +@media (min-width: 768px) { + .header__logo svg { + width: 182px; + height: 54px; + } +} +.header__menu { + display: none; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +@media (min-width: 768px) { + .header__menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.header__menu-item:hover { + color: #377d87; +} +.header__notifs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #377d87; + padding: 0; + border: none; + background: none; + width: 24px; + height: 24px; +} +@media (min-width: 992px) { + .header__notifs { + width: auto; + height: auto; + color: #000; + line-height: 1.4; + } +} +@media (min-width: 992px) { + .header__notifs:hover { + color: #377d87; + } +} +.header__notifs svg { + width: 20px; + height: 20px; +} +@media (min-width: 992px) { + .header__notifs svg { + display: none; + } +} +.header__notifs span { + display: none; +} +@media (min-width: 992px) { + .header__notifs span { + display: inline; + } +} +.header__notifs_actived { + position: relative; +} +@media (min-width: 992px) { + .header__notifs_actived { + padding-right: 12px; + } +} +.header__notifs_actived:after { + content: ""; + border: 1px solid #fff; + background: #377d87; + border-radius: 999px; + width: 10px; + height: 10px; + position: absolute; + z-index: 1; + top: 0; + right: 0; +} +@media (min-width: 992px) { + .header__notifs_actived:after { + width: 8px; + height: 8px; + border: none; + } +} +.header__burger { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 24px; + height: 24px; + color: #377d87; + padding: 0; + border: none; + background: none; +} +@media (min-width: 992px) { + .header__burger { + display: none; + } +} +.header__burger svg { + width: 20px; + height: 20px; +} +.header__burger svg + svg { + display: none; +} +.header__sign { + display: none; +} +@media (min-width: 992px) { + .header__sign { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} + +.mob-menu { + display: none; + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + height: calc(100vh - 42px); + z-index: 4; + background: #fff; + overflow: hidden; + overflow-y: auto; + padding: 50px 0; +} +.mob-menu__bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 80px; +} +.mob-menu__bottom .button { + min-width: 120px; +} +.mob-menu__bottom-link { + text-decoration: underline; + margin-top: 50px; +} +.mob-menu__bottom-link:hover { + color: #377d87; +} +.mob-menu__bottom-link + .mob-menu__bottom-link { + margin-top: 10px; +} +.mob-menu__bottom .socials { + margin-top: 35px; +} +.mob-menu .footer__mobile-menu { + opacity: 1; + height: auto; + overflow: visible; +} +.mob-menu .footer__mobile-menu-item button { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.mob-menu .footer__mobile-menu-item div { + font-size: 20px; +} +.mob-menu .footer__mobile-contacts a { + font-size: 20px; + font-weight: 700; + color: #000; + text-decoration: none; +} +.mob-menu .footer__mobile-contacts a:hover { + color: #377d87; +} +.mob-menu .footer__mobile-menu-item button b, +.mob-menu .footer__mobile-contacts a { + font-size: 30px; +} + +.menu-is-actived { + overflow: hidden; +} +@media (min-width: 992px) { + .menu-is-actived { + overflow: auto; + } +} +.menu-is-actived .header__burger svg { + display: none; +} +.menu-is-actived .header__burger svg + svg { + display: block; +} +.menu-is-actived .mob-menu { + display: block; +} +@media (min-width: 992px) { + .menu-is-actived .mob-menu { + display: none; + } +} + +.footer { + -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); + background: #fff; + position: relative; + z-index: 1; + overflow: hidden; +} +.footer__mobile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 25px 0 30px 0; +} +@media (min-width: 768px) { + .footer__mobile { + padding: 30px 0; + } +} +@media (min-width: 992px) { + .footer__mobile { + display: none; + } +} +.footer__mobile-toper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + border: none; + background: none; +} +.footer__mobile-toper a, +.footer__mobile-toper b { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #377d87; +} +.footer__mobile-toper a svg, +.footer__mobile-toper b svg { + width: 137px; + height: 40px; +} +.footer__mobile-toper span { + width: 40px; + height: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #377d87; + color: #fff; + border-radius: 999px; +} +.footer__mobile-toper span svg { + width: 10px; + height: 10px; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.footer__mobile-toper.active span svg { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.footer__mobile-menu { + height: 0; + opacity: 0; + overflow: hidden; + -webkit-transition: 0.3s; + transition: 0.3s; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 30px; +} +@media (min-width: 768px) { + .footer__mobile-menu { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 100px; + } +} +.footer__mobile-menu-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.footer__mobile-menu-item button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + padding: 0; + border: none; + background: none; +} +.footer__mobile-menu-item button.active { + color: #377d87; +} +.footer__mobile-menu-item button b { + width: calc(100% - 24px); + padding-right: 12px; + min-height: 24px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 20px; + font-weight: 700; +} +.footer__mobile-menu-item button span { + width: 24px; + height: 24px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + border: none; + background: none; +} +.footer__mobile-menu-item button svg { + width: 12px; + height: 12px; + -webkit-transition: 0.3s; + transition: 0.3s; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.footer__mobile-menu-item button.active svg { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.footer__mobile-menu-item div { + height: 0; + opacity: 0; + overflow: hidden; + -webkit-transition: 0.3s; + transition: 0.3s; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 15px; +} +.footer__mobile-menu-item div a:hover { + color: #377d87; +} +.footer__mobile-menu-item .active + div { + opacity: 1; + height: auto; + overflow: visible; + padding-top: 15px; +} +.active + .footer__mobile-menu { + opacity: 1; + height: auto; + overflow: visible; + padding-top: 35px; +} +.footer__mobile-contacts { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 30px; +} +.footer__mobile-contacts b { + font-size: 20px; + font-weight: 700; + width: 100%; + margin-bottom: 20px; +} +.footer__mobile-contacts a { + color: #377d87; + text-decoration: underline; +} +.footer__mobile-contacts a + a { + color: #000; +} +.footer__mobile-bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + gap: 20px; + margin-top: 100px; +} +.footer__mobile-links { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; +} +.footer__mobile-links a:hover { + color: #377d87; +} +.footer__mobile-links span { + width: 60px; + height: 1px; + background: #377d87; +} +.footer__main { + display: none; + padding: 55px 0 20px 0; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 70px; +} +@media (min-width: 992px) { + .footer__main { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.footer__main-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.footer__main-logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #377d87; +} +.footer__main-logo svg { + width: 182px; + height: 54px; +} +.footer__main-title { + font-size: 20px; + font-weight: 700; + margin-bottom: 16px; +} +.footer__main-col { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.footer__main-col nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 8px; +} +.footer__main-col nav a:hover { + color: #377d87; +} +.footer__main-contacts { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 16px; + margin-bottom: 16px; +} +.footer__main-contacts a { + color: #377d87; + text-decoration: underline; +} +.footer__main-contacts a + a { + color: #000; +} +.footer__main-copy { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 14px; + line-height: 1.4; +} +.footer__main-copy nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; +} +.footer__main-copy nav a:hover { + color: #377d87; +} +.footer__main-copy nav span { + width: 1px; + height: 20px; + background: #000; +} + +.main { + position: relative; + overflow: hidden; + padding: 30px 0; +} +@media (min-width: 768px) { + .main { + padding: 40px 0; + } +} +@media (min-width: 992px) { + .main { + padding: 50px 0; + } +} +@media (min-width: 1280px) { + .main { + padding: 60px 0; + } +} +.main h2 { + margin: 0; + font-weight: 700; + font-size: 30px; +} +@media (min-width: 768px) { + .main h2 { + font-size: 44px; + } +} +.main h3 { + margin: 0; + font-weight: 700; + font-size: 22px; +} +@media (min-width: 768px) { + .main h3 { + font-size: 28px; + } +} +.main p { + margin: 0; + font-size: 14px; + line-height: 1.4; +} +@media (min-width: 768px) { + .main p { + font-size: 18px; + } +} +.main p a { + color: #4d88d9; +} +.main p a:hover { + color: #377d87; +} +.main__breadcrumbs { + margin-bottom: 20px; +} +@media (min-width: 768px) { + .main__breadcrumbs { + margin-bottom: 40px; + } +} +.main__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + font-size: 14px; +} +@media (min-width: 992px) { + .main__content { + font-size: 18px; + gap: 32px; + } +} +.main__content-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; +} +.main__content h1, +.main__content h2, +.main__content h3, +.main__content h4, +.main__content h5, +.main__content h6 { + color: #000; +} +.main__content ul, +.main__content ol { + padding: 0; + margin: 0; + padding-left: 20px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 8px; +} +@media (min-width: 992px) { + .main__content ul, + .main__content ol { + gap: 16px; + padding-left: 30px; + } +} +.main__content li ul, +.main__content li ol { + margin-top: 8px; +} +@media (min-width: 992px) { + .main__content li ul, + .main__content li ol { + margin-top: 16px; + } +} +.main__content li ul li, +.main__content li ol li { + list-style-type: disc; +} +.main__gallery { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .main__gallery { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 992px) { + .main__gallery { + grid-template-columns: repeat(3, 1fr); + } +} +.main__gallery-item { + width: 100%; + aspect-ratio: 400/224; + border-radius: 30px; + position: relative; + overflow: hidden; +} +.main__gallery-item:hover { + -webkit-filter: brightness(1.1); + filter: brightness(1.1); +} +.main__gallery-item img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.main__employers { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .main__employers { + gap: 30px; + } +} +.main__employers-body { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 992px) { + .main__employers-body { + gap: 30px; + } +} +.main__employers-body.showed { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.main__employers-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border: 1px solid #cecece; + border-radius: 8px; + position: relative; + overflow: hidden; + padding: 10px; + padding-top: 50px; + padding-bottom: 30px; +} +@media (min-width: 768px) { + .main__employers-item { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 55px 20px; + } +} +@media (min-width: 1280px) { + .main__employers-item { + padding-left: 55px; + } +} +.main__employers-item-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 768px) { + .main__employers-item-inner { + width: calc(100% - 200px); + padding-right: 40px; + } +} +@media (min-width: 992px) { + .main__employers-item-inner { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +.main__employers-item-pic { + height: 30px; + position: absolute; + top: 10px; + left: 10px; +} +@media (min-width: 768px) { + .main__employers-item-pic { + position: static; + width: 150px; + height: auto; + max-height: 150px; + -o-object-fit: contain; + object-fit: contain; + } +} +.main__employers-item-body { + font-size: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .main__employers-item-body { + font-size: 16px; + padding-top: 20px; + } +} +@media (min-width: 992px) { + .main__employers-item-body { + width: calc(100% - 150px); + padding: 0; + padding-left: 40px; + } +} +.main__employers-item-body b { + font-weight: 700; +} +@media (min-width: 768px) { + .main__employers-item-body b { + font-size: 20px; + } +} +.main__employers-item-body i { + font-style: normal; + color: #000; +} +.main__employers-item-more { + position: absolute; + top: 10px; + right: 10px; +} +@media (min-width: 768px) { + .main__employers-item-more { + width: 200px; + padding: 0; + position: static; + } +} +.main__employers-item-label { + background: #4d88d9; + color: #fff; + border-radius: 6px; + width: 100%; + height: 20px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 12px; + position: absolute; + bottom: 0; + left: 0; + font-size: 12px; + line-height: 1; +} +@media (min-width: 768px) { + .main__employers-item-label { + max-width: 350px; + height: 30px; + font-size: 15px; + } +} +.main__employers-item-label svg { + width: 8px; + height: 8px; +} +@media (min-width: 768px) { + .main__employers-item-label svg { + width: 12px; + height: 12px; + } +} +.main__employers-item-label span { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + width: calc(100% - 8px); + padding-left: 6px; +} +.main__employers-one { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +.main__employers-two { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .main__employers-two { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 20px 0; + } +} +.main__employers-two .main__employers-item { + width: calc(50% - 10px); + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + padding-top: 30px; +} +.main__employers-two .main__employers-item-inner { + width: 100%; + padding: 0; +} +.main__employers-two .main__employers-item-more { + position: static; + margin-top: 20px; +} +@media (min-width: 992px) { + .main__employers-two .main__employers-item-more { + margin-left: 190px; + } +} +.main__employers-two .main__employers-item-label { + max-width: none; +} +.main__employer-page { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .main__employer-page { + gap: 30px; + } +} +.main__employer-page-title { + color: #000; + margin: 0; + font-size: 30px; +} +@media (min-width: 768px) { + .main__employer-page-title { + font-size: 36px; + } +} +@media (min-width: 992px) { + .main__employer-page-title { + font-size: 44px; + } +} +.main__employer-page-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 4px; + font-size: 12px; + line-height: 1.4; +} +@media (min-width: 768px) { + .main__employer-page-item { + font-size: 18px; + gap: 8px; + } +} +.main__employer-page-item b { + color: #377d87; + font-size: 14px; +} +@media (min-width: 768px) { + .main__employer-page-item b { + font-size: 18px; + } +} +.main__employer-page-item span { + color: #000; +} +.main__employer-page-info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .main__employer-page-info { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px 40px; + } +} +@media (min-width: 1280px) { + .main__employer-page-info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding-right: 160px; + } +} +@media (min-width: 768px) { + .main__employer-page-info .main__employer-page-item b, + .main__employer-page-info .main__employer-page-item span { + max-width: 300px; + } +} +.main__employer-page-tabs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +@media (min-width: 768px) { + .main__employer-page-tabs { + margin-top: 20px; + } +} +.main__employer-page-tabs-item { + font-size: 22px; + font-weight: 700; + border: none; + background: none; + padding: 0; + color: #9c9d9d; + text-decoration: underline; + text-decoration-thickness: 1px; +} +@media (min-width: 768px) { + .main__employer-page-tabs-item { + font-size: 24px; + } +} +.main__employer-page-tabs-item.active { + color: #377d87; +} +.main__employer-page-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 10px; +} +@media (min-width: 768px) { + .main__employer-page-body { + margin-top: 30px; + } +} +.main__employer-page-body-item { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +.main__employer-page-body-item.showed { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.main__employer-page-one { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .main__employer-page-one { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 992px) { + .main__employer-page-one { + grid-template-columns: repeat(3, 1fr); + } +} +@media (min-width: 1280px) { + .main__employer-page-one { + grid-template-columns: repeat(4, 1fr); + gap: 30px 20px; + } +} +.main__employer-page-one-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + font-size: 12px; + position: relative; +} +@media (min-width: 1280px) { + .main__employer-page-one-item { + font-size: 18px; + } +} +.main__employer-page-one-item img { + border-radius: 10px; + -o-object-fit: cover; + object-fit: cover; + width: 100%; + max-height: 250px; + aspect-ratio: 247/174; +} +@media (min-width: 1280px) { + .main__employer-page-one-item img { + margin-bottom: 10px; + } +} +.main__employer-page-one-item b { + font-weight: 700; + color: #377d87; +} +.main__employer-page-one-item span { + color: #000; +} +.main__employer-page-one-item i { + font-style: normal; + color: #377d87; +} +.main__employer-page-one-item .del { + position: absolute; + z-index: 1; + top: 8px; + left: 8px; +} +.main__employer-page-two { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.main__employer-page-two-item { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; + padding: 20px 10px; + border-radius: 12px; + border: 1px solid #cecece; + position: relative; + overflow: hidden; + font-size: 12px; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); +} +@media (min-width: 768px) { + .main__employer-page-two-item { + font-size: 14px; + padding: 20px; + gap: 24px; + padding-bottom: 35px; + } +} +@media (min-width: 992px) { + .main__employer-page-two-item { + font-size: 16px; + } +} +@media (min-width: 1280px) { + .main__employer-page-two-item { + font-size: 18px; + } +} +.main__employer-page-two-item-toper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 22px; + font-weight: 700; + color: #000; +} +@media (min-width: 768px) { + .main__employer-page-two-item-toper { + font-size: 30px; + } +} +.main__employer-page-two-item-toper img { + width: 60px; + aspect-ratio: 1/1; + -o-object-fit: contain; + object-fit: contain; +} +.main__employer-page-two-item-toper span { + width: calc(100% - 60px); + padding-left: 10px; +} +@media (min-width: 768px) { + .main__employer-page-two-item-toper span { + padding-left: 20px; + } +} +.main__employer-page-two-item-title { + font-size: 18px; + font-weight: 700; + color: #377d87; +} +@media (min-width: 768px) { + .main__employer-page-two-item-title { + font-size: 24px; + } +} +.main__employer-page-two-item-text { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +.main__employer-page-two-item-text-name { + font-weight: 700; +} +.main__employer-page-two-item-text-body { + color: #000; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; + padding: 0 10px; +} +.main__employer-page-two-item-text-body p { + margin: 0; +} +.main__employer-page-two-item-text-body ul { + margin: 0; + padding: 0; + padding-left: 16px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; +} +@media (min-width: 768px) { + .main__employer-page-two-item-text-body ul { + margin: 0 5px; + } +} +.main__employer-page-two-item-text-body ul span, +.main__employer-page-two-item-text-body ul a { + color: #000; + position: relative; +} +.main__employer-page-two-item-text-body ul a:hover { + color: #377d87; +} +.main__employer-page-two-item-text-body p + ul { + margin-top: 10px; +} +.main__employer-page-two-item-text-links { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; + padding: 0 10px; + font-weight: 700; + margin-top: 5px; +} +@media (min-width: 768px) { + .main__employer-page-two-item-text-links { + gap: 20px; + } +} +.main__employer-page-two-item-text-links a { + color: #4d88d9; +} +.main__employer-page-two-item-text-links a:hover { + color: #377d87; +} +.main__employer-page-two-item-tags { + color: #4d88d9; + font-weight: 500; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 10px 20px; +} +@media (min-width: 768px) { + .main__employer-page-two-item-tags { + font-size: 14px; + } +} +.main__employer-page-two-item-buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} +@media (min-width: 768px) { + .main__employer-page-two-item-button { + position: absolute; + bottom: 20px; + left: 20px; + width: 200px; + padding: 0; + } +} +@media (min-width: 768px) { + .main__employer-page-two-item-button + .main__employer-page-two-item-button { + left: auto; + right: 20px; + } +} +.main__employer-page-two-item-bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.main__employer-page-two-item-bottom-date { + color: #000; +} +@media (min-width: 768px) { + .main__employer-page-two-item-bottom-date { + position: absolute; + bottom: 20px; + right: 240px; + height: 42px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +@media (min-width: 992px) { + .main__employer-page-two-item-bottom-date { + font-size: 16px; + } +} +@media (min-width: 768px) { + .main__employer-page-two-item-bottom-like { + position: absolute; + bottom: 20px; + left: 240px; + } +} +@media (min-width: 768px) { + .main__employer-page-two-more { + margin-top: 10px; + padding: 0; + width: 200px; + } +} +.main__employer-page-two .main__employer-page-two-item { + display: none; +} +.main__employer-page-two .main__employer-page-two-item:nth-of-type(1), .main__employer-page-two .main__employer-page-two-item:nth-of-type(2) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.main__employer-page-two.active .main__employer-page-two-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.main__resume-base { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + color: #000; +} +.main__resume-base-body { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 10px; +} +@media (min-width: 768px) { + .main__resume-base-body { + margin-top: 30px; + } +} +.main__resume-base-body.showed { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.main__resume-base-body-one { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +@media (min-width: 768px) { + .main__resume-base-body-one { + gap: 30px; + } +} +.main__resume-base-body-two { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .main__resume-base-body-two { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 30px 0; + } +} +@media (min-width: 768px) { + .main__resume-base-body-two .main__resume-base-body-item { + width: calc(50% - 10px); + } +} +.main__resume-base-body-two .main__resume-base-body-item-wrapper { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.main__resume-base-body-item { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + position: relative; + border: 1px solid #377d87; + border-radius: 8px; + padding: 10px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .main__resume-base-body-item { + padding: 20px; + } +} +.main__resume-base-body-item-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; + position: absolute; + top: 10px; + right: 10px; +} +@media (min-width: 768px) { + .main__resume-base-body-item-buttons { + top: 20px; + right: 20px; + } +} +.main__resume-base-body-item-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 20px; + width: 100%; +} +@media (min-width: 768px) { + .main__resume-base-body-item-wrapper { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + } +} +.main__resume-base-body-item-photo { + width: 180px; + aspect-ratio: 1/1; + -o-object-fit: cover; + object-fit: cover; + border-radius: 8px; +} +@media (min-width: 768px) { + .main__resume-base-body-item-photo { + width: 210px; + } +} +.main__resume-base-body-item-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + width: 100%; +} +@media (min-width: 768px) { + .main__resume-base-body-item-inner { + gap: 16px; + padding-right: 50px; + } +} +@media (min-width: 992px) { + .main__resume-base-body-item-inner { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } +} +.main__resume-base-body-item-inner div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 4px; + font-size: 12px; +} +@media (min-width: 768px) { + .main__resume-base-body-item-inner div { + font-size: 16px; + } +} +.main__resume-base-body-item-inner b { + color: #377d87; + font-size: 14px; +} +@media (min-width: 768px) { + .main__resume-base-body-item-inner b { + font-size: 18px; + } +} +.main__resume-base-body-item-link { + width: 100%; + padding: 0; +} +@media (min-width: 768px) { + .main__resume-base-body-item-link { + width: 200px; + } +} +.main__spoiler { + overflow: hidden; + border-radius: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.main__spoiler-toper { + background: #377d87; + height: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #fff; + font-size: 12px; + font-weight: 700; + padding: 0 30px; + border: none; + position: relative; +} +@media (min-width: 768px) { + .main__spoiler-toper { + font-size: 18px; + height: 50px; + padding: 0 60px; + } +} +.main__spoiler-toper:before, .main__spoiler-toper:after { + content: ""; + background: #fff; + border-radius: 999px; + width: 10px; + height: 1px; + position: absolute; + top: 50%; + right: 10px; + -webkit-transition: 0.3s; + transition: 0.3s; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +@media (min-width: 768px) { + .main__spoiler-toper:before, .main__spoiler-toper:after { + width: 20px; + height: 2px; + right: 20px; + } +} +.main__spoiler-toper:after { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.main__spoiler-toper.active:after { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.main__spoiler-body { + opacity: 0; + height: 0; + overflow: hidden; + border-radius: 0 0 8px 8px; + background: #fff; +} +.main__spoiler-body table { + width: calc(100% + 2px); + margin-left: -1px; + margin-bottom: -1px; +} +@media (min-width: 992px) { + .main__spoiler-body table td { + width: 40%; + } +} +@media (min-width: 992px) { + .main__spoiler-body table td + td { + width: 60%; + } +} +.active + .main__spoiler-body { + -webkit-transition: 0.3s; + transition: 0.3s; + opacity: 1; + height: auto; + border: 1px solid #cecece; + border-top: none; +} +.main__table { + border-collapse: collapse; + table-layout: fixed; + font-size: 12px; + width: 100%; + background: #fff; +} +@media (min-width: 768px) { + .main__table { + font-size: 16px; + } +} +.main__table td { + border: 1px solid #cecece; + padding: 4px 8px; + vertical-align: top; +} +@media (min-width: 768px) { + .main__table td { + padding: 8px 16px; + } +} +.main__table td b { + font-weight: 700; +} +.main__table_three { + table-layout: auto; +} +.main__table_three td { + width: 25% !important; +} +.main__table_three td:last-child { + width: 50% !important; +} +.main__table b { + display: block; +} +.main__table a { + color: #377d87; + text-decoration: underline; +} +.main__table a:hover { + color: #000; +} +.main__resume-profile-about { + padding-top: 20px; + padding-bottom: 30px; + position: relative; + margin-top: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; +} +@media (min-width: 992px) { + .main__resume-profile-about { + padding: 50px 0; + } +} +.main__resume-profile-about:before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: 50%; + width: 20000px; + height: 100%; + margin-left: -10000px; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); +} +.main__resume-profile-about-title { + position: relative; + z-index: 2; + color: #000; +} +.main__resume-profile-about-text { + position: relative; + z-index: 2; +} +.main__resume-profile-about-button { + position: relative; + z-index: 2; + margin-top: 10px; +} +.main__resume-profile-info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + margin-top: 30px; +} +@media (min-width: 992px) { + .main__resume-profile-info { + margin-top: 50px; + gap: 30px; + } +} +.main__resume-profile-info-title { + color: #000; +} +.main__resume-profile-info-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 992px) { + .main__resume-profile-info-body { + gap: 30px; + } +} +.main__resume-profile-info-body-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .main__resume-profile-info-body-item { + gap: 20px; + } +} +.main__resume-profile-info-body-subtitle { + color: #4d88d9; +} +.main__resume-profile-info-body-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + margin: 0; + padding: 0; + font-size: 12px; +} +@media (min-width: 768px) { + .main__resume-profile-info-body-inner { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 992px) { + .main__resume-profile-info-body-inner { + grid-template-columns: repeat(3, 1fr); + font-size: 16px; + } +} +.main__resume-profile-info-body-inner li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; +} +@media (min-width: 992px) { + .main__resume-profile-info-body-inner li { + gap: 8px; + } +} +.main__resume-profile-info-body-inner b { + color: #377d87; + font-size: 14px; +} +@media (min-width: 992px) { + .main__resume-profile-info-body-inner b { + font-size: 18px; + } +} +.main__resume-profile-info-body-inner span { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 4px; +} +@media (min-width: 992px) { + .main__resume-profile-info-body-inner span { + gap: 6px; + } +} +.main__resume-profile-review { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + padding: 20px 10px; + margin-top: 30px; + border-radius: 16px; + border: 1px solid #cecece; + background: #fff; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); +} +@media (min-width: 992px) { + .main__resume-profile-review { + margin-top: 50px; + padding: 50px 40px; + gap: 30px; + } +} +.main__resume-profile-review-title { + color: #000; +} +.main__resume-profile-review-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; +} +.main__resume-profile-review-body .textarea { + width: 100%; +} +.main__resume-profile-review-body .button { + margin-top: 10px; +} +.main__vacancies { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +@media (min-width: 768px) { + .main__vacancies { + gap: 30px; + } +} +.main__vacancies-title { + color: #000; + width: 100%; +} +.main__vacancies-filters { + width: 100%; +} +.main__vacancies-item { + width: 100%; + background: none; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); +} +.main__vacancies-item-page { + border: none; + -webkit-box-shadow: none; + box-shadow: none; + background: none; + margin: 0 -10px; +} +@media (min-width: 768px) { + .main__vacancies-item-page { + margin: 0 -20px; + } +} +.main__vacancies-thing { + width: 100%; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + padding: 20px 10px; + padding-bottom: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 24px; + border-radius: 12px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); +} +@media (min-width: 992px) { + .main__vacancies-thing { + padding: 30px 20px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 0; + } +} +@media (min-width: 1280px) { + .main__vacancies-thing { + padding: 50px 20px; + } +} +.main__vacancies-thing-pic { + position: relative; + z-index: 2; + width: 100%; + aspect-ratio: 42/34; + -o-object-fit: cover; + object-fit: cover; + border-radius: 8px; + max-height: 340px; +} +@media (min-width: 992px) { + .main__vacancies-thing-pic { + width: 380px; + } +} +@media (min-width: 1280px) { + .main__vacancies-thing-pic { + width: 420px; + } +} +.main__vacancies-thing-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 16px; + color: #000; +} +@media (min-width: 992px) { + .main__vacancies-thing-body { + width: calc(100% - 380px); + padding-left: 20px; + } +} +@media (min-width: 1280px) { + .main__vacancies-thing-body { + width: calc(100% - 420px); + gap: 20px; + } +} +.main__vacancies-thing-body > * { + width: 100%; +} +.main__vacancies-thing-body .button { + width: auto; +} +@media (min-width: 768px) { + .main__vacancies-thing-body .button { + min-width: 200px; + } +} +.main__vacancies-thing-scroll { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 16px; + overflow: hidden; + overflow-y: auto; + max-height: 180px; + padding-right: 10px; +} +@media (min-width: 768px) { + .main__vacancies-thing-scroll { + max-height: 210px; + padding-right: 20px; + } +} +@media (min-width: 992px) { + .main__vacancies-thing-scroll { + max-height: 175px; + } +} +@media (min-width: 1280px) { + .main__vacancies-thing-scroll { + max-height: 200px; + gap: 20px; + } +} +.main__cond { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 50px; +} +.main__cond > div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +.main__cond-label { + border-radius: 16px; + border: 1px solid #cecece; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + padding: 30px 20px; + font-weight: 700; + color: #000; + line-height: 2; + text-align: center; +} +@media (min-width: 992px) { + .main__cond-label { + font-size: 30px; + } +} +.main__cond-icons { + padding: 0; + margin: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 25px; + margin-top: 10px; +} +@media (min-width: 768px) { + .main__cond-icons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 60px; + margin-top: 20px; + } +} +@media (min-width: 1280px) { + .main__cond-icons { + grid-template-columns: repeat(3, 1fr); + } +} +.main__cond-icons li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 20px; + font-size: 12px; + line-height: 1.4; + color: #000; +} +@media (min-width: 768px) { + .main__cond-icons li { + font-size: 14px; + } +} +@media (min-width: 992px) { + .main__cond-icons li { + font-size: 16px; + line-height: 1.6; + } +} +@media (min-width: 1280px) { + .main__cond-icons li { + font-size: 18px; + } +} +.main__cond-icons li span { + width: 48px; + height: 48px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.main__cond-icons li span img { + max-width: 48px; +} +.main__cond-callback { + margin-top: 10px; +} +.main__ads { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 30px; + margin: 30px 0; +} +@media (min-width: 992px) { + .main__ads { + margin: 60px 0; + } +} +.main__ads-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; +} +@media (min-width: 992px) { + .main__ads-item { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + gap: 0; + } +} +.main__ads-item-pic { + width: 100%; + max-width: 440px; + max-height: 200px; + aspect-ratio: 3/2; + position: relative; + overflow: hidden; + border-radius: 12px; +} +@media (min-width: 992px) { + .main__ads-item-pic { + width: 200px; + aspect-ratio: 1/1; + } +} +.main__ads-item-pic img { + z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.main__ads-item-pic span { + z-index: 2; + width: 30px; + height: 30px; + border-radius: 6px; + background: #4d88d9; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + top: 10px; + left: 10px; + color: #fff; +} +@media (min-width: 992px) { + .main__ads-item-pic span { + width: 42px; + height: 42px; + } +} +.main__ads-item-pic span svg { + width: 12px; + height: 12px; +} +@media (min-width: 992px) { + .main__ads-item-pic span svg { + width: 20px; + height: 20px; + } +} +.main__ads-item-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; + font-size: 12px; +} +@media (min-width: 992px) { + .main__ads-item-body { + width: calc(100% - 200px); + padding-left: 40px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 16px; + gap: 20px; + } +} +.main__ads-item-body b { + width: 100%; + font-weight: 700; + font-size: 14px; +} +@media (min-width: 992px) { + .main__ads-item-body b { + font-size: 20px; + } +} +.main__ads-item-body span { + width: 100%; +} + +.work { + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + color: #000; + padding-top: 70px; + padding-bottom: 10px; + position: relative; + overflow: hidden; +} +@media (min-width: 768px) { + .work { + padding-bottom: 25px; + } +} +@media (min-width: 1280px) { + .work { + padding-top: 80px; + padding-bottom: 25px; + } +} +.work__pic { + position: absolute; + height: calc(100% - 40px); + z-index: 1; + display: none; + bottom: 0; + left: 50%; + margin-left: 40px; +} +@media (min-width: 992px) { + .work__pic { + display: block; + } +} +@media (min-width: 1280px) { + .work__pic { + margin-left: 80px; + } +} +.work__body { + position: relative; + z-index: 2; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .work__body { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } +} +@media (min-width: 992px) { + .work__body { + max-width: 600px; + } +} +.work__title { + width: 100%; + font-size: 40px; + font-weight: 700; + line-height: 1; +} +@media (min-width: 768px) { + .work__title { + font-size: 64px; + line-height: 94px; + } +} +.work__text { + width: 100%; + font-size: 12px; + margin-top: 10px; +} +@media (min-width: 768px) { + .work__text { + font-size: 18px; + margin-top: 20px; + line-height: 1.4; + } +} +.work__list { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 5px; + font-size: 14px; + font-weight: 700; + margin-top: 15px; +} +@media (min-width: 768px) { + .work__list { + font-size: 18px; + gap: 8px; + margin-top: 30px; + } +} +.work__list div { + position: relative; + padding-left: 10px; +} +@media (min-width: 768px) { + .work__list div { + padding-left: 16px; + } +} +.work__list div:before { + content: ""; + width: 4px; + height: 4px; + background: #000; + border-radius: 999px; + position: absolute; + top: 5px; + left: 0; +} +@media (min-width: 768px) { + .work__list div:before { + top: 8px; + } +} +.work__form { + margin-top: 20px; +} +@media (min-width: 768px) { + .work__form { + margin-top: 30px; + } +} +.work__search { + width: 100%; + max-width: 180px; + margin-top: 20px; +} +@media (min-width: 768px) { + .work__search { + max-width: 270px; + margin-top: 50px; + } +} +.work__get { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 48px; +} +.work__get b { + width: 100%; + margin-bottom: 10px; + font-size: 14px; +} +@media (min-width: 768px) { + .work__get b { + font-size: 18px; + } +} +.work__get a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-right: 20px; +} +.work__get a img { + -webkit-transition: 0.3s; + transition: 0.3s; + width: 111px; +} +@media (min-width: 768px) { + .work__get a img { + width: 131px; + } +} +.work__get a:hover img { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.work__get a + a { + margin-right: 0; +} + +.numbers { + padding: 30px 0; + background: #377d87 url("../images/bg.svg") no-repeat 100% calc(100% + 80px); + color: #fff; +} +@media (min-width: 1280px) { + .numbers { + padding: 100px 0; + background-position: 100% 100%; + background-size: auto 500px; + } +} +.numbers__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 30px; +} +@media (min-width: 768px) { + .numbers__body { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } +} +.numbers__item { + font-size: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + line-height: 1.4; +} +@media (min-width: 1280px) { + .numbers__item { + font-size: 16px; + line-height: 20px; + } +} +.numbers__item b { + font-size: 40px; + font-weight: 700; + border-bottom: 1px solid #fff; + line-height: 1; +} +@media (min-width: 1280px) { + .numbers__item b { + font-size: 100px; + line-height: 147px; + } +} +.numbers__item span { + font-weight: 700; + font-size: 14px; + margin: 10px 0; + line-height: 1; +} +@media (min-width: 1280px) { + .numbers__item span { + font-size: 24px; + margin-top: 30px; + } +} + +.vacancies { + padding: 50px 0; +} +@media (min-width: 1280px) { + .vacancies { + padding: 100px 0; + } +} +.vacancies__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + gap: 20px; + width: 100%; + margin-top: 20px; +} +@media (min-width: 992px) { + .vacancies__body { + margin-top: 30px; + gap: 30px; + } +} +.vacancies__more { + width: 100%; +} +@media (min-width: 768px) { + .vacancies__more { + width: auto; + margin: 0 auto; + } +} +.vacancies__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 15px; +} +@media (min-width: 768px) { + .vacancies__list { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 992px) { + .vacancies__list { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } +} +@media (min-width: 1280px) { + .vacancies__list { + grid-template-columns: repeat(4, 1fr); + } +} +.vacancies__list-label { + font-weight: 700; + font-size: 22px; +} +.vacancies__list-col { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 15px; + margin-top: 15px; +} +@media (min-width: 768px) { + .vacancies__list-col { + margin-top: 0; + } +} +.vacancies__list-col:first-child { + margin-top: 0; +} +.vacancies__item { + display: none; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + border-radius: 12px; + background: #fff; + border: 1px solid #e6e7e7; + overflow: hidden; +} +.vacancies__item:nth-of-type(1), .vacancies__item:nth-of-type(2), .vacancies__item:nth-of-type(3), .vacancies__item:nth-of-type(4), .vacancies__item:nth-of-type(5), .vacancies__item:nth-of-type(6), .vacancies__item:nth-of-type(7), .vacancies__item:nth-of-type(8) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.vacancies__item > span { + border-left: 10px solid #377d87; + padding: 20px 14px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 5px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +@media (min-width: 992px) { + .vacancies__item > span { + gap: 10px; + } +} +.vacancies__item b { + font-weight: 700; + font-size: 14px; +} +@media (min-width: 992px) { + .vacancies__item b { + font-size: 20px; + } +} +.vacancies__item:hover b { + color: #377d87; +} +.vacancies__item u { + text-decoration: none; + font-size: 14px; +} +@media (min-width: 992px) { + .vacancies__item u { + font-size: 18px; + } +} +.vacancies__item i { + font-size: 12px; + font-style: normal; + border-bottom: 1px dashed #377d87; +} +@media (min-width: 992px) { + .vacancies__item i { + font-size: 16px; + } +} +.vacancies__item i span { + font-weight: 700; + color: #377d87; +} +.vacancies__body.active .vacancies__list .vacancies__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.employer { + padding-bottom: 50px; +} +@media (min-width: 992px) { + .employer { + padding-bottom: 100px; + } +} +.employer .swiper { + margin-top: 20px; +} +@media (min-width: 992px) { + .employer .swiper { + margin-top: 30px; + } +} +.employer__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 30px; +} +.employer__item a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.employer__item img { + width: 100%; + aspect-ratio: 295/98; + -o-object-fit: contain; + object-fit: contain; +} +.employer__more { + height: 38px; + margin-top: 20px; +} +@media (min-width: 992px) { + .employer__more { + width: 250px; + margin: 0 auto; + height: 44px; + margin-top: 40px; + } +} + +.about { + background: #acc0e6 url("../images/space.svg") no-repeat 0 0; + background-size: cover; + padding: 30px 0; + padding-bottom: 70px; +} +@media (min-width: 768px) { + .about { + padding-top: 40px; + background-size: auto calc(100% - 10px); + } +} +@media (min-width: 1280px) { + .about { + padding: 100px 0; + } +} +.about__wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: relative; +} +.about__title { + color: #fff; + line-height: 1.2; +} +@media (min-width: 1280px) { + .about__title { + position: absolute; + top: -45px; + left: 0; + } +} +.about__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 1280px) { + .about__body { + padding-left: 495px; + } +} +.about__line { + background: #fff; + width: 100%; + height: 1px; + max-width: 400px; + margin-top: 10px; +} +.about__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 10px; + max-width: 600px; +} +@media (min-width: 768px) { + .about__item { + margin-top: 20px; + } +} +@media (min-width: 1280px) { + .about__item { + margin-top: 30px; + } +} +.about__item b { + font-size: 20px; + font-weight: 700; +} +.about__item span { + font-size: 13px; + line-height: 1.4; + margin-top: 6px; +} +@media (min-width: 1280px) { + .about__item span { + font-size: 16px; + margin-top: 12px; + } +} +.about__item a { + text-decoration: underline; +} +.about__item + .about__item { + margin-top: 30px; +} +@media (min-width: 992px) { + .about__item + .about__item { + margin-top: 40px; + } +} +.about__button { + margin-top: 20px; + height: 38px; + padding: 0; +} +@media (min-width: 768px) { + .about__button { + max-width: 200px; + height: 42px; + margin-top: 30px; + } +} + +.news { + padding: 50px 0; + overflow: hidden; +} +@media (min-width: 1280px) { + .news { + padding: 100px 0; + padding-bottom: 0; + } +} +.news__toper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 1280px) { + .news__toper .title { + width: calc(100% - 160px); + } +} +.news__toper .navs { + display: none; +} +@media (min-width: 1280px) { + .news__toper .navs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +.news .swiper { + margin-top: 20px; +} +@media (min-width: 768px) { + .news .swiper { + overflow: visible; + } +} +@media (min-width: 992px) { + .news .swiper { + margin-top: 40px; + } +} +.news__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + line-height: 1.4; +} +.news__item-pic { + width: 100%; + aspect-ratio: 3/2; + border-radius: 12px; + border: 1px solid #e6e7e7; + -o-object-fit: cover; + object-fit: cover; + min-height: 200px; +} +@media (min-width: 1280px) { + .news__item-pic { + aspect-ratio: 4/2; + } +} +.news__item-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding-top: 15px; +} +@media (min-width: 768px) { + .news__item-body { + padding: 20px; + padding-top: 30px; + margin-top: -15px; + border-radius: 0 0 12px 12px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); + } +} +.news__item-date { + font-size: 14px; + font-weight: 700; + color: #377d87; +} +.news__item-title { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + margin-top: 5px; +} +.news__item-text { + color: #000; + font-size: 13px; + margin-top: 10px; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} +@media (min-width: 1280px) { + .news__item-text { + font-size: 16px; + } +} +.news__item-more { + height: 42px; + margin-top: 20px; +} +@media (min-width: 1280px) { + .news__item-more { + height: 44px; + max-width: 190px; + } +} +.news__all { + height: 42px; + margin: 0 auto; + margin-top: 20px; + padding: 0; + display: none; +} +@media (min-width: 768px) { + .news__all { + max-width: 170px; + margin-top: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } +} +@media (min-width: 1280px) { + .news__all { + height: 44px; + } +} +.news__items { + display: grid; + gap: 20px; + margin-bottom: 10px; +} +@media (min-width: 768px) { + .news__items { + grid-template-columns: 1fr 1fr; + } +} +@media (min-width: 992px) { + .news__items { + grid-template-columns: 1fr 1fr 1fr; + } +} + +main + .news { + padding: 0; +} + +.info { + position: relative; + overflow: hidden; +} +@media (min-width: 1280px) { + .info { + margin-bottom: -25px; + } +} +.info__pic { + display: none; + z-index: 1; + position: absolute; + top: 0; + left: 50%; + height: 100%; + margin-left: 130px; +} +@media (min-width: 992px) { + .info__pic { + display: block; + } +} +@media (min-width: 1280px) { + .info__pic { + width: 610px; + height: auto; + margin-left: 10px; + } +} +.info__body { + z-index: 2; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 1280px) { + .info__body { + padding-top: 100px; + min-height: 600px; + } +} +@media (min-width: 1280px) { + .info__title { + max-width: 520px; + line-height: 1; + } +} +.info__item { + margin-top: 20px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 992px) { + .info__item { + max-width: 610px; + } +} +.info__item + .info__item { + margin-top: 60px; +} +.info__text { + color: #000; + font-size: 13px; + line-height: 1.4; +} +@media (min-width: 768px) { + .info__text { + font-size: 16px; + } +} +@media (min-width: 1280px) { + .info__text { + font-size: 18px; + } +} +.info__link { + border-radius: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + line-height: 1; + height: 40px; + font-size: 12px; + font-weight: 700; + gap: 8px; + color: #fff; + background: #377d87; +} +.info__link:hover { + -webkit-filter: grayscale(50%); + filter: grayscale(50%); +} +@media (min-width: 768px) { + .info__link { + height: 44px; + font-size: 16px; + gap: 10px; + max-width: 300px; + } +} +@media (min-width: 992px) { + .info__link { + max-width: 210px; + } +} +.info__link svg { + width: 16px; + height: 16px; +} +@media (min-width: 768px) { + .info__link svg { + width: 20px; + height: 20px; + } +} + +.thing { + padding-top: 15px; + padding-bottom: 30px; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + color: #000; + overflow: hidden; + position: relative; +} +@media (min-width: 992px) { + .thing { + padding-top: 20px; + padding-bottom: 60px; + } +} +@media (min-width: 1280px) { + .thing { + padding-bottom: 90px; + } +} +.thing_pdf { + padding: 30px 0; +} +@media (min-width: 992px) { + .thing_pdf { + padding: 60px 0; + } +} +@media (min-width: 1280px) { + .thing_pdf { + padding: 90px 0; + } +} +.thing__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.thing__breadcrumbs { + width: 100%; + margin-bottom: 40px; + position: relative; + z-index: 2; +} +@media (min-width: 768px) { + .thing__breadcrumbs { + margin-bottom: 60px; + } +} +.thing__date { + color: #000; + font-size: 14px; + font-weight: 700; + line-height: 21px; + margin-bottom: 10px; +} +@media (min-width: 768px) { + .thing__date { + font-size: 18px; + line-height: 27px; + } +} +.thing__title { + width: 100%; + font-size: 32px; + font-weight: 700; + margin: 0; + max-width: 780px; + position: relative; + z-index: 2; + line-height: 1.1; +} +@media (min-width: 768px) { + .thing__title { + font-size: 40px; + } +} +@media (min-width: 1280px) { + .thing__title { + font-size: 64px; + } +} +.thing__text { + width: 100%; + font-weight: 700; + font-size: 14px; + line-height: 1.4; + margin: 15px 0 0 0; + max-width: 780px; + position: relative; + z-index: 2; +} +@media (min-width: 768px) { + .thing__text { + margin-top: 15px; + } +} +@media (min-width: 992px) { + .thing__text { + font-weight: 400; + font-size: 18px; + } +} +.thing__search { + width: 100%; + max-width: 640px; + margin-top: 20px; + position: relative; + z-index: 2; +} +@media (min-width: 768px) { + .thing__search { + margin-top: 30px; + } +} +.thing__badge { + position: relative; + z-index: 2; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 5px; + padding: 0 12px; + background: #4d88d9; + color: #fff; + font-size: 12px; + line-height: 1; + height: 26px; + border-radius: 999px; + margin-bottom: 20px; +} +@media (min-width: 992px) { + .thing__badge { + font-size: 16px; + gap: 10px; + padding: 0 24px; + height: 42px; + margin-bottom: 30px; + } +} +.thing__badge svg { + width: 12px; + height: 12px; +} +@media (min-width: 992px) { + .thing__badge svg { + width: 20px; + height: 20px; + } +} +.thing__pic { + width: 60px; + aspect-ratio: 1/1; + -o-object-fit: contain; + object-fit: contain; + position: relative; + z-index: 1; + margin-bottom: 15px; +} +@media (min-width: 768px) { + .thing__pic { + width: 160px; + position: absolute; + top: 15px; + right: 20px; + } +} +@media (min-width: 992px) { + .thing__pic { + width: 330px; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + } +} +@media (min-width: 1280px) { + .thing__pic { + right: auto; + left: 50%; + margin-left: 200px; + } +} +.thing__pic_two { + -o-object-fit: cover; + object-fit: cover; + border-radius: 30px; + aspect-ratio: 44/37; + width: 100%; + max-width: 440px; +} +@media (min-width: 768px) { + .thing__pic_two { + position: static; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@media (min-width: 1280px) { + .thing__pic_two { + position: absolute; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + } +} +.thing__buttons { + width: 100%; + position: relative; + z-index: 2; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; + margin-top: 15px; +} +@media (min-width: 992px) { + .thing__buttons { + margin-top: 30px; + gap: 30px; + } +} +@media (min-width: 992px) { + .thing__buttons .button { + padding: 0 22px; + } +} +.thing__checkbox { + margin-top: 20px; +} +.thing__checkbox .checkbox__icon { + border-color: #377d87; +} +.thing__checkbox .checkbox__text { + color: #377d87; +} +.thing__profile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 768px) { + .thing__profile { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } +} +.thing__profile-photo { + width: 210px; + border-radius: 8px; + aspect-ratio: 1/1; +} +.thing__profile-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 15px; +} +@media (min-width: 768px) { + .thing__profile-body { + width: calc(100% - 210px); + padding-left: 35px; + } +} +.thing__profile .thing__title { + max-width: none; +} +@media (min-width: 768px) { + .thing__profile .thing__title { + margin-top: -20px; + } +} +.thing__profile .thing__text { + max-width: none; +} +.thing__bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 15px; + margin-top: 15px; +} +@media (min-width: 768px) { + .thing__bottom { + margin-top: 30px; + } +} +.thing__select { + width: 100%; + max-width: 640px; + margin-top: 20px; +} +@media (min-width: 768px) { + .thing__select { + margin-top: 30px; + } +} + +.page-404 { + background: url(../images/bg-3.svg) no-repeat 100%/cover; + overflow: hidden; +} +.page-404__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + padding: 60px 0; + color: #000; + font-size: 12px; + gap: 10px; + line-height: 1.4; +} +@media (min-width: 768px) { + .page-404__body { + font-size: 18px; + padding: 120px 0; + gap: 20px; + } +} +@media (min-width: 1280px) { + .page-404__body { + padding: 180px 0; + text-align: left; + } +} +.page-404__numb { + font-size: 114px; + line-height: 1; + color: #377d87; + font-weight: 700; +} +@media (min-width: 768px) { + .page-404__numb { + font-size: 184px; + } +} +@media (min-width: 768px) { + .page-404__title { + font-weight: 700; + font-size: 44px; + } +} +@media (min-width: 1280px) { + .page-404__title { + width: 710px; + position: relative; + left: 200px; + } +} +@media (min-width: 1280px) { + .page-404__subtitle { + width: 710px; + position: relative; + left: 200px; + } +} +.page-404__button { + margin-top: 10px; +} +@media (min-width: 1280px) { + .page-404__button { + position: relative; + left: -45px; + } +} + +.cookies { + display: none; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + padding: 10px; + padding-top: 0; + height: 0; + position: fixed; + z-index: 999; + bottom: 0; + left: 0; + width: 100%; +} +.cookies-is-actived .cookies { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.cookies__body { + border-radius: 6px; + border: 1px solid #377d87; + background: #fff; + padding: 15px; + padding-right: 50px; + position: relative; + max-width: 940px; + margin: 0 auto; +} +@media (min-width: 768px) { + .cookies__body { + padding: 25px; + padding-right: 50px; + border-radius: 12px; + } +} +@media (min-width: 992px) { + .cookies__body { + padding: 40px 60px; + } +} +.cookies__close { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #377d87; + padding: 0; + border: none; + background: none; + position: absolute; + top: 15px; + right: 15px; +} +.cookies__close:hover { + color: #000; +} +.cookies__close svg { + width: 16px; + height: 16px; +} +.cookies__text { + font-size: 12px; + color: #377d87; + line-height: 1.4; +} +@media (min-width: 768px) { + .cookies__text { + font-size: 16px; + font-weight: 700; + } +} + +.fancybox-active { + overflow: hidden; +} +.fancybox-is-open .fancybox-bg { + background: #080b0b; + opacity: 0.6; + z-index: 9999; +} +.fancybox-slide { + padding: 0; +} +@media (min-width: 992px) { + .fancybox-slide { + padding: 30px; + } +} +.fancybox-slide--html .fancybox-close-small { + padding: 0; + opacity: 1; + color: #377d87; +} +@media (min-width: 768px) { + .fancybox-slide--html .fancybox-close-small { + top: 10px; + right: 10px; + } +} +.fancybox-slide--html .fancybox-close-small:hover { + color: #000; +} + +.modal { + width: 100%; + max-width: 820px; + padding: 0; + background: #fff; + z-index: 99999; +} +@media (min-width: 992px) { + .modal { + border-radius: 10px; + border: 1px solid #377d87; + } +} +.modal_bg { + background: #fff url(../images/bg-4.svg) no-repeat calc(50% + 100px) 100%; +} +@media (min-width: 768px) { + .modal_bg { + background-position: 100% 100%; + } +} +.modal__body { + padding: 40px 15px; + padding-bottom: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + min-height: 100vh; + overflow: hidden; + font-size: 12px; +} +@media (min-width: 768px) { + .modal__body { + font-size: 16px; + padding-left: 22px; + padding-right: 22px; + } +} +@media (min-width: 992px) { + .modal__body { + min-height: 450px; + padding: 60px 80px; + padding-bottom: 40px; + } +} +@media (min-width: 768px) { + .modal__body .left { + text-align: left; + } +} +.modal__title { + width: 100%; + font-size: 22px; + font-weight: 700; + text-align: center; + color: #000; +} +@media (min-width: 768px) { + .modal__title { + font-size: 32px; + } +} +@media (min-width: 992px) { + .modal__title { + font-size: 44px; + } +} +.modal__text { + width: 100%; + text-align: center; + margin-top: 10px; + color: #000; +} +@media (min-width: 768px) { + .modal__text { + margin-top: 20px; + } +} +.modal__text span { + color: #9c9d9d; +} +.modal__text a { + font-weight: 700; + color: #377d87; +} +.modal__text a:hover { + color: #000; +} +.modal__button { + margin-top: 20px; +} +@media (min-width: 768px) { + .modal__button { + min-width: 200px; + margin-top: 30px; + } +} +.modal__buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-top: 20px; +} +@media (min-width: 768px) { + .modal__buttons { + gap: 30px; + margin-top: 30px; + } +} +.modal__form { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; + margin-top: 10px; +} +@media (min-width: 768px) { + .modal__form { + margin-top: 20px; + } +} +.modal__form-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} +.modal__form-item > .input { + width: 100%; +} +.modal__form-item > .textarea { + width: 100%; + height: 175px; +} +@media (min-width: 768px) { + .modal__form-item > .textarea { + height: 195px; + } +} +.modal__form-item > .file { + width: 100%; +} +.modal__form-item > .button { + min-width: 120px; +} +.modal__form-item > label { + width: 100%; + display: none; + color: #eb5757; + padding: 0 10px; + font-size: 12px; +} +@media (min-width: 768px) { + .modal__form-item > label { + padding: 0 20px; + font-size: 16px; + } +} +.modal__sign { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + margin-top: 10px; + margin-bottom: 20px; + width: 100%; +} +@media (min-width: 768px) { + .modal__sign { + margin-top: 20px; + margin-bottom: 40px; + } +} +.modal__sign-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; +} +.modal__sign-item > .input { + width: 100%; + padding-right: 36px; + position: relative; + z-index: 1; +} +@media (min-width: 768px) { + .modal__sign-item > .input { + height: 52px; + padding-right: 60px; + } +} +.modal__sign-item > .textarea { + width: 100%; +} +.modal__sign-bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} +.modal__sign-bottom-link { + font-weight: 700; + color: #377d87; +} +.modal__tabs { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin-top: 10px; +} +@media (min-width: 768px) { + .modal__tabs { + gap: 24px; + margin-top: 20px; + } +} +.modal__tabs-item.active { + background: #377d87; + color: #fff; +} +.modal__reg { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; + width: 100%; + margin-top: 10px; + margin-bottom: 20px; +} +@media (min-width: 768px) { + .modal__reg { + margin-top: 20px; + margin-bottom: 30px; + gap: 20px; + } +} +.modal__reg.showed { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.modal__reg-item { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.modal__reg-item > .captcha { + width: 100%; + max-width: 300px; +} + +.messages { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.messages__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + width: 100%; +} +@media (min-width: 768px) { + .messages__body { + gap: 20px; + } +} +.messages__item { + display: none; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 8px; + border: 1px solid #e7e7e7; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + padding: 10px; + font-size: 12px; +} +@media (min-width: 768px) { + .messages__item { + padding: 20px; + font-size: 16px; + } +} +.messages__item:nth-of-type(1), .messages__item:nth-of-type(2), .messages__item:nth-of-type(3), .messages__item:nth-of-type(4), .messages__item:nth-of-type(5), .messages__item:nth-of-type(6) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.messages__item-info { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: calc(100% - 90px); +} +@media (min-width: 768px) { + .messages__item-info { + width: calc(100% - 150px); + } +} +.messages__item-photo { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + background: #9c9d9d; + color: #fff; + width: 36px; + border-radius: 6px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .messages__item-photo { + width: 52px; + } +} +.messages__item-photo svg { + width: 50%; + position: relative; + z-index: 1; +} +.messages__item-photo img { + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.messages__item-text { + width: calc(100% - 36px); + padding-left: 6px; + color: #000; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 4px; +} +@media (min-width: 768px) { + .messages__item-text { + padding-left: 20px; + width: calc(100% - 52px); + gap: 8px; + } +} +.messages__item-text span { + color: #000; +} +.messages__item-date { + color: #000; + width: 90px; + text-align: right; +} +@media (min-width: 768px) { + .messages__item-date { + width: 150px; + } +} +.messages.active .messages__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.responses { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.responses__body { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +.responses__item { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + border-radius: 8px; + border: 1px solid #e7e7e7; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + padding: 20px 10px; + font-size: 12px; + position: relative; +} +@media (min-width: 768px) { + .responses__item { + padding: 20px; + font-size: 16px; + } +} +.responses__item:nth-of-type(1), .responses__item:nth-of-type(2), .responses__item:nth-of-type(3), .responses__item:nth-of-type(4), .responses__item:nth-of-type(5), .responses__item:nth-of-type(6) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.responses__item-date { + color: #000; +} +@media (min-width: 992px) { + .responses__item-date { + position: absolute; + top: 20px; + right: 20px; + } +} +.responses__item-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +.responses__item-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .responses__item-inner { + gap: 20px; + } +} +@media (min-width: 1280px) { + .responses__item-inner { + width: calc(100% - 150px); + } +} +.responses__item-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + color: #000; + text-align: right; +} +@media (min-width: 992px) { + .responses__item-row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; + text-align: left; + } +} +.responses__item-row span { + color: #000; + text-align: left; +} +.responses__item-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .responses__item-buttons { + display: grid; + grid-template-columns: 1fr 1fr; + } +} +@media (min-width: 1280px) { + .responses__item-buttons { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} +.responses__item-buttons .button.active { + background: #377d87; + color: #fff; +} +.responses.active .responses__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.chatbox { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .chatbox { + gap: 30px; + } +} +@media (min-width: 1280px) { + .chatbox { + gap: 40px; + } +} +.chatbox__toper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + border: 1px solid #e7e7e7; + border-radius: 8px; + padding: 10px; +} +@media (min-width: 768px) { + .chatbox__toper { + padding: 20px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +.chatbox__toper-info { + font-size: 12px; +} +@media (min-width: 768px) { + .chatbox__toper-info { + font-size: 16px; + width: calc(100% - 230px); + } +} +@media (min-width: 768px) { + .chatbox__toper-button { + width: 210px; + padding: 0; + } +} +.chatbox__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .chatbox__list { + gap: 20px; + } +} +@media (min-width: 1280px) { + .chatbox__list { + gap: 40px; + } +} +.chatbox__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + color: #000; + font-size: 12px; +} +@media (min-width: 768px) { + .chatbox__item { + font-size: 16px; + } +} +.chatbox__item_reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.chatbox__item-photo { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + background: #9c9d9d; + color: #fff; + width: 44px; + border-radius: 6px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.chatbox__item-photo svg { + width: 50%; + position: relative; + z-index: 1; +} +.chatbox__item-photo img { + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.chatbox__item-body { + width: calc(100% - 54px); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +@media (min-width: 768px) { + .chatbox__item-body { + width: calc(100% - 60px); + } +} +.chatbox__item_reverse .chatbox__item-body { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; +} +.chatbox__item-text { + border-radius: 8px; + background: #fff; + -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + padding: 10px; + line-height: 1.6; +} +.chatbox__item-time { + width: 100%; + padding-left: 54px; + margin-top: 10px; + color: #9c9d9d; +} +.chatbox__item_reverse .chatbox__item-time { + text-align: right; +} +.chatbox__bottom { + background: #4d88d9; + padding: 10px; + border-radius: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +@media (min-width: 768px) { + .chatbox__bottom { + padding: 16px 20px; + } +} +.chatbox__bottom-file { + width: 20px; + aspect-ratio: 1/1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #fff; + color: #4d88d9; + border-radius: 8px; +} +@media (min-width: 768px) { + .chatbox__bottom-file { + width: 48px; + } +} +.chatbox__bottom-file:hover { + color: #377d87; +} +.chatbox__bottom-file input { + display: none; +} +.chatbox__bottom-file svg { + width: 50%; + aspect-ratio: 1/1; +} +@media (min-width: 768px) { + .chatbox__bottom-file svg { + width: 40%; + } +} +.chatbox__bottom-text { + width: calc(100% - 60px); + height: 20px; + border-color: #fff; +} +@media (min-width: 768px) { + .chatbox__bottom-text { + width: calc(100% - 128px); + height: 48px; + } +} +.chatbox__bottom-text:focus { + border-color: #fff; +} +.chatbox__bottom-send { + width: 20px; + aspect-ratio: 1/1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + background: #fff; + border: none; + color: #4d88d9; + border-radius: 999px; +} +@media (min-width: 768px) { + .chatbox__bottom-send { + width: 48px; + } +} +.chatbox__bottom-send:hover { + color: #377d87; +} +.chatbox__bottom-send svg { + width: 50%; + aspect-ratio: 1/1; + position: relative; + left: 1px; +} +@media (min-width: 768px) { + .chatbox__bottom-send svg { + width: 40%; + left: 2px; + } +} + +.cvs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.cvs__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + width: 100%; +} +@media (min-width: 768px) { + .cvs__body { + gap: 30px; + } +} +.cvs__item { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + border-radius: 8px; + border: 1px solid #e7e7e7; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + padding: 10px; + font-size: 12px; + position: relative; +} +@media (min-width: 768px) { + .cvs__item { + gap: 0; + padding: 20px; + font-size: 16px; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} +.cvs__item:nth-of-type(1), .cvs__item:nth-of-type(2), .cvs__item:nth-of-type(3), .cvs__item:nth-of-type(4), .cvs__item:nth-of-type(5), .cvs__item:nth-of-type(6) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.cvs__item-like { + position: absolute; + top: 10px; + right: 10px; +} +@media (min-width: 768px) { + .cvs__item-like { + top: 20px; + right: 20px; + } +} +.cvs__item-photo { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + background: #9c9d9d; + color: #fff; + width: 36px; + border-radius: 6px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .cvs__item-photo { + width: 68px; + } +} +.cvs__item-photo svg { + width: 50%; + position: relative; + z-index: 1; +} +.cvs__item-photo img { + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.cvs__item-text { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .cvs__item-text { + gap: 20px; + width: calc(100% - 68px); + padding-left: 20px; + padding-right: 60px; + } +} +.cvs__item-text div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +@media (min-width: 768px) { + .cvs__item-text div { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } +} +.cvs__item-text span, +.cvs__item-text a { + color: #000; +} +.cvs__item-button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .cvs__item-button { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + width: 100%; + padding-top: 20px; + } +} +.cvs.active .cvs__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.faqs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.faqs__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + width: 100%; +} +.faqs__item { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 8px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + background: #fff; + padding: 10px; + font-size: 12px; +} +@media (min-width: 768px) { + .faqs__item { + padding: 20px; + font-size: 16px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + } +} +.faqs__item:nth-of-type(1), .faqs__item:nth-of-type(2), .faqs__item:nth-of-type(3), .faqs__item:nth-of-type(4), .faqs__item:nth-of-type(5), .faqs__item:nth-of-type(6) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.faqs__item-button { + background: none; + padding: 0; + border: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + text-align: left; + font-size: 14px; + font-weight: 700; +} +@media (min-width: 768px) { + .faqs__item-button { + font-size: 20px; + } +} +.faqs__item-button span { + width: calc(100% - 16px); + padding-right: 16px; +} +.faqs__item-button i { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 16px; + aspect-ratio: 1/1; + color: #377d87; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.faqs__item-button i svg { + width: 16px; + aspect-ratio: 1/1; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.faqs__item-button.active i { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.faqs__item-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + opacity: 0; + height: 0; + overflow: hidden; + font-size: 12px; + line-height: 1.4; +} +@media (min-width: 768px) { + .faqs__item-body { + font-size: 16px; + gap: 20px; + } +} +.faqs__item-body p { + margin: 0; +} +.active + .faqs__item-body { + opacity: 1; + height: auto; + -webkit-transition: 0.3s; + transition: 0.3s; + padding-top: 10px; +} +@media (min-width: 768px) { + .active + .faqs__item-body { + padding-top: 20px; + } +} +.faqs.active .faqs__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.cabinet { + padding: 20px 0; + padding-bottom: 40px; + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); +} +@media (min-width: 992px) { + .cabinet { + padding: 30px 0; + padding-bottom: 60px; + } +} +.cabinet__breadcrumbs { + margin-bottom: 50px; +} +.cabinet__wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 992px) { + .cabinet__wrapper { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +.cabinet__side { + border-radius: 8px; + background: #fff; + padding: 20px 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 30px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); +} +@media (min-width: 768px) { + .cabinet__side { + padding: 30px 20px; + margin-bottom: 50px; + } +} +@media (min-width: 992px) { + .cabinet__side { + width: 340px; + margin: 0; + position: sticky; + top: 6px; + } +} +@media (min-width: 1280px) { + .cabinet__side { + width: 400px; + } +} +.cabinet__side-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +.cabinet__side-toper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.cabinet__side-toper-pic { + width: 70px; + aspect-ratio: 1/1; + overflow: hidden; + border-radius: 8px; + color: #fff; + background: #9c9d9d; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + position: relative; +} +.cabinet__side-toper-pic img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + position: absolute; + z-index: 2; + top: 0; + left: 0; + aspect-ratio: 1/1; + -o-object-fit: contain; + object-fit: contain; +} +.cabinet__side-toper-pic svg { + width: 50%; + aspect-ratio: 1/1; +} +.cabinet__side-toper b { + width: calc(100% - 70px); + font-size: 14px; + font-weight: 700; + padding-left: 16px; +} +@media (min-width: 768px) { + .cabinet__side-toper b { + font-size: 20px; + } +} +.cabinet__menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.cabinet__menu-toper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 16px; + padding-right: 12px; + border: none; + border-radius: 8px; + background: #377d87; + color: #fff; +} +@media (min-width: 768px) { + .cabinet__menu-toper { + padding: 0 20px; + } +} +@media (min-width: 992px) { + .cabinet__menu-toper { + display: none; + } +} +.cabinet__menu-toper-text { + width: calc(100% - 16px); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .cabinet__menu-toper-text { + width: calc(100% - 20px); + } +} +.cabinet__menu-toper-text i { + width: 16px; + height: 16px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +@media (min-width: 768px) { + .cabinet__menu-toper-text i { + width: 22px; + height: 22px; + } +} +.cabinet__menu-toper-text svg { + width: 16px; + height: 16px; +} +@media (min-width: 768px) { + .cabinet__menu-toper-text svg { + width: 22px; + height: 22px; + } +} +.cabinet__menu-toper-text span { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 10px; + min-height: 30px; + font-size: 12px; + width: calc(100% - 16px); +} +@media (min-width: 768px) { + .cabinet__menu-toper-text span { + width: calc(100% - 22px); + font-size: 20px; + min-height: 52px; + padding: 0 16px; + } +} +.cabinet__menu-toper-arrow { + width: 16px; + height: 16px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: 0.3s; + transition: 0.3s; +} +@media (min-width: 768px) { + .cabinet__menu-toper-arrow { + width: 20px; + height: 20px; + } +} +.cabinet__menu-toper-arrow svg { + width: 12px; + height: 12px; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +@media (min-width: 768px) { + .cabinet__menu-toper-arrow svg { + width: 20px; + height: 20px; + } +} +.cabinet__menu-toper.active .cabinet__menu-toper-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.cabinet__menu-body { + opacity: 0; + height: 0; + overflow: hidden; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +@media (min-width: 992px) { + .cabinet__menu-body { + opacity: 1; + height: auto; + } +} +.active + .cabinet__menu-body { + opacity: 1; + height: auto; + -webkit-transition: 0.3s; + transition: 0.3s; +} +.cabinet__menu-items { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.cabinet__menu-item { + padding: 8px 16px; + border-radius: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (min-width: 768px) { + .cabinet__menu-item { + padding: 14px 20px; + } +} +.cabinet__menu-item:hover { + color: #377d87; +} +@media (min-width: 992px) { + .cabinet__menu-item.active { + background: #377d87; + color: #fff; + } +} +@media (min-width: 992px) { + .cabinet__menu-item.active svg { + color: #fff; + } +} +@media (min-width: 992px) { + .cabinet__menu-item.active.red { + background: #eb5757; + } +} +.cabinet__menu-item i { + width: 16px; + height: 16px; + color: #377d87; +} +@media (min-width: 768px) { + .cabinet__menu-item i { + width: 22px; + height: 22px; + } +} +.cabinet__menu-item svg { + width: 16px; + height: 16px; +} +@media (min-width: 768px) { + .cabinet__menu-item svg { + width: 22px; + height: 22px; + } +} +.cabinet__menu-item span { + width: calc(100% - 16px); + font-size: 12px; + padding-left: 10px; +} +@media (min-width: 768px) { + .cabinet__menu-item span { + font-size: 20px; + width: calc(100% - 22px); + padding-left: 16px; + } +} +.cabinet__menu-bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} +@media (min-width: 768px) { + .cabinet__menu-bottom { + gap: 20px; + margin-top: 20px; + } +} +.cabinet__menu-copy { + color: #9c9d9d; + text-align: center; + font-size: 12px; +} +@media (min-width: 768px) { + .cabinet__menu-copy { + font-size: 16px; + } +} +.cabinet__body { + margin: 0 -10px; + margin-top: 50px; + background: #fff; + padding: 20px 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 30px; + color: #000; +} +@media (min-width: 768px) { + .cabinet__body { + padding: 30px 20px; + margin: 0; + border-radius: 8px; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + } +} +@media (min-width: 992px) { + .cabinet__body { + width: calc(100% - 360px); + } +} +@media (min-width: 1280px) { + .cabinet__body { + width: calc(100% - 420px); + } +} +.cabinet__body-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +.cabinet__title { + font-size: 24px; +} +@media (min-width: 768px) { + .cabinet__title { + font-size: 32px; + } +} +@media (min-width: 992px) { + .cabinet__title { + font-size: 40px; + } +} +@media (min-width: 1280px) { + .cabinet__title { + font-size: 48px; + } +} +.cabinet__subtitle { + font-size: 22px; + margin: 0; + font-weight: 700; + color: #000; +} +@media (min-width: 768px) { + .cabinet__subtitle { + font-size: 24px; + } +} +.cabinet__h4 { + font-size: 20px; + margin: 0; + font-weight: 700; + color: #000; +} +@media (min-width: 768px) { + .cabinet__h4 { + font-size: 22px; + } +} +.cabinet__text { + margin: 0; + font-size: 14px; +} +@media (min-width: 768px) { + .cabinet__text { + font-size: 16px; + } +} +.cabinet__text b { + color: #000; + font-size: 18px; +} +@media (min-width: 768px) { + .cabinet__text b { + font-size: 24px; + } +} +.cabinet__descr { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; +} +@media (min-width: 768px) { + .cabinet__descr { + gap: 12px; + } +} +.cabinet__avatar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +@media (min-width: 768px) { + .cabinet__avatar { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +.cabinet__avatar-pic { + width: 100px; + aspect-ratio: 1/1; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + overflow: hidden; + border-radius: 8px; + color: #fff; + background: #9c9d9d; +} +.cabinet__avatar-pic svg { + width: 50%; + aspect-ratio: 1/1; + z-index: 1; + position: relative; +} +.cabinet__avatar-form { + width: calc(100% - 100px); + padding-left: 15px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; +} +@media (min-width: 768px) { + .cabinet__avatar-form { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + padding-left: 30px; + gap: 12px; + } +} +@media (min-width: 768px) { + .cabinet__avatar-form .file { + min-width: 215px; + } +} +.cabinet__inputs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 1280px) { + .cabinet__inputs { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} +@media (min-width: 1280px) { + .cabinet__inputs-item { + width: calc(50% - 10px); + } +} +@media (min-width: 1280px) { + .cabinet__inputs-item_fullwidth { + width: 100%; + } +} +@media (min-width: 1280px) { + .cabinet__inputs-item_min { + width: calc(15% - 10px); + } +} +@media (min-width: 1280px) { + .cabinet__inputs-item_max { + width: calc(85% - 10px); + } +} +@media (min-width: 768px) { + .cabinet__inputs-item .button { + width: 100%; + max-width: 215px; + padding: 0; + } +} +.cabinet__inputs-item .buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__inputs-item .buttons { + gap: 20px; + max-width: 470px; + } +} +@media (min-width: 992px) { + .cabinet__inputs-item .buttons { + max-width: none; + } +} +@media (min-width: 1280px) { + .cabinet__inputs-item .buttons { + max-width: 470px; + } +} +.cabinet__inputs-item .buttons .button { + max-width: none; +} +.cabinet__inputs > .button { + padding: 0; + width: 100%; + max-width: 140px; +} +@media (min-width: 768px) { + .cabinet__inputs > .button { + max-width: 190px; + } +} +.cabinet__add { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__add { + gap: 0; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } +} +.cabinet__add-pic { + border-radius: 4px; + position: relative; + overflow: hidden; + background: #9c9d9d; + color: #fff; + width: 100px; + aspect-ratio: 1/1; + -webkit-transition: 0.3s; + transition: 0.3s; +} +@media (min-width: 768px) { + .cabinet__add-pic { + width: 220px; + border-radius: 8px; + } +} +.cabinet__add-pic:hover { + background: #000; +} +.cabinet__add-pic input { + display: none; +} +.cabinet__add-pic > svg { + width: 20px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 1; +} +@media (min-width: 768px) { + .cabinet__add-pic > svg { + width: 50px; + } +} +.cabinet__add-pic span { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + gap: 4px; + font-weight: 700; + font-size: 8px; + line-height: 1; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + margin-top: 25px; +} +@media (min-width: 768px) { + .cabinet__add-pic span { + font-size: 16px; + margin-top: 60px; + } +} +.cabinet__add-pic span svg { + width: 7px; + aspect-ratio: 1/1; +} +@media (min-width: 768px) { + .cabinet__add-pic span svg { + width: 16px; + } +} +.cabinet__add-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__add-body { + gap: 20px; + width: calc(100% - 220px); + padding-left: 20px; + } +} +@media (min-width: 768px) { + .cabinet__add-body .button { + width: 215px; + padding: 0; + } +} +.cabinet__fleet { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .cabinet__fleet { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 1280px) { + .cabinet__fleet { + grid-template-columns: repeat(3, 1fr); + } +} +@media (min-width: 768px) { + .cabinet__submit { + width: 215px; + padding: 0; + margin: 0 auto; + } +} +.cabinet__filters { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__filters { + gap: 20px; + } +} +@media (min-width: 1280px) { + .cabinet__filters { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +.cabinet__filters-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__filters-item { + gap: 20px; + } +} +@media (min-width: 1280px) { + .cabinet__filters-item { + width: calc(50% - 10px); + max-width: 410px; + } +} +.cabinet__filters-item .button, +.cabinet__filters-item .select { + width: 100%; +} +@media (min-width: 1280px) { + .cabinet__filters-item .button, + .cabinet__filters-item .select { + width: auto; + } +} +.cabinet__filters-item + .cabinet__filters-item { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; +} +@media (min-width: 1280px) { + .cabinet__filters-item + .cabinet__filters-item { + max-width: 280px; + } +} +.cabinet__filters .search input { + padding-right: 135px; +} +.cabinet__filters .search button { + width: 115px; +} +.cabinet__filters-buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + width: 100%; +} +@media (min-width: 768px) { + .cabinet__filters-buttons { + gap: 20px; + } +} +.cabinet__filters-buttons .button { + padding: 0; + gap: 5px; +} +.cabinet__filters-buttons .button.active { + background: #377d87; + color: #fff; +} +.cabinet__filters-buttons .button.active:before { + content: ""; + width: 6px; + height: 6px; + background: #fff; + border-radius: 999px; +} +.cabinet__table-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-weight: 700; + margin-bottom: -10px; +} +.cabinet__table-header div { + font-size: 18px; +} +@media (min-width: 768px) { + .cabinet__table-header div { + font-size: 24px; + } +} +.cabinet__table-header span { + color: #000; + font-size: 14px; +} +@media (min-width: 768px) { + .cabinet__table-header span { + font-size: 18px; + } +} +.cabinet__table-header span b { + color: #377d87; +} +.cabinet__tabs { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} +@media (min-width: 768px) { + .cabinet__tabs { + max-width: 420px; + } +} +.cabinet__tabs .button.active { + background: #377d87; + color: #fff; +} +.cabinet__bodies { + display: none; +} +.cabinet__bodies.showed { + display: block; +} +.cabinet__nots { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__nots { + gap: 20px; + } +} +.cabinet__nots .input { + width: 100%; +} +.cabinet__anketa { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__anketa { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +@media (min-width: 992px) { + .cabinet__anketa { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + } +} +@media (min-width: 1280px) { + .cabinet__anketa { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +.cabinet__anketa-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__anketa-buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } +} +.cabinet__stats { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 6px; +} +@media (min-width: 768px) { + .cabinet__stats { + gap: 12px; + } +} +.cabinet__stats-title { + font-size: 14px; + font-weight: 700; + color: #000; +} +@media (min-width: 768px) { + .cabinet__stats-title { + font-size: 24px; + } +} +.cabinet__stats-body { + background: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + border-radius: 8px; + padding: 10px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-bottom: 10px; +} +@media (min-width: 768px) { + .cabinet__stats-body { + padding: 10px 20px; + } +} +.cabinet__stats-item { + font-size: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + line-height: 1; + gap: 6px; +} +@media (min-width: 768px) { + .cabinet__stats-item { + font-size: 20px; + gap: 10px; + } +} +.cabinet__stats-item svg { + width: 20px; + aspect-ratio: 1/1; + color: #377d87; +} +@media (min-width: 768px) { + .cabinet__stats-item svg { + width: 40px; + margin-right: 10px; + } +} +.cabinet__stats-item span { + font-weight: 700; + color: #000; +} +.cabinet__stats-item b { + color: #377d87; + font-size: 14px; +} +@media (min-width: 768px) { + .cabinet__stats-item b { + font-size: 24px; + } +} +.cabinet__stats-subtitle { + font-size: 14px; + font-weight: 700; + color: #377d87; +} +@media (min-width: 768px) { + .cabinet__stats-subtitle { + font-size: 18px; + } +} +.cabinet__stats-line { + width: 100%; + position: relative; + overflow: hidden; + height: 8px; + border-radius: 999px; + background: #cecece; +} +.cabinet__stats-line span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #377d87; + border-radius: 999px; +} +.cabinet__stats-bottom { + color: #000; + font-size: 12px; +} +@media (min-width: 768px) { + .cabinet__stats-bottom { + font-size: 16px; + } +} +.cabinet__works { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; +} +@media (min-width: 768px) { + .cabinet__works { + gap: 30px; + } +} +.cabinet__works-item { + -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + padding: 10px; + border-radius: 4px; +} +@media (min-width: 768px) { + .cabinet__works-item { + padding: 20px; + border-radius: 8px; + } +} +.cabinet__works-spoiler { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.cabinet__works-spoiler-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: calc(100% - 22px); +} +.cabinet__works-spoiler-right { + width: 22px; + height: 22px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #377d87; + padding: 0; + background: none; + border: none; +} +.cabinet__works-spoiler-right svg { + width: 60%; + aspect-ratio: 1/1; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + -webkit-transition: 0.3s; + transition: 0.3s; +} +.cabinet__works-spoiler.active .cabinet__works-spoiler-right svg { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.cabinet__works-spoiler-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 60px; +} +@media (min-width: 768px) { + .cabinet__works-spoiler-buttons { + width: 74px; + } +} +.cabinet__works-spoiler-buttons .button { + width: 22px; + height: 22px; + padding: 0; +} +@media (min-width: 768px) { + .cabinet__works-spoiler-buttons .button { + width: 30px; + height: 30px; + } +} +.cabinet__works-spoiler-text { + width: calc(100% - 60px); + padding-left: 20px; + font-size: 17px; + font-weight: 700; + color: #000; +} +@media (min-width: 768px) { + .cabinet__works-spoiler-text { + width: calc(100% - 74px); + font-size: 20px; + } +} +.cabinet__works-body { + opacity: 0; + height: 0; + overflow: hidden; +} +.active + .cabinet__works-body { + -webkit-transition: 0.3s; + transition: 0.3s; + opacity: 1; + height: auto; + padding-top: 20px; +} +.cabinet__works-add { + padding: 0; + width: 100%; + max-width: 160px; +} +@media (min-width: 768px) { + .cabinet__works-add { + max-width: 220px; + } +} +.cabinet__buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; +} +@media (min-width: 768px) { + .cabinet__buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } +} +.cabinet__buttons .button, +.cabinet__buttons .file { + padding: 0; + width: 100%; + max-width: 140px; +} +@media (min-width: 768px) { + .cabinet__buttons .button, + .cabinet__buttons .file { + max-width: none; + } +} +@media (min-width: 768px) { + .cabinet__buttons { + gap: 20px; + } +} +@media (min-width: 1280px) { + .cabinet__buttons { + max-width: 400px; + } +} +.cabinet__vacs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.cabinet__vacs-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 20px; + width: 100%; +} +@media (min-width: 768px) { + .cabinet__vacs-body { + gap: 30px; + } +} +.cabinet__vacs-item { + display: none; + background: #fff; + -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); +} +.cabinet__vacs-item:nth-of-type(1), .cabinet__vacs-item:nth-of-type(2) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.cabinet__vacs.active .cabinet__vacs-item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} \ No newline at end of file diff --git a/public/images/sprite.svg b/public/images/sprite.svg index 33da6b6..691fd62 100644 --- a/public/images/sprite.svg +++ b/public/images/sprite.svg @@ -106,7 +106,7 @@ - + diff --git a/public/scss/_global.scss b/public/scss/_global.scss index 985c50d..be3dc67 100644 --- a/public/scss/_global.scss +++ b/public/scss/_global.scss @@ -12,6 +12,9 @@ @media (min-width: $tablet) { gap: 60px; } + &.pdf { + gap: 0; + } } .container { @@ -240,6 +243,17 @@ h1 { padding: 0 46px 0 20px !important; } } + &--multiple &__rendered { + display: flex !important; + align-items: center; + flex-wrap: wrap; + gap: 10px; + padding-top: 10px !important; + padding-bottom: 10px !important; + .select2-selection__choice { + margin: 0; + } + } &__arrow { top: 0 !important; right: 0 !important; @@ -607,6 +621,7 @@ h1 { display: flex; align-items: center; justify-content: center; + flex-wrap: wrap; line-height: 1; color: $black; font-size: 12px; @@ -778,6 +793,11 @@ h1 { } } +.like.active { + background: $red; + border-color: $red; +} + .checkbox { display: flex; align-items: flex-start; @@ -1281,3 +1301,19 @@ h1 { } } } + +.more { + display: flex; + flex-direction: column; + align-items: center; + &_mt { + margin-top: 20px; + } + .button { + min-width: 100px; + padding: 0; + @media (min-width: $tablet) { + min-width: 180px; + } + } +} diff --git a/public/scss/blocks/_404.scss b/public/scss/blocks/_404.scss index 7e89176..c4361f1 100644 --- a/public/scss/blocks/_404.scss +++ b/public/scss/blocks/_404.scss @@ -56,4 +56,4 @@ left: -45px; } } -} \ No newline at end of file +} diff --git a/public/scss/blocks/_cabinet.scss b/public/scss/blocks/_cabinet.scss index 5b8c191..d39a76c 100644 --- a/public/scss/blocks/_cabinet.scss +++ b/public/scss/blocks/_cabinet.scss @@ -1188,7 +1188,8 @@ width: calc(50% - 10px); max-width: 410px; } - .button, .select { + .button, + .select { width: 100%; @media (min-width: $desktop) { width: auto; @@ -1390,7 +1391,7 @@ overflow: hidden; height: 8px; border-radius: 999px; - background: #CECECE; + background: #cecece; span { position: absolute; top: 0; @@ -1514,7 +1515,8 @@ grid-template-columns: 1fr 1fr; gap: 20px; } - .button, .file { + .button, + .file { padding: 0; width: 100%; max-width: 140px; @@ -1551,7 +1553,6 @@ &:nth-of-type(2) { display: flex; } - } &.active &-item { display: flex; diff --git a/public/scss/blocks/_footer.scss b/public/scss/blocks/_footer.scss index fde0f82..b8bb890 100644 --- a/public/scss/blocks/_footer.scss +++ b/public/scss/blocks/_footer.scss @@ -21,7 +21,8 @@ padding: 0; border: none; background: none; - a, b { + a, + b { display: flex; justify-content: center; align-items: center; @@ -257,7 +258,7 @@ span { width: 1px; height: 20px; - background: #6b6c6d; + background: $black; } } } diff --git a/public/scss/blocks/_info.scss b/public/scss/blocks/_info.scss index a4ba47b..8a04fb4 100644 --- a/public/scss/blocks/_info.scss +++ b/public/scss/blocks/_info.scss @@ -50,7 +50,7 @@ margin-top: 60px; } &__text { - color: #6b6c6d; + color: $black; font-size: 13px; line-height: 1.4; @media (min-width: $tablet) { diff --git a/public/scss/blocks/_main.scss b/public/scss/blocks/_main.scss index 47ba0a5..98a9c2c 100644 --- a/public/scss/blocks/_main.scss +++ b/public/scss/blocks/_main.scss @@ -439,6 +439,10 @@ span { color: $black; } + i { + font-style: normal; + color: $green; + } .del { position: absolute; z-index: 1; @@ -539,7 +543,6 @@ } span { @media (min-width: $tablet) { - } } a:hover { @@ -866,14 +869,31 @@ td { border: 1px solid #cecece; padding: 4px 8px; + vertical-align: top; @media (min-width: $tablet) { padding: 8px 16px; } b { font-weight: 700; } - a:hover { - color: $green; + } + &_three { + table-layout: auto; + td { + width: 25% !important; + &:last-child { + width: 50% !important; + } + } + } + b { + display: block; + } + a { + color: $green; + text-decoration: underline; + &:hover { + color: $black; } } } @@ -1031,11 +1051,6 @@ color: $black; width: 100%; } - .vacancies__list { - @media (min-width: $laptop) { - grid-template-columns: repeat(2, 1fr); - } - } &-filters { width: 100%; } @@ -1055,57 +1070,50 @@ } &-thing { width: 100%; - position: relative; - padding: 10px 0; + background: $gradient; + padding: 20px 10px; padding-bottom: 30px; display: flex; flex-direction: column; gap: 24px; + border-radius: 12px; + box-shadow: $shadow; @media (min-width: $laptop) { - display: grid; - grid-template-columns: repeat(2, 1fr); - padding: 30px 0; - } - @media (min-width: $desktop) { - padding: 50px 0; - display: flex; + padding: 30px 20px; flex-direction: row; align-items: flex-start; gap: 0; } - &:before { - content: ""; - position: absolute; - z-index: 1; - top: 0; - left: 50%; - width: 20000px; - height: 100%; - margin-left: -10000px; - background: $gradient; + @media (min-width: $desktop) { + padding: 50px 20px; } &-pic { position: relative; z-index: 2; width: 100%; - height: 280px; + aspect-ratio: 42/34; object-fit: cover; border-radius: 8px; + max-height: 340px; + @media (min-width: $laptop) { + width: 380px; + } @media (min-width: $desktop) { width: 420px; } } &-body { - position: relative; - z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: $black; + @media (min-width: $laptop) { + width: calc(100% - 380px); + padding-left: 20px; + } @media (min-width: $desktop) { width: calc(100% - 420px); - padding-left: 30px; gap: 20px; } > * { @@ -1113,6 +1121,30 @@ } .button { width: auto; + @media (min-width: $tablet) { + min-width: 200px; + } + } + } + &-scroll { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + overflow: hidden; + overflow-y: auto; + max-height: 180px; + padding-right: 10px; + @media (min-width: $tablet) { + max-height: 210px; + padding-right: 20px; + } + @media (min-width: $laptop) { + max-height: 175px; + } + @media (min-width: $desktop) { + max-height: 200px; + gap: 20px; } } } diff --git a/public/scss/blocks/_modals.scss b/public/scss/blocks/_modals.scss index ec0c286..b255045 100644 --- a/public/scss/blocks/_modals.scss +++ b/public/scss/blocks/_modals.scss @@ -65,7 +65,7 @@ overflow: hidden; } &-is-open &-bg { - background: #080B0B; + background: #080b0b; opacity: 0.6; z-index: 9999; } @@ -154,7 +154,7 @@ margin-top: 20px; } span { - color: #9C9D9D; + color: #9c9d9d; } a { font-weight: 700; @@ -276,7 +276,6 @@ margin-top: 20px; } &-item { - &.active { background: $green; color: $white; diff --git a/public/scss/blocks/_news.scss b/public/scss/blocks/_news.scss index 1b6034b..df036f4 100644 --- a/public/scss/blocks/_news.scss +++ b/public/scss/blocks/_news.scss @@ -69,7 +69,7 @@ margin-top: 5px; } &-text { - color: #6b6c6d; + color: $black; font-size: 13px; margin-top: 10px; @include lines(4); @@ -101,4 +101,19 @@ height: 44px; } } + &__items { + display: grid; + gap: 20px; + margin-bottom: 10px; + @media (min-width: $tablet) { + grid-template-columns: 1fr 1fr; + } + @media (min-width: $laptop) { + grid-template-columns: 1fr 1fr 1fr; + } + } +} + +main + .news { + padding: 0; } diff --git a/public/scss/blocks/_thing.scss b/public/scss/blocks/_thing.scss index 5cf62ef..2ceb508 100644 --- a/public/scss/blocks/_thing.scss +++ b/public/scss/blocks/_thing.scss @@ -12,6 +12,15 @@ @media (min-width: $desktop) { padding-bottom: 90px; } + &_pdf { + padding: 30px 0; + @media (min-width: $laptop) { + padding: 60px 0; + } + @media (min-width: $desktop) { + padding: 90px 0; + } + } &__body { display: flex; flex-direction: column; @@ -26,6 +35,17 @@ margin-bottom: 60px; } } + &__date { + color: $black; + font-size: 14px; + font-weight: 700; + line-height: 21px; + margin-bottom: 10px; + @media (min-width: $tablet) { + font-size: 18px; + line-height: 27px; + } + } &__title { width: 100%; font-size: 32px; diff --git a/public/scss/blocks/_vacancies.scss b/public/scss/blocks/_vacancies.scss index 4d1e4ed..27aec2e 100644 --- a/public/scss/blocks/_vacancies.scss +++ b/public/scss/blocks/_vacancies.scss @@ -37,6 +37,22 @@ @media (min-width: $desktop) { grid-template-columns: repeat(4, 1fr); } + &-label { + font-weight: 700; + font-size: 22px; + } + &-col { + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 15px; + @media (min-width: $tablet) { + margin-top: 0; + } + &:first-child { + margin-top: 0; + } + } } &__item { display: none; @@ -52,15 +68,7 @@ &:nth-of-type(5), &:nth-of-type(6), &:nth-of-type(7), - &:nth-of-type(8), - &:nth-of-type(9), - &:nth-of-type(10), - &:nth-of-type(11), - &:nth-of-type(12), - &:nth-of-type(13), - &:nth-of-type(14), - &:nth-of-type(15), - &:nth-of-type(16) { + &:nth-of-type(8) { display: flex; } > span { @@ -105,7 +113,7 @@ } } } - &__body.active > &__list > &__item { + &__body.active &__list &__item { display: flex; } } diff --git a/public/scss/blocks/_work.scss b/public/scss/blocks/_work.scss index a6db771..4cf8609 100644 --- a/public/scss/blocks/_work.scss +++ b/public/scss/blocks/_work.scss @@ -1,6 +1,6 @@ .work { background: $gradient; - color: #6b6c6d; + color: $black; padding-top: 70px; padding-bottom: 10px; position: relative; @@ -83,7 +83,7 @@ content: ""; width: 4px; height: 4px; - background: #6b6c6d; + background: $black; border-radius: 999px; position: absolute; top: 5px; diff --git a/public/scss/style.scss b/public/scss/style.scss index 6f4d63f..d42a90c 100644 --- a/public/scss/style.scss +++ b/public/scss/style.scss @@ -16,8 +16,8 @@ $transition: 0.3s; $shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); $gradient: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); -$black: #3a3b3c; -$white: #ffffff; +$black: #000; +$white: #fff; $green: #377d87; $light: #acc0e6; $silver: #9c9d9d; @@ -48,16 +48,16 @@ $rotate180: rotate(180deg); } ::-webkit-scrollbar { - width: 4px; - height: 4px; + width: 8px; + height: 8px; } ::-webkit-scrollbar-track { border-radius: 999px; - background-color: #f3f3f3; + background-color: $white; } ::-webkit-scrollbar-thumb { border-radius: 999px; - background-color: $light; + background-color: $green; } ::-webkit-input-placeholder { @@ -122,7 +122,7 @@ button { cursor: pointer; } -[type=tel] { +[type="tel"] { letter-spacing: 1px; } @@ -145,6 +145,15 @@ svg { } } +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + @import "global"; @import "blocks/header"; @import "blocks/footer"; diff --git a/public/scss_2/_global.scss b/public/scss_2/_global.scss new file mode 100644 index 0000000..985c50d --- /dev/null +++ b/public/scss_2/_global.scss @@ -0,0 +1,1283 @@ +#body { + font-family: $circe; + color: $black; + background: $white; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 50px; + min-width: $min-width; + min-height: 100vh; + line-height: 1.25; + @media (min-width: $tablet) { + gap: 60px; + } +} + +.container { + width: 100%; + max-width: $desktop; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; + @media (min-width: $tablet) { + padding-left: 20px; + padding-right: 20px; + } +} + +.to-top { + position: fixed; + right: 10px; + bottom: 10px; + border-radius: 999px; + display: flex; + justify-content: center; + align-items: center; + color: $white; + background: $green; + width: 40px; + height: 40px; + transition: $transition; + margin-right: -100px; + box-shadow: $shadow; + z-index: 99; + border: 1px solid $green; + &:hover { + background: $white; + color: $green; + } + svg { + width: 10px; + height: 10px; + } + @media (min-width: $tablet) { + width: 50px; + height: 50px; + right: 20px; + bottom: 20px; + svg { + width: 12px; + height: 12px; + } + } +} +.begin .to-top { + margin-right: 0; +} + +.socials { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + a { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid $green; + color: $green; + border-radius: 999px; + width: 38px; + height: 38px; + &:hover { + background: $green; + color: $white; + } + } + svg { + width: 12px; + height: 12px; + } +} + +.nls { + display: flex; + color: $black; + text-align: left; + &:hover { + color: $green; + } + svg { + width: 30px; + height: 40px; + @media (min-width: $tablet) { + width: 24px; + height: 31px; + } + } + span { + width: calc(100% - 30px); + padding-left: 12px; + display: flex; + flex-direction: column; + justify-content: center; + font-size: 12px; + line-height: 1.4; + @media (min-width: $tablet) { + width: calc(100% - 24px); + } + } + b { + font-weight: 400; + } +} + +.title, +h1 { + margin: 0; + font-weight: 700; + font-size: 32px; + @media (min-width: $tablet) { + font-size: 40px; + } + @media (min-width: $laptop) { + font-size: 48px; + } + @media (min-width: $desktop) { + font-size: 64px; + } +} + +.swiper { + &-pagination { + display: flex; + justify-content: center; + align-items: center; + position: static; + margin-top: 20px; + gap: 8px; + @media (min-width: $tablet) { + margin-top: 30px; + } + &-bullet { + width: 16px; + height: 16px; + opacity: 1; + border: 1px solid #cdcece; + transition: $transition; + background: transparent; + display: flex; + justify-content: center; + align-items: center; + margin: 0 !important; + &:before { + content: ""; + width: 6px; + height: 6px; + border-radius: 999px; + background: $green; + opacity: 0; + transition: $transition; + } + &:hover { + border-color: $green; + } + &-active { + border-color: $green; + &:before { + opacity: 1; + } + } + } + } +} + +.navs { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + width: 80px; + button { + color: $green; + background: none; + border: none; + padding: 0; + &[disabled] { + cursor: not-allowed; + color: #cddee1; + } + } + svg { + width: 14px; + height: 28px; + } +} + +.select { + position: relative; + &2 { + width: 100% !important; + &-container { + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + } + &--open { + .select2-selection { + border-color: $green !important; + } + .select2-selection__arrow svg { + transform: $rotate180; + } + } + } + &-selection { + min-height: 30px !important; + border-radius: 8px !important; + border-color: #e7e7e7 !important; + transition: $transition; + @media (min-width: $tablet) { + min-height: 50px !important; + } + &__rendered { + line-height: 28px !important; + padding: 0 30px 0 10px !important; + @media (min-width: $tablet) { + line-height: 48px !important; + padding: 0 46px 0 20px !important; + } + } + &__arrow { + top: 0 !important; + right: 0 !important; + width: 30px !important; + height: 100% !important; + display: flex; + justify-content: center; + align-items: center; + color: $green; + @media (min-width: $tablet) { + width: 50px !important; + } + svg { + width: 12px; + height: 12px; + transition: $transition; + @media (min-width: $tablet) { + width: 14px; + height: 14px; + } + } + } + &__choice { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 4px; + padding: 0 4px 0 6px !important; + background: $green !important; + border: none !important; + border-radius: 6px !important; + line-height: 1 !important; + color: $white; + height: 24px; + @media (min-width: $tablet) { + height: 32px; + gap: 6px; + padding: 0 6px 0 10px !important; + border-radius: 8px !important; + } + &__remove { + width: 14px; + height: 14px; + padding-top: 4px; + display: flex !important; + justify-content: center; + align-items: center; + color: $white !important; + font-weight: 400 !important; + font-size: 26px; + } + } + } + &-search { + display: none; + } + &-dropdown { + z-index: 99999; + border: none; + border-radius: 0; + background: none; + padding: 5px 0; + @media (min-width: $tablet) { + padding: 10px 0; + } + } + &-results { + background: $white; + border-radius: 8px; + border: 1px solid $green; + overflow: hidden; + &__option { + @media (min-width: $tablet) { + padding: 10px 14px; + } + &--highlighted { + background: $green !important; + } + } + } + } + &_search &2-selection__rendered { + @media (min-width: $tablet) { + padding-left: 60px !important; + } + } + &_search &__icon { + display: none; + height: 28px; + align-items: center; + padding-right: 12px; + z-index: 2; + position: absolute; + top: 50%; + left: 15px; + margin-top: -14px; + @media (min-width: $tablet) { + display: flex; + } + &:after { + content: ""; + width: 1px; + height: 100%; + border-radius: 999px; + position: absolute; + top: 0; + right: 0; + background: #cecece; + } + svg { + color: #9c9d9d; + width: 20px; + height: 20px; + } + } +} + +.form-group { + display: flex; + flex-direction: column; + gap: 4px; + &__label { + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + } + } + &__item { + display: flex; + flex-direction: column; + position: relative; + } +} + +.input { + display: block; + height: 30px; + border: 1px solid #cecece; + background: $white; + font-size: 12px; + border-radius: 8px; + padding: 0 10px; + color: $black; + transition: $transition; + position: relative; + z-index: 1; + @media (min-width: $tablet) { + padding: 0 20px; + height: 44px; + font-size: 16px; + } + &:focus { + border-color: $green; + } + &[disabled] { + color: $silver; + background: #e7e7e7; + } + &[type="date"] { + text-transform: uppercase; + } +} + +.textarea { + resize: none; + display: block; + width: 100%; + border-radius: 8px; + border: 1px solid #cecece; + background: $white; + transition: $transition; + font-size: 12px; + line-height: 1.4; + padding: 10px; + aspect-ratio: 8/3; + max-height: 250px; + @media (min-width: $tablet) { + padding: 20px; + font-size: 16px; + height: 280px; + } + &:focus { + border-color: $green; + } +} + +.button { + display: flex; + justify-content: center; + align-items: center; + color: $white; + background: $green; + height: 30px; + border-radius: 8px; + padding: 0 12px; + border: 1px solid $green; + font-weight: 700; + font-size: 12px; + text-align: center; + line-height: 1; + gap: 6px; + transition: $transition; + cursor: pointer; + @media (min-width: $tablet) { + padding: 0 24px; + font-size: 16px; + height: 44px; + gap: 12px; + } + @media (min-width: $laptop) { + padding: 0 36px; + } + &:hover { + background: transparent; + color: $green; + } + img, + svg { + width: 12px; + height: 12px; + @media (min-width: $tablet) { + width: 18px; + height: 18px; + } + } + &_more { + span + span { + display: none; + } + &.active { + span { + display: none; + } + span + span { + display: block; + } + } + } + &_light { + background: transparent; + color: $green; + &:hover { + background: $green; + color: $white; + } + } + &_whited { + background: $white; + color: $green; + border-color: $white; + &:hover { + background: $green; + color: $white; + } + } +} + +.search { + width: 100%; + position: relative; + background: $white; + border-radius: 8px; + span { + display: none; + height: 28px; + align-items: center; + padding-right: 12px; + z-index: 1; + position: absolute; + top: 50%; + left: 15px; + margin-top: -14px; + @media (min-width: $tablet) { + display: flex; + } + &:after { + content: ""; + width: 1px; + height: 100%; + border-radius: 999px; + position: absolute; + top: 0; + right: 0; + background: #cecece; + } + svg { + color: #9c9d9d; + width: 20px; + height: 20px; + } + } + input { + width: 100%; + padding-right: 150px; + position: relative; + z-index: 2; + background: none; + @media (min-width: $tablet) { + padding-left: 60px; + padding-right: 220px; + } + } + button { + width: 140px; + position: absolute; + padding: 0; + top: 0; + right: 0; + z-index: 3; + @media (min-width: $tablet) { + width: 200px; + } + } +} + +.breadcrumbs { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px 6px; + margin: 0; + padding: 0; + font-size: 11px; + color: #cecece; + line-height: 1; + @media (min-width: $laptop) { + font-size: 13px; + } + @media (min-width: $desktop) { + font-size: 16px; + } + li { + display: flex; + align-items: center; + gap: 6px; + &:before { + content: ""; + width: 4px; + height: 4px; + background: #cecece; + border-radius: 999px; + position: relative; + top: -1px; + } + &:first-child:before { + display: none; + } + &:last-child:before { + background: $green; + } + } + a { + &:hover { + color: $green; + } + } + b { + color: $green; + font-weight: 700; + } +} + +.pagination { + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + color: $black; + font-size: 12px; + margin: 0 auto; + @media (min-width: $tablet) { + font-size: 14px; + gap: 3px; + } + &__item { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + background: none; + padding: 0; + border: 1px solid transparent; + border-radius: 8px; + &:hover { + transition: 0s; + color: $green; + font-weight: 700; + } + &.active { + font-weight: 700; + color: $white; + background: $green; + border-color: $green; + } + } + &__dots { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + svg { + width: 15px; + height: 15px; + } + } + &__nav { + width: 40px; + height: 40px; + display: none; + justify-content: center; + align-items: center; + background: none; + padding: 0; + border: 1px solid #cddee1; + color: $green; + border-radius: 8px; + @media (min-width: $tablet) { + display: flex; + } + &:hover { + border-color: $green; + background: $green; + color: $white; + } + svg { + width: 10px; + height: 10px; + } + &_prev { + margin-right: 37px; + svg { + transform: $rotate180; + } + } + &_next { + margin-left: 37px; + } + } +} + +.filters { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + &__label { + color: $green; + font-size: 12px; + font-weight: 700; + @media (min-width: $tablet) { + font-size: 16px; + } + @media (min-width: $laptop) { + font-size: 18px; + } + } + &__body { + display: flex; + flex-direction: column; + @media (min-width: $tablet) { + flex-direction: row; + align-items: center; + } + } + &__select { + @media (min-width: $tablet) { + width: 250px; + } + @media (min-width: $laptop) { + width: 310px; + } + } + &__item { + display: none; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + padding: 0; + background: $white; + border: 1px solid $green; + color: $green; + border-radius: 8px; + margin-left: 20px; + @media (min-width: $tablet) { + display: flex; + } + svg { + width: 24px; + height: 24px; + } + &.active { + background: $green; + color: $white; + } + } + &__item + &__item { + margin-left: 8px; + } +} + +.like, +.chat { + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + background: none; + border: 1px solid $green; + padding: 0; + color: $green; + border-radius: 6px; + @media (min-width: $tablet) { + width: 44px; + height: 44px; + } + &.active { + background: $green; + color: $white; + } + svg { + width: 14px; + height: 14px; + @media (min-width: $tablet) { + width: 20px; + height: 20px; + } + } +} + +.checkbox { + display: flex; + align-items: flex-start; + cursor: pointer; + position: relative; + &__input { + position: absolute; + z-index: 1; + width: 14px; + height: 14px; + padding: 0; + background: none; + border: none; + opacity: 0; + @media (min-width: $tablet) { + width: 20px; + height: 20px; + } + } + &__icon { + width: 14px; + height: 14px; + border: 1px solid #cfcfcf; + background: $white; + color: $white; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + transition: $transition; + position: relative; + z-index: 2; + @media (min-width: $tablet) { + width: 20px; + height: 20px; + } + svg { + width: 8px; + height: 8px; + opacity: 0; + @media (min-width: $tablet) { + width: 10px; + height: 10px; + } + } + } + &__input:checked + &__icon { + border-color: $green; + background: $green; + svg { + opacity: 1; + } + } + &__text { + width: calc(100% - 14px); + padding-left: 6px; + font-size: 12px; + line-height: 1; + display: flex; + align-items: center; + min-height: 14px; + @media (min-width: $tablet) { + width: calc(100% - 20px); + padding-left: 12px; + font-size: 15px; + min-height: 20px; + } + a { + color: $green; + text-decoration: underline; + } + } +} + +.file { + display: flex; + flex-direction: column; + &__input { + input { + display: none; + } + } + &__list { + display: flex; + flex-direction: column; + &-item { + display: flex; + align-items: flex-start; + margin-top: 16px; + &-left { + width: calc(100% - 16px); + min-height: 16px; + color: #9c9d9d; + font-size: 12px; + display: flex; + align-items: flex-start; + @media (min-width: $tablet) { + width: auto; + max-width: calc(100% - 16px); + font-size: 16px; + } + svg { + width: 16px; + height: 16px; + } + span { + width: calc(100% - 16px); + min-height: 16px; + display: flex; + align-items: center; + padding: 0 8px; + } + } + &-right { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + background: none; + border: none; + width: 16px; + height: 16px; + color: $green; + &:hover { + color: $black; + } + svg { + width: 10px; + height: 10px; + } + } + } + &-item + &-item { + margin-top: 10px; + } + } +} + +.rate { + display: flex; + align-items: center; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + &__label { + font-size: 12px; + font-weight: 700; + line-height: 1; + @media (min-width: $tablet) { + font-size: 18px; + } + } + &__stars { + display: flex; + flex-direction: column; + } +} + +.back { + display: flex; + align-items: center; + font-size: 14px; + color: $green; + font-weight: 700; + @media (min-width: $tablet) { + font-size: 18px; + } + &:hover { + color: $blue; + } + svg { + width: 16px; + height: 16px; + @media (min-width: $tablet) { + width: 26px; + height: 26px; + } + } + span { + width: calc(100% - 16px); + padding-left: 10px; + @media (min-width: $tablet) { + width: calc(100% - 26px); + padding-left: 20px; + } + } +} + +.callback { + display: flex; + flex-direction: column; + gap: 16px; + @media (min-width: $laptop) { + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + gap: 20px 0; + } + &__body { + display: flex; + flex-direction: column; + gap: 16px; + @media (min-width: $laptop) { + width: calc(50% - 10px); + gap: 10px; + } + } + &__textarea { + @media (min-width: $laptop) { + width: calc(50% - 10px); + height: auto; + } + } + &__bottom { + display: flex; + flex-direction: column; + gap: 16px; + @media (min-width: $tablet) { + align-items: flex-start; + } + @media (min-width: $laptop) { + width: 100%; + gap: 20px; + } + } +} + +.error { + .input, + .textarea { + border-color: $red; + } + label { + display: block; + } +} + +.eye { + position: absolute; + z-index: 2; + top: 50%; + transform: translate(0, -50%); + right: 10px; + aspect-ratio: 1/1; + width: 16px; + padding: 0; + border: none; + background: none; + color: #9c9d9d; + @media (min-width: $tablet) { + width: 24px; + right: 20px; + } + svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + svg + svg { + display: none; + } + &.active { + color: $green; + svg { + display: none; + } + svg + svg { + display: block; + } + } +} + +.del { + width: 32px; + aspect-ratio: 1/1; + background: $green; + color: $white; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + padding: 0; + border: 1px solid $green; + &:hover { + background: $white; + color: $green; + } + svg { + width: 50%; + aspect-ratio: 1/1; + } +} + +.notify { + background: $gradient; + padding: 6px 12px; + border-radius: 8px; + display: flex; + align-items: flex-start; + @media (min-width: $tablet) { + padding: 12px 20px; + } + &_red { + background: #f9cdcd; + } + svg { + color: $blue; + width: 20px; + aspect-ratio: 1/1; + } + span { + font-size: 12px; + padding-left: 10px; + min-height: 20px; + display: flex; + align-items: center; + @media (min-width: $tablet) { + font-size: 16px; + } + } +} + +.table { + margin: 0 -10px; + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 20px; + @media (min-width: $tablet) { + margin: 0; + gap: 30px; + } + &__button { + display: none; + } + &_spoiler &__button { + display: flex; + } + &__scroll { + overflow: hidden; + overflow-x: auto; + padding: 0 10px; + width: 100%; + @media (min-width: $tablet) { + padding: 0; + } + } + &__body { + border-radius: 8px; + overflow: hidden; + &_min-width { + min-width: 580px; + } + } + table { + border-collapse: collapse; + width: 100%; + font-size: 12px; + border-radius: 8px; + @media (min-width: $tablet) { + font-size: 14px; + } + @media (min-width: $desktop) { + font-size: 16px; + } + } + thead tr { + th, + td { + background: $green; + color: $white; + font-weight: 700; + border-top-color: $green; + &:first-child { + border-left-color: $green; + } + &:last-child { + border-right-color: $green; + } + } + } + &_spoiler tr { + display: none; + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6) { + display: table-row; + } + } + &_spoiler.active tr { + display: table-row; + } + th, + td { + text-align: left; + padding: 10px; + border: 1px solid #cecece; + } + td { + @media (min-width: $tablet) { + padding: 14px 10px; + } + } + &__status { + color: $silver; + display: flex; + align-items: center; + gap: 6px; + position: relative; + padding-left: 14px; + i { + background: $silver; + width: 8px; + aspect-ratio: 1/1; + border-radius: 999px; + position: absolute; + top: 4px; + left: 0; + } + &.green { + color: $green; + i { + background: $green; + } + } + } + &__link { + display: flex; + align-items: center; + gap: 4px; + color: $blue; + @media (min-width: $tablet) { + gap: 6px; + } + &:hover { + color: $black; + } + svg { + width: 12px; + aspect-ratio: 1/1; + @media (min-width: $tablet) { + width: 16px; + } + } + } + &__controls { + display: flex; + align-items: center; + gap: 8px; + @media (min-width: $desktop) { + gap: 12px; + } + &-item { + width: 24px; + aspect-ratio: 1/1; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid $green; + border-radius: 8px; + color: $green; + background: none; + padding: 0; + @media (min-width: $desktop) { + width: 30px; + } + &:hover { + background: $green; + color: $white; + } + svg { + width: 60%; + aspect-ratio: 1/1; + } + &:nth-of-type(4) svg { + width: 80%; + } + } + } +} + +.gl-star-rating--stars { + &:before, + &:after { + display: none; + } + span { + width: 22px !important; + height: 22px !important; + background-size: 22px 22px !important; + @media (min-width: $tablet) { + width: 30px !important; + height: 30px !important; + background-size: 30px 30px !important; + } + } +} diff --git a/public/scss_2/blocks/_404.scss b/public/scss_2/blocks/_404.scss new file mode 100644 index 0000000..7e89176 --- /dev/null +++ b/public/scss_2/blocks/_404.scss @@ -0,0 +1,59 @@ +.page-404 { + background: url(../images/bg-3.svg) no-repeat 100% / cover; + overflow: hidden; + &__body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 60px 0; + color: $black; + font-size: 12px; + gap: 10px; + line-height: 1.4; + @media (min-width: $tablet) { + font-size: 18px; + padding: 120px 0; + gap: 20px; + } + @media (min-width: $desktop) { + padding: 180px 0; + text-align: left; + } + } + &__numb { + font-size: 114px; + line-height: 1; + color: $green; + font-weight: 700; + @media (min-width: $tablet) { + font-size: 184px; + } + } + &__title { + @media (min-width: $tablet) { + font-weight: 700; + font-size: 44px; + } + @media (min-width: $desktop) { + width: 710px; + position: relative; + left: 200px; + } + } + &__subtitle { + @media (min-width: $desktop) { + width: 710px; + position: relative; + left: 200px; + } + } + &__button { + margin-top: 10px; + @media (min-width: $desktop) { + position: relative; + left: -45px; + } + } +} \ No newline at end of file diff --git a/public/scss_2/blocks/_about.scss b/public/scss_2/blocks/_about.scss new file mode 100644 index 0000000..26121b1 --- /dev/null +++ b/public/scss_2/blocks/_about.scss @@ -0,0 +1,85 @@ +.about { + background: $light url("../images/space.svg") no-repeat 0 0; + background-size: cover; + padding: 30px 0; + padding-bottom: 70px; + @media (min-width: $tablet) { + padding-top: 40px; + background-size: auto calc(100% - 10px); + } + @media (min-width: $desktop) { + padding: 100px 0; + } + &__wrapper { + display: flex; + flex-direction: column; + position: relative; + } + &__title { + color: $white; + line-height: 1.2; + @media (min-width: $desktop) { + position: absolute; + top: -45px; + left: 0; + } + } + &__body { + display: flex; + flex-direction: column; + @media (min-width: $desktop) { + padding-left: 495px; + } + } + &__line { + background: $white; + width: 100%; + height: 1px; + max-width: 400px; + margin-top: 10px; + } + &__item { + display: flex; + flex-direction: column; + margin-top: 10px; + max-width: 600px; + @media (min-width: $tablet) { + margin-top: 20px; + } + @media (min-width: $desktop) { + margin-top: 30px; + } + b { + font-size: 20px; + font-weight: 700; + } + span { + font-size: 13px; + line-height: 1.4; + margin-top: 6px; + @media (min-width: $desktop) { + font-size: 16px; + margin-top: 12px; + } + } + a { + text-decoration: underline; + } + } + &__item + &__item { + margin-top: 30px; + @media (min-width: $laptop) { + margin-top: 40px; + } + } + &__button { + margin-top: 20px; + height: 38px; + padding: 0; + @media (min-width: $tablet) { + max-width: 200px; + height: 42px; + margin-top: 30px; + } + } +} diff --git a/public/scss_2/blocks/_cabinet.scss b/public/scss_2/blocks/_cabinet.scss new file mode 100644 index 0000000..5b8c191 --- /dev/null +++ b/public/scss_2/blocks/_cabinet.scss @@ -0,0 +1,1560 @@ +.messages { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 20px; + &__body { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; + @media (min-width: $tablet) { + gap: 20px; + } + } + &__item { + display: none; + align-items: center; + border-radius: 8px; + border: 1px solid #e7e7e7; + background: $gradient; + padding: 10px; + font-size: 12px; + @media (min-width: $tablet) { + padding: 20px; + font-size: 16px; + } + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6) { + display: flex; + } + &-info { + display: flex; + align-items: center; + width: calc(100% - 90px); + @media (min-width: $tablet) { + width: calc(100% - 150px); + } + } + &-photo { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + background: $silver; + color: $white; + width: 36px; + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + @media (min-width: $tablet) { + width: 52px; + } + svg { + width: 50%; + position: relative; + z-index: 1; + } + img { + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + } + &-text { + width: calc(100% - 36px); + padding-left: 6px; + color: $black; + display: flex; + flex-direction: column; + gap: 4px; + @media (min-width: $tablet) { + padding-left: 20px; + width: calc(100% - 52px); + gap: 8px; + } + span { + color: $black; + } + } + &-date { + color: $black; + width: 90px; + text-align: right; + @media (min-width: $tablet) { + width: 150px; + } + } + } + &.active &__item { + display: flex; + } +} + +.responses { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 20px; + &__body { + width: 100%; + display: flex; + flex-direction: column; + gap: 20px; + } + &__item { + display: none; + flex-direction: column; + gap: 20px; + border-radius: 8px; + border: 1px solid #e7e7e7; + background: $gradient; + padding: 20px 10px; + font-size: 12px; + position: relative; + @media (min-width: $tablet) { + padding: 20px; + font-size: 16px; + } + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6) { + display: flex; + } + &-date { + color: $black; + @media (min-width: $laptop) { + position: absolute; + top: 20px; + right: 20px; + } + } + &-wrapper { + display: flex; + flex-direction: column; + gap: 20px; + } + &-inner { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + @media (min-width: $desktop) { + width: calc(100% - 150px); + } + } + &-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + color: $black; + text-align: right; + @media (min-width: $laptop) { + display: flex; + flex-direction: column; + gap: 6px; + text-align: left; + } + span { + color: $black; + text-align: left; + } + } + &-buttons { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: 1fr 1fr; + } + @media (min-width: $desktop) { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + .button { + &.active { + background: $green; + color: $white; + } + } + } + } + &.active &__item { + display: flex; + } +} + +.chatbox { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + gap: 30px; + } + @media (min-width: $desktop) { + gap: 40px; + } + &__toper { + display: flex; + flex-direction: column; + gap: 10px; + background: $gradient; + border: 1px solid #e7e7e7; + border-radius: 8px; + padding: 10px; + @media (min-width: $tablet) { + padding: 20px; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + &-info { + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + width: calc(100% - 230px); + } + } + &-button { + @media (min-width: $tablet) { + width: 210px; + padding: 0; + } + } + } + &__list { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + @media (min-width: $desktop) { + gap: 40px; + } + } + &__item { + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; + color: $black; + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + } + &_reverse { + flex-direction: row-reverse; + } + &-photo { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + background: $silver; + color: $white; + width: 44px; + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + svg { + width: 50%; + position: relative; + z-index: 1; + } + img { + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + } + &-body { + width: calc(100% - 54px); + display: flex; + flex-direction: column; + align-items: flex-start; + @media (min-width: $tablet) { + width: calc(100% - 60px); + } + } + &_reverse &-body { + align-items: flex-end; + } + &-text { + border-radius: 8px; + background: $white; + box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + padding: 10px; + line-height: 1.6; + } + &-time { + width: 100%; + padding-left: 54px; + margin-top: 10px; + color: $silver; + } + &_reverse &-time { + text-align: right; + } + } + &__bottom { + background: $blue; + padding: 10px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + @media (min-width: $tablet) { + padding: 16px 20px; + } + &-file { + width: 20px; + aspect-ratio: 1/1; + display: flex; + justify-content: center; + align-items: center; + background: $white; + color: $blue; + border-radius: 8px; + @media (min-width: $tablet) { + width: 48px; + } + &:hover { + color: $green; + } + input { + display: none; + } + svg { + width: 50%; + aspect-ratio: 1/1; + @media (min-width: $tablet) { + width: 40%; + } + } + } + &-text { + width: calc(100% - 60px); + height: 20px; + border-color: $white; + @media (min-width: $tablet) { + width: calc(100% - 128px); + height: 48px; + } + &:focus { + border-color: $white; + } + } + &-send { + width: 20px; + aspect-ratio: 1/1; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + background: $white; + border: none; + color: $blue; + border-radius: 999px; + @media (min-width: $tablet) { + width: 48px; + } + &:hover { + color: $green; + } + svg { + width: 50%; + aspect-ratio: 1/1; + position: relative; + left: 1px; + @media (min-width: $tablet) { + width: 40%; + left: 2px; + } + } + } + } +} + +.cvs { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 20px; + &__body { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + @media (min-width: $tablet) { + gap: 30px; + } + } + &__item { + display: none; + flex-direction: column; + gap: 10px; + border-radius: 8px; + border: 1px solid #e7e7e7; + background: $gradient; + padding: 10px; + font-size: 12px; + position: relative; + @media (min-width: $tablet) { + gap: 0; + padding: 20px; + font-size: 16px; + flex-direction: row; + align-items: flex-start; + flex-wrap: wrap; + } + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6) { + display: flex; + } + &-like { + position: absolute; + top: 10px; + right: 10px; + @media (min-width: $tablet) { + top: 20px; + right: 20px; + } + } + &-photo { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + background: $silver; + color: $white; + width: 36px; + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + @media (min-width: $tablet) { + width: 68px; + } + svg { + width: 50%; + position: relative; + z-index: 1; + } + img { + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + } + &-text { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + width: calc(100% - 68px); + padding-left: 20px; + padding-right: 60px; + } + div { + display: flex; + align-items: center; + justify-content: space-between; + @media (min-width: $tablet) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } + } + span, + a { + color: $black; + } + } + &-button { + display: flex; + flex-direction: column; + align-items: center; + @media (min-width: $tablet) { + align-items: flex-end; + width: 100%; + padding-top: 20px; + } + } + } + &.active &__item { + display: flex; + } +} + +.faqs { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 20px; + &__body { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + } + &__item { + display: none; + flex-direction: column; + border-radius: 8px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); + background: $white; + padding: 10px; + font-size: 12px; + @media (min-width: $tablet) { + padding: 20px; + font-size: 16px; + box-shadow: $shadow; + } + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6) { + display: flex; + } + &-button { + background: none; + padding: 0; + border: none; + display: flex; + align-items: center; + color: $black; + text-align: left; + font-size: 14px; + font-weight: 700; + @media (min-width: $tablet) { + font-size: 20px; + } + span { + width: calc(100% - 16px); + padding-right: 16px; + } + i { + display: flex; + justify-content: center; + align-items: center; + width: 16px; + aspect-ratio: 1/1; + color: $green; + transition: $transition; + svg { + width: 16px; + aspect-ratio: 1/1; + transform: rotate(90deg); + } + } + &.active i { + transform: $rotate180; + } + } + &-body { + display: flex; + flex-direction: column; + gap: 10px; + opacity: 0; + height: 0; + overflow: hidden; + font-size: 12px; + line-height: 1.4; + @media (min-width: $tablet) { + font-size: 16px; + gap: 20px; + } + p { + margin: 0; + } + } + .active + &-body { + opacity: 1; + height: auto; + transition: $transition; + padding-top: 10px; + @media (min-width: $tablet) { + padding-top: 20px; + } + } + } + &.active &__item { + display: flex; + } +} + +.cabinet { + padding: 20px 0; + padding-bottom: 40px; + background: $gradient; + @media (min-width: $laptop) { + padding: 30px 0; + padding-bottom: 60px; + } + &__breadcrumbs { + margin-bottom: 50px; + } + &__wrapper { + display: flex; + flex-direction: column; + @media (min-width: $laptop) { + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + } + } + &__side { + border-radius: 8px; + background: $white; + padding: 20px 10px; + display: flex; + flex-direction: column; + gap: 30px; + box-shadow: $shadow; + @media (min-width: $tablet) { + padding: 30px 20px; + margin-bottom: 50px; + } + @media (min-width: $laptop) { + width: 340px; + margin: 0; + position: sticky; + top: 6px; + } + @media (min-width: $desktop) { + width: 400px; + } + &-item { + display: flex; + flex-direction: column; + gap: 20px; + } + &-toper { + display: flex; + align-items: center; + &-pic { + width: 70px; + aspect-ratio: 1/1; + overflow: hidden; + border-radius: 8px; + color: $white; + background: $silver; + display: flex; + align-items: center; + justify-content: center; + position: relative; + img { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + z-index: 2; + top: 0; + left: 0; + aspect-ratio: 1/1; + object-fit: contain; + } + svg { + width: 50%; + aspect-ratio: 1/1; + } + } + b { + width: calc(100% - 70px); + font-size: 14px; + font-weight: 700; + padding-left: 16px; + @media (min-width: $tablet) { + font-size: 20px; + } + } + } + } + &__menu { + display: flex; + flex-direction: column; + &-toper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; + padding-right: 12px; + border: none; + border-radius: 8px; + background: $green; + color: $white; + @media (min-width: $tablet) { + padding: 0 20px; + } + @media (min-width: $laptop) { + display: none; + } + &-text { + width: calc(100% - 16px); + display: flex; + align-items: center; + @media (min-width: $tablet) { + width: calc(100% - 20px); + } + i { + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + @media (min-width: $tablet) { + width: 22px; + height: 22px; + } + } + svg { + width: 16px; + height: 16px; + @media (min-width: $tablet) { + width: 22px; + height: 22px; + } + } + span { + display: flex; + align-items: center; + padding: 0 10px; + min-height: 30px; + font-size: 12px; + width: calc(100% - 16px); + @media (min-width: $tablet) { + width: calc(100% - 22px); + font-size: 20px; + min-height: 52px; + padding: 0 16px; + } + } + } + &-arrow { + width: 16px; + height: 16px; + display: flex; + justify-content: center; + align-items: center; + transition: $transition; + @media (min-width: $tablet) { + width: 20px; + height: 20px; + } + svg { + width: 12px; + height: 12px; + transform: rotate(90deg); + @media (min-width: $tablet) { + width: 20px; + height: 20px; + } + } + } + &.active &-arrow { + transform: $rotate180; + } + } + &-body { + opacity: 0; + height: 0; + overflow: hidden; + display: flex; + flex-direction: column; + @media (min-width: $laptop) { + opacity: 1; + height: auto; + } + } + .active + &-body { + opacity: 1; + height: auto; + transition: $transition; + } + &-items { + display: flex; + flex-direction: column; + } + &-item { + padding: 8px 16px; + border-radius: 8px; + display: flex; + align-items: center; + @media (min-width: $tablet) { + padding: 14px 20px; + } + &:hover { + color: $green; + } + &.active { + @media (min-width: $laptop) { + background: $green; + color: $white; + } + svg { + @media (min-width: $laptop) { + color: $white; + } + } + &.red { + @media (min-width: $laptop) { + background: $red; + } + } + } + i { + width: 16px; + height: 16px; + color: $green; + @media (min-width: $tablet) { + width: 22px; + height: 22px; + } + } + svg { + width: 16px; + height: 16px; + @media (min-width: $tablet) { + width: 22px; + height: 22px; + } + } + span { + width: calc(100% - 16px); + font-size: 12px; + padding-left: 10px; + @media (min-width: $tablet) { + font-size: 20px; + width: calc(100% - 22px); + padding-left: 16px; + } + } + } + &-bottom { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; + @media (min-width: $tablet) { + gap: 20px; + margin-top: 20px; + } + } + &-copy { + color: $silver; + text-align: center; + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + } + } + } + &__body { + margin: 0 -10px; + margin-top: 50px; + background: $white; + padding: 20px 10px; + display: flex; + flex-direction: column; + gap: 30px; + color: $black; + @media (min-width: $tablet) { + padding: 30px 20px; + margin: 0; + border-radius: 8px; + box-shadow: $shadow; + } + @media (min-width: $laptop) { + width: calc(100% - 360px); + } + @media (min-width: $desktop) { + width: calc(100% - 420px); + } + &-item { + display: flex; + flex-direction: column; + gap: 20px; + } + } + &__title { + font-size: 24px; + @media (min-width: $tablet) { + font-size: 32px; + } + @media (min-width: $laptop) { + font-size: 40px; + } + @media (min-width: $desktop) { + font-size: 48px; + } + } + &__subtitle { + font-size: 22px; + margin: 0; + font-weight: 700; + color: $black; + @media (min-width: $tablet) { + font-size: 24px; + } + } + &__h4 { + font-size: 20px; + margin: 0; + font-weight: 700; + color: $black; + @media (min-width: $tablet) { + font-size: 22px; + } + } + &__text { + margin: 0; + font-size: 14px; + @media (min-width: $tablet) { + font-size: 16px; + } + b { + color: $black; + font-size: 18px; + @media (min-width: $tablet) { + font-size: 24px; + } + } + } + &__descr { + display: flex; + flex-direction: column; + gap: 6px; + @media (min-width: $tablet) { + gap: 12px; + } + } + &__avatar { + display: flex; + align-items: flex-start; + @media (min-width: $tablet) { + align-items: center; + } + &-pic { + width: 100px; + aspect-ratio: 1/1; + position: relative; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + border-radius: 8px; + color: $white; + background: $silver; + svg { + width: 50%; + aspect-ratio: 1/1; + z-index: 1; + position: relative; + } + } + &-form { + width: calc(100% - 100px); + padding-left: 15px; + display: flex; + flex-direction: column; + gap: 6px; + @media (min-width: $tablet) { + align-items: flex-start; + padding-left: 30px; + gap: 12px; + } + .file { + @media (min-width: $tablet) { + min-width: 215px; + } + } + } + } + &__inputs { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $desktop) { + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; + } + &-item { + @media (min-width: $desktop) { + width: calc(50% - 10px); + } + &_fullwidth { + @media (min-width: $desktop) { + width: 100%; + } + } + &_min { + @media (min-width: $desktop) { + width: calc(15% - 10px); + } + } + &_max { + @media (min-width: $desktop) { + width: calc(85% - 10px); + } + } + .button { + @media (min-width: $tablet) { + width: 100%; + max-width: 215px; + padding: 0; + } + } + .buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + max-width: 470px; + } + @media (min-width: $laptop) { + max-width: none; + } + @media (min-width: $desktop) { + max-width: 470px; + } + .button { + max-width: none; + } + } + } + > .button { + padding: 0; + width: 100%; + max-width: 140px; + @media (min-width: $tablet) { + max-width: 190px; + } + } + } + &__add { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 0; + flex-direction: row; + align-items: flex-end; + } + &-pic { + border-radius: 4px; + position: relative; + overflow: hidden; + background: $silver; + color: $white; + width: 100px; + aspect-ratio: 1/1; + transition: $transition; + @media (min-width: $tablet) { + width: 220px; + border-radius: 8px; + } + &:hover { + background: $black; + } + input { + display: none; + } + > svg { + width: 20px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; + @media (min-width: $tablet) { + width: 50px; + } + } + span { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + gap: 4px; + font-weight: 700; + font-size: 8px; + line-height: 1; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin-top: 25px; + @media (min-width: $tablet) { + font-size: 16px; + margin-top: 60px; + } + svg { + width: 7px; + aspect-ratio: 1/1; + @media (min-width: $tablet) { + width: 16px; + } + } + } + } + &-body { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + width: calc(100% - 220px); + padding-left: 20px; + } + .button { + @media (min-width: $tablet) { + width: 215px; + padding: 0; + } + } + } + } + &__fleet { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: $desktop) { + grid-template-columns: repeat(3, 1fr); + } + } + &__submit { + @media (min-width: $tablet) { + width: 215px; + padding: 0; + margin: 0 auto; + } + } + &__filters { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + @media (min-width: $desktop) { + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + } + &-item { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + @media (min-width: $desktop) { + width: calc(50% - 10px); + max-width: 410px; + } + .button, .select { + width: 100%; + @media (min-width: $desktop) { + width: auto; + } + } + } + &-item + &-item { + align-items: flex-end; + @media (min-width: $desktop) { + max-width: 280px; + } + } + .search { + input { + padding-right: 135px; + } + button { + width: 115px; + } + } + &-buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + width: 100%; + @media (min-width: $tablet) { + gap: 20px; + } + .button { + padding: 0; + gap: 5px; + &.active { + background: $green; + color: $white; + &:before { + content: ""; + width: 6px; + height: 6px; + background: $white; + border-radius: 999px; + } + } + } + } + } + &__table-header { + display: flex; + justify-content: space-between; + align-items: center; + font-weight: 700; + margin-bottom: -10px; + div { + font-size: 18px; + @media (min-width: $tablet) { + font-size: 24px; + } + } + span { + color: $black; + font-size: 14px; + @media (min-width: $tablet) { + font-size: 18px; + } + b { + color: $green; + } + } + } + &__tabs { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + @media (min-width: $tablet) { + max-width: 420px; + } + .button { + &.active { + background: $green; + color: $white; + } + } + } + &__bodies { + display: none; + &.showed { + display: block; + } + } + &__nots { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + .input { + width: 100%; + } + } + &__anketa { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10px; + @media (min-width: $tablet) { + flex-direction: row; + align-items: center; + } + @media (min-width: $laptop) { + flex-direction: column; + align-items: stretch; + } + @media (min-width: $desktop) { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + &-buttons { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + } + } + &__stats { + display: flex; + flex-direction: column; + gap: 6px; + @media (min-width: $tablet) { + gap: 12px; + } + &-title { + font-size: 14px; + font-weight: 700; + color: $black; + @media (min-width: $tablet) { + font-size: 24px; + } + } + &-body { + background: $gradient; + border-radius: 8px; + padding: 10px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-bottom: 10px; + @media (min-width: $tablet) { + padding: 10px 20px; + } + } + &-item { + font-size: 12px; + display: flex; + align-items: center; + line-height: 1; + gap: 6px; + @media (min-width: $tablet) { + font-size: 20px; + gap: 10px; + } + svg { + width: 20px; + aspect-ratio: 1/1; + color: $green; + @media (min-width: $tablet) { + width: 40px; + margin-right: 10px; + } + } + span { + font-weight: 700; + color: $black; + } + b { + color: $green; + font-size: 14px; + @media (min-width: $tablet) { + font-size: 24px; + } + } + } + &-subtitle { + font-size: 14px; + font-weight: 700; + color: $green; + @media (min-width: $tablet) { + font-size: 18px; + } + } + &-line { + width: 100%; + position: relative; + overflow: hidden; + height: 8px; + border-radius: 999px; + background: #CECECE; + span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $green; + border-radius: 999px; + } + } + &-bottom { + color: $black; + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + } + } + } + &__works { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + gap: 30px; + } + &-item { + box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); + padding: 10px; + border-radius: 4px; + @media (min-width: $tablet) { + padding: 20px; + border-radius: 8px; + } + } + &-spoiler { + display: flex; + align-items: center; + justify-content: space-between; + &-left { + display: flex; + align-items: center; + width: calc(100% - 22px); + } + &-right { + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + color: $green; + padding: 0; + background: none; + border: none; + svg { + width: 60%; + aspect-ratio: 1/1; + transform: rotate(90deg); + transition: $transition; + } + } + &.active &-right svg { + transform: rotate(-90deg); + } + &-buttons { + display: flex; + align-items: center; + justify-content: space-between; + width: 60px; + @media (min-width: $tablet) { + width: 74px; + } + .button { + width: 22px; + height: 22px; + padding: 0; + @media (min-width: $tablet) { + width: 30px; + height: 30px; + } + } + } + &-text { + width: calc(100% - 60px); + padding-left: 20px; + font-size: 17px; + font-weight: 700; + color: $black; + @media (min-width: $tablet) { + width: calc(100% - 74px); + font-size: 20px; + } + } + } + &-body { + opacity: 0; + height: 0; + overflow: hidden; + } + .active + &-body { + transition: $transition; + opacity: 1; + height: auto; + padding-top: 20px; + } + &-add { + padding: 0; + width: 100%; + max-width: 160px; + @media (min-width: $tablet) { + max-width: 220px; + } + } + } + &__buttons { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + .button, .file { + padding: 0; + width: 100%; + max-width: 140px; + @media (min-width: $tablet) { + max-width: none; + } + } + @media (min-width: $tablet) { + gap: 20px; + } + @media (min-width: $desktop) { + max-width: 400px; + } + } + &__vacs { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 20px; + &-body { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + @media (min-width: $tablet) { + gap: 30px; + } + } + &-item { + display: none; + background: $white; + box-shadow: $shadow; + &:nth-of-type(1), + &:nth-of-type(2) { + display: flex; + } + + } + &.active &-item { + display: flex; + } + } +} diff --git a/public/scss_2/blocks/_employer.scss b/public/scss_2/blocks/_employer.scss new file mode 100644 index 0000000..a6cf898 --- /dev/null +++ b/public/scss_2/blocks/_employer.scss @@ -0,0 +1,37 @@ +.employer { + padding-bottom: 50px; + @media (min-width: $laptop) { + padding-bottom: 100px; + } + .swiper { + margin-top: 20px; + @media (min-width: $laptop) { + margin-top: 30px; + } + } + &__item { + display: flex; + flex-direction: column; + gap: 30px; + a { + display: flex; + flex-direction: column; + align-items: center; + } + img { + width: 100%; + aspect-ratio: 295/98; + object-fit: contain; + } + } + &__more { + height: 38px; + margin-top: 20px; + @media (min-width: $laptop) { + width: 250px; + margin: 0 auto; + height: 44px; + margin-top: 40px; + } + } +} diff --git a/public/scss_2/blocks/_footer.scss b/public/scss_2/blocks/_footer.scss new file mode 100644 index 0000000..fde0f82 --- /dev/null +++ b/public/scss_2/blocks/_footer.scss @@ -0,0 +1,265 @@ +.footer { + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); + background: $white; + position: relative; + z-index: 1; + overflow: hidden; + &__mobile { + display: flex; + flex-direction: column; + padding: 25px 0 30px 0; + @media (min-width: $tablet) { + padding: 30px 0; + } + @media (min-width: $laptop) { + display: none; + } + &-toper { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + border: none; + background: none; + a, b { + display: flex; + justify-content: center; + align-items: center; + color: $green; + svg { + width: 137px; + height: 40px; + } + } + span { + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + background: $green; + color: $white; + border-radius: 999px; + svg { + width: 10px; + height: 10px; + transition: $transition; + } + } + &.active { + span { + svg { + transform: $rotate180; + } + } + } + } + &-menu { + height: 0; + opacity: 0; + overflow: hidden; + transition: $transition; + display: flex; + flex-direction: column; + gap: 30px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 100px; + } + &-item { + display: flex; + flex-direction: column; + button { + display: flex; + align-items: flex-start; + padding: 0; + border: none; + background: none; + &.active { + color: $green; + } + b { + width: calc(100% - 24px); + padding-right: 12px; + min-height: 24px; + display: flex; + align-items: center; + font-size: 20px; + font-weight: 700; + } + span { + width: 24px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + border: none; + background: none; + } + svg { + width: 12px; + height: 12px; + transition: $transition; + transform: $rotate180; + } + &.active svg { + transform: rotate(0deg); + } + } + div { + height: 0; + opacity: 0; + overflow: hidden; + transition: $transition; + display: flex; + flex-direction: column; + gap: 15px; + a { + &:hover { + color: $green; + } + } + } + .active + div { + opacity: 1; + height: auto; + overflow: visible; + padding-top: 15px; + } + } + } + .active + &-menu { + opacity: 1; + height: auto; + overflow: visible; + padding-top: 35px; + } + &-contacts { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + margin-top: 30px; + b { + font-size: 20px; + font-weight: 700; + width: 100%; + margin-bottom: 20px; + } + a { + color: $green; + text-decoration: underline; + } + a + a { + color: $black; + } + } + &-bottom { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 20px; + margin-top: 100px; + } + &-links { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + a { + &:hover { + color: $green; + } + } + span { + width: 60px; + height: 1px; + background: $green; + } + } + } + &__main { + display: none; + padding: 55px 0 20px 0; + flex-direction: column; + gap: 70px; + @media (min-width: $laptop) { + display: flex; + } + &-body { + display: flex; + justify-content: space-between; + align-items: flex-start; + } + &-logo { + display: flex; + justify-content: center; + align-items: center; + color: $green; + svg { + width: 182px; + height: 54px; + } + } + &-title { + font-size: 20px; + font-weight: 700; + margin-bottom: 16px; + } + &-col { + display: flex; + flex-direction: column; + align-items: flex-start; + nav { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + a { + &:hover { + color: $green; + } + } + } + } + &-contacts { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + margin-bottom: 16px; + a { + color: $green; + text-decoration: underline; + } + a + a { + color: $black; + } + } + &-copy { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + line-height: 1.4; + nav { + display: flex; + align-items: center; + gap: 10px; + a { + &:hover { + color: $green; + } + } + span { + width: 1px; + height: 20px; + background: #6b6c6d; + } + } + } + } +} diff --git a/public/scss_2/blocks/_header.scss b/public/scss_2/blocks/_header.scss new file mode 100644 index 0000000..76d1e6b --- /dev/null +++ b/public/scss_2/blocks/_header.scss @@ -0,0 +1,236 @@ +.header { + box-shadow: $shadow; + background: $white; + position: relative; + z-index: 5; + overflow: hidden; + @media (min-width: $tablet) { + box-shadow: none; + } + &__body { + height: 42px; + display: flex; + justify-content: space-between; + align-items: center; + @media (min-width: $tablet) { + height: 70px; + } + } + &__left { + display: flex; + align-items: center; + gap: 40px; + } + &__right { + display: flex; + align-items: center; + gap: 14px; + @media (min-width: $tablet) { + gap: 20px; + } + &-line { + width: 1px; + height: 32px; + background: #e6e7e7; + border-radius: 999px; + @media (min-width: $laptop) { + display: none; + } + } + } + &__logo { + display: flex; + align-items: center; + justify-content: center; + color: $green; + svg { + width: 105px; + height: 31px; + @media (min-width: $tablet) { + width: 182px; + height: 54px; + } + } + } + &__menu { + display: none; + align-items: center; + gap: 20px; + @media (min-width: $tablet) { + display: flex; + } + &-item { + &:hover { + color: $green; + } + } + } + &__notifs { + display: flex; + align-items: center; + justify-content: center; + color: $green; + padding: 0; + border: none; + background: none; + width: 24px; + height: 24px; + @media (min-width: $laptop) { + width: auto; + height: auto; + color: $black; + line-height: 1.4; + } + &:hover { + @media (min-width: $laptop) { + color: $green; + } + } + svg { + width: 20px; + height: 20px; + @media (min-width: $laptop) { + display: none; + } + } + span { + display: none; + @media (min-width: $laptop) { + display: inline; + } + } + &_actived { + position: relative; + @media (min-width: $laptop) { + padding-right: 12px; + } + &:after { + content: ""; + border: 1px solid $white; + background: $green; + border-radius: 999px; + width: 10px; + height: 10px; + position: absolute; + z-index: 1; + top: 0; + right: 0; + @media (min-width: $laptop) { + width: 8px; + height: 8px; + border: none; + } + } + } + } + &__burger { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + color: $green; + padding: 0; + border: none; + background: none; + @media (min-width: $laptop) { + display: none; + } + svg { + width: 20px; + height: 20px; + } + svg + svg { + display: none; + } + } + &__sign { + display: none; + @media (min-width: $laptop) { + display: flex; + } + } +} + +.mob-menu { + display: none; + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + height: calc(100vh - 42px); + z-index: 4; + background: $white; + overflow: hidden; + overflow-y: auto; + padding: 50px 0; + &__bottom { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 80px; + .button { + min-width: 120px; + } + &-link { + text-decoration: underline; + margin-top: 50px; + &:hover { + color: $green; + } + } + &-link + &-link { + margin-top: 10px; + } + .socials { + margin-top: 35px; + } + } + .footer__mobile-menu { + opacity: 1; + height: auto; + overflow: visible; + &-item { + button { + align-items: center; + } + div { + font-size: 20px; + } + } + } + .footer__mobile-contacts a { + font-size: 20px; + font-weight: 700; + color: $black; + text-decoration: none; + &:hover { + color: $green; + } + } + .footer__mobile-menu-item button b, + .footer__mobile-contacts a { + font-size: 30px; + } +} + +.menu-is-actived { + overflow: hidden; + @media (min-width: $laptop) { + overflow: auto; + } + .header__burger { + svg { + display: none; + } + svg + svg { + display: block; + } + } + .mob-menu { + display: block; + @media (min-width: $laptop) { + display: none; + } + } +} diff --git a/public/scss_2/blocks/_info.scss b/public/scss_2/blocks/_info.scss new file mode 100644 index 0000000..a4ba47b --- /dev/null +++ b/public/scss_2/blocks/_info.scss @@ -0,0 +1,96 @@ +.info { + position: relative; + overflow: hidden; + @media (min-width: $desktop) { + margin-bottom: -25px; + } + &__pic { + display: none; + z-index: 1; + position: absolute; + top: 0; + left: 50%; + height: 100%; + margin-left: 130px; + @media (min-width: $laptop) { + display: block; + } + @media (min-width: $desktop) { + width: 610px; + height: auto; + margin-left: 10px; + } + } + &__body { + z-index: 2; + position: relative; + display: flex; + flex-direction: column; + @media (min-width: $desktop) { + padding-top: 100px; + min-height: 600px; + } + } + &__title { + @media (min-width: $desktop) { + max-width: 520px; + line-height: 1; + } + } + &__item { + margin-top: 20px; + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $laptop) { + max-width: 610px; + } + } + &__item + &__item { + margin-top: 60px; + } + &__text { + color: #6b6c6d; + font-size: 13px; + line-height: 1.4; + @media (min-width: $tablet) { + font-size: 16px; + } + @media (min-width: $desktop) { + font-size: 18px; + } + } + &__link { + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; + height: 40px; + font-size: 12px; + font-weight: 700; + gap: 8px; + color: $white; + background: $green; + &:hover { + filter: grayscale(50%); + } + @media (min-width: $tablet) { + height: 44px; + font-size: 16px; + gap: 10px; + max-width: 300px; + } + @media (min-width: $laptop) { + max-width: 210px; + } + svg { + width: 16px; + height: 16px; + @media (min-width: $tablet) { + width: 20px; + height: 20px; + } + } + } +} diff --git a/public/scss_2/blocks/_main.scss b/public/scss_2/blocks/_main.scss new file mode 100644 index 0000000..47ba0a5 --- /dev/null +++ b/public/scss_2/blocks/_main.scss @@ -0,0 +1,1282 @@ +.main { + position: relative; + overflow: hidden; + padding: 30px 0; + @media (min-width: $tablet) { + padding: 40px 0; + } + @media (min-width: $laptop) { + padding: 50px 0; + } + @media (min-width: $desktop) { + padding: 60px 0; + } + h2 { + margin: 0; + font-weight: 700; + font-size: 30px; + @media (min-width: $tablet) { + font-size: 44px; + } + } + h3 { + margin: 0; + font-weight: 700; + font-size: 22px; + @media (min-width: $tablet) { + font-size: 28px; + } + } + p { + margin: 0; + font-size: 14px; + line-height: 1.4; + @media (min-width: $tablet) { + font-size: 18px; + } + a { + color: $blue; + &:hover { + color: $green; + } + } + } + &__breadcrumbs { + margin-bottom: 20px; + @media (min-width: $tablet) { + margin-bottom: 40px; + } + } + &__content { + display: flex; + flex-direction: column; + gap: 20px; + font-size: 14px; + @media (min-width: $laptop) { + font-size: 18px; + gap: 32px; + } + &-item { + display: flex; + flex-direction: column; + gap: 16px; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: $black; + } + ul, + ol { + padding: 0; + margin: 0; + padding-left: 20px; + display: flex; + flex-direction: column; + gap: 8px; + @media (min-width: $laptop) { + gap: 16px; + padding-left: 30px; + } + } + li { + ul, + ol { + margin-top: 8px; + @media (min-width: $laptop) { + margin-top: 16px; + } + li { + list-style-type: disc; + } + } + } + } + &__gallery { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: $laptop) { + grid-template-columns: repeat(3, 1fr); + } + &-item { + width: 100%; + aspect-ratio: 400/224; + border-radius: 30px; + position: relative; + overflow: hidden; + &:hover { + filter: brightness(1.1); + } + img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + &__employers { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 30px; + } + &-body { + display: none; + flex-direction: column; + gap: 20px; + @media (min-width: $laptop) { + gap: 30px; + } + &.showed { + display: flex; + } + } + &-item { + display: flex; + flex-direction: column; + border: 1px solid #cecece; + border-radius: 8px; + position: relative; + overflow: hidden; + padding: 10px; + padding-top: 50px; + padding-bottom: 30px; + @media (min-width: $tablet) { + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 55px 20px; + } + @media (min-width: $desktop) { + padding-left: 55px; + } + &-inner { + display: flex; + flex-direction: column; + @media (min-width: $tablet) { + width: calc(100% - 200px); + padding-right: 40px; + } + @media (min-width: $laptop) { + flex-direction: row; + align-items: center; + } + } + &-pic { + height: 30px; + position: absolute; + top: 10px; + left: 10px; + @media (min-width: $tablet) { + position: static; + width: 150px; + height: auto; + max-height: 150px; + object-fit: contain; + } + } + &-body { + font-size: 12px; + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + font-size: 16px; + padding-top: 20px; + } + @media (min-width: $laptop) { + width: calc(100% - 150px); + padding: 0; + padding-left: 40px; + } + b { + font-weight: 700; + @media (min-width: $tablet) { + font-size: 20px; + } + } + i { + font-style: normal; + color: $black; + } + } + &-more { + position: absolute; + top: 10px; + right: 10px; + @media (min-width: $tablet) { + width: 200px; + padding: 0; + position: static; + } + } + &-label { + background: $blue; + color: $white; + border-radius: 6px; + width: 100%; + height: 20px; + display: flex; + align-items: center; + padding: 0 12px; + position: absolute; + bottom: 0; + left: 0; + font-size: 12px; + line-height: 1; + @media (min-width: $tablet) { + max-width: 350px; + height: 30px; + font-size: 15px; + } + svg { + width: 8px; + height: 8px; + @media (min-width: $tablet) { + width: 12px; + height: 12px; + } + } + span { + @include lines(1); + width: calc(100% - 8px); + padding-left: 6px; + } + } + } + &-one { + display: flex; + flex-direction: column; + gap: 20px; + } + &-two { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; + gap: 20px 0; + } + .main__employers-item { + width: calc(50% - 10px); + flex-direction: column; + align-items: stretch; + padding-top: 30px; + &-inner { + width: 100%; + padding: 0; + } + &-more { + position: static; + margin-top: 20px; + @media (min-width: $laptop) { + margin-left: 190px; + } + } + &-label { + max-width: none; + } + } + } + } + &__employer-page { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + gap: 30px; + } + &-title { + color: $black; + margin: 0; + font-size: 30px; + @media (min-width: $tablet) { + font-size: 36px; + } + @media (min-width: $laptop) { + font-size: 44px; + } + } + &-item { + display: flex; + flex-direction: column; + gap: 4px; + font-size: 12px; + line-height: 1.4; + @media (min-width: $tablet) { + font-size: 18px; + gap: 8px; + } + b { + color: $green; + font-size: 14px; + @media (min-width: $tablet) { + font-size: 18px; + } + } + span { + color: $black; + } + } + &-info { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px 40px; + } + @media (min-width: $desktop) { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + padding-right: 160px; + } + } + &-info &-item { + b, + span { + @media (min-width: $tablet) { + max-width: 300px; + } + } + } + &-tabs { + display: flex; + align-items: center; + gap: 20px; + @media (min-width: $tablet) { + margin-top: 20px; + } + &-item { + font-size: 22px; + font-weight: 700; + border: none; + background: none; + padding: 0; + color: #9c9d9d; + text-decoration: underline; + text-decoration-thickness: 1px; + @media (min-width: $tablet) { + font-size: 24px; + } + &.active { + color: $green; + } + } + } + &-body { + display: flex; + flex-direction: column; + margin-top: 10px; + @media (min-width: $tablet) { + margin-top: 30px; + } + &-item { + display: none; + flex-direction: column; + gap: 20px; + &.showed { + display: flex; + } + } + } + &-one { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: $laptop) { + grid-template-columns: repeat(3, 1fr); + } + @media (min-width: $desktop) { + grid-template-columns: repeat(4, 1fr); + gap: 30px 20px; + } + &-item { + display: flex; + flex-direction: column; + gap: 10px; + font-size: 12px; + position: relative; + @media (min-width: $desktop) { + font-size: 18px; + } + img { + border-radius: 10px; + object-fit: cover; + width: 100%; + max-height: 250px; + aspect-ratio: 247/174; + @media (min-width: $desktop) { + margin-bottom: 10px; + } + } + b { + font-weight: 700; + color: $green; + } + span { + color: $black; + } + .del { + position: absolute; + z-index: 1; + top: 8px; + left: 8px; + } + } + } + &-two { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + &-item { + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px 10px; + border-radius: 12px; + border: 1px solid #cecece; + position: relative; + overflow: hidden; + font-size: 12px; + background: $gradient; + @media (min-width: $tablet) { + font-size: 14px; + padding: 20px; + gap: 24px; + padding-bottom: 35px; + } + @media (min-width: $laptop) { + font-size: 16px; + } + @media (min-width: $desktop) { + font-size: 18px; + } + &-toper { + display: flex; + align-items: center; + font-size: 22px; + font-weight: 700; + color: $black; + @media (min-width: $tablet) { + font-size: 30px; + } + img { + width: 60px; + aspect-ratio: 1/1; + object-fit: contain; + } + span { + width: calc(100% - 60px); + padding-left: 10px; + @media (min-width: $tablet) { + padding-left: 20px; + } + } + } + &-title { + font-size: 18px; + font-weight: 700; + color: $green; + @media (min-width: $tablet) { + font-size: 24px; + } + } + &-text { + display: flex; + flex-direction: column; + gap: 10px; + &-name { + font-weight: 700; + } + &-body { + color: $black; + display: flex; + flex-direction: column; + gap: 6px; + padding: 0 10px; + p { + margin: 0; + } + ul { + margin: 0; + padding: 0; + padding-left: 16px; + display: flex; + flex-direction: column; + gap: 6px; + @media (min-width: $tablet) { + margin: 0 5px; + } + span, + a { + color: $black; + position: relative; + } + span { + @media (min-width: $tablet) { + + } + } + a:hover { + color: $green; + } + } + p + ul { + margin-top: 10px; + } + } + &-links { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + padding: 0 10px; + font-weight: 700; + margin-top: 5px; + @media (min-width: $tablet) { + gap: 20px; + } + a { + color: $blue; + &:hover { + color: $green; + } + } + } + } + &-tags { + color: $blue; + font-weight: 500; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px 20px; + @media (min-width: $tablet) { + font-size: 14px; + } + } + &-buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + &-button { + @media (min-width: $tablet) { + position: absolute; + bottom: 20px; + left: 20px; + width: 200px; + padding: 0; + } + } + &-button + &-button { + @media (min-width: $tablet) { + left: auto; + right: 20px; + } + } + &-bottom { + display: flex; + align-items: center; + justify-content: space-between; + &-date { + color: $black; + @media (min-width: $tablet) { + position: absolute; + bottom: 20px; + right: 240px; + height: 42px; + display: flex; + align-items: center; + } + @media (min-width: $laptop) { + font-size: 16px; + } + } + &-like { + @media (min-width: $tablet) { + position: absolute; + bottom: 20px; + left: 240px; + } + } + } + } + &-more { + @media (min-width: $tablet) { + margin-top: 10px; + padding: 0; + width: 200px; + } + } + } + &-two { + & &-item { + display: none; + &:nth-of-type(1), + &:nth-of-type(2) { + display: flex; + } + } + &.active &-item { + display: flex; + } + } + } + &__resume-base { + display: flex; + flex-direction: column; + color: $black; + &-body { + display: none; + flex-direction: column; + margin-top: 10px; + @media (min-width: $tablet) { + margin-top: 30px; + } + &.showed { + display: flex; + } + &-one { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + @media (min-width: $tablet) { + gap: 30px; + } + } + &-two { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $tablet) { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + gap: 30px 0; + } + } + &-two &-item { + @media (min-width: $tablet) { + width: calc(50% - 10px); + } + &-wrapper { + flex-direction: column; + } + } + &-item { + width: 100%; + display: flex; + flex-direction: column; + gap: 20px; + position: relative; + border: 1px solid $green; + border-radius: 8px; + padding: 10px; + align-items: center; + @media (min-width: $tablet) { + padding: 20px; + } + &-buttons { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + position: absolute; + top: 10px; + right: 10px; + @media (min-width: $tablet) { + top: 20px; + right: 20px; + } + } + &-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; + width: 100%; + @media (min-width: $tablet) { + flex-direction: row; + } + } + &-photo { + width: 180px; + aspect-ratio: 1/1; + object-fit: cover; + border-radius: 8px; + @media (min-width: $tablet) { + width: 210px; + } + } + &-inner { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; + @media (min-width: $tablet) { + gap: 16px; + padding-right: 50px; + } + @media (min-width: $laptop) { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } + div { + display: flex; + flex-direction: column; + gap: 4px; + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + } + } + b { + color: $green; + font-size: 14px; + @media (min-width: $tablet) { + font-size: 18px; + } + } + } + &-link { + width: 100%; + padding: 0; + @media (min-width: $tablet) { + width: 200px; + } + } + } + } + } + &__spoiler { + overflow: hidden; + border-radius: 8px; + display: flex; + flex-direction: column; + &-toper { + background: $green; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + color: $white; + font-size: 12px; + font-weight: 700; + padding: 0 30px; + border: none; + position: relative; + @media (min-width: $tablet) { + font-size: 18px; + height: 50px; + padding: 0 60px; + } + &:before, + &:after { + content: ""; + background: $white; + border-radius: 999px; + width: 10px; + height: 1px; + position: absolute; + top: 50%; + right: 10px; + transition: $transition; + transform: translate(0, -50%); + @media (min-width: $tablet) { + width: 20px; + height: 2px; + right: 20px; + } + } + &:after { + transform: rotate(90deg); + } + &.active:after { + transform: rotate(0deg); + } + } + &-body { + opacity: 0; + height: 0; + overflow: hidden; + border-radius: 0 0 8px 8px; + background: $white; + table { + width: calc(100% + 2px); + margin-left: -1px; + margin-bottom: -1px; + td { + @media (min-width: $laptop) { + width: 40%; + } + } + td + td { + @media (min-width: $laptop) { + width: 60%; + } + } + } + } + .active + &-body { + transition: $transition; + opacity: 1; + height: auto; + border: 1px solid #cecece; + border-top: none; + } + } + &__table { + border-collapse: collapse; + table-layout: fixed; + font-size: 12px; + width: 100%; + background: $white; + @media (min-width: $tablet) { + font-size: 16px; + } + td { + border: 1px solid #cecece; + padding: 4px 8px; + @media (min-width: $tablet) { + padding: 8px 16px; + } + b { + font-weight: 700; + } + a:hover { + color: $green; + } + } + } + &__resume-profile { + &-about { + padding-top: 20px; + padding-bottom: 30px; + position: relative; + margin-top: 30px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + @media (min-width: $laptop) { + padding: 50px 0; + } + &:before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: 50%; + width: 20000px; + height: 100%; + margin-left: -10000px; + background: $gradient; + } + &-title { + position: relative; + z-index: 2; + color: $black; + } + &-text { + position: relative; + z-index: 2; + } + &-button { + position: relative; + z-index: 2; + margin-top: 10px; + } + } + &-info { + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 30px; + @media (min-width: $laptop) { + margin-top: 50px; + gap: 30px; + } + &-title { + color: $black; + } + &-body { + display: flex; + flex-direction: column; + gap: 20px; + @media (min-width: $laptop) { + gap: 30px; + } + &-item { + display: flex; + flex-direction: column; + gap: 10px; + @media (min-width: $tablet) { + gap: 20px; + } + } + &-subtitle { + color: $blue; + } + &-inner { + display: flex; + flex-direction: column; + gap: 20px; + margin: 0; + padding: 0; + font-size: 12px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: $laptop) { + grid-template-columns: repeat(3, 1fr); + font-size: 16px; + } + li { + display: flex; + flex-direction: column; + gap: 6px; + @media (min-width: $laptop) { + gap: 8px; + } + } + b { + color: $green; + font-size: 14px; + @media (min-width: $laptop) { + font-size: 18px; + } + } + span { + display: flex; + flex-direction: column; + gap: 4px; + @media (min-width: $laptop) { + gap: 6px; + } + } + } + } + } + &-review { + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px 10px; + margin-top: 30px; + border-radius: 16px; + border: 1px solid #cecece; + background: $white; + box-shadow: $shadow; + @media (min-width: $laptop) { + margin-top: 50px; + padding: 50px 40px; + gap: 30px; + } + &-title { + color: $black; + } + &-body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + .textarea { + width: 100%; + } + .button { + margin-top: 10px; + } + } + } + } + &__vacancies { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + @media (min-width: $tablet) { + gap: 30px; + } + &-title { + color: $black; + width: 100%; + } + .vacancies__list { + @media (min-width: $laptop) { + grid-template-columns: repeat(2, 1fr); + } + } + &-filters { + width: 100%; + } + &-item { + width: 100%; + background: none; + box-shadow: $shadow; + &-page { + border: none; + box-shadow: none; + background: none; + margin: 0 -10px; + @media (min-width: $tablet) { + margin: 0 -20px; + } + } + } + &-thing { + width: 100%; + position: relative; + padding: 10px 0; + padding-bottom: 30px; + display: flex; + flex-direction: column; + gap: 24px; + @media (min-width: $laptop) { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding: 30px 0; + } + @media (min-width: $desktop) { + padding: 50px 0; + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 0; + } + &:before { + content: ""; + position: absolute; + z-index: 1; + top: 0; + left: 50%; + width: 20000px; + height: 100%; + margin-left: -10000px; + background: $gradient; + } + &-pic { + position: relative; + z-index: 2; + width: 100%; + height: 280px; + object-fit: cover; + border-radius: 8px; + @media (min-width: $desktop) { + width: 420px; + } + } + &-body { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + color: $black; + @media (min-width: $desktop) { + width: calc(100% - 420px); + padding-left: 30px; + gap: 20px; + } + > * { + width: 100%; + } + .button { + width: auto; + } + } + } + } + &__cond { + display: flex; + flex-direction: column; + gap: 50px; + > div { + display: flex; + flex-direction: column; + gap: 10px; + } + &-label { + border-radius: 16px; + border: 1px solid #cecece; + box-shadow: $shadow; + padding: 30px 20px; + font-weight: 700; + color: $black; + line-height: 2; + text-align: center; + @media (min-width: $laptop) { + font-size: 30px; + } + } + &-icons { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 25px; + margin-top: 10px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 60px; + margin-top: 20px; + } + @media (min-width: $desktop) { + grid-template-columns: repeat(3, 1fr); + } + li { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 20px; + font-size: 12px; + line-height: 1.4; + color: $black; + @media (min-width: $tablet) { + font-size: 14px; + } + @media (min-width: $laptop) { + font-size: 16px; + line-height: 1.6; + } + @media (min-width: $desktop) { + font-size: 18px; + } + span { + width: 48px; + height: 48px; + display: flex; + align-items: center; + img { + max-width: 48px; + } + } + } + } + &-callback { + margin-top: 10px; + } + } + &__ads { + display: flex; + flex-direction: column; + gap: 30px; + margin: 30px 0; + @media (min-width: $laptop) { + margin: 60px 0; + } + &-item { + display: flex; + flex-direction: column; + gap: 16px; + @media (min-width: $laptop) { + flex-direction: row; + gap: 0; + } + &-pic { + width: 100%; + max-width: 440px; + max-height: 200px; + aspect-ratio: 3/2; + position: relative; + overflow: hidden; + border-radius: 12px; + @media (min-width: $laptop) { + width: 200px; + aspect-ratio: 1/1; + } + img { + z-index: 1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + span { + z-index: 2; + width: 30px; + height: 30px; + border-radius: 6px; + background: $blue; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 10px; + left: 10px; + color: $white; + @media (min-width: $laptop) { + width: 42px; + height: 42px; + } + svg { + width: 12px; + height: 12px; + @media (min-width: $laptop) { + width: 20px; + height: 20px; + } + } + } + } + &-body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + font-size: 12px; + @media (min-width: $laptop) { + width: calc(100% - 200px); + padding-left: 40px; + justify-content: center; + font-size: 16px; + gap: 20px; + } + b { + width: 100%; + font-weight: 700; + font-size: 14px; + @media (min-width: $laptop) { + font-size: 20px; + } + } + span { + width: 100%; + } + } + } + } +} diff --git a/public/scss_2/blocks/_modals.scss b/public/scss_2/blocks/_modals.scss new file mode 100644 index 0000000..ec0c286 --- /dev/null +++ b/public/scss_2/blocks/_modals.scss @@ -0,0 +1,312 @@ +.cookies { + display: none; + align-items: flex-end; + padding: 10px; + padding-top: 0; + height: 0; + position: fixed; + z-index: 999; + bottom: 0; + left: 0; + width: 100%; + &-is-actived & { + display: flex; + } + &__body { + border-radius: 6px; + border: 1px solid $green; + background: $white; + padding: 15px; + padding-right: 50px; + position: relative; + max-width: 940px; + margin: 0 auto; + @media (min-width: $tablet) { + padding: 25px; + padding-right: 50px; + border-radius: 12px; + } + @media (min-width: $laptop) { + padding: 40px 60px; + } + } + &__close { + display: flex; + justify-content: center; + align-items: center; + color: $green; + padding: 0; + border: none; + background: none; + position: absolute; + top: 15px; + right: 15px; + &:hover { + color: $black; + } + svg { + width: 16px; + height: 16px; + } + } + &__text { + font-size: 12px; + color: $green; + line-height: 1.4; + @media (min-width: $tablet) { + font-size: 16px; + font-weight: 700; + } + } +} + +.fancybox { + &-active { + overflow: hidden; + } + &-is-open &-bg { + background: #080B0B; + opacity: 0.6; + z-index: 9999; + } + &-slide { + padding: 0; + @media (min-width: $laptop) { + padding: 30px; + } + } + &-slide--html &-close-small { + padding: 0; + opacity: 1; + color: $green; + @media (min-width: $tablet) { + top: 10px; + right: 10px; + } + &:hover { + color: $black; + } + } +} + +.modal { + width: 100%; + max-width: 820px; + padding: 0; + background: $white; + z-index: 99999; + @media (min-width: $laptop) { + border-radius: 10px; + border: 1px solid $green; + } + &_bg { + background: $white url(../images/bg-4.svg) no-repeat calc(50% + 100px) 100%; + @media (min-width: $tablet) { + background-position: 100% 100%; + } + } + &__body { + padding: 40px 15px; + padding-bottom: 30px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + min-height: 100vh; + overflow: hidden; + font-size: 12px; + @media (min-width: $tablet) { + font-size: 16px; + padding-left: 22px; + padding-right: 22px; + } + @media (min-width: $laptop) { + min-height: 450px; + padding: 60px 80px; + padding-bottom: 40px; + } + .left { + @media (min-width: $tablet) { + text-align: left; + } + } + } + &__title { + width: 100%; + font-size: 22px; + font-weight: 700; + text-align: center; + color: $black; + @media (min-width: $tablet) { + font-size: 32px; + } + @media (min-width: $laptop) { + font-size: 44px; + } + } + &__text { + width: 100%; + text-align: center; + margin-top: 10px; + color: $black; + @media (min-width: $tablet) { + margin-top: 20px; + } + span { + color: #9C9D9D; + } + a { + font-weight: 700; + color: $green; + &:hover { + color: $black; + } + } + } + &__button { + margin-top: 20px; + @media (min-width: $tablet) { + min-width: 200px; + margin-top: 30px; + } + } + &__buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-top: 20px; + @media (min-width: $tablet) { + gap: 30px; + margin-top: 30px; + } + } + &__form { + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 10px; + @media (min-width: $tablet) { + margin-top: 20px; + } + &-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + > .input { + width: 100%; + } + > .textarea { + width: 100%; + height: 175px; + @media (min-width: $tablet) { + height: 195px; + } + } + > .file { + width: 100%; + } + > .button { + min-width: 120px; + } + > label { + width: 100%; + display: none; + color: $red; + padding: 0 10px; + font-size: 12px; + @media (min-width: $tablet) { + padding: 0 20px; + font-size: 16px; + } + } + } + } + &__sign { + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 10px; + margin-bottom: 20px; + width: 100%; + @media (min-width: $tablet) { + margin-top: 20px; + margin-bottom: 40px; + } + &-item { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + > .input { + width: 100%; + padding-right: 36px; + position: relative; + z-index: 1; + @media (min-width: $tablet) { + height: 52px; + padding-right: 60px; + } + } + > .textarea { + width: 100%; + } + } + &-bottom { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + &-link { + font-weight: 700; + color: $green; + } + } + } + &__tabs { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin-top: 10px; + @media (min-width: $tablet) { + gap: 24px; + margin-top: 20px; + } + &-item { + + &.active { + background: $green; + color: $white; + } + } + } + &__reg { + display: none; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + margin-top: 10px; + margin-bottom: 20px; + @media (min-width: $tablet) { + margin-top: 20px; + margin-bottom: 30px; + gap: 20px; + } + &.showed { + display: flex; + } + &-item { + width: 100%; + display: flex; + flex-direction: column; + > .captcha { + width: 100%; + max-width: 300px; + } + } + } +} diff --git a/public/scss_2/blocks/_news.scss b/public/scss_2/blocks/_news.scss new file mode 100644 index 0000000..1b6034b --- /dev/null +++ b/public/scss_2/blocks/_news.scss @@ -0,0 +1,104 @@ +.news { + padding: 50px 0; + overflow: hidden; + @media (min-width: $desktop) { + padding: 100px 0; + padding-bottom: 0; + } + &__toper { + display: flex; + justify-content: space-between; + align-items: center; + .title { + @media (min-width: $desktop) { + width: calc(100% - 160px); + } + } + .navs { + display: none; + @media (min-width: $desktop) { + display: flex; + } + } + } + .swiper { + margin-top: 20px; + @media (min-width: $tablet) { + overflow: visible; + } + @media (min-width: $laptop) { + margin-top: 40px; + } + } + &__item { + display: flex; + flex-direction: column; + line-height: 1.4; + &-pic { + width: 100%; + aspect-ratio: 3/2; + border-radius: 12px; + border: 1px solid #e6e7e7; + object-fit: cover; + min-height: 200px; + @media (min-width: $desktop) { + aspect-ratio: 4/2; + } + } + &-body { + display: flex; + flex-direction: column; + padding-top: 15px; + @media (min-width: $tablet) { + padding: 20px; + padding-top: 30px; + margin-top: -15px; + border-radius: 0 0 12px 12px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); + } + } + &-date { + font-size: 14px; + font-weight: 700; + color: $green; + } + &-title { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + margin-top: 5px; + } + &-text { + color: #6b6c6d; + font-size: 13px; + margin-top: 10px; + @include lines(4); + @media (min-width: $desktop) { + font-size: 16px; + } + } + &-more { + height: 42px; + margin-top: 20px; + @media (min-width: $desktop) { + height: 44px; + max-width: 190px; + } + } + } + &__all { + height: 42px; + margin: 0 auto; + margin-top: 20px; + padding: 0; + display: none; + @media (min-width: $tablet) { + max-width: 170px; + margin-top: 30px; + display: flex; + } + @media (min-width: $desktop) { + height: 44px; + } + } +} diff --git a/public/scss_2/blocks/_normalize.scss b/public/scss_2/blocks/_normalize.scss new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/public/scss_2/blocks/_normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/public/scss_2/blocks/_numbers.scss b/public/scss_2/blocks/_numbers.scss new file mode 100644 index 0000000..a4214ad --- /dev/null +++ b/public/scss_2/blocks/_numbers.scss @@ -0,0 +1,49 @@ +.numbers { + padding: 30px 0; + background: $green url("../images/bg.svg") no-repeat 100% calc(100% + 80px); + color: $white; + @media (min-width: $desktop) { + padding: 100px 0; + background-position: 100% 100%; + background-size: auto 500px; + } + &__body { + display: flex; + flex-direction: column; + gap: 30px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + } + &__item { + font-size: 12px; + display: flex; + flex-direction: column; + line-height: 1.4; + @media (min-width: $desktop) { + font-size: 16px; + line-height: 20px; + } + b { + font-size: 40px; + font-weight: 700; + border-bottom: 1px solid $white; + line-height: 1; + @media (min-width: $desktop) { + font-size: 100px; + line-height: 147px; + } + } + span { + font-weight: 700; + font-size: 14px; + margin: 10px 0; + line-height: 1; + @media (min-width: $desktop) { + font-size: 24px; + margin-top: 30px; + } + } + } +} diff --git a/public/scss_2/blocks/_thing.scss b/public/scss_2/blocks/_thing.scss new file mode 100644 index 0000000..5cf62ef --- /dev/null +++ b/public/scss_2/blocks/_thing.scss @@ -0,0 +1,216 @@ +.thing { + padding-top: 15px; + padding-bottom: 30px; + background: $gradient; + color: $black; + overflow: hidden; + position: relative; + @media (min-width: $laptop) { + padding-top: 20px; + padding-bottom: 60px; + } + @media (min-width: $desktop) { + padding-bottom: 90px; + } + &__body { + display: flex; + flex-direction: column; + align-items: flex-start; + } + &__breadcrumbs { + width: 100%; + margin-bottom: 40px; + position: relative; + z-index: 2; + @media (min-width: $tablet) { + margin-bottom: 60px; + } + } + &__title { + width: 100%; + font-size: 32px; + font-weight: 700; + margin: 0; + max-width: 780px; + position: relative; + z-index: 2; + line-height: 1.1; + @media (min-width: $tablet) { + font-size: 40px; + } + @media (min-width: $desktop) { + font-size: 64px; + } + } + &__text { + width: 100%; + font-weight: 700; + font-size: 14px; + line-height: 1.4; + margin: 15px 0 0 0; + max-width: 780px; + position: relative; + z-index: 2; + @media (min-width: $tablet) { + margin-top: 15px; + } + @media (min-width: $laptop) { + font-weight: 400; + font-size: 18px; + } + } + &__search { + width: 100%; + max-width: 640px; + margin-top: 20px; + position: relative; + z-index: 2; + @media (min-width: $tablet) { + margin-top: 30px; + } + } + &__badge { + position: relative; + z-index: 2; + display: flex; + align-items: center; + gap: 5px; + padding: 0 12px; + background: $blue; + color: $white; + font-size: 12px; + line-height: 1; + height: 26px; + border-radius: 999px; + margin-bottom: 20px; + @media (min-width: $laptop) { + font-size: 16px; + gap: 10px; + padding: 0 24px; + height: 42px; + margin-bottom: 30px; + } + svg { + width: 12px; + height: 12px; + @media (min-width: $laptop) { + width: 20px; + height: 20px; + } + } + } + &__pic { + width: 60px; + aspect-ratio: 1/1; + object-fit: contain; + position: relative; + z-index: 1; + margin-bottom: 15px; + @media (min-width: $tablet) { + width: 160px; + position: absolute; + top: 15px; + right: 20px; + } + @media (min-width: $laptop) { + width: 330px; + top: 50%; + transform: translate(0, -50%); + } + @media (min-width: $desktop) { + right: auto; + left: 50%; + margin-left: 200px; + } + &_two { + object-fit: cover; + border-radius: 30px; + aspect-ratio: 44/37; + width: 100%; + max-width: 440px; + @media (min-width: $tablet) { + position: static; + transform: translate(0, 0); + } + @media (min-width: $desktop) { + position: absolute; + transform: translate(0, -50%); + } + } + } + &__buttons { + width: 100%; + position: relative; + z-index: 2; + display: flex; + align-items: center; + gap: 20px; + margin-top: 15px; + @media (min-width: $laptop) { + margin-top: 30px; + gap: 30px; + } + .button { + @media (min-width: $laptop) { + padding: 0 22px; + } + } + } + &__checkbox { + margin-top: 20px; + .checkbox__icon { + border-color: $green; + } + .checkbox__text { + color: $green; + } + } + &__profile { + display: flex; + flex-direction: column; + @media (min-width: $tablet) { + flex-direction: row; + align-items: flex-start; + } + &-photo { + width: 210px; + border-radius: 8px; + aspect-ratio: 1/1; + } + &-body { + display: flex; + flex-direction: column; + margin-top: 15px; + @media (min-width: $tablet) { + width: calc(100% - 210px); + padding-left: 35px; + } + } + } + &__profile &__title { + max-width: none; + @media (min-width: $tablet) { + margin-top: -20px; + } + } + &__profile &__text { + max-width: none; + } + &__bottom { + display: flex; + align-items: center; + gap: 15px; + margin-top: 15px; + @media (min-width: $tablet) { + margin-top: 30px; + } + } + &__select { + width: 100%; + max-width: 640px; + margin-top: 20px; + @media (min-width: $tablet) { + margin-top: 30px; + } + } +} diff --git a/public/scss_2/blocks/_vacancies.scss b/public/scss_2/blocks/_vacancies.scss new file mode 100644 index 0000000..4d1e4ed --- /dev/null +++ b/public/scss_2/blocks/_vacancies.scss @@ -0,0 +1,111 @@ +.vacancies { + padding: 50px 0; + @media (min-width: $desktop) { + padding: 100px 0; + } + &__body { + display: flex; + flex-direction: column-reverse; + gap: 20px; + width: 100%; + margin-top: 20px; + @media (min-width: $laptop) { + margin-top: 30px; + gap: 30px; + } + } + &__more { + width: 100%; + @media (min-width: $tablet) { + width: auto; + margin: 0 auto; + } + } + &__list { + display: flex; + flex-direction: column; + gap: 15px; + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: $laptop) { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } + @media (min-width: $desktop) { + grid-template-columns: repeat(4, 1fr); + } + } + &__item { + display: none; + box-shadow: $shadow; + border-radius: 12px; + background: $white; + border: 1px solid #e6e7e7; + overflow: hidden; + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6), + &:nth-of-type(7), + &:nth-of-type(8), + &:nth-of-type(9), + &:nth-of-type(10), + &:nth-of-type(11), + &:nth-of-type(12), + &:nth-of-type(13), + &:nth-of-type(14), + &:nth-of-type(15), + &:nth-of-type(16) { + display: flex; + } + > span { + border-left: 10px solid $green; + padding: 20px 14px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 5px; + justify-content: space-between; + @media (min-width: $laptop) { + gap: 10px; + } + } + b { + font-weight: 700; + font-size: 14px; + @media (min-width: $laptop) { + font-size: 20px; + } + } + &:hover b { + color: $green; + } + u { + text-decoration: none; + font-size: 14px; + @media (min-width: $laptop) { + font-size: 18px; + } + } + i { + font-size: 12px; + font-style: normal; + border-bottom: 1px dashed $green; + @media (min-width: $laptop) { + font-size: 16px; + } + span { + font-weight: 700; + color: $green; + } + } + } + &__body.active > &__list > &__item { + display: flex; + } +} diff --git a/public/scss_2/blocks/_work.scss b/public/scss_2/blocks/_work.scss new file mode 100644 index 0000000..a6db771 --- /dev/null +++ b/public/scss_2/blocks/_work.scss @@ -0,0 +1,148 @@ +.work { + background: $gradient; + color: #6b6c6d; + padding-top: 70px; + padding-bottom: 10px; + position: relative; + overflow: hidden; + @media (min-width: $tablet) { + padding-bottom: 25px; + } + @media (min-width: $desktop) { + padding-top: 80px; + padding-bottom: 25px; + } + &__pic { + position: absolute; + height: calc(100% - 40px); + z-index: 1; + display: none; + bottom: 0; + left: 50%; + margin-left: 40px; + @media (min-width: $laptop) { + display: block; + } + @media (min-width: $desktop) { + margin-left: 80px; + } + } + &__body { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + @media (min-width: $tablet) { + align-items: flex-start; + } + @media (min-width: $laptop) { + max-width: 600px; + } + } + &__title { + width: 100%; + font-size: 40px; + font-weight: 700; + line-height: 1; + @media (min-width: $tablet) { + font-size: 64px; + line-height: 94px; + } + } + &__text { + width: 100%; + font-size: 12px; + margin-top: 10px; + @media (min-width: $tablet) { + font-size: 18px; + margin-top: 20px; + line-height: 1.4; + } + } + &__list { + width: 100%; + display: flex; + flex-direction: column; + gap: 5px; + font-size: 14px; + font-weight: 700; + margin-top: 15px; + @media (min-width: $tablet) { + font-size: 18px; + gap: 8px; + margin-top: 30px; + } + div { + position: relative; + padding-left: 10px; + @media (min-width: $tablet) { + padding-left: 16px; + } + &:before { + content: ""; + width: 4px; + height: 4px; + background: #6b6c6d; + border-radius: 999px; + position: absolute; + top: 5px; + left: 0; + @media (min-width: $tablet) { + top: 8px; + } + } + } + } + &__form { + margin-top: 20px; + @media (min-width: $tablet) { + margin-top: 30px; + } + } + &__search { + width: 100%; + max-width: 180px; + margin-top: 20px; + @media (min-width: $tablet) { + max-width: 270px; + margin-top: 50px; + } + } + &__get { + width: 100%; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + margin-top: 48px; + b { + width: 100%; + margin-bottom: 10px; + font-size: 14px; + @media (min-width: $tablet) { + font-size: 18px; + } + } + a { + display: flex; + align-items: center; + justify-content: center; + margin-right: 20px; + img { + transition: $transition; + width: 111px; + @media (min-width: $tablet) { + width: 131px; + } + } + &:hover { + img { + transform: scale(1.1); + } + } + } + a + a { + margin-right: 0; + } + } +} diff --git a/public/scss_2/style.scss b/public/scss_2/style.scss new file mode 100644 index 0000000..6f4d63f --- /dev/null +++ b/public/scss_2/style.scss @@ -0,0 +1,162 @@ +@import "blocks/normalize"; +@import url(fonts.css); +@import url(jquery.fancybox.css); +@import url(jquery.select2.css); +@import url(star-rating.min.css); +@import url(swiper.css); + +$tablet: 768px; +$laptop: 992px; +$desktop: 1280px; + +$min-width: 320px; +$circe: "Circe", sans-serif; + +$transition: 0.3s; +$shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); +$gradient: linear-gradient(95deg, #f2f5fc 59.82%, #ebf2fc 99.99%); + +$black: #3a3b3c; +$white: #ffffff; +$green: #377d87; +$light: #acc0e6; +$silver: #9c9d9d; +$blue: #4d88d9; +$red: #eb5757; +.green { + color: $green; +} +.red { + color: $red; +} + +$rotate180: rotate(180deg); +.rotate180 { + transform: $rotate180; +} + +@mixin lines($numb) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $numb; +} + +::selection { + color: $black; + background: $light; +} + +::-webkit-scrollbar { + width: 4px; + height: 4px; +} +::-webkit-scrollbar-track { + border-radius: 999px; + background-color: #f3f3f3; +} +::-webkit-scrollbar-thumb { + border-radius: 999px; + background-color: $light; +} + +::-webkit-input-placeholder { + color: #9c9d9d; + opacity: 1; +} +:focus::-webkit-input-placeholder { + color: transparent; +} +:-ms-input-placeholder { + color: #9c9d9d; + opacity: 1; +} +:focus:-ms-input-placeholder { + color: transparent; +} +::-ms-input-placeholder { + color: #9c9d9d; + opacity: 1; +} +:focus::-ms-input-placeholder { + color: transparent; +} +::-moz-placeholder { + color: #9c9d9d; + opacity: 1; +} +:focus::-moz-placeholder { + color: transparent; +} +::placeholder { + color: #9c9d9d; + opacity: 1; +} +:focus::placeholder { + color: transparent; +} + +*, +*:before, +*:after { + box-sizing: border-box; + appearance: none; + outline: none; + box-shadow: none; +} + +a, +button, +select { + color: inherit; +} +a { + text-decoration: none; +} +a, +input[type="button"], +input[type="submit"], +button { + user-select: none; + transition: $transition; + cursor: pointer; +} + +[type=tel] { + letter-spacing: 1px; +} + +.br, +img, +svg { + display: block; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.clear-both { + &:after { + content: ""; + display: block; + clear: both; + } +} + +@import "global"; +@import "blocks/header"; +@import "blocks/footer"; +@import "blocks/main"; +@import "blocks/work"; +@import "blocks/numbers"; +@import "blocks/vacancies"; +@import "blocks/employer"; +@import "blocks/about"; +@import "blocks/news"; +@import "blocks/info"; +@import "blocks/thing"; +@import "blocks/404"; +@import "blocks/modals"; +@import "blocks/cabinet"; diff --git a/resources/views/layout/frontend-page.blade.php b/resources/views/layout/frontend-page.blade.php index 3376568..0f6029b 100644 --- a/resources/views/layout/frontend-page.blade.php +++ b/resources/views/layout/frontend-page.blade.php @@ -6,7 +6,7 @@ {{ $title }} - + diff --git a/resources/views/layout/frontend.blade.php b/resources/views/layout/frontend.blade.php index 0a54e47..7685208 100644 --- a/resources/views/layout/frontend.blade.php +++ b/resources/views/layout/frontend.blade.php @@ -10,7 +10,7 @@ - +