/* Theme Name: Hello Elementor Child Theme URI: https://apollotec.pt Description: Child theme of Hello Elementor for customizations Author: The Elementor Theme Author URI: https://wordpress.org/themes/hello-elementor/ Template: hello-elementor Version: 1.0.0 */ /** * @project Famatour * @author Apollotec * @version 1.0.0 * @license MIT */ /*------------------------------------------------------------------*\ TABLE OF CONTENTS ----------------- 1. CONFIG & HELPERS - Variables - Functions & Mixins (Sass/Less) - Helper Classes (Utilities) - Visibility Classes 2. BASE STYLES - Reset/Normalize - Typography Styles - Global Styles (body, html, links) 3. LAYOUT - Grid System / Container - Header - Footer - Navigation - Sidebar - Forms - Slider - Banners 4. COMPONENTS - Buttons - Cards - Alerts - Modals - Carrousel 5. PAGE-SPECIFIC STYLES - Frontpage - Archive Page - Blog - Contact - Reservations - Single Post 6. MEDIA QUERIES (Responsiveness) \*------------------------------------------------------------------*/ /*------------------------------------------------------------------*\ 1. CONFIG & HELPERS \*------------------------------------------------------------------*/ /** * CSS Variables (Custom Properties) for colors, fonts, spacing, etc. */ /* p { margin-block-start: 30px; } */ /** * Helper Classes (Utilities) for small, reusable tasks. * ex: .text-center, .margin-top-large, .hidden */ /** * Visibility Classes for conditional display of elements. */ body.hide-section-hidden-gem .section-hidden-gem { display: none !important; } body.hide-section-terceira-ilha .section-terceira-ilha { display: none !important; } body.hide-section-quarta-ilha .section-quarta-ilha { display: none !important; } body.hide-section-quinta-ilha .section-quinta-ilha { display: none !important; } /*------------------------------------------------------------------*\ 2. BASE STYLES \*------------------------------------------------------------------*/ /** * Reset/Normalize to ensure consistency across browsers. */ html, body { overflow-x: hidden; } a { color: #6B7280; } a:hover { color: #133571; } /** * Base styles for typography (h1, h2, p, etc.). */ /** * Styles for global elements like , , , etc. */ /*------------------------------------------------------------------*\ 3. LAYOUT \*------------------------------------------------------------------*/ /** * Styles for the main page layout elements. */ /* Header */ .elementor-nav-menu .ft-menu-label .elementor-item { background-color: #133571; color: #fff !important; padding: 5px 20px 5px 20px; border-radius: 10px; } /* Banners */ #ft-banner .cta-basic.bg-img { height: 280px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Footer */ #ft-footer-headline h2 { position: relative; margin-top: 0; border: none; } #ft-footer-headline h2::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 103px; height: 1px; background: #222; } /* Slider */ div#n2-ss-2 .n2-ss-slider-2{ border-radius:44px!important; } /*------------------------------------------------------------------*\ 4. COMPONENTS \*------------------------------------------------------------------*/ /** * Styles for reusable UI components. * Each component should be treated as an independent block. */ /* Card Component */ .ft-hover-video { height: 576px; } .ft-hover-video .elementor-background-video-container { opacity: 0; transition: opacity .4s ease; } .ft-hover-video:hover .elementor-background-video-container { opacity: 1; cursor: pointer; } .ft-hover-video .elementor-background-video-container::before { background: rgba(0, 0, 0, 0.7); } /* .ft-item-grid:hover::before { background-color: rgba(0, 0, 0, 0.7); border-radius: 20px; cursor: pointer; } */ .ft-item-grid .elementor-heading-title { transition: color .25s ease; } .ft-item-grid:hover .elementor-heading-title { color: #fff !important; cursor: pointer; } /* .eael-grid-post:nth-of-type(1) .eael-entry-thumbnail img { height: 592px; } */ /* Button Component */ #ft-search-button { background-color: #133571; font-family: "Unytour", Sans-serif; font-size: 1rem; font-weight: 700; line-height: 0.75rem; border-radius: 40px 40px 40px 40px; width: 275px; height: 55px; display: flex; align-items: center; justify-content: center; } #ft-button.elementor-button, #ft-banner .cta-button, #ft-button .elementor-button, .metform-submit-btn { width: 275px; height: 55px; display: flex; align-items: center; justify-content: center; } .ft-button .eael-post-elements-readmore-btn { width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; } /* Search Component */ .ft-search .e-search .e-search-form { flex-direction: column; } @media (min-width: 1024px) { .ft-search .e-search .e-search-form { flex-direction: row; } } .ft-search .e-search-input-wrapper { margin-bottom: 20px; } .ft-search .e-search .e-search-submit { width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; margin-left: 0px; } @media (min-width: 1024px) { .ft-search .e-search .e-search-submit { width: 275px; margin-left:20px; } } .e-search-results-container .e-search-nothing-found-message { display: flex; flex-direction: column; align-items: start; } /* Tag Component */ .ft-tag { background-color: #133571; border-radius: 8px; padding: 0 0.875rem; /* position: absolute; left: 40px; top: 30px; */ } /* Video Component */ .ft-video .elementor-video { height: 60vh !important; } @media (min-width: 1024px) { .ft-video .elementor-video { height: 100%; } } /*------------------------------------------------------------------*\ 5. PAGE-SPECIFIC STYLES \*------------------------------------------------------------------*/ /** * Styles that are applied only to specific pages and do not * fit into reusable components. */ /* HomePage */ #ft-blog .eael-grid-post:nth-of-type(1) .eael-entry-thumbnail img { min-height: 280px; } @media (min-width: 1024px) { #ft-blog .eael-grid-post:nth-of-type(1) .eael-entry-thumbnail img { min-height: 725px; } } .ft-main-title .elementor-icon-box-title span { font-weight: 400; } /* Archive Destinos Page */ @media (min-width: 1024px) { .ft-full-banner .ft-container { padding: 0px; } .ft-grid-col3-items .elementor-loop-container { display: flex; flex-wrap: nowrap; } .ft-grid-col3-items .elementor-loop-container .e-loop-item:nth-of-type(1) { width: 40%; } .ft-grid-col3-items .elementor-loop-container .e-loop-item:nth-of-type(2) { width: 30%; } .ft-grid-col3-items .elementor-loop-container .e-loop-item:nth-of-type(3) { width: 30%; } .ft-grid-col2-items .elementor-loop-container { display: flex; flex-wrap: nowrap; } .ft-grid-col2-items .elementor-loop-container .e-loop-item:nth-of-type(1) { width: 60%; } .ft-grid-col2-items .elementor-loop-container .e-loop-item:nth-of-type(2) { width: 40%; } .ft-full-col2-items .elementor-loop-container .e-loop-item:nth-of-type(1) .ft-item-grid{ height: 576px; } } .ft-items-list .elementor-icon-list-items li::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: -24px; width: 2px; border-left: 2px dashed #FFFFFF; opacity: 0.5; z-index: 0; } .ft-items-list .elementor-icon-list-items li:last-child::before { display: none; } .ft-items-list .elementor-icon-list-items li .elementor-icon-list-icon { position: absolute; left: 0; top: 0; z-index: 1; color: #133571; font-size: 18px; } .ft-items-list .elementor-icon-list-items li .elementor-icon-list-text { margin-left: 40px; } /* Blog Page */ #ft-blog .eael-grid-post-excerpt { padding-top: 1rem; padding-bottom: 0.5rem; } .ft-post-nav .elementor-post-navigation .elementor-post-navigation__link { padding: 0 1.2rem; } /* Reservations Page */ .contact-via-email a { color: #133571 !important; font-weight: 600; text-decoration: underline;} /* Single Post */ .single-post .metform-form-main-wrapper { background-color: #f2f2f2; padding: 10px; } @media (min-width: 1024px) { .single-post .metform-form-main-wrapper { padding: 50px; } } /* Inquiry form */ .mf-input-wrapper .mf_select__control { position: relative; } .mf-input-wrapper .mf_select__menu { position: relative; z-index: 10; } /*------------------------------------------------------------------*\ 6. MEDIA QUERIES (Responsiveness) \*------------------------------------------------------------------*/ /** * Media queries organized from smallest to largest (mobile-first). */ /* Medium Screens (e.g., Tablets) */ @media (min-width: 768px) { /* Your tablet styles here */ } /* Large Screens (e.g., Desktops) */ @media (min-width: 1024px) { /* Your desktop styles here */ } /* Extra Large Screens (e.g., Larger Desktops) */ @media (min-width: 1200px) { /* Your larger desktop styles here */ }