/* Theme Name: The base V2 Author: Francisco Mónaco Author URI: http://franciscomonaco.com/ Description: Tailor made theme developed specially for xxx's website. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /*------------------------------------------ Reset */ * { box-sizing: border-box; outline: none; outline: none; } p, a, h1, h2, h3, h4, h5, h6, ul, ol, li, body, div, section, nav, input, textarea { margin: 0; padding: 0; font-weight: normal; } video, svg, img { vertical-align: middle; width: 100%; height: auto; display: block; } input[type="text"], input[type="submit"], textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /*------------------------------------------ Interface */ .main-nav { position: fixed; width: 100%; top: 0; left: 0; padding: 4vh 0; z-index: 99; pointer-events: none; } .popup { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 100; opacity: 0; pointer-events: none; } .popup.open { opacity: 1; pointer-events: all; } .popup .inner { height: 100%; } .popup a { color: var(--black); text-decoration: underline; } .popup .head { display: flex; align-items: center; } .popup .head .title { flex: 1; } .popup .head .closer { width: 60px; height: 60px; } .popup .head .closer .button { width: 100%; height: 100%; position: relative; cursor: pointer; } .popup .head .closer .button .line { position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin-top: -1px; margin-left: -10px; transform-origin: center; } .popup .head .closer .button .line-1 { transform: rotate(45deg); } .popup .head .closer .button .line-2 { transform: rotate(-45deg); } .popup .content { height: 100%; overflow-y: scroll; padding-bottom: 50vh; } /*------------------------------------------ Footer */ footer .row { display: flex; gap: var(--spacing); } footer .row .col { flex: 1 0 0; } footer .items .item > * { cursor: pointer; } /*------------------------------------------ Sections */ section { margin-bottom: 10vh; } section.intro { padding-top: var(--interface-height); position: relative; } section.intro .row { display: flex; flex-direction: column; gap: var(--spacing); } section.intro .row .funding { margin-top: var(--spacing); display: flex; flex-direction: column; align-items: center; } section.intro .row .funding .title-text { font-size: 16px; margin-bottom: 10px; } section.intro .row .funding .link { display: block; max-width: 280px; } section.intro .floating-badge { position: absolute; right: 10px; top: 60vw; width: 100px; transform: rotate(17deg); } section.gallery .row { display: flex; flex-direction: column; gap: var(--spacing); } section.gallery .row .image-holder { height: 48vh; } section.gallery .row .image-holder .image { height: 100%; object-fit: cover; border-radius: 20px; } section.contact .separator { margin-bottom: 6vh; } section.contact .separator .lines { display: flex; gap: 10px; } section.contact .separator .lines .line { flex: 1; height: 10px; } section.contact .row { display: flex; flex-direction: column; gap: var(--spacing); } section.contact .row .methods { display: flex; flex-direction: column; align-items: center; gap: 8px; } section.contact .row .badge-wrapper { display: flex; justify-content: center; } section.contact .row .badge-wrapper .badge { border-radius: 10px; padding: 16px 26px; margin-top: 100px; } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------ Interface */ .main-nav { padding: 6vh 0; display: flex; justify-content: center; } .main-nav .logo { width: 40vw; } .popup .head { max-width: 800px; margin: 0 auto; } .popup .content { max-width: 800px; margin: 0 auto; } /*------------------------------------------ Sections */ section { margin-bottom: 16vh; } section.intro .inner { margin: 0 auto; width: 800px; } section.intro .row { flex-direction: row; } section.intro .row .col-title { flex: 1; } section.intro .row .col-title .title { text-align: left; padding-top: 10vh; } section.intro .row .col-video { flex: 1; } section.intro .row .col-video .video-holder { height: 70vh; border-radius: 20px; overflow: hidden; } section.intro .row .col-video .video-holder video { object-fit: cover; } section.intro .row .funding { align-items: flex-start; } section.intro .row .funding .title-text { font-size: 18px; margin-bottom: 14px; } section.intro .row .funding .link { max-width: 380px; } section.intro .floating-badge { right: var(--spacing); top: 20vh; width: 160px; transform: rotate(17deg); } section.gallery .row { flex-direction: row; } section.gallery .row .col { flex: 1; } section.gallery .row .image-holder { height: 56vh; padding: 0; } section.gallery .row .image-holder.left .image { border-radius: 0 20px 20px 0; } section.gallery .row .image-holder.right .image { border-radius: 20px 0 0 20px; } section.description .inner { margin: 0 auto; width: 600px; } section.contact .inner { margin: 0 auto; width: 800px; } section.contact .row { flex-direction: row; } section.contact .row .col { flex: 1; } section.contact .row .description { text-align: left; } section.contact .row .methods { text-align: right; } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------ Interface */ .popup .head { max-width: 800px; margin: 0 auto; } .popup .content { max-width: 800px; margin: 0 auto; } /*------------------------------------------ Sections */ section { margin-bottom: 18vh; } section.intro .inner { width: 1000px; } section.intro .row .col-title .title { padding-top: 11vh; } section.intro .row .col-video { width: 40%; flex: initial; } section.intro .row .col-video .video-holder { height: 72vh; } section.intro .row .funding .title-text { font-size: 20px; margin-bottom: 16px; } section.intro .row .funding .link { max-width: 420px; } section.intro .floating-badge { right: 12vw; width: 200px; top: 26vh; } section.gallery .row .image-holder { height: 60vh; } section.description .inner { width: 700px; } section.contact .inner { width: 1000px; } } @media(min-width: 1400px){ /* -------------------------------------------- */ /*------------------------------------------ Interface */ .popup .head { max-width: 800px; margin: 0 auto; } .popup .content { max-width: 800px; margin: 0 auto; } /*------------------------------------------ Sections */ section.intro .inner { width: 1200px; } section.intro .row .col-title .title { padding-top: 12vh; } section.intro .row .col-video { width: 34%; } section.intro .row .col-video .video-holder { height: 76vh; } section.gallery .row .image-holder { height: 70vh; } section.description .inner { width: 900px; } section.contact .inner { width: 1200px; } } @media(hover: hover) { /* -------------------------------------------- */ }