/*! Theme Name: quarty child Theme URI: https://bslthemes.com/ Author: bslthemes Author URI: https://themeforest.net/user/bslthemes Description: Quarty - Architecture & Interior WordPress Theme Version: 1.0.1 License: General Public License License URI: http://www.gnu.org/licenses/gpl.html Template: quarty Text Domain: quarty-child Tags: full-width-template, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, theme-options */ /* Logo width (top bar + preloader) */ .qrt-app .qrt-top-bar .qrt-logo { width: 200px; } /* Pe mobil tema il duce la 80px; 200px il scotea peste bara si peste burger. Il tinem mai mic, dar lizibil (logo-ul are si textul "PERPETUUM"). */ @media (max-width: 768px) { .qrt-app .qrt-top-bar .qrt-logo { width: 130px; } } .qrt-app .qrt-preloader .qrt-preloader-content .qrt-logo { width: 200px; } /* ----- Text vertical "Mere treaba!" pe banda din stanga (global, pe toate paginile) ----- */ .qrt-left-bar { position: relative; } /* Titlul paginii il calcula tema din 100vh (bottom: calc(100vh - 285px)), deci pe ecrane mici cobora peste slogan. Il ancoram de sus, pe aceeasi poziție pe care o avea pe ecrane mari (centru la 240px de sus, inaltime 90px). */ .qrt-app .qrt-left-bar .qrt-current-page-title, .admin-bar .qrt-app .qrt-left-bar .qrt-current-page-title { top: 195px; bottom: auto; } /* Sloganul nu mai e centrat pe toata banda: sta in spatiul liber dintre titlu si iconitele social, cu font care scade pe ecrane joase. Asa titlurile lungi (ex. "Distribuim produse de amenajări") nu mai intra peste el. */ .qrt-left-bar::after { content: "Mere treaba!"; position: absolute; top: 380px; bottom: 110px; left: 50%; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; pointer-events: none; display: flex; align-items: center; justify-content: center; font-family: "Josefin Sans", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; font-size: clamp(20px, 3.4vh, 38px); background: linear-gradient(180deg, #8bd45f, #2e7d1f); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sub ~680px inaltime nu mai rmne loc pentru el; pastram doar titlul. */ @media (max-width: 992px), (max-height: 680px) { .qrt-left-bar::after { display: none; } } /* ----- Fara ecran de incarcare ----- 1. Preloader-ul (logo + bara + procent) nu se mai afiseaza. Markup-ul e in quarty/header.php, deci il ascundem din CSS. 2. main.js pune la document.ready clasa "is-animating" pe , care in style.css ascunde conținutul (opacity 0, cu delay de 1s) si translateaza meniul si bannerele; clasa se scoate abia la finalul preloader-ului (~2,6s). Preloader-ul acoperea toata secventa. Fara el, se vedea pagina cum apare, dispare si reapare - de aceea neutralizam si efectele clasei. Regulile se aplica doar cat timp exista clasa, deci nu afecteaza animatiile normale ale paginii (Swiper etc.). */ .qrt-preloader { display: none !important; } html.is-animating .qrt-dynamic-content { opacity: 1 !important; transition: none !important; } html.is-animating .qrt-menu .qrt-dynamic-menu { opacity: 1 !important; pointer-events: auto !important; transition: none !important; } html.is-animating .qrt-menu .qrt-dynamic-menu nav ul li.current-menu-item:after { width: 135%; } /* Submeniul: regula temei pentru "is-animating" (specificitate mai mare decat cea de hover) il tine cu opacity 0, deci in primele ~2,6 secunde de la incarcare nu se deschidea la hover. Starea inchisa rmne cum e; readucem doar starea deschisa. :focus-within il face si navigabil de la tastatura. */ html.is-animating .qrt-menu .qrt-dynamic-menu nav ul li:hover > ul, html.is-animating .qrt-menu .qrt-dynamic-menu nav ul li:focus-within > ul { opacity: 1 !important; pointer-events: all !important; transform: translateY(0) !important; transition: none !important; } /* Titlul din banda stanga: tema ii animeaza doar opacity, padding si spatierea literelor. Rotatia (-90deg) vine din regula de baza, deci aici NU atingem transform - altfel textul apare orizontal si se roteste dupa ~2 secunde. */ html.is-animating .qrt-app .qrt-left-bar .qrt-current-page-title { opacity: 1 !important; padding-right: 40px !important; letter-spacing: 2px !important; transition: none !important; } html.is-animating .qrt-dynamic-content .qrt-banner, html.is-animating .qrt-dynamic-content .qrt-half-banner, html.is-animating .qrt-dynamic-content .qrt-banner .qrt-video-background, html.is-animating .qrt-dynamic-content .qrt-banner img, html.is-animating .qrt-dynamic-content .qrt-half-banner .qrt-video-background, html.is-animating .qrt-dynamic-content .qrt-half-banner img, html.is-animating .qrt-dynamic-content .qrt-slider-navigation, html.is-animating .qrt-dynamic-content .qrt-main-slider, html.is-animating .qrt-dynamic-content .qrt-main-slider-onepage, html.is-animating .qrt-dynamic-content .qrt-main-slider .qrt-project-cover .video-background, html.is-animating .qrt-dynamic-content .qrt-main-slider-onepage .qrt-project-cover .video-background, html.is-animating .qrt-dynamic-content .qrt-main-slider .qrt-project-cover .qrt-image-frame, html.is-animating .qrt-dynamic-content .qrt-main-slider-onepage .qrt-project-cover .qrt-image-frame { transform: none !important; transition: none !important; } html.is-animating .qrt-dynamic-content .qrt-banner .qrt-overlay .qrt-scroll-hint, html.is-animating .qrt-dynamic-content .qrt-half-banner .qrt-overlay .qrt-scroll-hint, html.is-animating .qrt-dynamic-content .qrt-banner .qrt-overlay .qrt-banner-title, html.is-animating .qrt-dynamic-content .qrt-half-banner .qrt-overlay .qrt-banner-title { opacity: 1 !important; } /* aceleasi efecte, pe componentele folosite de celelalte sabloane ale temei (pagini standard, "despre", harta, titlurile din slider) */ html.is-animating .qrt-dynamic-content .qrt-page-cover, html.is-animating .qrt-dynamic-content .qrt-page-cover img, html.is-animating .qrt-dynamic-content .qrt-page-cover .qrt-about-info, html.is-animating .qrt-dynamic-content .qrt-page-cover .qrt-hint-frame, html.is-animating .qrt-dynamic-content .qrt-about-me-cover, html.is-animating .qrt-dynamic-content .qrt-about-me-cover img, html.is-animating .qrt-dynamic-content .qrt-about-me-cover .qrt-about-info, html.is-animating .qrt-dynamic-content .qrt-about-me-cover .qrt-hint-frame, html.is-animating .qrt-dynamic-content .qrt-map-frame, html.is-animating .qrt-dynamic-content .qrt-map-frame .qrt-map, html.is-animating .qrt-dynamic-content .qrt-main-slider .qrt-project-cover .qrt-overlay .qrt-banner-title, html.is-animating .qrt-dynamic-content .qrt-main-slider-onepage .qrt-project-cover .qrt-overlay .qrt-banner-title { opacity: 1 !important; transform: none !important; transition: none !important; } /* Banda de sub itemul activ din meniu: rosu, nu portocaliul temei. Doar ea - restul accentelor (butoane, separatoare) rmn cum sunt. !important fiindca tema poate scrie culoarea si din skin-options.php. */ .qrt-menu nav ul li:after { background-color: #E31E24 !important; } /* Dropdown meniu: fundal alb. Tema aplica culoarea (portocaliu) inline din skin-options.php -> folosim !important ca sa batem stilul inline. */ .qrt-menu nav ul li ul, .qrt-menu nav ul li ul ul { background-color: #fff !important; border: 1px solid #e7e9ea; } .qrt-menu nav ul li ul li a { color: #28292c; } .qrt-menu nav ul li ul li a:hover { color: #6cbe45; } /* ----- Meniul mobil: fundal pe toata inaltimea ecranului ----- Tema il porneste de sub bara de sus (top: 80px), asa ca rmnea o dunga alba deasupra. Il ducem la top: 0 si compensam cu padding, ca itemii sa stea tot sub logo/burger (care au z-index 2, deci rmn vizibili peste fundal). */ @media (max-width: 768px) { .qrt-menu { top: 0; height: 100vh; padding-top: 120px; } .admin-bar .qrt-menu { height: calc(100vh - 46px); } } /* Bara de sus pe mobil: lasam doar logo + burger (lupa nu mai incape). */ @media (max-width: 768px) { .qrt-buttons .qrt-search-btn { display: none; } }