/* ==========================================================================
ELCAR — corectii de accesibilitate (WCAG 2.1 AA)
Adaugat: 2026-08-20
Incarcat din header.php ca normal, plasat DUPA style.css, ca sa
castige in cascada fara a avea nevoie de !important peste tot.
Ca sa dezactivezi tot: sterge linia din header.php. Fisierul poate
ramane pe disc, nu are alt efect.
Regulile marcate cu !important lupta cu declaratii ale temei care au
specificitate mai mare. Cele fara !important sunt intentionat "slabe", ca
sa nu suprascrie exceptiile legitime (ex. meniul alb peste fotografie).
========================================================================== */
/* --------------------------------------------------------------------------
1. ALBASTRUL DE BRAND
#009FDF = 2.99:1 pe alb. Minimul AA pentru text normal este 4.5:1.
#0079A8 = 4.88:1, aceeasi nuanta.
Regula pe `body a` (nu pe `a`) e deliberata: bate declaratia globala
`a{color:#009FDF}` a temei, dar pierde in fata regulilor pe clasa care fac
linkurile albe in header si in carduri. Verificat in browser: meniul si
textul cardurilor raman albe.
-------------------------------------------------------------------------- */
body a { color: #0079A8; }
.simple-text-link-blue,
.skip-link,
.cky-notice-des a { color: #0079A8 !important; }
/* fundaluri albastre care poarta text ALB */
.cta-regular-blue,
.add_to_cart_button,
.totalitems,
#total-items-count,
.footer-top,
.swiper-scrollbar-drag { background-color: #0079A8 !important; }
/* Nota: fundalurile albastre din blocurile "color-cards" si "contact-homepage"
vin din campuri ACF ca stil inline si sunt corectate direct in sabloanele
PHP, nu de aici — un stil inline nu poate fi tintit fiabil din CSS. */
/* --------------------------------------------------------------------------
2. TEXT ALB PESTE FOTOGRAFII
39 de elemente stateau ca text alb direct peste o imagine, fara niciun
fundal: meniul, textul slider-ului si textul cardurilor. Nu era doar o
eroare de raport — pe un slide deschis la culoare textul devine ilizibil.
Solutia e un voal intunecat, suficient de opac cat sa garanteze contrastul
indiferent de fotografia de dedesubt.
-------------------------------------------------------------------------- */
#masthead { background-color: rgba(12, 26, 38, 0.72) !important; }
/* titlul sitului pentru cititoare de ecran, altfel negru pe voalul intunecat */
#masthead .screen-reader-text { color: #fff !important; }
/* padding-left ramane cel al temei (100px); il suprascriu doar pe celelalte,
ca sa nu deplasez textul slider-ului fata de designul existent */
.mySwiper .slider-content {
background-color: rgba(12, 26, 38, 0.70) !important;
padding-top: 28px;
padding-bottom: 28px;
padding-right: 32px;
border-radius: 8px;
}
/* Panoul de continut incepea la x=309, iar panoul listei de categorii tine
pana la x=398: se suprapuneau pe 89px, iar acolo cele doua straturi
translucide se adunau si iesea o banda vizibil mai inchisa.
Impins la dreapta cu 100px, cu padding-ul intern redus de la 100 la 32,
panourile ajung alaturate cu 11px intre ele si textul se muta cu doar 32px.
Selectorul repeta lantul temei pentru ca regula ei de padding-left are
specificitate mai mare; a11y.css fiind incarcat dupa, castiga la egalitate.
Doar pe desktop: sub 992px paginatia e ascunsa si nu exista suprapunere. */
@media (min-width: 992px) {
.swiper-wrapper .swiper-slide .slide-slider-inner .slider-content {
margin-left: 100px;
padding-left: 32px;
}
}
.image-cards-link .text-container {
background-color: rgba(12, 26, 38, 0.60) !important;
}
/* --------------------------------------------------------------------------
3. TITLURILE SLIDER-ULUI: h1 -> h2
In slides.php fiecare slide genera un
, deci pagina avea 8 elemente h1.
Tag-ul a fost schimbat in h2; stilurile temei erau legate de
`.slide-slider-inner h1`, asa ca sunt portate aici identic, inclusiv cele
doua praguri responsive si animatia de intrare.
-------------------------------------------------------------------------- */
.slide-slider-inner h2 {
color: #fff;
letter-spacing: 0px;
line-height: 60px;
font-weight: 900;
opacity: 1;
font-size: 48px;
margin: 20px 0;
}
@media only screen and (max-width: 768px) {
.slide-slider-inner h2 { font-size: 48px; line-height: 54px; }
}
@media only screen and (max-width: 481px) {
.slide-slider-inner h2 { font-size: 34px; line-height: 40px; }
}
.swiper-wrapper .swiper-slide.swiper-slide-active .slide-slider-inner .slider-content h2 {
-webkit-animation-name: ss;
animation-name: ss;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
/* --------------------------------------------------------------------------
4. LISTA DE CATEGORII A SLIDER-ULUI (paginatia Swiper)
Cele sase etichete stau peste fotografia din hero, fara niciun fundal:
gri #939393 pe fotografie (3.07:1) si alb pe fotografie pentru cea activa.
Acelasi tratament ca la restul textului peste imagini — un voal.
Opacitatea e 0.75, mai mare decat la celelalte voaluri, pentru ca textul
inactiv e gri deschis, nu alb: rezulta 5.61:1 inactiv si 7.83:1 activ,
masurat compunand peste alb, adica in cazul cel mai defavorabil.
Starea activa nu se bazeaza doar pe culoare — primeste si font-weight 700.
-------------------------------------------------------------------------- */
.swiper .swiper-pagination {
background-color: rgba(12, 26, 38, 0.70) !important;
border-radius: 8px;
padding: 14px 18px;
}
/* Aceeasi opacitate ca panoul de continut (0.70), ca cele doua sa arate ca o
pereche, nu ca doua accidente. Textul inactiv e ridicat la #E3E8EC ca sa
pastreze 5.31:1 pe voalul mai deschis. */
.swiper-pagination-bullet { color: #E3E8EC !important; }
.swiper-pagination-bullet-active {
color: #FFFFFF !important;
font-weight: 700;
}
/* --------------------------------------------------------------------------
5. FOCUS VIZIBIL LA NAVIGAREA CU TASTATURA (WCAG 2.4.7)
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid #0079A8;
outline-offset: 2px;
}