@charset "UTF-8"; /*! Theme Name: estudiopi Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: estudiopi Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. estudiopi is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /************************************************************/ /********************** RESET +++**************************/ /************************************************************/ /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap"); *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /************************************************************/ /***************** IMPORT FONTS ++**************************/ /************************************************************/ /************************************************************/ /***************** BASICS ++*********************************/ /************************************************************/ html { scroll-behavior: smooth; } body { font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; line-height: 1.625em; font-weight: 400; color: #fff; background-color: #000; overflow-x: hidden; -webkit-font-smoothing: antialiased; cursor: url("img/cursor-2.svg"), auto; } body.locked { height: 100vh; overflow-y: hidden; } a { text-underline-offset: 2px !important; } a:hover { cursor: url("img/cursor-2.svg"), auto; text-decoration: underline 1px; text-underline-offset: 2px !important; } /************************************************************/ /***************** HEADER + NAV ++***************************/ /************************************************************/ header#sm-header { display: none; } @media only screen and (min-width: 768px) { header#sm-header { position: relative; display: inline-block; width: 100%; z-index: 100; -webkit-transition: background-color .2s ease; -o-transition: background-color .2s ease; transition: background-color .2s ease; padding-top: 40px; } header#sm-header .inner { position: relative; height: 100%; } header#sm-header .inner .wrap { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; } header#sm-header .inner:after { content: ''; position: absolute; left: 70px; bottom: 0; height: 0.7px; width: calc(100% - 140px); background-color: white; } header#sm-header .inner.pad-h { padding: 0 70px; } header#sm-header .inner .header-logo-link { position: relative; display: flex; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; height: 100%; max-height: 100%; margin-right: 40px; } header#sm-header .inner .header-logo-link img { display: block; margin: auto 0; width: auto; max-height: 100%; height: 30px; } header#sm-header .inner .navigation { height: 100%; position: relative; display: block; min-height: 31px; } header#sm-header .inner .navigation ul { display: flex; align-items: center; height: 100%; min-height: 31px; gap: 22px; } header#sm-header .inner .navigation ul li { display: flex; align-items: center; height: 100%; } header#sm-header .inner .navigation ul li:first-child { margin-left: 0; } header#sm-header .inner .navigation ul li a { position: relative; font-size: 1em; line-height: 1; color: white; } header#sm-header .inner .navigation ul li a:hover { text-decoration: underline 1px; } header#sm-header .inner .navigation ul li a.ig { color: #fff; } header#sm-header .inner .navigation ul li a.ig svg { display: inline-block; width: 22px; color: white; stroke: #fff; margin-top: 2px; } header#sm-header .inner .navigation ul li a.ig svg path { fill: white; } header#sm-header .inner .navigation ul li.current_page_item a { text-decoration: underline 1px; } header#sm-header .inner .wrap-right { display: flex; justify-content: flex-end; } header#sm-header ul.sub-menu { padding: 0 70px; width: 100%; font-size: 12px; font-weight: 300; display: flex; gap: 30px; justify-content: flex-end; background-color: #000; overflow: hidden; height: 0px; transition: height 0.5s cubic-bezier(0, 1, 0, 1); } header#sm-header ul.sub-menu.show { height: 37px; transition: height .5s ease-in-out; } header#sm-header ul.sub-menu li { height: 100%; position: relative; } header#sm-header ul.sub-menu li a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; font-size: 1.2em; color: white; } header#sm-header ul.sub-menu li a:hover { text-decoration: underline 1px; } header#sm-header ul.sub-menu li.current-menu-item a, header#sm-header ul.sub-menu li.current-menu-parent a { text-decoration: underline 1px; } header#sm-header ul.sub-menu li:after { content: ''; position: absolute; top: 3px; right: -15px; width: 0.7px; height: calc(100% - 6px); background-color: white; } header#sm-header ul.sub-menu li:last-child:after { display: none; } header#sm-header ul.sub-menu:after { content: ''; position: absolute; left: 70px; bottom: 0; height: 0.5px; width: calc(100% - 140px); background-color: white; } } /************************************************************/ /***************** HEADER + NAV MOBILE *********************/ /************************************************************/ header#xs-header { position: relative; height: 70px; z-index: 100; background: #000; } @media only screen and (min-width: 768px) { header#xs-header { display: none; } } header#xs-header.fixed-header { position: fixed; top: 0; left: 0; width: 100%; animation: fadeInDown; animation-duration: 0.5s; } header#xs-header:after { content: ''; position: absolute; left: 0px; bottom: 0; height: 0.7px; width: 100%; background-color: white; } header#xs-header .inner { padding: 0 20px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; display: flex; align-items: center; height: 100%; } @media only screen and (min-width: 768px) { header#xs-header .inner { padding: 0 20px; } } header#xs-header .inner .header-logo-link { margin-right: auto; width: 35%; position: relative; display: flex; align-items: center; } header#xs-header .menu-toggle { width: 32px; border: none !important; background-color: transparent; cursor: pointer; height: 16px; min-width: 12px; position: relative; padding: 0; } header#xs-header .menu-toggle::before { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } header#xs-header .menu-toggle span { width: 32px; background-color: currentcolor; display: block; position: absolute; right: 0; transition: all 0.2s; height: 0.2em !important; } header#xs-header .menu-toggle span.bar-top { min-width: 12px; top: 0; } header#xs-header .menu-toggle span.bar-center { min-width: 12px; top: 7px; } header#xs-header .menu-toggle span.bar-bottom { min-width: 12px; top: 14px; } header#xs-header .menu-toggle.toggled { z-index: 1000; } header#xs-header .menu-toggle.toggled span { color: white !important; } header#xs-header .menu-toggle.toggled .bar-top { top: 50%; transform: rotate(45deg); } header#xs-header .menu-toggle.toggled .bar-center { opacity: 0; } header#xs-header .menu-toggle.toggled .bar-bottom { top: 50%; transform: rotate(-45deg); } header#xs-header .navigation { background-color: #000; position: absolute; top: calc(100% - -1px); left: 0; width: 100%; height: calc(100vh - 70px); border-bottom: 1px solid #e1e1e1; padding: 0; margin: 0; overflow-y: scroll; z-index: 10; transition: visibility 0s linear 0s, opacity 300ms; opacity: 0; flex-direction: column; justify-content: space-between; padding: 20px; } @media only screen and (max-width: 576px) { header#xs-header .navigation { animation-duration: 0.4s; } header#xs-header .navigation .ig_about_us { display: none; position: absolute; top: 75%; } } header#xs-header .navigation.toggled { visibility: visible; opacity: 1; display: flex; } @media only screen and (max-width: 576px) { header#xs-header .navigation.toggled { animation: fadeInRight; animation-duration: 0.5s; } header#xs-header .navigation.toggled .ig_about_us { display: flex; } } header#xs-header .navigation ul:first-child li { padding: 8px 0; } header#xs-header .navigation ul:first-child li.menu-item-has-children > a::after { background-image: url("https://estudiopi.cl/wp-content/themes/estudiopi/img/drop_down_menu_errow_white.svg"); content: ''; font-family: initial; font-size: 25px; width: 7px; height: 13px; background-size: cover; transform: rotate(90deg); display: inline-block; margin-left: 20px; } header#xs-header .navigation ul li { position: relative; } header#xs-header .navigation ul li a { position: relative; display: block; font-size: 20px; width: 100%; font-weight: 600; } header#xs-header .navigation ul.sub-menu { padding-left: 12px; padding-top: 5px; } header#xs-header .navigation ul.sub-menu li a { font-weight: 200; } header#xs-header .navigation .ig { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; } header#xs-header .navigation .ig svg { width: 32px; height: 32px; } header#xs-header .navigation .ig svg path { fill: white; } /************************************************************/ /***************** HOME *********************/ /************************************************************/ .container { padding: 20px; min-height: calc(100vh - 200px); } @media only screen and (min-width: 768px) { .container { padding: 35px 70px; } } .container.posts { padding-bottom: 40px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #main-grid { display: grid; grid-template-columns: 1fr; gap: 15px; } @media only screen and (min-width: 768px) { #main-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media only screen and (max-width: 576px) { #main-grid article { min-height: 350px; animation: fadeInUp; animation-duration: 0.5s; } } @media only screen and (min-width: 768px) { #main-grid article { opacity: 0; animation: fadeIn ease 2s; animation-iteration-count: 1; animation-fill-mode: forwards; } } #main-grid article a { width: 100%; height: 100%; overflow: hidden; line-height: 0%; display: block; position: relative; } #main-grid article a img { display: block; transition: all .3s ease; width: 100%; } #main-grid article a .tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.2); top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 1.5em; transition: all .3s ease; opacity: 0; padding: 30px; } #main-grid article a .tooltip h3 { line-height: 1.35; text-align: center; font-weight: 400; } #main-grid article a:hover .tooltip { opacity: 1; } #main-grid article:hover img { filter: blur(8px); transition: all .3s ease; } /************************************************************/ /***************** FOOTER *********************/ /************************************************************/ footer.footer { padding: 0 20px 20px 20px; } @media only screen and (min-width: 768px) { footer.footer { padding: 0 70px 55px; } } footer.footer a:hover { text-decoration: underline 1px; } footer.footer .inner { padding-top: 50px; border-top: 0.7px solid white; display: flex; justify-content: space-between; gap: 40px; flex-direction: column; } @media only screen and (max-width: 576px) { footer.footer .inner { padding-top: 35px; gap: 20px; } } @media only screen and (min-width: 768px) { footer.footer .inner { flex-direction: row; align-items: center; } } footer.footer .inner .footer-logo-link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; max-height: 100%; height: 25px; } footer.footer .inner .right { display: flex; gap: 20px; flex-direction: column; } @media only screen and (min-width: 768px) { footer.footer .inner .right { flex-direction: row; } } @media only screen and (max-width: 576px) { footer.footer .inner .right { gap: 10px; } } footer.footer .inner .right a.mail { text-decoration: underline 1px; } /************************************************************/ /***************** SINGLE POST *********************/ /************************************************************/ header h1 { font-size: 1.6em; padding-top: 10px; padding-bottom: 10px; border-bottom: 0.7px solid white; margin-bottom: 35px; font-weight: 500; } @media only screen and (min-width: 768px) { header h1 { font-size: 1.9em; padding-top: 0; } } .single-post { padding-bottom: 0; } @media only screen and (min-width: 768px) { .single-post article { padding: 0; } } @media only screen and (min-width: 768px) { .single-post .content { display: grid; grid-template-columns: 56% 32%; grid-template-rows: subgrid; gap: 30px; padding-bottom: 35px; } } @media only screen and (min-width: 1024px) { .single-post .content { gap: 12%; } } .single-post .content .media .video { line-height: 0; } .single-post .content .media .video iframe { max-width: 100%; height: auto; aspect-ratio: 16/9; display: block; } .single-post .content .media .video:first-child { margin-bottom: 10px; } .single-post .content .media .video:last-child { margin-top: 10px; } .single-post .content .images { display: grid; gap: 10px; } @media only screen and (min-width: 768px) { .single-post .content .images { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1024px) { .single-post .content .images { grid-template-rows: repeat(auto-fill); } } .single-post .content .images .img { line-height: 0%; } .single-post .content .images .img img { vertical-align: bottom; } .single-post .content .txt { font-weight: 300; padding: 25px 0 20px 0; transition: all .5s linear; } @media only screen and (min-width: 1024px) { .single-post .content .txt { padding: 20px 0; } } .single-post .content .txt #sticker.widget--sticky { animation-name: fadeInUp; animation-duration: 1s; margin-top: 20px; } .single-post .content .txt p { margin-bottom: 10px; font-size: 14px; } .single-post .content .txt a:hover { text-decoration: underline 1px; } @media only screen and (min-width: 768px) { .single-post .content .txt { padding: 0; } } .single-post .related-posts { border-top: 0.7px solid white; } .single-post .related-posts .inner { padding: 0 55px; } .single-post .related-posts h3 { font-size: 1.6em; font-weight: 500; margin: 35px 0 25px; } .single-post .related { position: relative; } .single-post .related .swiper-button-prev { left: -70px; width: 68px; height: 47px; } .single-post .related .swiper-button-prev::after { content: url("img/arrow_white.svg"); width: 48px; height: 47px; transform: rotate(180deg) scale(0.7); } .single-post .related .swiper-button-next { right: -50px; } .single-post .related .swiper-button-next::after { content: url("img/arrow_white.svg"); width: 48px; height: 47px; transform: scale(0.7); } .single-post .related .swiper a { position: relative; display: block; line-height: 0; overflow: hidden; } .single-post .related .swiper a:hover .tooltip { opacity: 1; } .single-post .related .swiper a:hover img { filter: blur(8px); transition: all .3s ease; } .single-post .related .swiper .tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 0.9em; transition: all .3s ease; opacity: 0; padding: 20px; line-height: 1.2; text-align: center; } @media only screen and (max-width: 576px) { .single-post .related .swiper .tooltip { opacity: 1; } } @media only screen and (min-width: 768px) { .single-post .related .swiper .tooltip { opacity: 0; } } @keyframes fadeInUp { from { opacity: .5; top: -10px; } to { opacity: 1; top: 0px; } } /************************************************************/ /***************** ABOUT US *********************/ /************************************************************/ .wp-block-columns { gap: 30px; } .wp-block-columns h2 { font-weight: 500; font-size: 1.6em; padding-top: 10px; margin-bottom: 20px; line-height: 1.2; } @media only screen and (min-width: 768px) { .wp-block-columns h2 { font-size: 1.9em; padding-top: 0; } } .ig_about_us { margin-top: 10px; display: flex; align-items: center; gap: 5px; font-size: 1.1em; font-weight: 400; } @media only screen and (min-width: 768px) { .ig_about_us { margin-top: 5px; } } .ig_about_us svg { width: 32px; height: 32px; } .ig_about_us svg path { fill: white; } #post-2 .wp-block-column { display: flex; justify-content: normal; flex-direction: column; } /************************************************************/ /***************** CONTACT *********************/ /************************************************************/ .contact { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; } @media only screen and (min-width: 768px) { .contact { grid-template-columns: 30% 40%; gap: 30px; } } .contact p:empty { display: none; } .contact .form-row { width: 100%; } .contact .form-row br { display: none; } .contact .wpcf7-form-control:not(.wpcf7-submit) { border-bottom: 0.7px solid white; width: 100%; } .contact textarea.wpcf7-form-control { border: 0.7px solid white; padding: 20px; max-height: 150px; } .contact textarea.wpcf7-form-control:focus::placeholder { color: transparent; } .contact .wpcf7-submit { float: right; padding: 10px 20px; border: 0.7px solid white; } .contact .col strong { font-weight: 600; } .contact .col p { margin-bottom: 20px; } .page p { font-weight: 300; } @media only screen and (max-width: 576px) { .scrollToTopBtn { width: 100%; display: flex !important; justify-content: flex-end; margin-top: 40px; } .scrollToTopBtn button { font-weight: 400; padding-right: 24px; position: relative; } .scrollToTopBtn button:hover { text-decoration: underline 1px; cursor: url("img/cursor-2.svg"), auto; } .scrollToTopBtn button::after { background-image: url("https://estudiopi.cl/wp-content/themes/estudiopi/img/drop_down_menu_errow_white.svg"); content: ""; display: inline-block; width: 7px; height: 13px; position: absolute; right: 4px; top: 8px; transform: translate3d(0, 0, 0) rotate(-90deg); } } @media only screen and (min-width: 768px) { .scrollToTopBtn { opacity: 0; display: none; position: fixed; right: -30px; bottom: 120px; padding: 10px; width: auto; text-transform: uppercase; z-index: 10000; transform: translate3d(0, 0, 0) rotate(-90deg); animation: fadeIn ease .5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .scrollToTopBtn button { position: relative; padding-left: 15px; display: block; } .scrollToTopBtn button:hover { text-decoration: underline 1px; cursor: url("img/cursor-2.svg"), auto; } .scrollToTopBtn button::after { background-image: url("https://estudiopi.cl/wp-content/themes/estudiopi/img/drop_down_menu_errow_white.svg"); content: ""; display: inline-block; width: 7px; height: 13px; position: absolute; left: 0px; bottom: 5px; } } .home .scrollToTopBtn, .archive .scrollToTopBtn { margin-top: 15px; } @media only screen and (min-width: 768px) { .mfp-arrow { transition: opacity .3s ease; opacity: 1; width: 68px; height: 47px; top: 50%; margin-top: -55px; } .mfp-arrow::before { border: none !important; } .mfp-arrow::after { border: none !important; content: url("img/arrow_white.svg") !important; display: block; width: 0; height: 0; position: absolute; left: 0; margin-top: 35px; margin-left: 35px; } .mfp-arrow.mfp-arrow-left { left: 86px; } .mfp-arrow.mfp-arrow-left::after { transform: rotate(180deg); top: 50px; } .mfp-arrow.mfp-arrow-right { right: 86px; } } .mfp-arrow.mfp-arrow-left::before { border-right: none !important; } .mfp-arrow.mfp-arrow-right::before { border-left: none !important; } .mfp-figure { position: relative; } @media only screen and (min-width: 768px) { button.mfp-close { text-indent: -1000px; overflow: hidden !important; text-align: left !important; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 1; position: absolute; top: 45px; right: -70px !important; width: 36px !important; height: 36px !important; } button.mfp-close::after { content: url("img/close_white.svg"); position: absolute; width: 34px; height: 34px; right: 0px; bottom: 0px; text-indent: 0; font-size: 17px; font-weight: 900; } } .loader { width: 12px; height: 12px; border-radius: 50%; display: block; margin: 15px auto; position: relative; color: #FFF; box-sizing: border-box; animation: animloader 1s linear infinite alternate; } @keyframes animloader { 0% { box-shadow: -38px -12px , -14px 0, 14px 0, 38px 0; } 33% { box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0; } 66% { box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0; } 100% { box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px; } } .load__wrapper { width: 100%; display: none; justify-content: center; padding: 20px 0 0 0; } .load__wrapper.visible { display: flex; } .grecaptcha-badge { visibility: hidden; } .page-id-9 .grecaptcha-badge { visibility: visible; } .page-id-2 .page p { font-size: 1.15em; } #loader-mobile { width: 100%; border: 0.7px solid white; padding: 0 20px; height: 45px; border-radius: 25px; display: flex; flex-direction: row; align-items: center; margin: 15px 0 0 0; position: relative; transition: all 0.2s; } #loader-mobile::after { position: absolute; right: 20px; top: 50%; margin-top: -8px; content: ''; background-image: url("img/plus.svg"); width: 16px; height: 16px; } #loader-mobile:hover { opacity: 0.5; } @media only screen and (min-width: 768px) { #loader-mobile { display: none; } } /*# sourceMappingURL=style.css.map */