/* Theme Name: Yoga Brú Author: Francisco Mónaco Author URI: http://franciscomonaco.com/ Description: Tailor made theme developed specially for Yoga Brú'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; } 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; } /*------------------------------------------------------------------------------------ Global */ .eapps-instagram-feed-header-user-picture { border-radius: 1000px !important; } /*------------------------------------------------------------------------------------ Interface */ .main-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 100; } .main-nav .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .main-nav a { text-decoration: none; } .main-nav .inner { position: relative; display: flex; justify-content: space-between; align-items: center; } .main-nav .inner .logo .link { display: block; height: 36px; } .main-nav .inner .logo .link svg { height: 100%; width: auto; } .main-nav .controls { display: flex; } .main-nav .controls .buttons-wrapper { display: flex; } .main-nav .actions { display: flex; } .main-nav .actions .button { font-size: 12px; padding: 0 14px; } .main-nav .actions .button .icon { height: 12px; width: 12px; } .main-nav .actions .item:last-child { margin-left: 12px; } .main-nav .menu-button { margin-left: 24px; display: flex; align-items: center; } .main-nav .menu-button .button-wrapper { width: 30px; height: 30px; position: relative; } .main-nav .menu-button .button-wrapper .line { width: 20px; height: 1px; position: absolute; left: 50%; margin-left: -10px; top: 50%; transform-origin: center; } .main-nav .menu-button .button-wrapper .line-1 { margin-top: -4px; } .main-nav .menu-button .button-wrapper .line-2 { margin-top: 4px; } .menu-is-open .main-nav .menu-button .button-wrapper .line-1 { margin-top: 0; transform: rotate(45deg); } .menu-is-open .main-nav .menu-button .button-wrapper .line-2 { margin-top: 0; transform: rotate(-45deg); } .mobile-menu { position: fixed; bottom: 0; left: 0; width: 100%; height: calc(100% - var(--interface-height)); z-index: 100; opacity: 0; pointer-events: none; } .menu-is-open .mobile-menu { opacity: 1; pointer-events: all; } .mobile-menu a { text-decoration: none; } .mobile-menu .wrapper { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 48px; padding-bottom: 80px; } .mobile-menu .links .item { margin-bottom: 10px; } .mobile-menu .links .item .link { font-size: 30px; } .mobile-menu .buttons-wrapper { display: flex; gap: var(--spacing); } .mobile-menu .actions .item { margin-bottom: 12px; flex: 1; } .mobile-menu .actions .item .button { width: 100%; display: flex; justify-content: center; } /*------------------------------------------------------------------------------------ Footer */ footer a { text-decoration: none; } footer .link-columns { display: flex; flex-wrap: wrap; } footer .link-columns .column { width: 50%; } footer .link-columns .column .title { margin-bottom: 18px; } footer .link-columns .column .item { margin-bottom: 12px; opacity: 0.6; } footer .link-columns .column .item.indented { padding-left: 8px; display: none; } footer .link-columns .column .item.indented .link:before { content: '- '; } footer .copyright { opacity: 0.6; } /*------------------------------------------------------------------------------------ Repeaters */ .retreat-feed .feed { } .retreat-repeater { position: relative; } .retreat-repeater .image { top: 0; left: 0; height: 280px; position: relative; } .retreat-repeater .image img { width: 100%; height: 100%; } .retreat-repeater .image .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000014; } .retreat-repeater .image .overlay .date { margin-bottom: 4px; } /*------------------------------------------------------------------------------------ Workshops */ .workshop-repeater { position: relative; margin-bottom: calc(var(--spacing) * 2); } .workshop-repeater .image { top: 0; left: 0; height: 280px; position: relative; } .workshop-repeater .image img { width: 100%; height: 100%; } .workshop-repeater .image .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000014; } .workshop-repeater .image.no-image .overlay { background-color: #E8BC35; } .workshop-repeater .image .overlay .title h2 { font-size: 40px; } .workshop-repeater .image .overlay .date { margin-bottom: 4px; } .workshop-repeater .image .overlay .date { margin-bottom: 4px; } .workshop-repeater .content .title h3 { text-transform: uppercase; } /*------------------------------------------------------------------------------------ Modules */ .info-points .items { display: flex; flex-direction: column; gap: var(--spacing); } .info-points .items .item .title .text { font-size: 20px; } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Interface */ .main-nav { padding: 20px 0; } .main-nav .inner .logo .link { height: 40px; } .main-nav .controls .links-wrapper { display: flex; gap: 24px; } .main-nav .links { display: flex; margin-right: 24px; align-items: center; } .main-nav .links .link { font-size: 14px; } .main-nav .controls .buttons-wrapper { gap: 12px; } .main-nav .actions { display: flex; } .main-nav .actions .button { font-size: 13px; padding: 0 16px; height: 46px; } .main-nav .actions .item:last-child { margin-left: 0; } .main-nav .menu-button { display: none; } /*------------------------------------------------------------------------------------ Footer */ footer .inner { padding-top: var(--padding); padding-bottom: var(--padding); } footer .info-wrapper { display: flex; gap: var(--padding); } footer .link-columns { width: 60%; } footer .link-columns > * { flex: 1; } footer .link-columns .column .title { margin-bottom: 22px; } footer .link-columns .column .item { margin-bottom: 8px; } footer .link-columns .column .item.indented { padding-left: 9px; display: block; } footer .link-columns .column .item.indented .link:before { content: '- '; } footer .footer-card { width: 40%; } footer .footer-card svg { width: 70%; margin-left: auto; } footer .copyright { display: flex; justify-content: space-between; } /*------------------------------------------------------------------------------------ Repeaters */ .retreat-feed > .description { width: calc(50% - var(--half-spacing)); } .retreat-feed .feed { display: flex; gap: var(--spacing); } .retreat-repeater { width: calc(50% - var(--half-spacing)); } .retreat-repeater .image { height: 320px; } .retreat-repeater .image .overlay .date { margin-bottom: 6px; } .retreat-repeater .image .overlay .date { margin-bottom: 6px; } /*------------------------------------------------------------------------------------ Modules */ .info-points .items { flex-direction: row; justify-content: center; } .info-points .items .item .title .text { font-size: 22px; } .retreat-content .floater { position: sticky; top: calc(var(--spacing) + var(--interface-height)); } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Interface */ .main-nav { padding: 32px 0; } .main-nav .inner .logo .link { height: 48px; } .main-nav .controls .links-wrapper { gap: 36px; } .main-nav .links { margin-right: 60px; } .main-nav .links .link { font-size: 17px; } .main-nav .controls .buttons-wrapper { gap: 24px; } .main-nav .actions .button { font-size: 16px; padding: 0 26px; height: 50px; } /*------------------------------------------------------------------------------------ Repeaters */ .retreat-repeater .image { height: 360px; } /*------------------------------------------------------------------------------------ Modules */ .info-points .items { flex-direction: row; justify-content: center; } .info-points .items .item .title .text { font-size: 24px; } } @media(min-width: 1376px){ /* -------------------------------------------- */ } @media(hover: hover) { /* -------------------------------------------- */ }