/* Theme Name: BeTheme Child — Amicus Junior Theme URI: https://amicusjunior.ro/ Description: Temă-copil pentru BeTheme. Este locul unic în care se scriu modificările de cod ale site-ului amicusjunior.ro, ca să nu se piardă la actualizarea temei părinte. Sursa versionată: CODING/amicusjunior/wp-content/themes/betheme-child/ Author: Grădinița Amicus Junior Template: betheme Version: 1.0.0 Text Domain: betheme-child */ /* ------------------------------------------------------------------ Titlul principal al primei pagini ------------------------------------------------------------------ „Dedicați să educăm…" este marcat

, ca prima pagină să aibă un H1 (nu avea niciunul). Regulile de mai jos îi păstrează dimensiunea pe care o avea ca

, la toate pragurile folosite de BeTheme — citite din foaia de stil a temei, nu presupuse, și verificate prin redimensionare. h1 implicit în temă: 75 / 64 / 56 / 45 px, greutate 200 h2 (ce păstrăm): 62 / 53 / 47 / 37 px, greutate 300 ⚠️ Regula stă aici, NU în „CSS suplimentar" din Personalizare: sub o temă- copil, WordPress caută postarea custom_css după slug-ul temei, iar aceea are post_name = betheme, deci nu se mai încarcă. ------------------------------------------------------------------ / h1.hero-title { font-size: 62px; line-height: 68px; font-weight: 300; } @media only screen and (min-width: 768px) and (max-width: 959px) { h1.hero-title { font-size: 53px; line-height: 58px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { h1.hero-title { font-size: 47px; line-height: 51px; } } @media only screen and (max-width: 479px) { h1.hero-title { font-size: 37px; line-height: 41px; } } / ================================================================== PAGINA-ȘABLON — formatul paginilor noi ================================================================== Direcția vizuală: BeMedic 4 (verde-petrol), aleasă de Stefan pe 23.08.2026. ⚠️ De ce s-a schimbat paleta: movul #7c77e1 și galbenul #ebd731 nu au fost alese pentru o grădiniță — sunt culorile implicite ale prefabricatului „BeNursingHome" (cămin de bătrâni) din care a fost importat site-ul. Dovada: clasele de pe și variabilele --mfn-* se potrivesc caracter cu caracter cu demo-ul. ⚠️ Cum se repară „textele se rup pe ecran mare": NU lățind rândul de text. Măsurat pe zece site-uri de referință, cele serioase au rânduri MAI SCURTE (AISB ≈32 de caractere, Avenor ≈34; noi aveam 61), iar containerul lor nu e mai lat (AISB 1440, Avenor 1320, noi 1220). Diferența e că ei umplu lățimea cu COLOANE, fotografie și benzi de culoare — Avenor are 30 de rânduri text-lângă-imagine, noi aveam 7. De aceea aproape fiecare secțiune de aici are două sau patru coloane. Clasele se pun din builder: câmpul „Class" al SECȚIUNII (attr['class']) și al ELEMENTULUI (attr['classes'] — `class` e ignorat la randare). Praguri BeTheme: ≥960 desktop · 768–959 tabletă · 480–767 mobil · ≤479 mic. ================================================================== / :root { --aj-petrol: #176973; --aj-petrol-inchis: #0F4A52; --aj-menta: #EDF7F4; --aj-menta-linie: #CDE5DE; --aj-cerneala: #151B1F; --aj-text: #3D4A4C; --aj-galben: #EBD731; } / --- Text: măsură și contrast --------------------------------------- ⚠️ Tema pune #8f8f8f pe = 3,2:1 pe alb, sub pragul WCAG AA de 4,5:1. Pe paginile noi trecem pe #3D4A4C (9,0:1). Nu atingem , ca restul site-ului să rămână neschimbat până la decizia de a schimba global. ------------------------------------------------------------------ / .aj-text p, .aj-text li, .aj-cardtext p { color: var(--aj-text); } .aj-text p, .aj-text ul, .aj-text ol { max-width: 38em; } .aj-lead { font-size: 1.12em; line-height: 1.7; } .aj-subtitlu { font-size: 1.05em; color: var(--aj-text); } .aj-sectiune ul { margin: 0 0 18px 1.15em; } .aj-sectiune li { margin-bottom: 4px; } / --- Scara de titluri ------------------------------------------------ Implicit tema dă h1=75px și h2=62px — dimensiuni de pagină-vitrină, care pe o pagină cu opt titluri strivesc textul. Coborâm la o scară de citit, păstrând raportul dintre niveluri. ------------------------------------------------------------------ / .aj-hero h1 { font-size: 52px; line-height: 58px; font-weight: 400; margin-bottom: 20px; color: #fff; } .aj-sectiune h2, .aj-cta h2 { font-size: 34px; line-height: 42px; font-weight: 400; margin-bottom: 18px; color: var(--aj-cerneala); } .aj-cardtext h3 { font-size: 20px; line-height: 27px; font-weight: 600; margin: 0 0 8px; color: var(--aj-cerneala); } @media only screen and (min-width: 768px) and (max-width: 959px) { .aj-hero h1 { font-size: 44px; line-height: 50px; } .aj-sectiune h2, .aj-cta h2 { font-size: 30px; line-height: 38px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .aj-hero h1 { font-size: 37px; line-height: 43px; } .aj-sectiune h2, .aj-cta h2 { font-size: 27px; line-height: 34px; } } @media only screen and (max-width: 479px) { .aj-hero h1 { font-size: 31px; line-height: 37px; } .aj-sectiune h2, .aj-cta h2 { font-size: 24px; line-height: 31px; } } / --- Antetul --------------------------------------------------------- Fotografie pe toată lățimea, cu voal verde-petrol dinspre stânga. ⚠️ Contrastul e calculat, nu ghicit: fotografiile de interior ale grădiniței au luminanță ≈0,85 (pereți și pardoseală aproape albe). Voalul de 94% petrol închis coboară fundalul la ≈0,10, deci textul alb are ≈7:1. Un voal mai slab ar fi picat pragul. ------------------------------------------------------------------ / .aj-hero { position: relative; background-position: center center; background-size: cover; } .aj-hero .section_wrapper { padding-top: 116px; padding-bottom: 116px; position: relative; z-index: 1; } .aj-hero > .mcb-background-overlay { background: linear-gradient(100deg, rgba(15, 74, 82, .95) 0%, rgba(15, 74, 82, .90) 42%, rgba(15, 74, 82, .55) 72%, rgba(15, 74, 82, .30) 100%); } .aj-herorezumat { font-size: 1.14em; line-height: 1.66; max-width: 34em; margin-bottom: 30px; color: rgba(255, 255, 255, .93); } .aj-buton-principal { text-align: left; } .aj-buton-principal a.button, .aj-ctabuton a.button { background-color: var(--aj-galben); border-color: var(--aj-galben); color: #000; } .aj-buton-principal a.button:hover, .aj-cta__buton a.button:hover { background-color: #f4e468; border-color: #f4e468; color: #000; } .aj-buton-principal a.button .button_label, .aj-cta__buton a.button .button_label { color: #000; } .aj-buton-principal a.button:focus-visible, .aj-cta__buton a.button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } / --- Banda de cifre -------------------------------------------------- Elementul nativ „quick_fact". Cel mai direct semnal de seriozitate și era folosit de zero ori pe tot site-ul. ------------------------------------------------------------------ / .aj-banda-cifre { background-color: var(--aj-petrol); } .aj-banda-cifre .quick_fact { margin-bottom: 0; } .aj-banda-cifre .quick_fact .title { display: block; font-size: 30px; line-height: 1.16; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .aj-banda-cifre .quick_fact .hr_narrow { width: 30px; margin: 13px auto; border: 0; border-top: 2px solid rgba(255, 255, 255, .38); background: none; } .aj-banda-cifre .quick_fact .desc { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); max-width: 22em; margin: 0 auto; } @media only screen and (max-width: 767px) { .aj-banda-cifre .quick_fact .title { font-size: 24px; } .aj-banda-cifre .quick_fact .desc { font-size: 13.5px; } .aj-banda-cifre .mcb-column { margin-bottom: 26px; } } / --- Secțiuni alternante --------------------------------------------- / .aj-sectiune--alt { background-color: var(--aj-menta); } / --- Fotografiile din secțiunile pe două coloane --------------------- Rame egale, indiferent dacă fotografia e orizontală sau verticală. `equal-height-wrap` pe secțiune face coloanele egale ca înălțime; aici punem imaginea să umple rama fără să se deformeze. ------------------------------------------------------------------ / .aj-foto .image_frame { border: 0; margin-bottom: 0; } .aj-foto .image_wrapper { border-radius: 4px; overflow: hidden; } .aj-foto img { display: block; width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 768px) { .aj-foto .image_wrapper { aspect-ratio: 4 / 3; } .aj-foto img { aspect-ratio: 4 / 3; } } @media only screen and (max-width: 767px) { .aj-foto .image_wrapper { aspect-ratio: 3 / 2; } .aj-foto img { aspect-ratio: 3 / 2; } .aj-sectiune .mcb-wrap { padding-left: 0 !important; padding-right: 0 !important; } .aj-sectiune .mcb-wrap + .mcb-wrap { margin-top: 30px; } } / --- Cardurile ------------------------------------------------------- Patru wrap-uri de 1/4, fiecare cu o imagine și un text. Nu elementul nativ „feature_box": acela emite la mărime plină, fără srcset. ------------------------------------------------------------------ / .aj-carduri .aj-titlu-carduri { margin-bottom: 8px; } .aj-card .mcb-wrap-inner { background: #fff; border: 1px solid var(--aj-menta-linie); border-radius: 6px; overflow: hidden; height: 100%; } .aj-sectiune--alt .aj-card .mcb-wrap-inner { border-color: #DCE9E5; } .aj-card__foto .image_frame { border: 0; margin-bottom: 0; } .aj-card__foto .image_wrapper { aspect-ratio: 4 / 3; overflow: hidden; } .aj-cardfoto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .aj-cardtext .column_attr { padding: 20px 22px 22px; } .aj-cardtext p { font-size: 15px; line-height: 1.58; margin-bottom: 0; } @media only screen and (max-width: 767px) { .aj-carduri .aj-card { margin-bottom: 18px; } .aj-cardfoto .image_wrapper, .aj-card__foto img { aspect-ratio: 16 / 9; } } / --- Tabele: rânduri pe desktop, carduri stivuite pe mobil ----------- Cerința explicită: pe mobil NU derulare orizontală, ci carduri. ⚠️ Derularea orizontală nici n-ar fi funcționat: are clasa `responsive-overflow-x-mobile` (overflow-x:hidden sub 767px), deci un tabel mai lat decât ecranul ar fi fost TĂIAT, nu derulabil. ⚠️ `display:block` pe elementele de tabel ȘTERGE semantica de tabel din arborele de accesibilitate. De aceea marcajul poartă rolurile ARIA scrise explicit — vezi $tabel() din wp-eval/creaza-o-zi-la-gradinita.php. ⚠️ De ce selectorii sunt lungi: are clasa `style-simple`, iar tema resetează tabelele cu `.style-simple table:not(.recaptchatable) th` — (0,2,2), fiindcă `:not()` își numără argumentul — și `… tr:last-child th` — (0,3,3). Un simplu `.aj-tabel th` (0,1,2) pierde și tabelul rămâne fără fundaluri. ------------------------------------------------------------------ / .entry-content table.aj-tabel { width: 100%; margin: 26px 0 8px; border-collapse: collapse; border-radius: 0; font-size: .98em; max-width: 62em; } .entry-content table.aj-tabel th, .entry-content table.aj-tabel td { padding: 13px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--aj-menta-linie); box-shadow: none; color: var(--aj-text); } .entry-content table.aj-tabel thead th { background: var(--aj-petrol); color: #fff; font-weight: 600; border-bottom: 0; } .entry-content table.aj-tabel tbody tr:nth-child(2n) td { background: rgba(23, 105, 115, .045); } .entry-content table.aj-tabel tbody tr:last-child td { border-bottom: 0; } .entry-content table.aj-tabel td:first-child { font-weight: 600; color: var(--aj-cerneala); } .entry-content table.aj-tabel--program td:first-child { white-space: nowrap; } .aj-sectiune--alt .entry-content table.aj-tabel tbody tr td, .aj-sectiune--alt table.aj-tabel tbody tr td { background: #fff; } .aj-sectiune--alt .entry-content table.aj-tabel tbody tr:nth-child(2n) td { background: #F7FBFA; } / Sub 768 px: fiecare rând devine card; prima celulă e titlul cardului, restul își primesc eticheta din `data-eticheta`. / @media only screen and (max-width: 767px) { .entry-content table.aj-tabel, .entry-content table.aj-tabel tbody, .entry-content table.aj-tabel tr, .entry-content table.aj-tabel td { display: block; width: 100%; } / Capul de tabel rămâne pentru cititoarele de ecran, dispare vizual. / .entry-content table.aj-tabel thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .entry-content table.aj-tabel { border-collapse: separate; border-spacing: 0; margin: 20px 0 4px; } .entry-content table.aj-tabel tr { margin-bottom: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--aj-menta-linie); border-radius: 8px; } .entry-content table.aj-tabel tbody tr:nth-child(2n) td, .entry-content table.aj-tabel tbody tr:last-child td, .aj-sectiune--alt .entry-content table.aj-tabel tbody tr td, .aj-sectiune--alt .entry-content table.aj-tabel tbody tr:nth-child(2n) td { background: transparent; } .entry-content table.aj-tabel td { padding: 0; border: 0; } .entry-content table.aj-tabel td::before { content: attr(data-eticheta); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--aj-petrol); } / Prima celulă e titlul cardului — nu-și repetă eticheta. / .entry-content table.aj-tabel td:first-child { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--aj-menta-linie); font-size: 1.1em; font-weight: 700; line-height: 1.35; } .entry-content table.aj-tabel td:first-child::before { display: none; } .entry-content table.aj-tabel--program td:first-child { white-space: normal; } .aj-hero .section_wrapper { padding-top: 62px; padding-bottom: 62px; } } @media only screen and (max-width: 479px) { .aj-hero .section_wrapper { padding-top: 46px; padding-bottom: 46px; } .entry-content table.aj-tabel tr { padding: 14px 15px; } } / --- Acordeonul de întrebări frecvente ------------------------------- Partea de tastatură e în functions.php — tema nu o are deloc. ------------------------------------------------------------------ / .aj-acordeon { max-width: 62em; } .aj-acordeon .question { border-radius: 6px; } .aj-acordeon .question .title { line-height: 1.45; color: var(--aj-cerneala); font-weight: 600; } .aj-acordeon .question .answer { color: var(--aj-text); } .aj-acordeon .question:focus-visible { outline: 3px solid var(--aj-petrol); outline-offset: 2px; } / --- Blocul final de acțiune ---------------------------------------- ⚠️ Fundalul e verde-petrol, nu galben cum cerea briefingul inițial: galbenul era culoarea prefabricatului de cămin de bătrâni. Rămâne însă culoarea BUTONULUI — negru pe galben dă 14,3:1, iar galbenul pe petrol dă 4,25:1, peste pragul de 3:1 cerut pentru componente. ------------------------------------------------------------------ / .aj-cta { background-color: var(--aj-petrol-inchis); } .aj-cta .aj-ctatext { text-align: center; } .aj-cta h2 { color: #fff; } .aj-cta p { color: rgba(255, 255, 255, .88); } .aj-ctabuton { text-align: center; } .aj-ctamotto { margin-top: 6px; margin-bottom: 0; font-style: italic; font-size: .95em; color: rgba(255, 255, 255, .72); } / --- Titlul de deasupra unui tabel ----------------------------------- / .aj-tabeltitlu { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aj-petrol); margin: 0 0 4px; } / Fotografia verticală de lângă un tabel: rama urmează înălțimea coloanei. / @media only screen and (min-width: 768px) { .aj-foto--inalta .image_wrapper, .aj-foto--inalta img { aspect-ratio: 3 / 4; } } / --- Citat scos în evidență ------------------------------------------ Bandă pe toată lățimea, verde-petrol. O singură dată pe pagină — dacă apare de două ori, încetează să mai fie un accent. ------------------------------------------------------------------ / .aj-citat { background-color: var(--aj-petrol); } .aj-citat .mcb-wrap-inner { max-width: 46em; margin-left: auto; margin-right: auto; } .aj-citat .aj-citat__bloc .column_attr { text-align: center; } .aj-citattext { font-size: 1.5em; line-height: 1.45; font-weight: 300; color: #fff; margin-bottom: 0; text-wrap: balance; } .aj-citatsursa { margin-top: 16px; margin-bottom: 0; font-size: .88em; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } @media only screen and (max-width: 767px) { .aj-citattext { font-size: 1.22em; } } / Cardurile păstrează înălțime egală la 2, 3 sau 4 pe rând. / .aj-carduri .aj-card .mcb-wrap-inner { height: 100%; } / --- Cardul cu legătură --------------------------------------------- Titlul devine legătură când fișa dă un „link". Zona de clic rămâne titlul, nu tot cardul: un card întreg făcut clicabil ascunde de unde pleacă legătura și încurcă cititoarele de ecran. ------------------------------------------------------------------ / .aj-cardtext h3 a { color: var(--aj-cerneala); text-decoration: none; } .aj-cardtext h3 a:hover, .aj-cardtext h3 a:focus { color: var(--aj-petrol); text-decoration: underline; text-underline-offset: 3px; } .aj-card__text h3 a:focus-visible { outline: 3px solid var(--aj-petrol); outline-offset: 3px; border-radius: 2px; } / Eroul primei pagini e mai înalt: e primul lucru pe care îl vede un părinte, iar H1-ul trebuie să încapă deasupra pliului. / .aj-hero--acasa .section_wrapper { padding-top: 128px; padding-bottom: 128px; } @media only screen and (max-width: 767px) { .aj-hero--acasa .section_wrapper { padding-top: 66px; padding-bottom: 66px; } } / Al doilea buton din erou, conturat. / .aj-hero .aj-buton-secundar { text-align: left; } .aj-hero .aj-buton-secundar a.button, .aj-hero .aj-buton-secundar a.button:visited { background-color: transparent; border-color: rgba(255, 255, 255, .75); color: #fff; } .aj-hero .aj-buton-secundar a.button .button_label { color: #fff; } .aj-hero .aj-buton-secundar a.button:hover { background-color: rgba(255, 255, 255, .15); border-color: #fff; } .aj-hero .aj-buton-secundar a.button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } / Cele două butoane din erou stau alături, nu unul sub altul. Fiecare e un element „button" separat, deci o coloană de 1/1 — le facem inline ca să curgă pe același rând, și se rup singure pe telefon. */ @media only screen and (min-width: 480px) { .aj-hero .column_button { display: inline-block; width: auto; vertical-align: middle; margin-right: 14px; } .aj-hero .column_button .mcb-column-inner { margin-bottom: 0; } } @media only screen and (max-width: 479px) { .aj-hero .column_button .mcb-column-inner { margin-bottom: 12px; } }