diff --git a/src/arquivos/sass/components/_newsletter.scss b/src/arquivos/sass/components/_newsletter.scss index 85d9c5f..e69b807 100644 --- a/src/arquivos/sass/components/_newsletter.scss +++ b/src/arquivos/sass/components/_newsletter.scss @@ -3,8 +3,10 @@ padding: 24px 15px; &__wrapper { - max-width: 698px; - margin: 0 auto; + @include mq(lg, min) { + max-width: 698px; + margin: 0 auto; + } } &__title { diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss index 5699a6c..a36f38c 100644 --- a/src/arquivos/sass/partials/_footer.scss +++ b/src/arquivos/sass/partials/_footer.scss @@ -1,360 +1,60 @@ -/***************************************************************/ -/**-- Footer ------------------------------********************/ -/*-------------------------------------------------------------*/ - -.footer { - background-color: #142032; - - .institucional-info { - color: #fff; - font-size: 14px; - margin: auto; - max-width: 950px; - padding: 0 15px 25px; - - @include mq(md, max) { - font-size: 16px; - padding-left: 0; - padding-right: 0; - } - - .titulo { - font-size: 16px; - margin: 27px 0 17px; - - @include mq(md, max) { - font-size: 22px; - text-align: center; - } - } - - ul { - margin: 0; - - @include mq(md, max) { - max-width: 310px; - margin: auto; - padding: 0 10px; - } - - &:hover li a { - opacity: 0.7; - } - - li a { - transition: all 0.15s linear; - - &:hover { - opacity: 1; - } - } - } - - a { - color: #fff; - } - - .institucional-links { - font-size: 16px; - } - - .contato-sac { - font-size: 12px; - @include mq(md, max) { - border-bottom: 1px solid #19273d; - padding: 10px 0 20px; - } - - @include mq(md, max) { - font-size: 16px; - } - - li { - margin-bottom: 8px; - - &:last-child() { - font-size: 10px; - text-transform: uppercase; - - @include mq(md, max) { - font-size: 14px; - } - - strong { - display: block; - } - } - } - - p { - margin: 0; - span { - text-decoration: underline; - } - } - } - - .redes-sociais { - h3 { - @include mq(md, max) { - display: none; - } - } - - ul { - @include mq(md, max) { - margin-top: 25px; - text-align: center; - } - } - - li { - display: inline-block; - margin-right: 6px; - } - - i { - @include mq(md, min) { - transform: scale(0.8); - } - } - } +.footer-links { + @include mq(md, min) { + padding: 29px 0 25px; + border: 1px solid $gray-100; } - .selos { - border-top: 1px solid #19273d; - padding: 5px 0; - text-align: center; - - @include mq(md, min) { - border-bottom: 1px solid #19273d; - } - - .col-12 { - @include mq(md, max) { - padding: 0; - } - } - - ul { - display: inline-block; - @include mq(md, max) { - width: 100%; - } - - &.pagamento { - padding-top: 10px; - padding-bottom: 10px; - - @include mq(md, max) { - border-bottom: 1px solid #19273d; - padding-bottom: 25px; - } - - @include mq(md, min) { - border-right: 1px solid hsla(0, 0%, 90%, 1); - margin-right: 20px; - padding-right: 20px; - } - - li { - &:not(:last-child) { - @include mq(md, min) { - padding-right: 5px; - } - } - } - } - - &.certificados { - li { - &:not(:last-child) { - padding-right: 10px; - } - } - } - - li { - display: inline-block; - } - } - } - - .razao { - font-size: 10px; - max-width: 1500px; - margin: auto; - padding: 15px; - - @include mq(md, max) { - padding-top: 10px; - } - - p { - color: hsla(220, 1%, 43%, 1); - margin: 0; - - @include mq(md, max) { - text-align: center; - } - - span { - @include mq(md, max) { - display: block; - } - } - } - - a { - color: hsla(220, 1%, 43%, 1); - display: inline-block; - } - - .cnpj { - @include mq(md, max) { - padding: 20px 15px; - } - } - - .desenvolvimento { - text-align: right; - - @include mq(md, max) { - text-align: center; - padding: 20px 15px 0; - } - - a:nth-child(2) { - @include mq(md, max) { - border-left: 1px solid hsla(0, 0%, 90%, 1); - border-right: 1px solid hsla(0, 0%, 90%, 1); - margin-right: 20px; - margin-left: 20px; - padding-right: 15px; - padding-left: 15px; - } - } - - span { - display: inline-block; - } - } - } -} - -.mobile-bottom-options { - background-color: #fff; - border-top: 1px solid hsla(0, 0%, 90%, 1); - bottom: 0; - left: 0; - margin-bottom: -65px; - opacity: 0; - position: fixed; - right: 0; - transition: all 0.2s ease-in-out; - visibility: hidden; - z-index: 6; - - &.active { - margin-bottom: 0; - opacity: 1; - visibility: visible; - } - - ul { - display: flex; - align-items: center; + &__wrapper { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 148px; justify-content: center; + + @include mq(md, max) { + grid-template-columns: 1fr; + gap: 0; + } + } + + &__block { + @include mq(md, max) { + padding: 24px 15px; + border-bottom: 1px solid $gray-100; + } + } + + &__title { + margin: 0 0 10px; + line-height: 15px; + font-size: 12px; + } + + &__items-list { margin: 0; - } - li { - display: inline-block; - width: 33%; - } - - .option { - background-color: transparent; - border: none; - cursor: pointer; - display: block; - height: 66px; - outline: none; - padding: 10px; - width: 100%; - - &::before { - content: ""; - display: block; - margin: auto; - - @extend .sprite; + &--social-networks { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: 16px; + align-items: center; } } - .show-search { - .option:before { - @extend .sprite; - @extend .sprite-lupa; - } + &__item { + padding: 4px 0; + line-height: 12px; + font-size: 10px; } - .show-carrinho { - li:not(.amount-items), - strong, - .title { - display: none; - } + &__link { + color: $black-500; + transition: color 0.2s linear; - .AmountItemsInCart { - line-height: 0; - text-align: center; - } - - .portal-totalizers-ref { - display: inline-block; - vertical-align: top; - position: relative; - - .cartInfoWrapper { - @extend .sprite; - @extend .sprite-sacola; - - @include mq(md, max) { - margin-right: 5px; - } + @include mq(lg, min) { + &:hover { + color: $blue-500; } - - .amount-items { - background-color: #142032; - border-radius: 50%; - bottom: 2px; - color: #fff; - font-size: 10px; - line-height: 1.3; - min-width: 19px; - text-align: center; - padding: 3px 4px; - position: absolute; - right: -8px; - - @include mq(md, max) { - right: -3px; - } - - em { - font-style: normal; - } - } - } - } - - .show-menu { - margin-top: -2px; - - .option:before { - @extend .sprite; - @extend .sprite-menu-bottom; } } } diff --git a/src/arquivos/sprite/facebook-icon.png b/src/arquivos/sprite/facebook-icon.png new file mode 100644 index 0000000..da39568 Binary files /dev/null and b/src/arquivos/sprite/facebook-icon.png differ diff --git a/src/arquivos/sprite/instagram-icon.png b/src/arquivos/sprite/instagram-icon.png new file mode 100644 index 0000000..bfe4ac0 Binary files /dev/null and b/src/arquivos/sprite/instagram-icon.png differ diff --git a/src/arquivos/sprite/youtube-icon.png b/src/arquivos/sprite/youtube-icon.png new file mode 100644 index 0000000..299e529 Binary files /dev/null and b/src/arquivos/sprite/youtube-icon.png differ diff --git a/src/template-pagina/sub-templates/caina-footer-links.html b/src/template-pagina/sub-templates/caina-footer-links.html index 1d3da0c..e9a1209 100644 --- a/src/template-pagina/sub-templates/caina-footer-links.html +++ b/src/template-pagina/sub-templates/caina-footer-links.html @@ -1,64 +1,83 @@ -
-
-
-
-
-

Dúvidas

- -
-
-

Fale Conosco

- -
-
-

Fique Ligado

- -
-
+
+
+
+

DÚVIDAS

+ + +
+ +
+

FALE CONOSCO

+ + +
+ +
+

FIQUE LIGADO

+ +