/* ============================================================================ 91-hero-cta.css · CELE DOUA BUTOANE DIN HERO ⚠⚠ CERUT, trei lucruri: pe MOBIL amandoua pe acelasi rand, ocupand latimea ecranului pe DESKTOP putin mai mari la amandoua rotunjite ca butoanele din sectiuni, si cu acelasi font ⚠⚠ FISIER DE SUPRASCRIERE. Marcajul (`blocks/asset-hero.php`) si foile temei (`mds-base.css`, `mds-asset.css`) NU se ating. Aici se schimba numai geometria, deci culoarea, degradeul si umbra butoanelor raman ale temei. ⚠⚠ REGULA CARE TREBUIE BATUTA E DIN `mds-base.css:57` SI `:65`, nu din `mds-asset.css:90`. Masurat pe randare, nu citit din cod: butonul verde raporta 15px Poppins, raza 14px, umplutura 14px 28px - adica valorile din `mds-base`, nu cele din `mds-asset` (13px, raza 11px). Cele doua fisiere se bat intre ele, si `mds-base` castiga fiindca `glob` il tipareste dupa. De aia si selectorii de aici sunt la (0,2,0), nu la (0,1,0): trec peste amandoua fara sa depinda de ordinea lor. ⚠ SE INCARCA ULTIMUL, dupa `90-tooltip.css`: `01-css-sectiuni.php` face `glob` cu dependenta pe `mds-design`, deci tot folderul se tipareste dupa tema. ⚠ HERO-UL E IN AFARA LUI `.mdsx`, deci aici NU merg nici interogarile de container (`@container mdsx`), nici treptele de text: `--xt-7` e definit pe `.mdsx__in` si `.mdsx`, si e un `clamp` cu `cqi`, care fara container n-are de unde sa se calculeze. `--xf` si `--xr-p` sunt pe `:root` (`20-grup2.css:23` si `:32`), deci alea se pot folosi. Marimea e scrisa in cifre, cu valoarea treptei langa ea. ⚠ Pragul 921px e AL TEMEI (`mds-asset.css:8` si `:142`), nu ales aici: hero-ul isi schimba oricum asezarea acolo, si doua praguri diferite s-ar fi vazut. ============================================================================ */ /* ══ AMANDOUA PE ACELASI RAND, LA AMBELE LATIMI ════════════════════════════ ⚠⚠ `flex-wrap:wrap` era cauza: pe 390px cele doua butoane masurau 213 + 22 + 183 plus doua spatii de 12, adica 442px intr-un rand de 358. Al doilea trecea dedesubt - masurat, y=162 si y=225. Acum randul nu se mai rupe, si butoanele se impart latimea. ⚠ `align-items:stretch`, nu `center`: cele doua au continut diferit (unul are jetonul AD, celalalt o pictograma) si ieseau de inaltimi diferite, 51 fata de 53. Intinse, sunt egale fara sa li se fixeze inaltimea. */ .mds-ahero__cta{ flex-wrap:nowrap; align-items:stretch; gap:10px; } /* ⚠⚠ BUTONUL „i" DINTRE ELE A PLECAT, CERUT. Purta avertismentul de risc al legaturii sponsorizate (`asset-hero.php:68`), deci textul acela nu se mai vede nicaieri in hero - e scris in CITESTE-MA, cu ce se poate pune in loc. ⚠ `display:none`, nu `visibility:hidden`: altfel ar fi pastrat locul si spatiul dintre butoane, adica exact ce se cere sa dispara. */ .mds-ahero__cta .mds-infobtn{ display:none; } /* ══ FORMA, LA AMBELE LATIMI ═══════════════════════════════════════════════ ⚠ `--xr-p` (999px) e raza butoanelor din sectiuni - aceeasi variabila pe care o folosesc `.xar__more`, `.xin__d` si taburile, nu un numar copiat. ⚠ 13,5px e valoarea lui `--xt-7` pe desktop; vezi antetul pentru de ce e scrisa aici in cifre si nu luata din variabila. ⚠ `justify-content:center` si pe cel de grafic: tema il avea aliniat la stanga, iar intr-un buton intins pe jumatate de ecran textul ar fi stat lipit de margine. */ .mds-ahero__cta .mds-cta-invest, .mds-ahero__cta .mds-cta-chart{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--xr-p); font:600 13.5px/1.2 var(--xf); letter-spacing:-.01em; } /* ⚠ Jetonul „AD" si pictograma nu se micsoreaza niciodata: ele sunt lucruri de marimea lor, nu text care se poate strange. */ .mds-ahero__cta .mds-cta-invest > *, .mds-ahero__cta .mds-cta-chart > *{ flex:none; } /* ══ MOBIL · latimea ecranului ═════════════════════════════════════════════ ⚠⚠ 8px UMPLUTURA SI 8px INTRE BUTOANE, si cifrele astea sunt masurate, nu alese. Butoanele fiind intinse pe toata latimea, umplutura pe orizontala nu se mai vede - doar mananca din spatiul pentru text. Masurat cat cere butonul verde cu textul lui romanesc plus jetonul AD: 142px de continut. Cu 10px umplutura si 10px distanta, pe un ecran de 360px fiecare buton primea 158 si ii trebuiau 162, deci textul trecea pe doua randuri. Cu 8 si 8 primeste 160 si ii trebuie 158, deci incape pe un rand. Masurat pe 360, 375, 390, 412 si 430: un singur rand peste tot. */ @media (max-width:920px){ .mds-ahero__cta{ gap:8px; } .mds-ahero__cta .mds-cta-invest, .mds-ahero__cta .mds-cta-chart{ min-height:48px; padding:12px 8px; gap:6px; /* ⚠⚠ AICI TEXTUL ARE VOIE SA SE RUPA, si nu din placere. Cu `nowrap`, masurat la 320px, „Investeste acum" plus jetonul AD cer 158px intr-un buton care primeste 140, si textul iesea taiat. De la 360px in sus nimic nu se rupe, fiindca incape - deci regula asta nu se vede decat pe ecranele foarte inguste, unde alternativa era text ciuntit. Butoanele fiind `stretch`, daca unul creste la doua randuri celalalt il urmeaza, deci nu ies de inaltimi diferite. */ white-space:normal; text-align:center; } /* ⚠ Jetonul „AD" ramane lizibil, dar nu mai ia 28px dintr-un buton de 174px. */ .mds-ahero__cta .mds-cta-invest .mds-ad{ padding:2px 4px; font-size:8.5px; } } /* ══ DESKTOP · putin mai mari, dar dupa continut ═══════════════════════════ ⚠⚠ `flex:0 0 auto`, nu `1 1 0`: pe desktop randul are 1152px, iar doua butoane intinse pe jumatate fiecare ar fi fost doua benzi de 571px. Se cere „putin mai mari", nu latime plina - aia e numai pentru mobil. ⚠⚠ MARIMEA CRESTE DIN CUTIE, NU DIN TEXT. Textul ramane la 13,5px, adica exact treapta butoanelor din sectiuni, fiindca asta s-a cerut. O prima incercare il urcase la 14,5px si butonul iesea mai mare, dar nu mai semana cu restul paginii - care era tocmai ideea. ⚠⚠ 52px, NU 56. A doua reglare, cerut: la 56 butoanele pareau prea inalte. Tema le avea la 51 si 53, deci 52 le lasa egale intre ele si abia peste cat erau, adica exact „putin mai mari". Umplutura pe orizontala ramane crescuta, de la 28 la 32px: latimea e cea care se vede intai. */ @media (min-width:921px){ .mds-ahero__cta{ flex-wrap:nowrap; justify-content:flex-start; } .mds-ahero__cta .mds-cta-invest, .mds-ahero__cta .mds-cta-chart{ flex:0 0 auto; min-height:52px; padding:14px 32px; gap:9px; /* ⚠ Pe desktop butonul e dupa continut, deci n-are de ce sa rupa randul. */ white-space:nowrap; } }