/*
Theme Name: Beatbridge
Theme URI: https://gabrielecito.com
Author: Gabriele Cito
Author URI: https://gabrielecito.com
Description: One Page Scroll - Tema custom progettato e sviluppato su misura per Beatbridge
Version: 1.3
Requires at least: 5.0
Tested up to: 6.2
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beframe
This theme, like WordPress, is licensed under the GPL.
*/
/* ! Reset */
body, html{color: #191b1c; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
html{overflow-x: hidden;}
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}
:root{
--menu-bg: #fff;
--menu-text: #191b1c;
--link-text: #009dc6;
}
a{text-decoration: none; color: #F75E47}
p{line-height: 1.3}
.spacer{height: 150px;}
/* ! Title System */
.text-0{font-size: 5rem; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}
h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}
@media (max-width: 768px) {
.text-0{font-size: 4rem}
}
/* ! Button system */
.button,
.wp-block-button__link{font-size: 1.2rem; text-transform: uppercase; font-weight: bold; background: #333; color:#fff; padding: 14px 25px;display: inline-block;border-radius: 4px}
.button:hover,
.wp-block-button__link{background: #000;}
/* ! Header */
/*----------------------------------------------------------------------------------- */
.header-container{position: fixed; background: var(--menu-bg); top:0; left:0; z-index: 9999; width: 100%;}
.logged-in .header-container{top:30px}
.header{ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1300px; margin: 0 auto; padding: 1%; transition: all 0.8s cubic-bezier(.215, .61, .355, 1);}
.scroll-down .header{padding: 0 1%;}
.scroll-down .header-container{box-shadow: 1px 1px 15px rgb(0 0 0 / 10%);}
.header__menu{margin-bottom: 0;}
.header__menu li{display: inline-block; position: relative; transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}
.header__menu li a{position: relative; transition: all 0.3s cubic-bezier(.215, .61, .355, 1); color:var(--menu-text); display: block; padding: 15px;}
.header__menu li ul{position: absolute; left:0; width: 220px; background: var(--menu-bg); display: none; visibility: hidden; box-shadow: 0 10px 10px rgba(0,0,0,.09); transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}
.header__menu li ul li{width: 100%;}
.header__menu > li:hover > a{color: var(--link-text);}
.header__menu li:hover > ul{display: block; visibility: visible;}
.header__logo{display: flex; justify-content: flex-start; align-items: center; z-index: 9999;}
.header a.header__logo{font-weight: bold; padding: 0;}
.header__logo img{height: 50px; margin: 10px; transition: all 0.8s cubic-bezier(.215, .61, .355, 1);}
.scroll-down .header__logo img{height: 40px;}
.header__hamburger{display: none;}
@media (min-width: 821px) and (max-width: 1024px){
.header__menu li a {padding: 11px}
}
@media (max-width: 820px) {
.header__hamburger{display: block;width: 40px;height: 35px; margin-top: 18px;margin-right: 4px; z-index: 9999;}
.header__hamburger span{width: 33px;height: 2px;background: var(--menu-text);margin-top: 8px;display: block;transition: all 0.15s cubic-bezier(.215, .61, .355, 1);}
.header__menu{position:absolute; top:0; left:0; width: 100%; padding-top: 70px; background: var(--menu-bg); height: 100vh; overflow: auto; transform: translateX(100%); transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.header__menu li{display: block;}
.header__menu li ul{position: relative; width: 100%; padding-left: 20px;}
.menu-open .header__hamburger span:nth-child(1){transform: translateY(5px) rotate(45deg);}
.menu-open .header__hamburger span:nth-child(2){transform: translateY(-5px) rotate(-45deg);}
.menu-open .header__menu{transform: translateX(0%);}
.menu-open{overflow:hidden;}
.header__logo img{height: 46px; margin: 10px 0px 5px 5px;}
.scroll-down .header__logo img{height: 42px;}
}
@media (max-width: 500px) {
.header__logo img{height: 38px;}
.scroll-down .header__logo img{height: 38px;}
.header__menu li a{padding: 10px 15px 7px 15px;}
}
.header-left{z-index: 99;}
.header__menu{display: inline-block;}
.header__icon{display: inline-block}
.header__icon a{
padding: 25px;
color: transparent !important;
background: url('data:image/svg+xml,') no-repeat center center;
}
.header__icon a:hover{
background: url('data:image/svg+xml,') no-repeat center center;
}
@media (max-width: 820px) {
.header__icon{position:absolute; top:calc(100vh - 75px); left:0; width: 100%; padding-top: 22px; display: block; border-top: 1px solid #e0e0e0; transform: translateX(100%); transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.menu-open .header__icon {transform: translateX(0%);}
}
/* ! Index */
/*----------------------------------------------------------------------------------- */
/* ! Pagination */
.pagination{margin-bottom: 30px; margin-top: 30px; color: #453F3E;}
.pagination a{color: var(--link-text)}
.pagination a:hover{background-color: var(--link-text); color: #fff;}
.page-numbers{padding: 5px 10px; border: 1px solid var(--link-text); border-radius: 7px; display: inline-block; margin: 5px 0px;}
/* ! Single */
/*----------------------------------------------------------------------------------- */
/* ! Footer */
/*----------------------------------------------------------------------------------- */
.footer{background-color: #009dc6; color: #fff; padding: 5px;}
@media (max-width: 767px){
.footer .col-50{text-align: center!important;}
}
/* ! Grid System */
/*----------------------------------------------------------------------------------- */
.grid{display: flex; flex-wrap: wrap; max-width: 1300px; margin: 0 auto}
.grid--small{max-width: 900px}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%}
.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}
[class*='col-']{padding: 2%;}
.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}
@media (max-width: 768px) {
[class*='col-']{width: 100%}
.sma-33{width: 33.33%}
.sma-50{width: 50%}
.sma-25{width: 25%}
}
/* ! Helpers */
/*----------------------------------------------------------------------------------- */
.br-1{border-radius: 10px;}
.br-2{border-radius: 20px;}
.br-3{border-radius: 30px;}
.br-7{border-radius: 70px;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}
.max-width{max-width: 900px;}
.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}
.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}
.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}
.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}
.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}
.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}
.icon-small{width: 45px; padding: 8px 0px 8px 5px;}
.icon-white{filter: invert(1);}
.bg-dark{background: #000;}
.text-white{color:#fff}
.text-dark{color:#000}
.v-center{display: flex; justify-content: center; flex-flow: column; align-items: flex-start;}
.font-normal{font-weight: 400;}
.none{display: none;}
@media (max-width: 768px) {
.sma-none{display: none;}
.sma-col-invert{flex-direction: column-reverse;}
}
@media (min-width: 768px) {
.desktop-none{display: none;}
}
.list-mark li{position: relative; padding-left: 36px; list-style-type: none; margin-bottom: 25px;}
.list-mark li:after{content: " "; position: absolute; top: 0; left: 0px; width: 22px; height: 22px; background: url(icons/checkmark-circle.svg); background-size: 100%;}
.in-icon a{
color: transparent !important;
background: url('data:image/svg+xml,') no-repeat center center;
}
.in-icon a:hover{
background: url('data:image/svg+xml,') no-repeat center center;
}
@media (max-width: 820px) {.in-icon a{top: 10px; left: 5px; width:44px;}
}
/* ! Wordpress Styles */
/*----------------------------------------------------------------------------------- */
input, textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;}
input[type=submit], button{border: 3px solid #ddd; background: #ddd; border-radius: 3px;padding: 10px;}
.form-search{width: 100%;border: 3px solid #ddd;border-radius: 100px; padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border:none;}
.form-search button{padding: 0;background:transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}
.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}
body .is-layout-flex > *{margin: 8px;}