ubkstr css

ubkstr.css

/*Estou usando variáveis de css4 aqui, ideal é substituir isso pelas variáveis do sass. Acredito que dessa forma fica mais fácil de vocês realizarem a substituição*/
:root {
    /* Cores */
    --primary: #ff5b00;

    /* Transições/Animações */
    --ease-in-out: cubic-bezier(0.8, 0.3, 0, 1);
}

/* Ajustando a largura do container, isso pode afetar outras partes do site. */
.container {
    max-width:1280px;
}


@media (min-width:992px) {
    .block-search {
        flex-grow: 1;
        margin-left:15px;
        margin-right:15px;
    }

    .block-search .block-content {
        max-width:615px;
        margin:0 auto;
    }

    .block-search #search_mini_form .field {
        width:100%;
    }

    .block-search .block-content form .field.search input{
        border-radius:100px;
        border:none !important;
    }

    .block-search #search_mini_form button[type="submit"] {
        position:absolute;
        right:5px;
        background:none;
        color: var(--primary);
    }
}

/* Menu com categorias */
/*  
    Atenção com javascript deste menu, precisa de um ajuste na altura em que o header cola no topo da página
    Isso foi causado pela alteração da altura do elemento.
    Video do problema: https://i.imgur.com/O5YGbZx.gifv
*/

ul#ui-id-2 {
    max-width:1280px;
}

@media (min-width: 992px) {
    nav.navigation li.level-top > a {
        padding:16px;
    }

    nav.navigation li.level-top > a:after {
        background:white !important;
    }

    nav.navigation li.level-top > ul:not(.megamenu-wrapper), nav.navigation li.level-top > ul:not(.megamenu-wrapper) ul {
        box-shadow:none;
    }

    nav.navigation li.level-top.parent > a:before {
        position: absolute;
        top:50%;
        transform:translateY(-75%);
        transition: all 0.3s;
        transition-timing-function: var(--ease-in-out);
        opacity:0;
    }

    nav.navigation li.level-top.parent > .ui-state-focus:before,
    nav.navigation li.level-top.parent > .ui-state-active:before {
        opacity:1;
        transform:translateY(-50%);
        transition: all 0.3s;
        transition-timing-function: var(--ease-in-out);
        color: var(--primary);
    }

    nav.navigation li.level-top.parent > .ui-state-focus span,
    nav.navigation li.level-top.parent > .ui-state-active span {
        color: var(--primary);
    }

    nav.navigation li.level-top > a span{
        transition: all 0.3s;
        transition-timing-function: var(--ease-in-out);
    }
}

/* Segunda rodada de alterações */

/* Footer */
.page-footer {
    padding-top:56px;
}

.page-footer .footer-col-content ul li {
    font-size: 16px;
    line-height:19px;
    color: #606060;
    margin-top:unset !important;
    margin-bottom: 18px;
}


.page-footer .social-links {
    display:flex;
    justify-content:flex-end;
}

.page-footer .social-links li + li {
    margin-left:16px !important;
}

.page-footer .footer-panel {
    padding-bottom: 15px;
}

/* Menu */

.header-content button.sm-header_customer-menu-toggle {
    display:flex;
    align-items:center;
    max-width:130px;
}

.header-content button.sm-header_customer-menu-toggle span {
    margin-left: 8px;
    line-height:16px;
    font-size:14px;
}

.minicart-wrapper .action.showcart {
    position:relative;
    margin-left:64px;
}

.minicart-wrapper .action.showcart .qty {
    background: #DD5104;
    color: white;
    font-size: 10px;
    line-height: 12px;
    border-radius:50%;
    position:absolute;
    bottom:-4px;
    right:-4px;
    height: 22px !important;
    width: 22px !important;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align:center;
}

@media (min-width:992px) {
    
    .page-header .logo {
        width:100%;
        max-width:130px;
    }

    .page-header .logo img {
        width:100%;
    }

    .minicart-wrapper .action.showcart .text:before {
        font-size:32px;
    }
}

/* Página de produto */

@media(min-width:992px) {
    .products-grid.products-related .product-item {
        width:unset !important;
        flex-basis:160px;
    }
}

.products-grid.products-related .product-item .product-item-name,
.products-grid .product-item .price-box .subscriber-price, .products-list .product-item .price-box .subscriber-price {
    font-size:16px;
    line-height: 19px;
    font-weight:500;
    color: #4d4d4d;
}

.products-grid.products-related .product-item .product-item-name {
    display:block !important;
    margin-bottom:1.25px !important;
}

.products-grid.products-related .product-item {
    padding: 13.5px 24px;
    margin-bottom:10px;
}


.page-title-wrapper.product .page-title{
    font-size:18px;
    line-height:25px;
    font-weight:bold;
    color: #4d4d4d;
    font-family: 'Open Sans';

}

.catalog-product-view .product-social-links, .modal-popup.quick-view .product-social-links {
    display:none;
}

.catalog-product-view .product.attribute .value, .modal-popup.quick-view .product.attribute .value {
    font-size:14px;
    line-height: 19px;
}

.product-info-main > p {
    margin-top:76px;
}

.product-info-main .block.related {
    padding:0;
}

.breadcrumbs {
    background:none;
    font-size: 14px;
    line-height: 16px;
    padding: 24px 0;
}

.breadcrumbs .items .item:after {
    content: ">"
}

.products-grid .product-item .product-item-name a, .products-list .product-item .product-item-name a {
    font-size:16px;
    line-height:19px;
}

.products-grid .product-item .product-item-details .product-item_wrap-1 {
    padding-top:0;
}

.tm-featured-switch-image-container, .tm-switch-image-container {
    overflow:visible;
}

.products-grid .tm-featured-switch-image-container img {
    box-shadow: 0 16px 24px -8px rgba(0,0,0,0.2), 0 4px 8px -4px rgba(0,0,0,0.2);
    border-radius:3px;
}

/* Produto */

.breadcrumbs .items .item {
    color:#777;
    margin-right: 8px;
    padding-right: 12px;
    position: relative;
}

.breadcrumbs .items .item a {
    color: #777;
}

.product-info-main .infosubscriber {
    color: #4d4d4d;
}

@media(max-width:768px) {
    /* Home */

    .slider-pro-wrapper {
        margin-bottom:0;
        padding-bottom:5px;
    }

    .block.widget.featured .block-content .products-grid .product-items .product-item {
        padding: 0 8px;
    }

    .owl-nav .owl-prev:before, .owl-nav .owl-next:before {
        width:40px;
        height:40px;
        font-size:40px;
        line-height:40px;
    }

    .bans-2 { /*compensa as margens laterais no mobile, idealmente usado pra banners na home*/
        margin-left: -20px;
        width: calc(100% + 40px);
    }

    /* Produto */
    .breadcrumbs .items .item {
        font-size:10px !important;
        line-height:12px;
        margin-right: 7px;
        padding-right: 7px;
        position: relative;
    }

    .box-tocart .fieldset {
        width:100%;
        max-width:212px;
    }
    
    .box-tocart .action:before {
        display:none !important;
    }

    .box-tocart .action {
        width:100%;
        font-size:14px;
        line-height:16px;
        text-transform: uppercase;
    }

    .page-main { /*era bom ter alguma classe modificadora pra especificamente falar que nao quer essa margem*/
        margin-top:0;
    }

    .product-info-main .infosubscriber {
        font-size: 14px;
        line-height: 22px;
    }

    /* Consertando icone do carrinho quando o menu está ativo*/

    .minicart-wrapper .sm-header_customer-cart {
        transition: all 0.3s ease-in-out;
    }

    .minicart-wrapper.active .sm-header_customer-cart,
    .minicart-wrapper.active .counter {
        opacity:0;
    }

    
}