/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: Gotham; font-display: swap; src: url("../fonts/Gotham-Black.woff2") format("woff2"), url("../fonts/Gotham-Black.woff") format("woff"); font-weight: 900; font-style: normal; } @font-face { font-family: Gotham; font-display: swap; src: url("../fonts/Gotham-BlackItalic.woff2") format("woff2"), url("../fonts/Gotham-BlackItalic.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Gotham; font-display: swap; src: url("../fonts/Gotham-Bold.woff2") format("woff2"), url("../fonts/Gotham-Bold.woff") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: Gotham; font-display: swap; src: url("../fonts/Gotham-BoldItalic.woff2") format("woff2"), url("../fonts/Gotham-BoldItalic.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Gotham; font-display: swap; src: url("../fonts/Gotham-Book.woff2") format("woff2"), url("../fonts/Gotham-Book.woff") format("woff"); font-weight: 400; font-style: normal; } html { font-family: Gotham; } body { background-color: #eaeaea; } .container { margin: 0 auto; max-width: 1110px; } .header { background: #242424; } .header__container { display: flex; justify-content: space-between; padding-top: 13px; padding-bottom: 17px; color: #BF995A; background: url("../img/middle-crown.svg") no-repeat center; } .header__additional { display: flex; align-items: center; gap: 50px; } .header__whatsapp a { display: block; text-align: center; border-radius: 50px; padding: 9px 20px; border: 1px solid #BF995A; font-weight: 600; transition: color linear 200ms, background-color linear 200ms, box-shadow linear 200ms; } .header__whatsapp a:hover { box-shadow: 0px 0px 20px 0px rgba(191, 153, 90, 0.31); background-color: #BF995A; color: #242424; } .header__lang { display: flex; gap: 30px; } .header__lang-item a { display: block; border-radius: 50px; border: 1px solid #BF995A; padding: 7px 15px; font-weight: 600; transition: color linear 200ms, background-color linear 200ms, box-swadow linear 200ms; } .header__lang-item a:hover { box-shadow: 0px 0px 20px 0px rgba(191, 153, 90, 0.31); background-color: #BF995A; color: #242424; } .feedback-section { background: url("../img/big-bg-crown-left.svg") no-repeat left, url("../img/big-bg-crown-right.svg") no-repeat right; padding: 120px 0; } .input-file { position: relative; display: flex; } .input-file-photo-label { margin-bottom: 11px; } .input-file-btn { position: relative; display: flex; gap: 14px; align-items: center; justify-content: center; cursor: pointer; outline: none; text-decoration: none; font-size: 14px; vertical-align: middle; color: rgb(0 0 0); text-align: center; background-color: #fff; line-height: 22px; height: 40px; padding: 10px 20px; box-sizing: border-box; border-radius: 5px; margin: 0; border: 1px solid #E5E5E5; transition: background-color 0.2s, color 0.2s; } .input-file-text { padding: 0 10px; line-height: 40px; display: inline-block; } .input-file input[type=file] { position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; } /* Hover/active */ .input-file:hover .input-file-btn { background-color: #242424; color: #BF995A; } .input-file:active .input-file-btn { background-color: #242424; } /* Disabled */ .input-file input[type=file]:disabled + .input-file-btn { background-color: #eee; } .feedback-section__container { display: flex; justify-content: center; } .feedback-form { display: flex; justify-content: center; width: 100%; } .feedback-form__container { width: 540px; } .feedback-form__title-wrapper { margin-bottom: 40px; } .feedback-form__title { margin-bottom: 20px; text-align: center; color: #171717; font-size: 30px; font-weight: 600; line-height: 100%; } .feedback-form__subtitle { color: #171717; text-align: center; font-size: 16px; font-weight: 400; line-height: 112.5%; } .feedback-form__inputs-col { display: flex; flex-direction: column; gap: 19px; } .feedback-form__input-wrapper { position: relative; width: 100%; border-radius: 6px; border: 1px solid #E5E5E5; background: #FFF; } .feedback-form__input-wrapper.required span { content: " *"; color: #EC1C23; } .feedback-form__input { position: relative; z-index: 2; width: 100%; height: 100%; padding: 17px 15px; border-radius: 6px; } .feedback-form__input::-moz-placeholder { color: rgba(0,0,0,0); } .feedback-form__input::placeholder { color: rgba(0,0,0,0); } .feedback-form__input:focus { outline: #BF995A 2px solid; } .feedback-form__pseudo-placeholder { position: absolute; top: 17px; left: 15px; z-index: 1; color: #AEB3BB; } .feedback-form__button { text-align: center; text-transform: uppercase; color: #BF995A; border-radius: 6px; font-size: 14px; font-weight: 600; background-color: #242424; padding: 16px; width: 100%; cursor: pointer; outline: #242424 2px solid; transition: color 0.2s linear, background-color 0.2s linear, transform 0.2s linear; } .feedback-form__button:hover { color: #242424; background-color: #BF995A; } .feedback-form__button:active { transform: scale(97%); } .footer { background-color: #242424; background-image: url("../img/middle-crown.svg"); background-repeat: no-repeat; background-position: left bottom; color: #BF995A; font-size: 16px; } .footer__bottom-container { padding: 20px 0; border-top: solid 1px #BF995A; } .footer__top-container { padding-top: 50px; padding-bottom: 16px; } .footer__top { display: flex; } .footer__contacts { display: flex; gap: 105px; } .footer__contacts-col { display: flex; flex-direction: column; } .footer__title { margin-bottom: 30px; font-size: 16px; font-weight: 700; } .footer__contacts-tel { display: flex; flex-direction: column; margin-bottom: 52px; } .footer a.footer__contacts-item:hover { text-decoration: underline; } .footer__media { margin-left: 101px; } .footer__media-wrapper { display: flex; gap: 15px; } .footer__link a svg { pointer-events: none; transition: box-shadow linear 0.2s; border-radius: 50px; } .footer__link a svg circle { transition: fill linear 0.2s; } .footer__link a svg path { transition: stroke linear 0.2s, fill linear 0.2s; } .footer__link:hover a { display: inline-block; } .footer__link:hover a svg { box-shadow: 0px 0px 49px -11px rgb(191, 153, 90); } .footer__link:hover a svg circle { fill: #BF995A; } .footer__link:hover a svg path { stroke: #fff; fill: #BF995A; } .footer__bottom { display: flex; gap: 20px; justify-content: space-between; } .footer__dev-link:hover { text-decoration: underline; } .footer__logo { margin-right: auto; } .alert--fixed { position: fixed; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; top: 0px; left: 0px; z-index: 999; } .alert--error, .alert--warning, .alert--active { display: flex; } .alert--program .alert--width { width: fit-content; } .alert--program .alert--img { display: none; } .alert--width { width: 400px; } .alert--img__item svg { width: 80px; height: 80px; flex-shrink: 0; } .alert--img__item { display: none; flex-shrink: 0; } .alert--active .active { display: block; } .alert--warning .warning { display: block; } .alert--error .error { display: block; } .alert--content { position: relative; z-index: 12; border-radius: 15px; display: flex; align-items: center; flex-direction: column; background-color: white; padding: 30px; color: #333333; margin-bottom: 10%; } .alert--bg { position: absolute; width: 100%; height: 100%; background-color: black; opacity: 0.6; z-index: 11; top: 0px; left: 0px; } .alert-text { margin-top: 15px; text-align: center; } .alert--active .active path { fill: #4ad395; } .alert--warning .warning path { fill: #e5e75d; } .alert--error .error path { fill: #f81919; } .alert--title { font-size: 28px; font-weight: 500; } .alert--subtitle { font-weight: 400; font-size: 20px; padding-top: 8px; margin-top: 8px; border-top: 1px solid #ccbbbb; } .alert--x { position: absolute; width: 30px; height: 30px; padding: 8px; right: 10px; top: 10px; cursor: pointer; } .alert--x svg { width: 100%; height: 100%; } .alert--x svg path { fill: #968787; transition: all 0.3s ease; } .alert--x:hover path { fill: black; } @media (max-width: 1200px) { .container { padding: 0 20px; } } @media (max-width: 992px) { .footer__top { flex-direction: column; gap: 30px; } .footer__media { margin-left: 0; } } @media (max-width: 768px) { .header__lang { gap: 5px; } .header__additional { gap: 5px; } .header__whatsapp a, .header__lang-item a { font-size: 12px; padding: 4px 7px; } } @media (max-width: 576px) { .input-file { flex-direction: column; } .logo { width: 70px; } .feedback-form__container { width: 100%; } .footer__contacts { gap: 30px; flex-direction: column; } }