/* RESET */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.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 */ *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { 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; } /* Common */ :root { --base-white: #FFFFFF; --gray-300: #D4D4D8; --gray-700: #3F3F46; --red-600: #DC2626; --blue-50: #EFF6FF; --blue-500: #3B82F6; --blue-800: #1E40AF; --green-500: #22C55E; --font-weight-normal: 400; --font-weight-bold: 700; } body { font-family: 'Roboto', sans-serif; } .btn { display: inline-flex; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--gray-300); background-color: var(--base-white); } .btn:hover { background-color: var(--gray-700); color: var(--base-white); cursor: pointer; } .btn--primary { background-color: var(--blue-500); color: var(--base-white); border-color: var(--blue-800); } .btn--primary:hover { background-color: var(--blue-800); } .heading-7, .heading-5, .heading-3 { font-weight: var(--font-weight-bold); } .heading-7 { font-size: 2.875rem; } .heading-5 { font-size: 2.25rem; } .heading-3 { font-size: 1.375rem; } .wrapper { max-width: 1440px; margin: 0 auto; padding: 0 16px; } .img-responsive { max-width: 100%; height: auto; } .highlight { color: var(--red-600); text-transform: uppercase; font-weight: var(--font-weight-bold); } .form-control { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--gray-300); background-color: var(--base-white); } .card { border-radius: 6px; border: 1px solid var(--gray-300); padding: 16px; } .pill { display: inline-block; padding: 4px 8px; border-radius: 6px; background-color: var(--red-600); color: var(--base-white); } /* The header */ .the-header { border-bottom: 1px solid var(--gray-300); padding-top: 16px; padding-bottom: 16px; } .the-header__inner { display: flex; justify-content: space-between; align-items: center; } .the-header__w-nav { display: none; } @media (min-width: 992px) { .the-header__w-nav { display: block; } } .the-header__nav { display: flex; align-items: center; gap: 16px; } /* The product */ .the-product { margin-top: 32px; } .the-product__row { display: flex; gap: 16px; flex-direction: column; } @media (min-width: 992px) { .the-product__row { flex-direction: row; } } .the-product__w-img { flex-basis: 30% } .the-product__ww-img { position: relative; } .the-product__img-tag { position: absolute; top: 16px; left: 16px; display: inline-block; padding: 4px 8px; background-color: var(--green-500); color: var(--base-white); } .the-product__w-info { flex-basis: 70%; } .the-product__description { margin: 24px 0; } .the-product__description p { margin-bottom: 16px; } .the-product__w-cta { display: flex; gap: 16px; align-items: center; } .the-product__feature-list { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; } @media (min-width: 992px) { .the-product__feature-list { flex-wrap: nowrap; } } .the-product__feature { display: flex; gap: 12px; flex-basis: calc(50% - 8px); /* No le gusta al profe */ box-sizing: border-box; } @media (min-width: 992px) { .the-product__feature { flex-basis: auto; } } .the-product__feature-img { width: 32px; height: 32px; } .the-product__related-list { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 992px) { .the-product__related-list { flex-direction: row; } } .the-product__related-item { flex-basis: 25%; } .the-product__related-item-inner { height: 100%; } /* The raffle */ .the-raffle { background-color: var(--blue-50); padding: 40px; display: flex; gap: 32px; flex-direction: column; } @media (min-width: 991px) { .the-raffle { flex-direction: row; } } .the-raffle__w-info { flex-basis: 70% } .the-raffle__w-description > p { margin-bottom: 16px; } .the-raffle__w-form { flex-basis: 30%; } .the-raffle__w-form-control { display: flex; flex-direction: column; margin-bottom: 16px; } /* The footer */ .the-footer { border-top: 1px solid var(--gray-300); padding: 24px 0; display: flex; justify-content: center; } .the-footer__copyright { font-weight: var(--font-weight-bold); }