/* Theme Name: Woodmart Child Description: Woodmart Child Theme Author: NDR Author URI: Template: woodmart Version: 1.0.0 Text Domain: woodmart */ @charset "UTF-8"; /* Google Fonts (Ubuntu, Open Sans, Voltaire) are imported in the of index.html. The font families are defined as CSS variables in variables.scss. */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Voltaire&display=swap"); /* Moniker font is self-hosted. */ /* ExtraLight */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; } /* Light */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebLight.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; } /* Medium */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; } /* Regular */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebRegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; } /* Bold */ @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebBold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Moniker"; src: url("../fonts/moniker/MonikerWebBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } :root { /* ——— Font families ——— */ --font-sans: "Open Sans", sans-serif; --font-ubuntu: "Ubuntu", sans-serif; --font-voltair: "Voltaire", sans-serif; --font-moniker: "Moniker", sans-serif; /* ——— Colors ——— */ /* Blue */ --blue-400: #3160df; --blue-500: #3a609f; --blue-600: #265096; --blue-800: #0c2773; /* Fuchsia */ --fuchsia-50: #fef9fc; --fuchsia-100: #fbeaf4; --fuchsia-200: #f3d9e7; --fuchsia-300: #d9c7d9; --fuchsia-400: #ab63ab; --fuchsia-500: #9e719e; --fuchsia-600: #970082; --fuchsia-700: #88007e; --fuchsia-800: #6b0066; /* Gray */ --gray-50: #fdfcfe; --gray-100: #f7f5fc; --gray-300: #ccb8cc; --gray-600: #7f727f; /* Green */ --green-400: #17773c; /* Orange */ --orange-800: #d06928; /* Red */ --red-400: #c7382a; /* White */ --white: #ffffff; } * { box-sizing: border-box; } body { background-color: #f6f6f6; color: #333; font-size: 14px; font-family: var(--font-moniker); } a { color: var(--blue-800); text-decoration: none; } .container { max-width: 700px; margin: 50px auto; } .infineat-cart { font-size: 12px; } .infineat-cart .amount { color: inherit; } .infineat-cart a:not([class^=button]), .infineat-cart a:not([class^=button]):visited, .infineat-cart a:not([class^=button]):hover, .infineat-cart a:not([class^=button]):active { color: var(--blue-600); } .infineat-cart__header { background-color: var(--fuchsia-600); border: 1px solid var(--fuchsia-800); border-radius: 6px; display: flex; align-items: center; line-height: 50px; color: var(--white); padding: 0 24px; margin-bottom: 24px; gap: 12px; font-family: var(--font-ubuntu); } .infineat-cart__header svg { width: 24px; height: 24px; color: #fff; } .infineat-cart__header span { font-weight: 400; font-size: 24px; } .infineat-cart__header small { margin-left: auto; font-size: 18px; } .infineat-cart__box { border: 0.5px solid var(--fuchsia-300); border-radius: 16px; padding: 0 12px; box-shadow: 0 5px 15px rgba(105, 99, 134, 0.2); margin-bottom: 24px; background: var(--white); } .infineat-cart__box--with-background { background-color: var(--gray-100); } .infineat-cart__shipping-header { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--fuchsia-300); padding: 0 16px; } .infineat-cart__shipping-header svg { color: var(--blue-400); width: 24px; height: 24px; } .infineat-cart__shipping-header span { line-height: 46px; font-size: 16px; color: var(--fuchsia-600); } .infineat-cart__shipping-body { padding: 8px; } .infineat-cart__shipping-item { display: flex; justify-content: space-between; padding: 8px 0; } .infineat-cart__shipping-item__title { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; line-height: 24px; } .infineat-cart__shipping-item__title span { color: var(--fuchsia-800); font-size: 26px; font-weight: 500; } .infineat-cart__shipping-item__title small { color: var(--gray-600); font-size: 12px; } .infineat-cart__shipping-item__title small a { text-decoration: underline; } .infineat-cart__shipping-item__detail { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; line-height: 24px; color: var(--fuchsia-800); } .infineat-cart__shipping-item__detail span { font-size: 22px; font-weight: 500; } .infineat-cart__shipping-item__detail small { color: var(--red-400); font-size: 14px; } .infineat-cart__shipping-buttons { padding: 8px 32px; display: flex; align-items: center; justify-content: center; } .infineat-cart__vendor-header { display: flex; align-items: center; gap: 6px; padding: 12px 16px 6px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .infineat-cart__vendor-header img { border-radius: 50%; width: 28px; height: 28px; object-fit: cover; background-color: var(--gray-50); } .infineat-cart__vendor-header span { font-size: 18px; font-weight: 500; } .infineat-cart__vendor-header small { font-size: 14px; margin-left: auto; } .infineat-cart__vendor-desc { border: 1px solid var(--fuchsia-300); line-height: 28px; text-align: center; border-radius: 6px; color: var(--fuchsia-600); background-color: var(--white); } .infineat-cart__vendor-list { padding-bottom: 4px; font-size: 16px; } .infineat-cart__vendor-list__item { display: flex; align-items: center; justify-content: space-between; line-height: 36px; padding: 0 12px; color: var(--fuchsia-600); } .infineat-cart__vendor-list__item--minus { color: var(--red-400); } .infineat-cart__vendor-list__item--plus { color: var(--blue-400); } .infineat-cart__vendor-list__some { line-height: 36px; border-top: 1px solid var(--fuchsia-400); display: flex; align-items: center; padding: 0 8px; justify-content: space-between; color: var(--fuchsia-600); font-weight: 500; } .infineat-cart__vendor-table { background-color: var(--white); border-radius: 12px; padding: 0 8px; margin: 6px -7px 0; } .infineat-cart__vendor-table-title { text-align: center; border-radius: 6px; line-height: 32px; color: var(--blue-500); position: relative; } .infineat-cart__vendor-table-title span { padding: 0 4px; background-color: var(--white); z-index: 2; position: relative; } .infineat-cart__vendor-table-title:before { content: ""; position: absolute; z-index: 1; top: 50%; left: 0; right: 0; width: 100%; height: 1px; background-color: var(--fuchsia-300); } .infineat-cart__vendor-item { display: flex; padding: 16px 8px; gap: 12px; position: relative; } .infineat-cart__vendor-item:first-of-type { border-top: unset; } .infineat-cart__vendor-item + .infineat-cart__vendor-item { border-top: 1px solid var(--gray-300); } .infineat-cart__vendor-item:last-of-type { border-bottom: unset; } .infineat-cart__vendor-item__discount { position: absolute; background-image: url("../img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -27px; top: 16px; color: #fff; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; } .infineat-cart__vendor-item__image { width: 100px; flex: 0 0 100px; text-align: center; display: flex; flex-direction: column; gap: 8px; } .infineat-cart__vendor-item__image img { height: auto; width: 100%; aspect-ratio: 1/1; border-radius: 6px; background-color: var(--gray-50); border: 1px solid var(--fuchsia-200); } .infineat-cart__vendor-item__content { width: calc(100% - 100px - 140px - 24px); flex: 0 0 calc(100% - 100px - 140px - 24px); display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .infineat-cart__vendor-item__content > small { font-size: 14px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .infineat-cart__vendor-item__content > small a, .infineat-cart__vendor-item__content > small a:visited, .infineat-cart__vendor-item__content > small a:hover, .infineat-cart__vendor-item__content > small a:active { color: inherit; } .infineat-cart__vendor-item__content > span { font-size: 14px; color: var(--fuchsia-800); } .infineat-cart__vendor-item__content > span a, .infineat-cart__vendor-item__content > span a:visited, .infineat-cart__vendor-item__content > span a:hover, .infineat-cart__vendor-item__content > span a:active { color: inherit; } .infineat-cart__vendor-item__content__price { line-height: 28px; padding: 4px 0; } .infineat-cart__vendor-item__content__price > span { color: var(--fuchsia-800); font-size: 18px; } .infineat-cart__vendor-item__content__price--has-discount { display: flex; gap: 16px; font-size: 18px; } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(1) { color: var(--red-400); } .infineat-cart__vendor-item__content__price--has-discount > span:nth-child(2) { color: var(--gray-600); text-decoration: line-through; } .infineat-cart__vendor-item__content__discount { padding: 0 8px; border: 1px solid var(--fuchsia-500); border-radius: 4px; color: var(--red-400); line-height: 18px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; } .infineat-cart__vendor-item__content__notice { color: var(--orange-800); line-height: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-voltair); } .infineat-cart__vendor-item__content__notice svg { width: 16px; height: 16px; } .infineat-cart__vendor-item__content__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding: 4px 0; margin-left: -6px; } .infineat-cart__vendor-item__content__shipping svg { width: 28px; height: 28px; } .infineat-cart__vendor-item__content__shipping div { display: flex; flex-direction: column; } .infineat-cart__vendor-item__actions { width: 140px; flex: 0 0 140px; display: flex; align-items: center; flex-direction: column; position: relative; gap: 4px; } .infineat-cart__vendor-item__actions__quantity { display: inline-flex; align-items: center; background-color: var(--gray-100); color: var(--fuchsia-800); line-height: 38px; border-radius: 20px; border: 1px solid var(--fuchsia-500); } .infineat-cart__vendor-item__actions__quantity button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background-color: unset; border: unset; cursor: pointer; border-radius: 50%; font-size: 18px; font-weight: 500; transition: 0.1s; color: var(--fuchsia-800); min-height: auto; } .infineat-cart__vendor-item__actions__quantity button svg { width: 36px; height: 36px; border-radius: 50%; } .infineat-cart__vendor-item__actions__quantity button:hover { background-color: unset; border: unset; } .infineat-cart__vendor-item__actions__quantity button:active { background-color: var(--fuchsia-100); } .infineat-cart__vendor-item__actions__quantity input[type=number] { background-color: unset; border: unset; width: 50px; font-size: 20px; text-align: center; font-weight: 500; color: var(--fuchsia-800); height: 30px; line-height: 30px; border: 1px solid transparent; border-radius: 4px; font-family: var(--font-moniker); margin: 0 -2px; padding: 0; appearance: textfield; } .infineat-cart__vendor-item__actions__quantity input[type=number]::-webkit-inner-spin-button, .infineat-cart__vendor-item__actions__quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .infineat-cart__vendor-item__actions__quantity input[type=number]:active { background-color: unset; outline: unset; box-shadow: unset; } .infineat-cart__vendor-item__actions__quantity input[type=number]:focus { background-color: #fff; border: 1px solid var(--fuchsia-500); outline: unset; box-shadow: unset; } .infineat-cart__vendor-item__actions__quantity-notice { line-height: 24px; min-height: 24px; font-family: var(--font-voltair); } .infineat-cart__vendor-item__actions__quantity-notice span { color: var(--red-400); font-size: 14px; } .infineat-cart__vendor-item__actions__total-price { margin-top: 12px; color: var(--fuchsia-800); font-size: 18px; line-height: 24px; text-align: center; } .infineat-cart__vendor-item__actions__total-price span { display: inline-block; } .infineat-cart__vendor-item__actions__remove { position: absolute; right: -8px; top: 76px; } .infineat-cart__vendor-item__actions__remove a { background: unset; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--fuchsia-600); padding: 0; cursor: pointer; transition: 0.1s; } .infineat-cart__vendor-item__actions__remove a svg { width: 36px; height: 36px; color: var(--fuchsia-600); } .infineat-cart__vendor-item__actions__total-price-notice { min-height: 18px; text-align: center; font-family: var(--font-sans); } .infineat-cart__vendor-item__actions__total-price-notice > span { font-size: 12px; font-weight: 500; line-height: 18px; padding: 0 8px; border-radius: 4px; color: var(--red-400); border: 1px solid var(--fuchsia-500); } .infineat-cart__total-body { margin: 6px -7px 0; background-color: var(--white); border-radius: 12px; padding: 0 8px; } .infineat-cart__total-body-header { display: flex; align-items: center; border-bottom: 1px solid var(--fuchsia-300); padding: 0 8px; gap: 8px; } .infineat-cart__total-body-header svg { color: var(--blue-400); width: 24px; height: 24px; } .infineat-cart__total-body-header span { line-height: 40px; color: var(--gray-600); } .infineat-cart__total-list__group { border-bottom: 1px solid var(--fuchsia-300); padding: 8px 0; } .infineat-cart__total-list__group:last-of-type { border-bottom: unset; } .infineat-cart__total-list__header { color: var(--fuchsia-600); font-size: 18px; } .infineat-cart__total-list__item { display: flex; justify-content: space-between; line-height: 32px; font-size: 16px; padding: 0 8px; color: var(--fuchsia-800); } .infineat-cart__total-list__item span:has(small) { display: flex; flex-direction: column; gap: 4px; line-height: 24px; } .infineat-cart__total-list__item span:has(small) small { font-size: 14px; line-height: 18px; } .infineat-cart__total-list__description { color: var(--gray-600); line-height: 24px; padding: 0 8px; } .infineat-cart__total-list__description a { text-decoration: underline; } .infineat-cart__total-grand { display: flex; justify-content: space-between; padding: 8px 0; line-height: 32px; font-size: 24px; font-weight: 500; color: var(--fuchsia-800); } .infineat-cart__total-grand-description { line-height: 20px; } .infineat-cart__total-grand-description small { color: var(--gray-600); font-size: 12px; } .infineat-cart__total-grand-description small a { text-decoration: underline; } .infineat-cart__total-button { display: flex; align-items: center; justify-content: center; padding: 16px 0; } .infineat-cart__footer { padding: 12px 4px; } .infineat-cart__footer p { font-size: 12px; color: var(--blue-600); line-height: 18px; margin: 0; } .column { width: 235px; margin: 50px 50px; } .product-card { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--fuchsia-300); box-shadow: 0 5px 10px 0 rgba(105, 99, 134, 0.2); font-size: 12px; background-color: var(--white); position: relative; } .product-card__image { width: 100%; aspect-ratio: 4/5; border-radius: 12px 12px 0 0; overflow: hidden; position: relative; background-color: var(--fuchsia-50); } .product-card__image img { width: 100%; height: 100%; object-fit: cover; } .product-card__content { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .product-card__offer { font-size: 14px; line-height: 18px; min-height: 18px; color: var(--red-400); font-family: var(--font-voltair); } .product-card__price { margin-top: 2px; display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--fuchsia-800); font-family: var(--font-moniker); line-height: 18px; min-height: 18px; } .product-card__price span.old-price { text-decoration: line-through; color: var(--gray-600); } .product-card__price span.sale-price { color: var(--red-400); } .product-card__price-info { color: var(--fuchsia-500); font-weight: 300; margin-top: -4px; line-height: 16px; min-height: 16px; } .product-card__vendor { margin-top: 8px; } .product-card__vendor a { display: flex; align-items: center; gap: 6px; color: var(--fuchsia-800); font-family: var(--font-voltair); line-height: 32px; min-height: 32px; font-size: 16px; } .product-card__vendor a:hover { color: var(--fuchsia-700); } .product-card__vendor a img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; } .product-card__category { position: relative; display: flex; align-items: center; justify-content: center; } .product-card__category span { color: var(--blue-500); font-family: var(--font-ubuntu); font-size: 12px; padding: 0 4px; background-color: var(--white); line-height: 14px; min-height: 14px; z-index: 2; position: relative; } .product-card__category::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; z-index: 1; background-color: var(--fuchsia-300); } .product-card__title { line-height: 18px; min-height: 56px; } .product-card__title span { font-size: 16px; line-height: 16px; color: var(--fuchsia-600); font-family: var(--font-ubuntu); } .product-card__title h3 { font-weight: 400; margin: 0; } .product-card__title h3 a { font-size: 14px; color: var(--fuchsia-800); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .product-card__discount { position: absolute; background-image: url("../img/sale-badge.png"); background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; width: 79px; height: 39px; left: -13px; top: 12px; color: #fff; font-family: var(--font-voltair); font-weight: 400; font-size: 15px; padding-bottom: 2px; padding-left: 8px; } .product-card__add-to-wishlist { position: absolute; right: 16px; top: 16px; font-size: 24px; cursor: pointer; } .product-card__add-to-wishlist a { color: var(--white); } .product-card__add-to-wishlist a svg { stroke: var(--red-400); stroke-width: 4px; width: 32px; height: 32px; } .product-card__notice { color: var(--orange-800); line-height: 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-voltair); } .product-card__notice svg { width: 16px; height: 16px; } .product-card__shipping { font-family: var(--font-voltair); color: var(--green-400); display: flex; align-items: center; gap: 2px; padding: 4px 0; margin-left: -6px; } .product-card__shipping svg { width: 28px; height: 28px; } .product-card__shipping div { display: flex; flex-direction: column; } .product-card__sku span { font-size: 12px; color: var(--gray-600); } .product-card__product-star { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--fuchsia-300); padding-bottom: 6px; margin-bottom: 6px; } .product-card__actions { position: relative; } .product-card__add-to-cart { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); } .product-card__add-to-cart a { color: var(--white); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--fuchsia-600); transition: 0.25s ease-in-out; } .product-card__add-to-cart a svg { width: 20px; height: 20px; } .product-card__quantity { display: none; } .product-card__hide-elements { position: absolute; left: -1px; right: -1px; top: calc(100% - 24px); background-color: var(--white); border-radius: 0 0 12px 12px; border: 1px solid var(--fuchsia-300); border-top: none; box-shadow: 0 5px 10px 0 rgba(105, 99, 134, 0.2); padding: 0 16px 8px; display: flex; flex-direction: column; opacity: 0; transition: 0.25s 0.25s ease-in-out; } .product-card__hide-elements:before { content: ""; position: absolute; top: -8px; height: 8px; left: 0; right: 0; background-color: var(--white); } .product-card:hover { z-index: 100; } .product-card:hover .product-card__hide-elements { opacity: 1; top: calc(100% - 10px); } .button-outline, a.button-outline { font-size: 16px; line-height: 38px; min-height: 40px; border: 1px solid var(--fuchsia-700); background-color: var(--fuchsia-50); color: var(--fuchsia-600); display: inline-flex; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; } .button-outline--with-subtitle, a.button-outline--with-subtitle { flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .button-outline--with-subtitle span, a.button-outline--with-subtitle span { line-height: 18px; } .button-outline--with-subtitle small, a.button-outline--with-subtitle small { line-height: 12px; font-size: 12px; font-weight: 400; color: var(--gray-600); } .button-outline:hover, a.button-outline:hover { background-color: var(--fuchsia-200); color: var(--fuchsia-600); } .button-fill, a.button-fill { font-size: 16px; background-color: var(--fuchsia-600); color: var(--white); display: inline-flex; justify-content: center; align-items: center; line-height: 40px; min-height: 40px; padding: 0 24px; border-radius: 20px; transition: 0.1s; min-width: 250px; min-height: auto; border: unset; cursor: pointer; } .button-fill:hover, a.button-fill:hover { background-color: var(--fuchsia-800); color: var(--white); } /*# sourceMappingURL=style.css.map */