/* Theme Name: SX-2022 Requires at least: WordPress 7.0 Version: 5.0 Last Update: 2022-0501 1250p Author: PaulGagu Text Domain: txd */ @font-face { font-family:'Bebas'; src: url('/wp-content/themes/sx-2022/assets/fonts/Bebas-Regular.ttf'); } .CenturyGothicBoldItalic { font-family: "CenturyGothicBoldItalic"; } .CenturyGothicItalic { font-family: "CenturyGothicItalic"; } .CenturyGothicRegular { font-family: "CenturyGothicRegular"; } .CenturyGothicBold { font-family: "CenturyGothicBold"; } :root{ --black : #000000; --blue : #0336ff; --dark : #646464; --grey : #969696; --light : #eaeaea; --lite : #c8c8c8; --orange : #fe5603; --white : #ffffff; --xlarge : 2000px; --desktop : 1280px; --tablet : 980px; --mobile : 600px; --font-bebas : 'Bebas', sans-serif; --font-century : 'CenturyGothicRegular', sans-serif; --font-lg : 2.2rem; --font-md : 1.8rem; --font-sm : 1.4rem; } html { scroll-padding-top:140px; scroll-behavior: smooth; background-color: white; } /* */ html, body{ font-family: 'CenturyGothicRegular', sans-serif; font-weight:300; } html{ font-size: 10px; } body{ font-size: 18px; line-height: 1.6; } header{ margin: 0; padding: 0; } main{ min-height: 80vh; } section, .section { width:100%; margin:0; padding:0; position:relative; } .content { width:84%; margin:0 auto; padding:0; position:relative; } .content-full { width:100%; margin:0 auto; padding:0; position:relative; } .content-inner { width:68%; margin:0 auto; padding:0; position:relative; } .width-92\% { width:92%; } .width-92vw { width:92vw; } .width-84\% { width:84%; } .width-84vw { width:84vw; } .width-68\% { width:68%; } .width-68vw { width:68vw; } @media ( max-width: 600px ){ .content, .content-full, .content-inner { width:90%; margin:0 auto; overflow-x: hidden; } } h1, h2, h3, h4, h5, h6 { font-family: 'Bebas', sans-serif; font-weight:300; line-height: 1.2; margin: 0 0 1.2rem; } h1{ font-size: 6.5rem; } h2{ font-size: 4.5rem; } h3{ font-size: 3.5rem; } h4{ font-size: 2.5rem; } h5{ font-size: 2.2rem; } h6{ font-size: 1.8rem; } p{ margin:0 0 1.2rem; } p:last-child { margin-bottom: 0; } .font-h0 { font-size: 10.5rem; } .font-h1 { font-size: 6.5rem; } .font-h2 { font-size: 4.5rem; } .font-h3 { font-size: 3.5rem; } .font-h4 { font-size: 2.5rem; } .font-h5 { font-size: 2.2rem; } .font-h6 { font-size: 1.8rem; } .font-xl { font-size: 10.5rem; } .font-lg { font-size: 2.2rem; } .font-md { font-size: 1.8rem; } .font-sm { font-size: 1.4rem; } .font-intro{ font-size: 2.2rem; } .font-body { font-size: 1.8rem; } .font-small{ font-size: 1.4rem; } .line-xlg { line-height: 2.2; } .line-lge { line-height: 1.8; } .line-med { line-height: 1.6; } .line-sml { line-height: 1.4; } .line-xsm { line-height: 1.2; } .font-105{ font-size: 10.5rem; } .font-65 { font-size: 6.5rem; } .font-45 { font-size: 4.5rem; } .font-35 { font-size: 3.5rem; } .font-22 { font-size: 2.2rem; } .font-18 { font-size: 1.8rem; } .font-14 { font-size: 1.4rem; } .font-head, .font-bebas { font-family: 'Bebas', sans-serif; font-weight:300; } .font-text, .font-body, .font-century { font-family: 'CenturyGothicRegular', sans-serif; font-weight: 300; } /* - - color & backgrounds - - */ a{ text-decoration: none; color:var(--orange); } a:hover{ color:var(--blue); } .white-on-black { color: var(--white); background-color: var(--black); } .white-on-orange{ color: var(--white); background-color: var(--orange); } .white-on-blue { color: var(--white); background-color: var(--blue); } .white-on-grey { color: var(--white); background-color: var(--grey); } .white-on-dark { color: var(--white); background-color: var(--dark); } .black-on-light { color: var(--black); background-color: var(--light); } .black-on-lite { color: var(--black); background-color: var(--lite); } .black-on-orange{ color: var(--black); background-color: var(--orange); } .bottom-lite { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--lite) 75% ); } .bottom-light { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--light) 75% ); } .bottom-grey { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--grey) 75% ); } .bottom-dark { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--dark) 75% ); } .bottom-blue { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--blue) 75% ); } .bottom-orange { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--orange) 75% ); } .bottom-white { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--white) 75% ); } .bottom-black { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--black) 75% ); } .btn-orange, .btn-blue, .btn-black, .btn-dark, .btn-white, .btn-grey, .btn-light, .btn-lite, .btn-line-blue, .btn-line-orange, btn-line-black, .btn-line, .btn { display:inline-block; line-height: 28px; padding:0 28px; cursor: pointer; border-radius:14px; border:0; font-family: 'CenturyGothicRegular', sans-serif; font-size:14px; letter-spacing: 1px; text-transform: uppercase; transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } .btn-orange:hover, .btn-blue:hover, .btn-black:hover, btn-dark:hover, .btn-white:hover, .btn-grey:hover, .btn-light:hover, btn-lite:hover, .btn-line-orange:hover, .btn-line-blue:hover, .btn-line-black:hover, .btn-line:hover, .btn:hover { transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } .btn { color:var(--black); background-color:var(--orange); } .btn-lite { color:var(--black); background-color:var(--lite); } .btn-light { color:var(--black); background-color:var(--light); } .btn-dark { color:var(--white); background-color:var(--dark); } .btn-grey { color:var(--white); background-color:var(--grey); } .btn-blue { color:var(--white); background-color:var(--blue); } .btn-orange{ color:var(--white); background-color:var(--orange); } .btn-white { color:var(--black); background-color:var(--white); } .btn-black { color:var(--white); background-color:var(--black); } .btn-line-orange, .btn-line-blue, .btn-line-black, .btn-line { color:var(--black); background-color:var(--white); border:1px solid; } .btn-line-orange{ color:var(--orange); } .btn-line-blue { color:var(--blue); } .btn-line-black { color:var(--black); } .btn:hover, .btn-lite:hover, .btn-light:hover, .btn-grey:hover, .btn-dark:hover, .btn-white:hover, .btn-orange:hover, .btn-black:hover { color:var(--white); background-color:var(--blue); } .btn-blue:hover { color:var(--white); background-color:var(--orange); } .btn-line:hover, .btn-line-orange:hover, .btn-line-blue:hover, .btn-line-black:hover { background-color: var(--lite); } /* - - color & backgrounds - - */ .has-lite-color, .color-lite, .lite { color: var(--lite); } .has-light-color, .color-light, .light { color: var(--light); } .has-grey-color, .color-grey, .grey { color: var(--grey); } .has-dark-color, .color-dark, .dark { color: var(--dark); } .has-blue-color, .color-blue, .blue { color: var(--blue); } .has-orange-color, .color-orange, .orange { color: var(--orange); } .has-white-color, .color-white, .white { color: var(--white); } .has-blcak-color, .color-black, .black { color: var(--black); } .has-inherit-color, .color-inherit .inherit { color: inherit; } .bg-lite { background-color: var(--lite); } .bg-light { background-color: var(--light); } .bg-grey { background-color: var(--grey); } .bg-dark { background-color: var(--dark); } .bg-blue { background-color: var(--blue); } .bg-orange { background-color: var(--orange); } .bg-white { background-color: var(--white); } .bg-black { background-color: var(--black); } .bg-inherit { background-color: inherit; } .grayscale { filter: grayscale(1); } .has-svg { position: relative; display:block; } .has-svg svg{ width:100%; height: auto; } svg{ vertical-align: middle; } .svg-blue svg path{ fill:var(--blue); } .svg-white svg path{ fill:var(--white); } .svg-black svg path{ fill:var(--black); } .svg-orange svg path{ fill:var(--orange); } .svg-hover-blue svg:hover path{ fill:var(--blue) } .svg-hover-white svg:hover path{ fill:var(--white) } .svg-hover-black svg:hover path{ fill:var(--black) } .svg-hover-orange svg:hover path{ fill:var(--orange) } .hover-lite:hover { color: var(--lite); } .hover-light:hover { color: var(--light); } .hover-grey:hover { color: var(--grey); } .hover-dark:hover { color: var(--dark); } .hover-blue:hover { color: var(--blue); } .hover-orange:hover { color: var(--orange); } .hover-black:hover { color: var(--black); } .hover-white:hover { color: var(--white); } .hover-inherit:hover{ color: inherit; } .hover-bg-lite:hover { background-color: var(--lite); } .hover-bg-light:hover { background-color: var(--light); } .hover-bg-grey:hover { background-color: var(--grey); } .hover-bg-dark:hover { background-color: var(--dark); } .hover-bg-blue:hover { background-color: var(--blue); } .hover-bg-orange:hover { background-color: var(--orange); } .hover-bg-white:hover { background-color: var(--white); } .hover-bg-black:hover { background-color: var(--black); } .hover-bg-inherit:hover{ background-color: inherit; } .has-links-lite a { color: var(--lite); } .has-links-light a { color: var(--light); } .has-links-grey a { color: var(--grey); } .has-links-dark a { color: var(--dark); } .has-links-blue a { color: var(--blue); } .has-links-orange a { color: var(--orange); } .has-links-white a { color: var(--white); } .has-links-black a { color: var(--black); } .hover-links-lite:hover a { color: var(--lite); } .hover-links-light:hover a { color: var(--light); } .hover-links-grey:hover a { color: var(--grey); } .hover-links-dark:hover a { color: var(--dark); } .hover-links-blue:hover a { color: var(--blue); } .hover-links-orange:hover a { color: var(--orange); } .hover-links-white:hover a { color: var(--white); } .hover-links-black:hover a { color: var(--black); } /* - - - - menu-tab section - - - - */ .menu-tab-white, .menu-tab-black, .menu-tab{ text-align: center; } .menu-tab-white a, .menu-tab-black a, .menu-tab a{ color:black; font-family: 'Bebas', sans-serif; font-weight:300; line-height: 1.2; padding-bottom: 6px; font-size:25px; display:inline-block; margin:0 15px; text-decoration:none; border-bottom:3px solid transparent; } .menu-tab-white a:hover, .menu-tab-white a.active, .menu-tab-black a:hover, .menu-tab-black a.active, .menu-tab a:hover, .menu-tab a.active { color:black; border-color:var(--orange); } .menu-tab-white a, .menu-tab-white a:hover, .menu-tab-white a.active{ color:white; } /* - - - - wave/shapes sections - - - - */ .wave-top-black, .wave-top-white, .wave-top-light, .wave-top-orange, .wave-top-blue, .wave-top-grey, .wave-top-dark, .wave-top-lite, .wave-top { position:relative; } .wave-top-black:before, .wave-top-white:before, .wave-top-light:before, .wave-top-lite:before, .wave-top-orange:before, .wave-top-blue:before, .wave-top-grey:before, .wave-top-dark:before, .wave-top:before { content:''; position: absolute; top:-2px; left:0; width:100%; padding-top:12.5%; overflow: hidden; background-size:cover; background-repeat: no-repeat; background-position:center center; z-index: 800; background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top.svg'); } .wave-top-lite:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-lite.svg'); } .wave-top-light:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-light.svg'); } .wave-top-dark:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-dark.svg'); } .wave-top-grey:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-grey.svg'); } .wave-top-blue:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-blue.svg'); } .wave-top-orange:before{ background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-orange.svg');} .wave-top-white:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-white.svg'); } .wave-top-black:before { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-black.svg'); } .wave-bottom-black, .wave-bottom-white, .wave-bottom-light, .wave-bottom-orange, .wave-bottom-blue, .wave-bottom-grey, .wave-bottom-lite, .wave-bottom-dark, .wave-bottom{ position:relative; } .wave-bottom-black:after, .wave-bottom-white:after, .wave-bottom-light:after, .wave-bottom-lite:after, .wave-bottom-orange:after, .wave-bottom-blue:after, .wave-bottom-grey:after, .wave-bottom-dark:after, .wave-bottom:after { content:''; position: absolute; left:0; bottom:-2px; width:100%; padding-top:12.5%; overflow: hidden; background-size:cover; background-repeat: no-repeat; background-position:center center; background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top.svg'); transform: scale(-1,-1); } .wave-bottom-lite:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-lite.svg' ); } .wave-bottom-light:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-light.svg' ); } .wave-bottom-grey:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-grey.svg' ); } .wave-bottom-dark:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-dark.svg' ); } .wave-bottom-blue:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-blue.svg' ); } .wave-bottom-orange:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-orange.svg'); } .wave-bottom-white:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-white.svg' ); } .wave-bottom-black:after { background-image:url('/wp-content/themes/sx-2022/assets/svgs/wave-top-black.svg' ); } .top-lite { background-image: linear-gradient( 180deg, var(--lite) 25% , #FFFFFF00 25%); } .top-light { background-image: linear-gradient( 180deg, var(--light) 25% , #FFFFFF00 25%); } .top-grey { background-image: linear-gradient( 180deg, var(--grey) 25% , #FFFFFF00 25%); } .top-dark { background-image: linear-gradient( 180deg, var(--dark) 25% , #FFFFFF00 25%); } .top-blue { background-image: linear-gradient( 180deg, var(--blue) 25% , #FFFFFF00 25%); } .top-orange { background-image: linear-gradient( 180deg, var(--orange) 25% , #FFFFFF00 25%); } .top-white { background-image: linear-gradient( 180deg, var(--white) 25% , #FFFFFF00 25%); } .top-black { background-image: linear-gradient( 180deg, var(--black) 25% , #FFFFFF00 25%); } .middle-lite { background-image: linear-gradient( 180deg, var(--lite) 50% , #FFFFFF00 50%); } .middle-light { background-image: linear-gradient( 180deg, var(--light) 50% , #FFFFFF00 50%); } .middle-grey { background-image: linear-gradient( 180deg, var(--grey) 50% , #FFFFFF00 50%); } .middle-dark { background-image: linear-gradient( 180deg, var(--dark) 50% , #FFFFFF00 50%); } .middle-blue { background-image: linear-gradient( 180deg, var(--blue) 50% , #FFFFFF00 50%); } .middle-orange { background-image: linear-gradient( 180deg, var(--orange) 50% , #FFFFFF00 50%); } .middle-white { background-image: linear-gradient( 180deg, var(--white) 50% , #FFFFFF00 50%); } .middle-black { background-image: linear-gradient( 180deg, var(--black) 50% , #FFFFFF00 50%); } .bottom-lite { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--lite) 75% ); } .bottom-light { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--light) 75% ); } .bottom-grey { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--grey) 75% ); } .bottom-dark { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--dark) 75% ); } .bottom-blue { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--blue) 75% ); } .bottom-orange { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--orange) 75% ); } .bottom-white { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--white) 75% ); } .bottom-black { background-image: linear-gradient( 180deg, #FFFFFF00 75%, var(--black) 75% ); } .pre-boxed-abs { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; background-repeat: no-repeat; background-image: url('/wp-content/themes/sx-2022/assets/svgs/wave-top-black.svg' ), /* linear-gradient( 180deg, var(--black) 38% , #FFFFFF00 38%), */ linear-gradient( 90deg, #FFFFFF00 4%, var(--light) 4%, var(--light) 96%, #FFFFFF00 96% ); } .pre-boxed { background-repeat: no-repeat; background-image: linear-gradient( 90deg, #FFFFFF00 4%, var(--light) 4%, var(--light) 96%, #FFFFFF00 96% ); } .fit-cover { display:inline-block; object-fit: cover; } .fit-contain{ display:inline-block; object-fit: contain; } .cursor-pointer{ cursor: pointer; } .flip-h { transform: scaleX(-1); } .font-5vmin{ font-size: 5vmin; } .font-6vmin{ font-size: 6vmin; } .font-7vmin{ font-size: 7vmin; } .font-8vmin{ font-size: 8vmin; } .font-9vmin{ font-size: 9vmin; } .font-10vmin{ font-size: 10vmin; } .font-11vmin{ font-size: 11vmin; } .font-12vmin{ font-size: 12vmin; } .font-13vmin{ font-size: 13vmin; } .font-14vmin{ font-size: 14vmin; } .font-15vmin{ font-size: 15vmin; } .font-16vmin{ font-size: 16vmin; } .font-17vmin{ font-size: 17vmin; } .font-18vmin{ font-size: 18vmin; } .font-19vmin{ font-size: 19vmin; } .font-20vmin{ font-size: 20vmin; } .font-21vmin{ font-size: 21vmin; } .font-22vmin{ font-size: 22vmin; } .font-23vmin{ font-size: 23vmin; } .font-24vmin{ font-size: 24vmin; } .font-25vmin{ font-size: 25vmin; } .font-26vmin{ font-size: 26vmin; } .font-27vmin{ font-size: 27vmin; } .font-28vmin{ font-size: 28vmin; } .font-29vmin{ font-size: 29vmin; } .font-30vmin{ font-size: 30vmin; } input{ border:1px solid #333; border-radius: 4px; } input[type="submit"]{ display:inline-block; line-height: 28px; padding:0 28px; cursor: pointer; border-radius:14px; border:0; font-family: 'CenturyGothicRegular', sans-serif; font-size:14px; letter-spacing: 1px; text-transform: uppercase; transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; color:var(--white); background-color:var(--orange); } input[type="submit"]:hover { transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; background-color:var(--blue);} img.aligncenter{ display:block; margin:0 auto; } img.alignleft { float:left; margin:0 30px 20px 0; } img.alignright{ float:right; margin:0 0 30px 20px; } .height-10vmin { height:10vmin; } .height-20vmin { height:20vmin; } .height-30vmin { height:30vmin; } .height-40vmin { height:40vmin; } .height-50vmin { height:50vmin; } .height-60vmin { height:60vmin; } .height-70vmin { height:70vmin; } .height-80vmin { height:80vmin; } .height-90vmin { height:90vmin; } .height-100vmin{ height:100vmin;}