/* Stiluri comune pt orice bloc de continut compozabil (page_blocks) - spatiere intre blocuri, titlul generic de bloc, tehnica de "full bleed" pt blocurile cu latime_sectiune=pagina_intreaga, si animatia de afisare la scroll (data-reveal, vezi public/assets/js/reveal.js). */ /* Numita "pub-modul" (nu "pub-block") - vezi nota din includes/core/page_blocks.php despre filtrul anti-reclama francez AdGuard care ascundea orice element cu clasa exacta "pub-block". */ .pub-modul { margin-bottom: 32px; } /* Doua sectiuni "Pagina intreaga" CONSECUTIVE au deja propriul spatiu vertical (padding intern - vezi .pub-block-produse--fundal-activ/.pub-img-text/.pub-contact-block etc), asa ca margin-bottom de mai sus (32px) ar lasa intre ele o fasie alba a fundalului paginii (fundal/imagine intins pe tot ecranul, dar cu o taietura alba intre ele) - eliminat DOAR in acest caz (:has() + selector de frate imediat, ca sa nu afecteze blocul urmator daca NU e tot full-bleed), ca sectiunile sa ramana continue. Cand urmeaza un bloc "Container" (latime normala), cele 32px raman - fara ele, blocul container ar ramane lipit direct de sectiunea full-bleed de deasupra, fara nicio respiratie. */ .pub-modul.pub-section-full:has(+ .pub-modul.pub-section-full) { margin-bottom: 0; } .pub-block-title { font-size: 22px; margin: 0 0 16px; color: var(--pub-text); text-align: center; } .pub-section-full { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; } /* Fundal automat la "Extindere fundal" (select separat de "Extindere bloc" - vezi admin/continut_pagini.php) - acelasi tipar ca la Imagine+text/Contact/Carduri info (.pub-X--fundal-activ, vezi imagine-text.css/contact.css/carduri-info.css), culoarea vine din Setari > Teme > "Fundal header + footer + sectiuni". */ .pub-block-produse--fundal-activ, .pub-block-categorii--fundal-activ { background: var(--pub-header-footer-bg); padding: 40px 0; } /* Cand "Extindere fundal" e activ dar "Extindere bloc" NU e (vezi block_needs_boxed_inner() din includes/core/page_blocks.php) - un grid de carduri (Produse/Categorii) nu are niciun fundal propriu implicit, deci ar ajunge cu textul/cardurile lipite chiar de marginea ecranului, fara nicio respiratie, daca am lasa doar fundalul intins. De-asta continutul (titlu+grid) sta intr-un div INTERIOR separat (.pub-block-produse-inner / .pub-block-categorii-inner), care primeste clasa "--boxed" DOAR in acest caz - il ingusteaza la un container normal, centrat si cu gutter. Cand "Extindere bloc" e activ, clasa "--boxed" nu se adauga deloc si gridul ramane intins natural (100% din div-ul exterior, care e deja 100vw) - la fel ca la Imagine+text (.pub-img-text-inner--boxed in imagine-text.css). */ .pub-block-produse-inner--boxed, .pub-block-categorii-inner--boxed { /* Acelasi min(...,100%) si pe limita minima ca in .pub-wrap din base.css - altfel un "Minim (px)" configurat prea mare in Setari > Teme ar forta overflow orizontal pe mobil. --pub-block-width-scale (0-1, vezi Latime continut % din admin) ingusteaza suplimentar continutul, independent de fundalul care ramane intins pe tot ecranul (vezi page_blocks.php). */ width: calc(clamp(min(var(--pub-container-min), 100%), min(var(--pub-container-width), 100%), var(--pub-container-max)) * var(--pub-block-width-scale, 1)); margin: 0 auto; padding: 0 16px; } /* .pub-reveal-ready se adauga pe doar din JS (vezi reveal.js), dupa ce acesta chiar a pornit cu succes - fara conditia asta, orice motiv pt care scriptul nu apuca sa ruleze (blocat de o extensie, eroare de retea, un bug de browser) ar lasa TOT continutul cu data-reveal (aproape tot ce e pe pagina) invizibil permanent, fara niciun fallback - pagina ar parea "goala". */ .pub-reveal-ready [data-reveal] { opacity: 0; } .pub-reveal-ready [data-reveal].pub-revealed { opacity: 1; transition: opacity var(--reveal-durata, 0.6s) ease, transform var(--reveal-durata, 0.6s) ease; } [data-reveal="fade-up"] { transform: translateY(var(--reveal-distanta, 24px)); } [data-reveal="fade-up"].pub-revealed { transform: translateY(0); } .pub-reveal-ready [data-reveal="stagger"] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--reveal-durata, 0.5s) ease, transform var(--reveal-durata, 0.5s) ease; } [data-reveal="stagger"].pub-revealed > * { opacity: 1; transform: translateY(0); } [data-reveal="stagger"].pub-revealed > *:nth-child(2) { transition-delay: var(--reveal-stagger, 0.08s); } [data-reveal="stagger"].pub-revealed > *:nth-child(3) { transition-delay: calc(var(--reveal-stagger, 0.08s) * 2); } [data-reveal="stagger"].pub-revealed > *:nth-child(4) { transition-delay: calc(var(--reveal-stagger, 0.08s) * 3); } [data-reveal="stagger"].pub-revealed > *:nth-child(5) { transition-delay: calc(var(--reveal-stagger, 0.08s) * 4); } [data-reveal="stagger"].pub-revealed > *:nth-child(6) { transition-delay: calc(var(--reveal-stagger, 0.08s) * 5); } /* Blocul "categorii" nu trebuie sa se alinieze pe acelasi grid cu produsele (coloane egale, 1fr) - cardurile (mai ales cele cu iconita) stau una langa alta, centrate ca grup, nu intinse pe toata latimea randului. */ .pub-block-categorii .pub-product-grid { display: flex; flex-wrap: wrap; justify-content: center; } /* Card de categorie cu iconita + fundal colorat (stil "Xstore"), folosit de blocul "categorii" cand categoria are icon_preset/icon_image setat in admin - altfel cade pe cardul cu fotografie. */ .pub-cat-icon-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 1 / 1; width: 160px; padding: 16px; border-radius: var(--pub-radius); text-align: center; color: var(--pub-text); transition: transform 0.15s ease, box-shadow 0.15s ease; } .pub-cat-icon-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); text-decoration: none; } .pub-cat-icon-card-icon { width: 72px; height: 72px; color: inherit; } .pub-cat-icon-card-icon img { width: 100%; height: 100%; object-fit: contain; } /* Iconitele predefinite (category_icon_preset_svg()) sunt SVG brut, cu propriile atribute width/height/viewBox - uneori foarte mari (ex: 800x800), ceea ce facea iconita sa iasa din card peste continutul de dedesubt. width/height pe CSS au prioritate fata de atributele proprii ale , la fel ca la .admin-icon-radio-preview din admin. */ .pub-cat-icon-card-icon svg { width: 100%; height: 100%; } .pub-cat-icon-card-title { font-size: 14px; font-weight: 600; color: inherit; } .pub-cat-icon-card-title--upper { text-transform: uppercase; } .pub-cat-icon-card-count { font-size: 12px; color: #5a5a5a; } /* Badge de reducere pe cardul de produs - .pub-product-card-image e deja position:relative si .pub-product-card-badge e deja position:absolute, definite in base.css (comune tuturor cardurilor de produs, nu doar celor din page_blocks). */ @media (max-width: 900px) { .pub-block-produse .pub-product-grid, .pub-block-categorii .pub-product-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Sub 480px (telefon ingust), chiar si 2 coloane devin prea stranse (carduri de ~165px) - o singura coloana, cate un card pe rand. Selectorul trebuie sa fie la fel de specific ca cel de mai sus (aceleasi doua clase) ca sa castige la aceeasi "greutate" !important, prin ordinea din fisier (acest bloc vine dupa, deci se aplica el cand ambele media query-uri sunt adevarate). */ @media (max-width: 480px) { .pub-block-produse .pub-product-grid, .pub-block-categorii .pub-product-grid { grid-template-columns: 1fr !important; } }