/* Theme Name: Habitual Author: Francisco Mónaco Author URI: http://habitual.es/ Description: Tailor made theme developed specially for Habitual'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; } /*------------------------------------------ Transitions */ .simple-transition { transition-property: all; transition-duration: 0.4s; } .fancy-transition, .faqs .faq.active .question .icon svg { transition-property: all; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-duration: 0.4s; } /*------------------------------------------------------------------------------------ Titles */ .title-style, h3.elementor-heading-title { font-size: 18px; line-height: 1.4; } .title-style a { text-decoration: none; } .title-style.main-title, h1.elementor-heading-title { font-size: 24px; } .title-style.secondary-title, h2.elementor-heading-title { font-size: 20px; } .title-style.small-title, h4.elementor-heading-title { font-size: 16px; } .title-style.tiny-title, h5.elementor-heading-title, h6.elementor-heading-title { font-size: 12px; } /*------------------------------------------------------------------------------------ Links */ .link-style { text-decoration: none; cursor: pointer; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 0 11px; font-size: 10px; border-radius: 4px; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-flex; height: 40px; align-items: center; } .button-style .icon { display: block; width: 18px; margin-left: 50px; } /*------------------------------------------------------------------------------------ Text */ .upper { text-transform: uppercase; } .lower { text-transform: lowercase; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /*------------------------------------------------------------------------------------ Border */ .border { border-width: 1px; border-style: solid; } .border-2 { border-width: 2px; border-style: solid; } .border-3 { border-width: 3px; border-style: solid; } .border-top { border-top-width: 1px; border-top-style: solid; } .border-top-2 { border-top-width: 2px; border-top-style: solid; } .border-top-3 { border-top-width: 3px; border-top-style: solid; } .border-bottom { border-bottom-width: 1px; border-bottom-style: solid; } .border-bottom-2 { border-bottom-width: 2px; border-bottom-style: solid; } .border-bottom-3 { border-bottom-width: 3px; border-bottom-style: solid; } .border-left { border-left-width: 1px; border-left-style: solid; } .border-left-2 { border-left-width: 2px; border-left-style: solid; } .border-left-3 { border-left-width: 3px; border-left-style: solid; } .border-right { border-right-width: 1px; border-right-style: solid; } .border-right-2 { border-right-width: 2px; border-right-style: solid; } .border-right-3 { border-right-width: 3px; border-right-style: solid; } /*------------------------------------------------------------------------------------ Editor content */ .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-bottom * { margin-bottom: 0 !important; } .elementor-widget-container { font-size: 14px; line-height: 1.6; } .editor-content { font-size: 14px; line-height: 1.6; } .editor-content div, .editor-content p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; } .editor-content div:last-child, .editor-content p:last-child { margin-bottom: 0; } .editor-content a:hover { opacity: 0.6; } /*------------------------------------------------------------------------------------ General classes */ body { } .cover-image { background-size: cover; background-position: center; } section .inner { padding-top: 16px; } section .row { position: relative; } .ghost-link { position: absolute; top: -90px; } /*------------------------------------------------------------------------------------ Interface */ .mobile-nav { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; } .mobile-nav .background-wrapper { position: absolute; height: 100%; width: 100%; } .mobile-nav .background-wrapper .background-color { position: absolute; height: 100%; width: 100%; opacity: 0.7; } .mobile-nav .background-wrapper .background { position: absolute; height: 100%; width: 200vw; mix-blend-mode: multiply; } .mobile-nav .content { position: relative; display: flex; justify-content: space-between; } .mobile-nav .content .logo { padding: 24px 0; } .mobile-nav .content .logo .link { display: block; height: 22px; } .mobile-nav .content .logo svg { height: 100%; width: auto; } .mobile-nav .content .buttons { display: flex; align-items: center; } .mobile-nav .content .buttons .button-wrapper { margin-left: 12px; } .mobile-nav .content .buttons .button-wrapper .button { font-size: 12px; text-transform: none; padding: 6px 8px 8px; border-radius: 4px; height: auto; } .language-selector-mobile { position: absolute; top: 20px; right: 20px; z-index: 1; } .language-selector-mobile .item { font-size: 12px; text-transform: uppercase; text-decoration: none; } .language-selector-mobile .separator { padding: 0 8px; } /*------------------------------------------------------------------------------------ Footer */ footer { padding-bottom: 70px; } .rc-mf .rc-mf-mobile .item { font-size: 18px; line-height: 1.4; } .rc-mf .rc-mf-mobile .item a { text-decoration: none; } .rc-mf .rc-mf-mobile .restaurant .name { font-size: 14px; margin-bottom: 6px; } .rc-mf .rc-mf-mobile .restaurant .links { padding-top: 4px; } .rc-mf .rc-mf-mobile .restaurant .links .item { margin-bottom: 4px; } .rc-mf .rc-mf-mobile .restaurant .links .item .link { display: flex; justify-content: space-between; align-items: center; width: 100%; } .rc-mf .rc-mf-mobile .restaurant .links .item .icon { width: 8px; display: block; padding-top: 4px; } .rc-mf .rc-mf-mobile .row-3 { display: flex; } .rc-mf .rc-mf-mobile .row-3 .rc-col { width: 50%; } /*------------------------------------------------------------------------------------ Maintenance */ .maintenance-mode { height: 100vh; } .maintenance-mode .wrapper { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .maintenance-mode .wrapper .logo { margin-bottom: 80px; } .maintenance-mode .wrapper .description { margin-bottom: 16px; } .maintenance-mode .wrapper .timer { margin-top: 100px; } .maintenance-mode .wrapper .timer .countdown { margin: 20px 0; display: flex; } .maintenance-mode .wrapper .timer .countdown .item { margin: 0 4px; height: 54px; width: 72px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; } .maintenance-mode .wrapper .timer .countdown .item .number { font-size: 28px; } .maintenance-mode .wrapper .timer .countdown .item .text { text-transform: uppercase; font-size: 10px; padding-bottom: 2px; } /*------------------------------------------------------------------------------------ Pages */ /*------------------------------------ Home */ /* Mobile title */ .home-title { } /* Landing */ .home-landing .plates-slider .item .image { height: 70vw; } .home-landing .plates-slider .item .image .wrapper { display: flex; justify-content: flex-end; align-items: flex-end; height: 100%; padding-left: 33%; } .home-landing .plates-slider .item .image .wrapper .caption { position: relative; padding: 10px 14px; } .home-landing .plates-slider .item .image .wrapper .caption .background { position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .home-landing .plates-slider .item .image .wrapper .caption .text { position: relative; font-size: 14px; } /* Location */ .home-location { position: relative; min-height: 50vh; } .home-location .background-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; } .home-location .background-wrapper .background { position: absolute; top: 0; right: 0; width: 100%; height: 100%; width: 150vw; mix-blend-mode: multiply; } .home-location .opening-time .twin-action { display: flex; } .home-location .opening-time .twin-action .button { flex: 1; justify-content: space-between; } /* About */ .home-about { position: relative; padding-bottom: 60px; } .home-about .background-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; } .home-about .background-wrapper .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 150vw; mix-blend-mode: multiply; opacity: 0.5; background-position: 106% center; } .home-about .action { margin-top: 100px; } /* Faqs */ .faqs .faq { cursor: pointer; } .faqs .faq .question .icon { padding-top: 5px; } .faqs .faq .question .icon svg { max-width: 16px; } .faqs .faq .answer { max-height: 0; overflow: hidden; } .faqs .faq.active .question .icon svg { transform: rotate(180deg); } .faqs .faq.active .answer { max-height: 220px; overflow-y: scroll; } /*------------------------------------ Menu */ /* Nav */ .menu-pages-nav { display: flex; } .menu-pages-nav .item { margin-right: 20px; } .menu-pages-nav .item a { text-decoration: none; font-size: 14px; position: relative; } .menu-pages-nav .item.active a:after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; } .menu-sections-nav { position: sticky; top: 0; z-index: 99; } .menu-sections-nav .wrapper { display: flex; flex-wrap: wrap; } .menu-sections-nav .item { margin-right: 16px; } .menu-sections-nav .item a { text-decoration: none; font-size: 12px; position: relative; vertical-align: middle; text-transform: uppercase; } .menu-sections-nav .item.active a:after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; } /* Menu */ .menu-wrapper .section { position: relative; } .menu-wrapper .items-wrapper .name { font-size: 14px; line-height: 1.4; } .menu-wrapper .items-wrapper .price { font-size: 14px; line-height: 1.4; } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Titles */ .title-style, h3.elementor-heading-title { font-size: 22px; } .title-style.main-title, h1.elementor-heading-title { font-size: 32px; } .title-style.secondary-title, h2.elementor-heading-title { font-size: 28px; } .title-style.small-title, h4.elementor-heading-title { font-size: 17px; } .title-style.tiny-title, h5.elementor-heading-title, h6.elementor-heading-title { font-size: 13px; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 20px 12px; font-size: 12px; } /*------------------------------------------------------------------------------------ Editor content */ .elementor-widget-container { font-size: 15px; } .editor-content { font-size: 15px; } .editor-content div, .editor-content p { font-size: 15px; margin-bottom: 14px; } /*------------------------------------------------------------------------------------ General classes */ section .inner { padding-top: 18px; } .ghost-link { top: -200px; } .normalize-interface { padding-top: calc(var(--interface-height) + var(--padding)); } /*------------------------------------------------------------------------------------ Interface */ .main-nav { position: fixed; top: 0; left: 0; width: 100%; height: 260px; min-height: 88px; z-index: 100; } .main-nav .background-wrapper { position: absolute; height: 100%; width: 100%; } .main-nav .background-wrapper .background-color { position: absolute; height: 100%; width: 100%; opacity: 0.7; } .main-nav .background-wrapper .background { position: absolute; height: 100%; width: 150vw; mix-blend-mode: multiply; } .main-nav .content { position: relative; height: 100%; } .main-nav .content .buttons { display: flex; justify-content: flex-end; width: 100%; align-items: center; position: absolute; width: calc(100% - var(--padding) - var(--padding)); left: var(--padding); top: 24px; } .main-nav .content .buttons .button-wrapper { margin-left: 24px; } .main-nav .content .buttons .button-wrapper .button { font-size: 15px; text-transform: none; padding: 10px 12px 12px; border-radius: 4px; } .main-nav .content .identity { display: flex; align-items: center; position: absolute; width: calc(100% - var(--padding) - var(--padding)); left: var(--padding); bottom: 24px; } .main-nav .content .logo { width: 600px; min-width: 242px; } .main-nav .content .logo .link { display: block; } .main-nav .content .slogan { width: calc(100% - 600px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; } .language-selector { position: absolute; top: 40px; left: 30px; z-index: 101; } .language-selector .item { font-size: 14px; text-transform: uppercase; text-decoration: none; } .language-selector .separator { padding: 0 8px; } /*------------------------------------------------------------------------------------ Footer */ footer { padding-bottom: 70px; } .rc-mf .rc-mf-laptop .separator { margin: 24px 0; } .rc-mf .rc-mf-laptop .rc-row { display: flex; flex-wrap: wrap; } .rc-mf .rc-mf-laptop .rc-row .rc-col { width: calc(100% / 6); padding-right: 24px; } .rc-mf .rc-mf-laptop .rc-row .rc-col:last-child { padding-right: 0; } .rc-mf .rc-mf-laptop .item { font-size: 14px; line-height: 1.4; } .rc-mf .rc-mf-laptop .item a { text-decoration: none; } .rc-mf .rc-mf-laptop .restaurant .name { font-size: 12px; margin-bottom: 6px; } .rc-mf .rc-mf-laptop .restaurant .links { padding-top: 4px; } .rc-mf .rc-mf-laptop .restaurant .links .item { margin-bottom: 4px; } .rc-mf .rc-mf-laptop .restaurant .links .item .link { display: flex; justify-content: space-between; align-items: center; width: 100%; } .rc-mf .rc-mf-laptop .restaurant .links .item .icon { width: 8px; display: block; padding-top: 4px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .name { min-height: 46px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .address { min-height: 100px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .web-wrapper { min-height: 22px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .phone-wrapper { min-height: 40px; } .rc-mf .rc-mf-laptop .row-1 .rc-col-1 { width: calc((100% / 6) * 2); } .rc-mf .rc-mf-laptop .row-1 .rc-col-1 .signature { padding: 20% 30% 0 0; } .rc-mf .rc-mf-laptop .row-1 .rc-col-1 .signature img { max-width: 240px; } /*------------------------------------------------------------------------------------ Pages */ /*------------------------------------ Home */ /* Landing */ .home-landing { padding-top: calc(var(--interface-height)); } .home-landing .inner { padding-top: 0; } .home-landing .col-1 { width: 50%; display: flex; flex-direction: column; justify-content: center; } .home-landing .col-2 { width: 50%; padding-top: 0; } .home-landing .plates-slider .item .image { height: 28vw; } /* Location */ .home-location .col-1 { width: 50%; } .home-location .col-2 { width: 50%; } .home-location .separator-wrapper > .separator { height: 100%; } /* About */ .home-about { position: relative; padding-bottom: 60px; } .home-about .background-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; } .home-about .background-wrapper .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 110vw; mix-blend-mode: multiply; opacity: 0.7; background-position: 130% center; } .home-about .action { margin-top: 100px; } /*------------------------------------ Menu */ /* Nav */ .menu-pages-nav .item a { font-size: 18px; } .menu-sections-nav { top: calc(var(--interface-reduced-height)); } .menu-sections-nav .item { margin-right: 16px; } .menu-sections-nav .item a { font-size: 16px; } /* Menu */ .menu-wrapper.big-version { display: flex; } .menu-wrapper.big-version .col-1 { width: 50%; padding-right: var(--half-padding); } .menu-wrapper.big-version .col-2 { width: 50%; padding-left: var(--half-padding); } .menu-wrapper .section { position: relative; } .menu-wrapper .items-wrapper .name { font-size: 14px; line-height: 1.4; } .menu-wrapper .items-wrapper .price { font-size: 14px; line-height: 1.4; } .menu-rices .section { max-width: 900px; margin: 0 auto var(--padding); padding: var(--half-padding) 0; } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Titles */ .title-style, h3.elementor-heading-title { font-size: 26px; } .title-style.main-title, h1.elementor-heading-title { font-size: 36px; } .title-style.secondary-title, h2.elementor-heading-title { font-size: 32px; } .title-style.small-title, h4.elementor-heading-title { font-size: 18px; } .title-style.tiny-title, h5.elementor-heading-title, h6.elementor-heading-title { font-size: 14px; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 24px 18px; font-size: 14px; } /*------------------------------------------------------------------------------------ Editor content */ .elementor-widget-container { font-size: 16px; } .editor-content { font-size: 16px; } .editor-content div, .editor-content p { font-size: 16px; margin-bottom: 16px; } /*------------------------------------------------------------------------------------ General classes */ section .inner { padding-top: 0; } .ghost-link { top: -200px; } /*------------------------------------------------------------------------------------ Interface */ .main-nav { height: 280px; min-height: 92px; } .main-nav .background-wrapper .background { width: 150vw; } .main-nav .content .buttons { top: 26px; } .main-nav .content .buttons .button-wrapper { margin-left: 24px; } .main-nav .content .buttons .button-wrapper .button { font-size: 16px; padding: 12px 16px 14px; } .main-nav .content .identity { bottom: 26px; } .main-nav .content .logo { width: 700px; min-width: 242px; } .main-nav .content .slogan { width: calc(100% - 700px); } .language-selector { top: 50px; left: 50px; } .language-selector .item { font-size: 16px; } .language-selector .separator { padding: 0 10px; } /*------------------------------------------------------------------------------------ Footer */ .rc-mf .rc-mf-laptop .rc-row .rc-col { padding-right: 30px; } /*------------------------------------------------------------------------------------ Pages */ /*------------------------------------ Home */ /* Landing */ .home-landing .plates-slider .item .image { height: 32vw; } /* About */ .home-about { padding-bottom: 60px; } .home-about .background-wrapper .background { width: 110vw; opacity: 0.5; background-position: 130% center; } .home-about .action { margin-top: 100px; } /* Faqs */ .faqs .col { width: 50%; } .faqs .col-1 { padding-right: var(--half-padding); } .faqs .col-2 { padding-left: var(--half-padding); } .faqs .faq { padding: 30px 0; } .faqs .faq .question .title { font-size: 20px; } .faqs .faq .answer .wrapper { padding-top: 10px; } .faqs .faq .answer .wrapper p { font-size: 20px; } /*------------------------------------ Menu */ /* Title */ .menu-plates-title { padding-bottom: 30px; } .menu-drinks-title { padding-bottom: 30px; } /* Nav */ .menu-pages-nav { padding-top: 30px; } .menu-pages-nav .item { margin-right: 22px; } .menu-pages-nav .item a { font-size: 20px; } .menu-sections-nav { padding-top: 26px; padding-bottom: 30px; } .menu-sections-nav .item { margin-right: 34px; } .menu-sections-nav .item a { font-size: 16px; } /* Menu */ .menu-wrapper .items-wrapper .item { padding: 30px 0; } .menu-wrapper .items-wrapper .name { font-size: 16px; } .menu-wrapper .items-wrapper .price { font-size: 16px; } .menu-wrapper .sub-section-title { padding-bottom: 24px; } } @media(min-width: 1400px){ /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Titles */ .title-style, h3.elementor-heading-title { font-size: 28px; } .title-style.main-title, h1.elementor-heading-title { font-size: 40px; } .title-style.secondary-title, h2.elementor-heading-title { font-size: 32px; } .title-style.small-title, h4.elementor-heading-title { font-size: 20px; } .title-style.tiny-title, h5.elementor-heading-title, h6.elementor-heading-title { font-size: 16px; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { padding: 28px 20px; font-size: 16px; } /*------------------------------------------------------------------------------------ Editor content */ .elementor-widget-container { font-size: 18px; } .editor-content { font-size: 18px; } .editor-content div, .editor-content p { font-size: 18px; margin-bottom: 20px; } /*------------------------------------------------------------------------------------ Interface */ .main-nav { height: 280px; min-height: 92px; } .main-nav .background-wrapper .background { width: 150vw; } .main-nav .content .buttons .button-wrapper .button { font-size: 16px; padding: 12px 18px 14px; } .language-selector { left: 60px; } /*------------------------------------------------------------------------------------ Footer */ footer { padding-bottom: 70px; } .rc-mf .rc-mf-laptop .separator { margin: 30px 0; } .rc-mf .rc-mf-laptop .rc-row .rc-col { padding-right: 50px; } .rc-mf .rc-mf-laptop .item { font-size: 15px; } .rc-mf .rc-mf-laptop .restaurant .name { font-size: 13px; margin-bottom: 8px; } .rc-mf .rc-mf-laptop .restaurant .links { padding-top: 6px; } .rc-mf .rc-mf-laptop .restaurant .links .item { margin-bottom: 6px; } .rc-mf .rc-mf-laptop .restaurant .links .item .icon { width: 8px; padding-top: 5px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .name { min-height: 50px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .address { min-height: 110px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .web-wrapper { min-height: 24px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .phone-wrapper { min-height: 44px; } /*------------------------------------------------------------------------------------ Pages */ /* Menu */ .menu-wrapper .items-wrapper .name { font-size: 18px; } .menu-wrapper .items-wrapper .price { font-size: 18px; } } @media(min-width: 1500px){ /* -------------------------------------------- */ /*------------------------------------------------------------------------------------ Editor content */ .elementor-widget-container { font-size: 20px; } .editor-content { font-size: 20px; } .editor-content div, .editor-content p { font-size: 20px; margin-bottom: 22px; } /*------------------------------------------------------------------------------------ Interface */ .language-selector { left: 80px; } /*------------------------------------------------------------------------------------ Footer */ .rc-mf .rc-mf-laptop .rc-row .rc-col { padding-right: 60px; } .rc-mf .rc-mf-laptop .item { font-size: 16px; } .rc-mf .rc-mf-laptop .restaurant .name { font-size: 14px; margin-bottom: 10px; } .rc-mf .rc-mf-laptop .restaurant .links { padding-top: 8px; } .rc-mf .rc-mf-laptop .restaurant .links .item { margin-bottom: 8px; } .rc-mf .rc-mf-laptop .restaurant .links .item .icon { width: 8px; padding-top: 6px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .name { min-height: 60px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .address { min-height: 120px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .web-wrapper { min-height: 26px; } .rc-mf .rc-mf-laptop .row-1 .rc-col .phone-wrapper { min-height: 48px; } /*------------------------------------------------------------------------------------ Pages */ /* Location */ .home-location .address .pre-title { margin-bottom: 0; } .home-location .opening-time { display: flex; flex-direction: column; justify-content: space-between; } .home-location .opening-time .opening-pretitle { margin-bottom: 20px; } .home-location .separator { margin: 0; padding: 0; } .home-location .booking-alternatives { padding: 0; } /* About */ .home-about .description { padding: 0; } /* Menu */ .menu-wrapper .items-wrapper .name { font-size: 20px; } .menu-wrapper .items-wrapper .price { font-size: 20px; } .menu-rices .availability { margin-bottom: 0; } .menu-rices .section { margin-bottom: 0; } } @media(hover: hover) { /* -------------------------------------------- */ }