/* ========================================================================== BAZA — tipografia si valorile implicite ale intregului site Se incarca pe TOATE paginile, dupa reset.css al temei parinte. De ce exista acest fisier: Tema parinte lasa in reset.css un font de sistem pe si o scara de titluri generica (2.5 / 2 / 1.75 / 1.5 rem). Fonturile proprii ale magazinului sunt aplicate de Elementor PER WIDGET, deci orice element care nu trece prin Elementor — sabloane WooCommerce, blocuri scrise de noi in PHP sau HTML, formulare, e-mailuri — mostenea fontul de sistem. Pe Android si Chrome acela e Roboto. Asa a ajuns blocul de recomandari din cos sa arate altfel decat restul paginii. Regulile de aici folosesc selectoare de ELEMENT, cu specificitate minima. Consecinta importanta: orice widget Elementor care isi declara singur fontul sau marimea castiga in continuare. Nu ne batem cu Elementor — completam ce lasa el descoperit. Marimile de titlu sunt cele din reset.css, pastrate intentionat: schimbarea lor ar muta toate paginile construite pana acum. Acum insa sunt declarate intr-un singur loc, deci scara se poate schimba cand vrem, dintr-o singura modificare. ========================================================================== */ :root{ /* Familiile de fonturi, aceleasi ca in setul global Elementor. Scrise ca variabile, ca sa nu le mai repetam in fiecare fisier. */ --font-titlu:'Teutonic', Georgia, serif; --font-text:'Metallophile Sp8 Medium', Georgia, serif; --font-buton:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* Scara de titluri. Valorile vin din tema si sunt pastrate ca atare; de acum se schimba de aici, nu din reset.css. */ --h1:40px; --h2:32px; --h3:28px; --h4:24px; /* Marimea textului de baza. 16px era prea mic pentru fonturile astea: Metallophile are litera mica scunda, deci la aceeasi marime nominala se citeste mai marunt decat un font obisnuit. De aici se schimba TOT ce nu are marime proprie — body, paragrafele, listele, meniul, titlurile de card. E singura pârghie pentru textul de citit: setarea „body” din kitul Elementor a fost scoasa tocmai ca sa nu existe doua locuri care spun acelasi lucru si sa se contrazica intr-o zi. */ --text:18px; --rand-titlu:1.2; --rand-text:1.6; } /* Pe ecrane mici se intoarce la 16px. 18px e o marime pentru citit de la distanta de birou; pe un telefon tinut la 30 cm, acelasi text ocupa cu un sfert mai multa latime si rup randurile in doua. Pragul e cel al Elementor-ului (tableta incepe sub 1024px), ca sa nu avem doua sisteme de praguri pe acelasi site. */ @media (max-width:1024px){ :root{ --text:16px; } } /* ---------- Textul de baza ----------------------------------------------- */ body{ font-family:var(--font-text); font-size:var(--text); line-height:var(--rand-text); } /* Elementele de formular NU mostenesc font-family de la parinte — e o particularitate veche a browserelor. Fara randul asta, campurile de comanda si casutele de cautare raman pe fontul de sistem. */ input, select, textarea, button, optgroup{ font-family:inherit; /* font-size NU se mosteneste aici: campurile de cautare si butoanele din antet isi au marimile lor, stabilite in Elementor. Cu font-size:inherit le-am fortat la 16px si au aparut enorme. Preluam doar familia. */ } /* Butoanele au fontul lor in setul Elementor; il pastram si in afara lui. */ button, .button, input[type="submit"], .wp-element-button{ font-family:var(--font-buton); } /* ---------- Titlurile ----------------------------------------------------- */ h1, h2, h3, h4, h5, h6{ font-family:var(--font-titlu); line-height:var(--rand-titlu); } h1{ font-size:var(--h1); } h2{ font-size:var(--h2); } h3{ font-size:var(--h3); } h4{ font-size:var(--h4); } /* ---------- Paragraful ---------------------------------------------------- Nu avea nicio regula in tot site-ul: mostenea din body si atat. Il declaram, ca sa avem un loc unde se regleaza spatiul dintre paragrafe. */ p{ font-size:var(--text); line-height:var(--rand-text); margin:0 0 1em; } p:last-child{ margin-bottom:0; } /* ---------- Liste si tabele ---------------------------------------------- Aceeasi problema ca la formulare: WooCommerce randeaza multe tabele, iar ele nu preiau intotdeauna stilul din body. */ ul, ol, li, table, th, td, dl, dt, dd{ font-family:inherit; } th, td{ line-height:var(--rand-text); } /* ---------- Marimile din tabele ------------------------------------------ `reset.css` al temei parinte nu da tabelelor o marime, ci o REDUCERE: table font-size:.9em table thead/tfoot th font-size:1em table table font-size:.8em `em` inseamna „fata de parinte”, deci valoarea finala se schimba singura ori de cate ori se schimba altceva deasupra. Cat body a fost 16px, tabelele ieseau la 14,4px; de cand e 18px, ies la 16,2px. Nimeni n-a ales vreodata nici 14,4 nici 16,2 — au iesit dintr-o inmultire. Aici sunt scrise in px, deci nu mai plutesc: ce scrie e ce se vede. Selectoarele sunt aceleasi ca in reset.css, iar fisierul asta se incarca dupa el (vezi prioritatea 20 din functions.php), deci castiga la egalitate. */ table{ font-size:18px; } table thead th, table tfoot th{ font-size:20px; } table table{ font-size:17px; } /* ---------- Legaturi ------------------------------------------------------ */ a{ font-family:inherit; } /* ---------- Butonul de cos din antet ------------------------------------- Totalul se scria maro peste verde si abia se distingea. Elementor NU pune culoarea direct pe element, ci printr-o variabila: color: var(--toggle-button-text-color, #69727d) Asa ca o regula obisnuita de "color" pierde — variabila e recitita de fiecare data. Solutia e sa schimbam chiar variabila, pe widget. La fel pentru pictograma cosului si pentru starea de hover. */ .elementor-widget-woocommerce-menu-cart{ --toggle-button-text-color:#E7DFC8; --toggle-button-hover-text-color:#fff; --toggle-button-icon-color:#E7DFC8; --toggle-button-icon-hover-color:#fff; } /* ========================================================================== CANTITATEA DE PE PAGINA DE PRODUS Se vedea o singura cifra. Doua cauze care se adunau: - WooCommerce da campului `width:3.631em` (58px), masura potrivita pentru umplutura LUI; - tema parinte (hello-elementor/assets/css/reset.css) pune pe TOATE campurile `padding:.5rem 1rem`, adica 16px de fiecare parte. Raman 24px pentru cifre, din care sagetile native ale lui `type="number"` mai iau vreo 17 — asa ca a doua cifra ajungea sub ele. Nu atingem regula temei parinte: se pierde la prima actualizare, si e scrisa pentru toate campurile, nu pentru asta. Coșul NU intra aici: acolo cantitatea e o pastila cu butoane proprii (`.cart-pastila`, in cart.css), cu umplutura ei si latimea ei. ========================================================================== */ .woocommerce div.product form.cart .quantity .qty{ width:4.5em; padding-left:.5rem; padding-right:.5rem; } /* ---------- Meniul din antet ---------------------------------------------- Scris la nivelul H3, cu aceleasi trei valori si aceleasi praguri ca in kitul Elementor: 1.75 / 1.625 / 1.5 rem. Nu prin setarea widgetului, ca sa ramana o singura sursa — daca H3 se schimba vreodata, se schimba si aici, in acelasi fisier, nu prin Elementor. */ .elementor-nav-menu a.elementor-item{ font-size:1.5rem; } @media (max-width:1024px){ .elementor-nav-menu a.elementor-item{ font-size:1.625rem; } } @media (max-width:767px){ .elementor-nav-menu a.elementor-item{ font-size:1.5rem; } } /* ---------- Antet: cautarea si butonul de cos ------------------------------ Masurat inainte: cautarea 56px inaltime / litera 16px, butonul de cos 65px / litera 15px. Le aducem la aceeasi inaltime, 65px, si crestem litera cu 2px in fiecare, apoi normalizate amandoua la 19px (1.1875rem) — scrise in rem, ca sa urmeze setarea de font a vizitatorului. */ .elementor-widget-search input[type="search"]{ font-size:1.1875rem; /* 19px */ min-height:65px; } .elementor-menu-cart__toggle .elementor-button{ font-size:1.1875rem; /* 19px */ min-height:65px; } /* Submeniurile care se desfasoara: 18px. Nivelul 1 ramane la 1.5rem — vezi mai sus. Clasa e alta (`elementor-sub-item`), deci nu se prind cu acelasi selector. */ .elementor-nav-menu a.elementor-sub-item{ font-size:1.25rem; } /* ---------- Titlul animat de pe prima pagina ------------------------------ Widgetul Animated Headline. Aceleasi trei valori si aceleasi praguri ca H1 din kitul Elementor: 3 / 2.5 / 2 rem. */ .elementor-widget-animated-headline .elementor-headline{ font-size:3rem; } @media (max-width:1024px){ .elementor-widget-animated-headline .elementor-headline{ font-size:2.5rem; } } @media (max-width:767px){ .elementor-widget-animated-headline .elementor-headline{ font-size:2rem; } } /* ---------- Butoanele din pop-up-ul cosului ------------------------------- Widgetul Menu Cart isi deseneaza in subsol doua legaturi, "Warenkorb anzeigen" si "Kasse". Nu fusesera stilizate nici in setarile widgetului, nici aici, asa ca ramaneau pe implicitul Elementor: fundal gri #69727d si text alb — singura pereche de butoane din tot site-ul care nu semana cu nimic din jurul ei. Le dam ierarhia pe care o are deja pagina de cos: "Kasse" = actiunea principala -> verde #41663A, ca butonul "Weiter zur Kasse" din caseta cosului "Warenkorb anzeigen" = calea a doua -> maro #6C3F1F, culoarea de baza a butoanelor din site Rotunjirea e 20px, cat au butoanele din widgetul de cos si din finalizare. Scris aici, in baza.css, si nu in setarile widgetului: pop-up-ul apare pe FIECARE pagina, iar baza.css e singura foaie care se incarca peste tot. In plus, o valoare scrisa in Elementor ar fi stat intr-un sablon de antet, unde nu o mai gaseste nimeni cand se schimba paleta. Marcajul vine prin fragmentele AJAX ale WooCommerce-ului, retiparit la fiecare adaugare in cos — deci regulile trebuie sa fie CSS, nu ceva pus din JavaScript, care s-ar sterge la prima reimprospatare. */ .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button{ font-family:var(--font-buton); border-radius:20px; border:none; background-color:#6C3F1F; color:#E7DFC8; transition:background-color .3s ease; } .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout{ background-color:#41663A; } .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button:hover, .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button:focus{ background-color:#9C4C2F; color:#fff; } /* Textul e intr-un propriu, care isi mosteneste culoarea de la legatura doar daca nu i se da alta. Elementor ii da una — de aceea o cerem si aici, altfel butonul se coloreaza dar scrisul ramane alb-gri. */ .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button .elementor-button-text{ color:inherit; } /* ---------- Cardurile din „Ähnliche Produkte" ----------------------------- Banda de sub pagina de produs nu vine din sablonul WooCommerce, ci din widgetul Elementor Pro „Product Related" asezat in sablonul Single Product #3304. Widgetul tipareste marcajul obisnuit al magazinului — `ul.products li.product`, cu imaginea, titlul si pretul inauntrul unei singure legaturi, iar butonul frate cu ea — dar ii pune deasupra propriul `ul.products.elementor-grid{display:grid}`. Asta inseamna ca inaltimea CARDURILOR era deja buna: fiind celule de grila, cele de pe un rand se intind la fel. Nemasurat ramasese continutul lor. Titlurile produselor de aici au intre un rand („Garten-Perlite Bodenauflockerung & Drainage, 1L") si trei („Dr.Soil Kompost zur Anreicherung von nährstoffarmen Böden im 1L Beutel"), iar butonul statea lipit sub pret, deci urca si cobora odata cu titlul. Culoare nu i s-a pus niciodata in widget, asa ca butonul ramanea pe implicitul foii de stil WooCommerce — fundal #e9e6ed, text #515151, rotunjire 3px. Exact situatia butoanelor din pop-up-ul cosului, de mai sus: singurele butoane gri dintr-un site maro. Doua lucruri din widget se lasa neatinse, fiindca acolo sunt alegeri facute cu mana, nu implicituri: centrarea textului in card si fontul butonului (Metallophile Sp8 Medium 500). Se schimba din sablon, nu de aici. ------------------------------------------------------------------------ */ /* Cardul devine coloana. Nu impunem noi `display:flex` pe `li.product`: Elementor si-a scris deja regula, `li.product{display:var(--button-align-display)}`, si ar trebui sa ne batem pe specificitate cu ea. Ii dam variabilele pe care le citeste — acelasi mecanism ca la culorile cosului din antet, mai sus. Aceleasi trei variabile le scrie si comutatorul „Automatically align buttons" din widget. Nu l-am bifat acolo din doua motive: pe langa variabile mai inveleste butonul intr-un `

` de care n-avem nevoie, si valoarea ar fi ramas ingropata intr-un sablon Elementor, unde n-o mai gaseste nimeni cand se schimba paleta. */ .elementor-widget-woocommerce-product-related{ --button-align-display:flex; --button-align-direction:column; } /* Titlul: exact trei randuri in fiecare card, ca pretul de sub el sa porneasca de la aceeasi linie peste tot. `box-sizing` se intoarce la content-box numai aici, ca cele trei randuri sa fie masurate pe text: WooCommerce da titlului `padding:.5em 0`, iar cu border-box umplutura ar fi mancat din inaltimea ceruta si cardurile cu titlu scurt ar fi ramas mai joase decat cele cu titlu lung. Alternativa era sa adunam umplutura in `calc()`, dar ne-ar fi legat de o valoare a plugin-ului, care se schimba fara sa ne intrebe. */ .elementor-widget-woocommerce-product-related ul.products li.product .woocommerce-loop-product__title{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; box-sizing:content-box; min-height:calc(3 * var(--rand-titlu) * 1em); } /* Butonul, impins la baza cardului cu `margin-top:auto`, nu cu a treia variabila a Elementor-ului (`--button-align-justify:space-between`): dupa adaugarea in cos, WooCommerce mai lipeste dupa buton legatura „Warenkorb anzeigen", iar space-between ar fi trimis in jos legatura si ar fi lasat butonul la mijlocul cardului. Cu margin-top:auto raman amandoua jos. Umplutura implicita a WooCommerce-ului (.618em/1em) se pastreaza: la litera de 18px iese un buton de vreo 40px inaltime, adica fix o pastila la 20px rotunjire. In plus, rescrisa, ar fi luat spatiul pe care si-l face singur cerculetul de asteptare din starea `.loading`, la adaugarea prin AJAX. Selectorul — widget, apoi `ul`, `li` si `a.button` — e mai specific decat cel al foii WooCommerce, deci culorile trec fara `!important`. */ .elementor-widget-woocommerce-product-related ul.products li.product a.button{ display:block; width:100%; margin-top:auto; border-radius:20px; background-color:#6C3F1F; color:#E7DFC8; transition:background-color .3s ease; } .elementor-widget-woocommerce-product-related ul.products li.product a.button:hover, .elementor-widget-woocommerce-product-related ul.products li.product a.button:focus{ background-color:#9C4C2F; color:#fff; }