diff --git a/styles/styles.css b/styles/styles.css index d55b8d4..e69de29 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,1415 +0,0 @@ -@font-face { - font-family: "PT-Sans"; - font-style: normal; - font-weight: 400; - src: url(../fonts/ptsans-400.woff2); - font-display: swap; -} -@font-face { - font-family: "PT-Sans"; - font-style: normal; - font-weight: 700; - src: url(../fonts/ptsans-700.woff2); - font-display: swap; -} - -/* BASIC */ - -*, -::before, -::after { - box-sizing: border-box; -} - -.link:focus-visible, -.button:focus-visible, -.filter-form__label:focus-within .mark, -.input:focus-visible, -.quantity-button:focus-visible svg { - outline: 3px solid #83B3D3; -} - -html, body { - height: 100%; -} - -body { - display: flex; - flex-direction: column; - margin: 0; - font-family: "PT-Sans", Helvetica, sans-serif; - font-style: normal; - font-size: 18px; - font-weight: 400; - line-height: 21px; - color: #333; - background-color: #f2f2f2; -} - -.link { - text-decoration: none; - color: #000; -} - -.link.is-current { - pointer-events: none; -} - -img { - display: block; -} - -.list { - margin: 0; - padding: 0; - list-style: none; -} - -.title { - color: #000; - margin: 0; -} - -.section-title { - font-size: 30px; - line-height: 36px; - text-transform: uppercase; - margin-bottom: 20px; -} - -.custom-br { - display: block; -} - -.button { - display: inline-flex; - justify-content: center; - align-items: center; - font-family: inherit; - font-weight: 700; - text-transform: uppercase; - text-decoration: none; - text-align: center; - border-radius: 4px; - padding-top: 8px; - padding-bottom: 8px; - border: 0; - color: #fff; - cursor: pointer; -} - -.button--small { - font-size: 16px; - line-height: 20px; -} - -.button--big { - font-size: 20px; - line-height: 36px; - padding-left: 50px; - padding-right: 50px; -} - -.button--color-primary { - background-color: #756157; -} - -.button--color-primary:focus-visible { - background-color: #615048; -} - -.button--color-primary:hover { - background-color: #615048; -} - -.button--color-primary:active { - background-color: #756157; - color: rgba(255, 255, 255, .3); -} - -.button--color-accent { - background-color: #82B3D3; -} - -.button--color-accent:focus-visible { - background-color: #68A2CA; -} - -.button--color-accent:hover { - background-color: #68A2CA; -} - -.button--color-accent:active { - background-color: #82B3D3; - color: rgba(255, 255, 255, .3); -} - -.button:disabled { - background-color: #e5e5e5; -} - -.input, -.select { - font-family: inherit; - font-style: normal; - font-size: 18px; - padding: 0 20px; -} - -.input { - border: 0; - border-radius: 4px; - background-color: #f2f2f2; -} - -.input:focus-visible { - background-color: #e6e6e6; -} - -.input:hover { - background-color: #e6e6e6; -} - -.select { - appearance: none; - height: 48px; - min-width: 292px; - padding-right: 52px; - border: 2px solid #e5e5e5; - border-radius: 4px; - background-color: transparent; - background-image: url("../images/arrow-down.svg"); - background-repeat: no-repeat; - background-position: calc(100% - 20px) center; - color: #333; -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - border: 0; - clip: rect(0 0 0 0); -} - -.page { - width: 1200px; - margin: 0 auto; - box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.20); -} - -.main-page, .inner-page { - flex-grow: 1; -} - -.container { - width: 1090px; - margin: 0 auto; - padding: 0 15px; -} - -.line { - display: flex; - flex-direction: column; -} - -.page-header, .main-page, -.inner-page, .page-footer { - background-color: #fff; -} - -.page-header { - position: sticky; - top: 0; - z-index: 1; - border-bottom: 1px solid #fafafa; -} - -.wrapper-text { - width: 680px; - margin: auto; - padding: 70px 0; - text-align: center; -} - -.section-description { - font-size: 22px; - line-height: 26px; - margin: 0; -} - -/* INDEX */ -/* HEADER */ - -.page-header .line { - flex-direction: row; -} - -.logo { - flex: 0 0 140px; - height: 64px; - margin-right: 28px; - z-index: 1; -} - -.navigation { - display: flex; - flex: 1 1 auto; -} - -.navigation-list { - display: flex; - flex-wrap: wrap; -} - -.navigation-list__link { - display: block; - position: relative; - padding: 20px 16px; - font-size: 20px; - font-weight: 700; - line-height: 24px; -} - -.navigation-list--menu .link::after { - content: ""; - display: block; - position: absolute; - left: 0; - right: 0; - bottom: -1px; - height: 2px; - margin: 0 16px; - background-color: transparent; - z-index: 1; -} - -.navigation-list__link:hover { - color: #756257; -} - - .navigation-list--menu .link:hover::after { - background-color: #756257; -} - -.navigation-list__link.is-current::after { - background-color: #756257; -} - -.navigation-list--user { - justify-content: flex-end; - flex: 1 0 135px; - max-width: 135px; - margin-right: 20px; - margin-left: auto; -} - -.navigation-list--user .navigation-list__link { - display: inline-flex; - padding: 22px 12px; -} - -.navigation-list__link--search:hover, -.navigation-list__link--favorite:hover { - color: #615048; -} - -.navigation-list__link--search:active, -.navigation-list__link--favorite:active { - color: rgba(117, 97, 87, 0.3); -} - -.count { - position: absolute; - top: 10px; - left: 20px; - min-width: 20px; - height: 20px; - font-size: 10px; - line-height: 20px; - font-weight: 400; - text-align: center; - padding: 0 2px; - color: #fff; - background-color: #7db54f; - border-radius: 20px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.navigation-button { - display: flex; - flex-direction: column; - flex: 0 0 160px; - gap: 14px; - padding: 14px 0; -} -.navigation-button__link { - width: 160px; -} - -/* HERO */ - -.hero { - position: relative; -} - -.hero::after { - content: ""; - display: block; - position: absolute; - bottom: 0; - height: 57px; - width: 100%; - background-image: url("../images/divider.svg"); -} - -.hero-welcome { - padding-top: 50px; - padding-bottom: 82px; -} - -.hero-welcome { - background-color: #81B3D3; - background-image: url("../images/hero-bg.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} - -.hero-welcome__img { - margin: 0 auto; -} - -/* ADVANTAGES */ - -.advantages-text { - margin-bottom: 20px; -} - -.advantages-text__title { - margin-bottom: 25px; -} - -.advantages-grid__list { - display: grid; - grid-template-columns: repeat(3, 400px); -} - -.advantages-grid__item { - background-color: rgba(131, 179, 211, 0.12); -} - -.advantages-grid__item:nth-child(4n+3) { - background-color: rgba(131, 179, 211, 0.20); -} - -.advantages-grid__item .wrapper { - width: 230px; - text-align: center; -} - -.advantages-grid__text { - display: flex; - justify-content: center; - align-items: center; - width: 400px; - min-height: 385px; - height: 100%; - padding: 75px 0; -} - -.advantages-grid__title { - font-size: 24px; - line-height: 28px; - text-transform: uppercase; - margin-bottom: 30px; -} - -.advantages-grid__description { - margin: 0; -} - -.advantages-grid__description::before { - content: ""; - display: block; - position: relative; - height: 2px; - width: 60px; - margin: 30px auto; - background-color: #000; - opacity: .3; -} - -.advantages-grid__item--image { - grid-column: 1 / -1; - display: flex; - flex-wrap: wrap; - background-color: #82B3D3; - color: #fff; -} - -.advantages-grid__item--reverse { - flex-direction: row-reverse; -} - -.advantages-grid__item--image .advantages-grid__title { - color: #fff; -} - -.advantages-grid__item--image .advantages-grid__description::before { - background-color: #fff; -} - -.advantages-grid__item--image img { - object-fit: cover; - margin: auto 0; - min-height: 100%; -} - -/* ADVANTAGES-SLOGAN */ - -.advantages-slogan .wrapper-text { - padding: 64px 0; -} - -/* ADVANTAGES-SERVICE */ - -.advantages-service__list { - display: grid; - grid-template-columns: repeat(3, 400px); -} - -.advantages-service__content { - display: flex; - justify-content: center; - align-items: center; - width: 400px; - min-height: 385px; - height: 100%; - padding: 75px 0; -} - -.advantages-service__item .wrapper { - width: 230px; - text-align: center; -} - -.advantages-service__item { - background-color: rgba(131, 179, 211, 0.12); -} - -.advantages-service__item:nth-child(even) { - background-color: #fff; -} - -.advantages-service__image { - margin: auto; - margin-bottom: 30px; -} - -.advantages-service__title { - font-size: 24px; - line-height: 28px; - text-transform: uppercase; - margin-bottom: 30px; -} - -.advantages-service__text { - margin: 0; -} - -/* SEARCH */ - -.search .wrapper-text { - padding: 96px 0; -} - -.search-text__description { - margin-bottom: 54px; -} - -/* SUBSCRIBE */ - -.subscribe { - background-color: #68A2CA; - background-image: url("../images/subscribe-bg.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - color: #fff; -} - -.subscribe .wrapper-text { - padding: 96px 0 104px; -} - -.subscribe-text__title { - color: #fff; -} - -.subscribe-text__description { - margin-bottom: 54px; -} - -.subscribe-form { - display: flex; -} - -.subscribe-form__label { - flex-grow: 1; -} - -.subscribe-form__input { - width: 100%; - height: 100%; - font-size: 18px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.subscribe-form__button { - max-width: 370px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.inner-page .subscribe { - background-color: #fff; - background-image: none; - color: #333; -} - -.inner-page .subscribe-text__title { - color: #333; -} - -/* FOOTER */ - -.page-footer { - padding: 40px 0 30px; -} - -.page-footer .line { - flex-direction: row; - justify-content: space-between; - align-items: center; -} - -.social { - flex: 0 0 144px; -} - -.social-list { - display: flex; - flex-wrap: wrap; - max-width: 150px; -} - -.social-list__link { - display: flex; - justify-content: center; - align-items: center; - width: 48px; - height: 40px; - background-color: #fff; - color: #83B3D3; -} - -.social-list__link:hover { - color: #68A2CA; -} - -.social-list__link:focus-visible { - color: #68A2CA; -} - -.social-list__link:active { - color: rgba(104, 162, 202, 0.3); -} - -.contacts-address { - display: flex; - flex-direction: column; - text-align: center; - padding: 0 15px; -} - -.contacts-address__phone { - font-size: 40px; - font-style: normal; - line-height: 50px; -} - -.contacts-address__phone:not(:last-child) { - margin-bottom: 10px; -} - -.contacts-address__phone:hover, -.footer-logo__link:hover { - color: #756157; -} - -.contacts-address__phone:focus-visible, -.footer-logo__link:focus-visible { - color: #756157; -} - -.contacts-address__phone:active, -.footer-logo__link:active { - color: rgba(117, 97, 87, 0.3); -} - -/* CATALOG-PAGE */ -/* FILTER */ -/* FILTER-HEADER */ - -.filter { - padding: 35px 0 70px; - background-color: #68A2CA; - background-image: url("../images/filter-bg.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - color: #fff; -} - -.filter .line { - align-items: stretch; -} - -.filter-header { - margin-bottom: 40px; -} - -.filter-header__title { - font-size: 60px; - line-height: 78px; - margin-bottom: 8px; - color: #fff; -} - -.filter-header__breadcrumbs { - display: flex; - align-items: center; -} - -/* BREADCRUMBS */ - -.breadcrumbs-list__item { - display: flex; - align-items: center; - /* margin-right: 28px; */ -} - -.breadcrumbs-list__item:not(:last-child)::after { - content: ""; - display: block; - position: relative; - height: 21px; - width: 8px; - margin: 0 11px; - background-image: url("../images/arrow-right.svg"); - background-repeat: no-repeat; - background-position: center; -} - -.breadcrumbs-list__link { - font-size: 16px; - color: inherit; -} - -.breadcrumbs-list__link--home { - height: 21px; - width: 13px; - background-image: url("../images/breadcrumbs-home.svg"); - background-repeat: no-repeat; - background-position: center; -} - -.breadcrumbs-list__link:hover { - opacity: 0.6; -} - -.breadcrumbs-list__link:active { - opacity: 0.3; -} - -/* FILTER-FORM */ - -.filter-form { - display: flex; - flex-wrap: wrap; - gap: 70px; -} - -.filter-form__group { - display: flex; - flex: 0 1 150px; - margin: 0; - padding: 0; - border: 0; -} - -.filter-form__title { - font-size: 20px; - font-weight: 700; - line-height: 24px; - padding: 0; - margin-bottom: 32px; -} - -.filter-form__item:not(:last-child) { - margin-bottom: 16px; -} - -.filter-form__label { - display: flex; - /* align-items: center; */ - gap: 16px; - line-height: 23px; - cursor: pointer; -} - -.mark { - flex: 0 0 20px; - display: inline-flex; - position: relative; - width: 20px; - height: 20px; - margin-top: 2px; - background-color: #fff; -} - -.checkbox-mark { - border-radius: 4px; -} - -.checkbox:checked + .checkbox-mark { - background-image: url("../images/checked.svg"); - background-repeat: no-repeat; - background-position: center; -} - -.filter-form__label:hover { - opacity: .6; -} - -.filter-form__label:active { - opacity: .3; -} - -.radio-mark { - border-radius: 50%; -} - -.radio-mark::before { - content: ""; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 10px; - height: 10px; - border-radius: 50%; - background-color: transparent; -} - -.radio:checked + .radio-mark::before { - background-color: #3F5E72; -} - -.filter-form__group--price { - flex-basis: 288px; - margin-left: auto; -} - -.filter-form__range { - display: flex; - flex-direction: column; -} - -.range-inputs { - display: flex; - gap: 2px; - margin-bottom: 44px; -} - -.range-inputs__label { - display: flex; - align-items: center; - padding: 12px 20px; - background-color: #f2f2f2; -} - -.range-inputs__label--min { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.range-inputs__label--max { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.range-inputs__label span { - text-align: right; - color: #000; - opacity: 0.3; -} - -.range-inputs__label .input { - width: 100%; - font-weight: 700; - line-height: 24px; - padding: 0; - margin-right: 12px; - border-radius: 0; - background-color: transparent; -} - -.range-inputs__label .input:focus-visible { - outline: none; -} - -.range-inputs__label:focus-within { - background-color: #e6e6e6; - outline: 3px solid #83B3D3; -} - -.range-inputs__label:hover { - background-color: #e6e6e6; -} - -.range-scale { - background-color: rgba(255, 255, 255, .3); -} - -.range-scale__bar { - position: relative; - height: 4px; - background-color: #fff; -} - -.range-scale__toggle { - position: absolute; - width: 20px; - height: 20px; - top: -8px; - border-radius: 5px; -} - -.range-scale__toggle--min { - left: 0; -} - -.range-scale__toggle--max { - right: 0; -} - -.range-scale__toggle:active { - outline: 3px solid #83B3D3; -} - -.filter-form__buttons { - display: flex; - flex-wrap: wrap; - flex-direction: column; - /* justify-content: flex-end; */ - margin-top: 56px; -} - -.filter-form__buttons .button { - width: 192px; -} - -.submit { - margin-bottom: 32px; -} - -.button--color-transparent { - background-color: transparent; -} - -.button--color-transparent:hover { - color: rgba(255, 255, 255, .3); -} - -.button--color-transparent:active { - color: rgba(255, 255, 255, .3); -} - -/* CATALOG-HEADER */ - -.catalog-header { - display: flex; - align-items: center; - margin-bottom: 40px; -} - -.catalog-header__title { - font-size: 30px; - line-height: 36px; - text-transform: uppercase; - margin-right: auto; -} - -.catalog-header__sorting { - margin-right: 70px; -} - -.catalog-header__sorting:hover { - border-color: #68A2CA; -} - -.catalog-header__sorting:focus-visible { - outline: #68a2ca; - border: 2px solid #68a2ca; -} - -.catalog-header__sorting:disabled { - color: rgba(0, 0, 0, 0.3); - border-color: rgba(0, 0, 0, 0.3); -} - -.view-list { - display: flex; - flex-wrap: wrap; - gap: 8px; - flex: 1 0 160px; - max-width: 160px; -} - -.view-list__item { - display: flex; - flex-wrap: wrap; -} - -.view-list__button { - display: flex; - padding: 15px 14px; - border: 2px solid #e5e5e5; - border-radius: 4px; - background-color: transparent; - color: #000; - cursor: pointer; -} - -.view-list__button.is-current { - border-color: #000; -} - -.view-list__button:hover { - border-color: #000; -} - -.view-list__button:focus-visible { - outline: 2px #68a2ca; - border-color: #68A2CA; -} - -.view-list__button:active { - border-color: #000; -} - -/* PRODUCT */ - -.catalog { - padding: 50px 0 60px; -} - -.catalog-product { - display: grid; - grid-template-columns: repeat(3, 340px); - gap: 20px; - margin-bottom: 40px; - padding-bottom: 40px; - border-bottom: 1px solid #e6e6e6; -} - -.card { - display: flex; - flex-direction: column; - flex-grow: 1; - height: 100%; - padding: 20px; - border: 1px solid #e6e6e6; - border-radius: 4px; -} - -.card-link { - display: block; - margin-bottom: 16px; -} - -.card-link__image { - margin-bottom: 16px; - object-fit: contain; - background-color: #f2f2f2; -} - -.card-link__title { - font-size: 24px; - line-height: 28px; -} - -.card-info { - display: flex; - justify-content: space-between; - margin-bottom: 16px; -} - -.card-info__text { - flex-grow: 1; - margin-right: 20px; -} - -.card-info__price { - max-width: 139px; - font-weight: 400; - text-align: right; -} - -.card-buttons { - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 20px; - row-gap: 16px; - margin-top: auto; -} - -.card-buttons__favorite.is-current { - background-color: #7DB54F; -} - -.card-buttons__favorite.is-current:hover { - background-color: #6C9E42; -} - -.card-buttons__favorite.is-current:focus-visible { - background-color: #6C9E42; -} - -.card-buttons__favorite.is-current:active { - background-color: #7DB54F; -} - -.card-buttons__stars { - background-image: url("../images/star.svg"); - background-repeat: repeat-x; - background-position: left center; -} - -.stars-4 { - width: 90px; -} - -.stars-3 { - width: 66px; -} - -.stars-2 { - width: 42px; -} - -.card-buttons__rating { - font-size: 16px; - font-weight: 400; - line-height: 20px; - background-color: #F2F2F2; - color: inherit; - cursor: default; -} - -/* PAGINATION */ - -.pagination-list { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.pagination-list__link { - font-size: 20px; - line-height: 36px; - min-width: 60px; - padding: 12px; - background-color: #82B3D3; -} - -.pagination-list__link.is-current, -.pagination-list__link.is-more { - color: inherit; - cursor: default; -} - -.pagination-list__link.is-more { - background-color: #fff; -} -.pagination-list__link.is-current { - background-color: #F2F2F2; -} - -/* MODAL */ - -.modal-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(242, 242, 242, 0.80); - z-index: 2; - display: none; -} - -.modal-container--show { - display: flex; -} - -.modal { - max-height: 100%; - position: relative; - margin: auto; - padding: 64px 70px; - border-radius: 30px; - background-color: #ffffff; - box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.15); - overflow: auto; -} - -.modal::-webkit-scrollbar { - height: 0; - width: 0; - background: transparent; -} - -.modal-search { - width: 717px; -} - -.modal-close { - position: absolute; - top: 64px; - right: 52px; - padding: 16px; - border-radius: 50%; - background-color: #f2f2f2; -} - -.modal-close:focus-visible { - background-color: #e6e6e6; -} - -.modal-close:hover { - background-color: #e6e6e6; -} - -.modal-close:active { - background-color: #e6e6e6; -} -.modal-close:active svg { - opacity: .3; -} - -.modal-content__title { - margin: 0; - margin-bottom: 64px; - padding-right: 40px; -} - -.modal-content__form { - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 83px; - row-gap: 23px; -} - -.field-group { - display: grid; - grid-template-columns: 137px 1fr; - position: relative; -} - -.modal-content__field--date { - grid-column: 1 / -1; -} - -.field-group__label { - display: block; - padding: 12px 0; - font-size: 20px; - font-weight: 700; - line-height: 24px; - color: #000; -} - -.field-group__input { - display: flex; - flex-direction: column; - flex-wrap: wrap; - position: relative; -} - -.field-group__input .input { - max-width: 440px; - height: 48px; - font-weight: 700; -} - -.field-group__input .input--date { - width: 100%; - background-image: url("../images/date.svg"); - background-repeat: no-repeat; - background-position: center right 20px; - padding-right: 60px; -} - -.field-group__input .input--number { - width: 30px; - padding: 0; - text-align: center; - border-radius: 0; -} - -.input--number::-webkit-outer-spin-button, -.input--number::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -.input[type=number] { - -moz-appearance: textfield; -} - -.field-group__input--quantity { - flex-direction: row; -} - -.quantity-button { - position: relative; - padding: 0; - width: 40px; - height: 48px; - border-radius: 0; - background-color: #f2f2f2; - color: #756157; -} - -.quantity-button--less { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.quantity-button--more { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.quantity-button svg { - opacity: .3; -} - -.quantity-button:focus-visible { - outline: none; -} - -.quantity-button:focus-visible svg { - border-radius: 4px; - color: #000; - opacity: 1; -} - -.quantity-button:hover svg { - color: #000; - opacity: 1; -} - -.quantity-button:active svg { - color: #000; - opacity: .2; -} - -.alert { - font-size: 16px; - font-weight: 400; - line-height: 21px; - margin-top: 4px; - margin-left: 20px; -} - -.alert--error { - color: #FF5757; -} - -.modal-content__button { - grid-column: 1 / -1; - padding-top: 18px; - padding-bottom: 18px; - margin-top: 25px; - font-size: 20px; - line-height: 24px; - border-radius: 10px; -} - -/* TOOLTIP */ - -.tooltip { - position: relative; - width: 26px; - height: 26px; - margin: 0 10px; -} - -.field-group__wrapper { - display: flex; - /* flex-wrap: wrap; */ - align-items: center; - position: relative; -} - -.tooltip-button { - display: inline-flex; - border: 0; - padding: 0; - margin: 0; - background: transparent; -} - -.tooltip-button:hover + .tooltip-text, -.tooltip-button:focus + .tooltip-text { - display: block; -} - -.tooltip-text { - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - width: 256px; - padding: 15px 18px 18px 22px; - margin-top: 15px; - font-size: 16px; - line-height: 20px; - border-radius: 10px; - background-color: #333; - color: #fff; - display: none; -} - -.tooltip-text::before { - content: ""; - display: block; - width: 19px; - height: 9px; - position: absolute; - bottom: 100%; - left: 0; - right: 0; - margin: 0 auto; - background-image: url("../images/tooltip-arrow.svg"); -}