/* ══════════════════════════════════════════════════════════════════════════════ [mm_dashboard] — portalul părintelui. Design refăcut de la zero (0.86.0). Principii: iconuri SVG (nu emoji), tipografie generoasă, mobile-first, un singur accent de culoare, panou de notificări full-screen (stil app). ══════════════════════════════════════════════════════════════════════════════ */ .mm-dashboard, .mm-dashboard *, .mm-notif, .mm-notif *, .msp-portal-profesor, .msp-portal-profesor * { box-sizing: border-box; } /* Token-urile sunt declarate ȘI pe .mm-notif, nu doar pe .mm-dashboard: panoul de notificări e mutat din JS direct în (altfel un container Avada cu `transform` ar prinde `position: fixed` și panoul nu ar mai acoperi tot ecranul), deci nu mai are .mm-dashboard ca strămoș și nu ar moșteni variabilele. */ .mm-dashboard, .mm-notif { /* Text */ --mm-ink: #14161A; --mm-ink-2: #5B6472; --mm-ink-3: #8A93A3; /* Linii și suprafețe */ --mm-line: #E7E9EE; --mm-line-2: #F1F3F6; --mm-soft: #F6F7F9; /* Accent (roșul școlii) — folosit strict: buton principal, indicator tab, bulină */ --mm-brand: #CB0A1A; --mm-brand-2: #EE2740; --mm-brand-soft: #FDF2F3; /* Semantice */ --mm-ok: #067A46; --mm-ok-bg: #E7F6EE; --mm-warn: #92400E; --mm-warn-bg: #FEF6E7; --mm-warn-line: #F5DFB2; --mm-bad: #B42318; --mm-bad-bg: #FEF0EF; /* Rotunjiri */ --mm-r-sm: 10px; --mm-r: 14px; --mm-r-lg: 20px; /* Umbre */ --mm-sh-1: 0 1px 2px rgba(16, 24, 40, 0.05); --mm-sh-2: 0 4px 14px rgba(16, 24, 40, 0.07); --mm-sh-3: 0 16px 40px rgba(16, 24, 40, 0.16); } .mm-dashboard { display: flex; flex-direction: column; gap: 30px; width: 100%; /* Lățime standard de conținut (0.99.8, cerere explicită a utilizatorului — pe ecrane late, fără nicio limită, cardurile se întindeau nefiresc de mult, edge-to-edge). 1180px e lățimea "standard" folosită în mod obișnuit pentru conținut central (comparabil cu un container Bootstrap `xl`) — suficient de lată pentru grid-urile de statistici/carduri de mai jos, dar nu mai lată decât are sens pentru citit confortabil. Padding-ul lateral e plasa de siguranță pe ecrane mai înguste decât 1180px + safe-area, dar tot peste breakpoint-ul mobil de mai jos, unde pagina oricum n-are nevoie de el (conținutul umple deja lățimea disponibilă). */ max-width: 1180px; margin: 22px auto 0; padding-left: 24px; padding-right: 24px; color: var(--mm-ink); font-size: 15px; line-height: 1.55; scroll-behavior: smooth; } @media (max-width: 760px) { .mm-dashboard { /* 0, nu 10px (0.99.11, cerere explicită) — containerul Avada din jur oricum aplică propriul padding paginii, deci un padding suplimentar aici doar îngusta inutil conținutul pe mobil. */ padding-left: 0; padding-right: 0; } } /* Iconurile SVG moștenesc culoarea textului și se scalează cu fontul. */ .mm-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: -0.18em; } /* ── Header ──────────────────────────────────────────────────────────────── */ .mm-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .mm-head-user { display: flex; align-items: center; gap: 14px; min-width: 0; } .mm-head-poza { flex: 0 0 auto; line-height: 0; } /* Cercul alb-roșu luminos din jurul avatarului: un inel alb lipit de poză, apoi un inel roșu mai în afară, apoi o lumină difuză roșie — la cererea explicită a utilizatorului, ca zona de identitate a contului să se simtă „a școlii”, nu doar o poză neutră. */ .mm-head-poza img, .mm-head-ini { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mm-brand), 0 0 16px rgba(203, 10, 26, 0.35); } .mm-head-poza img { object-fit: cover; } .mm-head-ini { display: flex; align-items: center; justify-content: center; background: var(--mm-brand); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; } .mm-head-txt { display: flex; flex-direction: column; min-width: 0; } .mm-head-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-ink-3); } /* Reutilizată deasupra secțiunii de cursanți — „Cursant” sau „Cursanți”, ca să se înțeleagă dintr-o privire că informațiile de sub ea țin de cursant(ți), nu sunt un bloc anonim. */ .mm-cursanti > .mm-head-eyebrow { display: block; margin: 0 0 10px; } /* Rămâne , nu heading — pe un

, regulile de tipografie ale Avada pentru titluri (specificitate mai mare decât clasa noastră) băteau `font-size`-ul de aici, iar textul ieșea mult mai mare decât cei 32px ceruți. Pe span, Avada nu are nimic de suprascris. / .mm-head-nume { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--mm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-head-nav { display: flex; align-items: center; gap: 6px; } .mm-dashboard .mm-nav-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--mm-ink-2) !important; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .mm-dashboard .mm-nav-btn:hover, .mm-dashboard .mm-nav-btn:focus-visible { background: var(--mm-brand-soft) !important; color: var(--mm-brand) !important; border-color: transparent; } .mm-dashboard .mm-nav-iesire:hover, .mm-dashboard .mm-nav-iesire:focus-visible { background: var(--mm-bad-bg) !important; color: var(--mm-bad) !important; border-color: transparent; } .mm-nav-btn .mm-ico { width: 19px; height: 19px; color: var(--mm-brand); } .mm-nav-eticheta { line-height: 1.2; white-space: nowrap; } / Panourile de tab nu au stil propriu — sunt doar containere pe care le arată/ascunde msp-tabs.js. Le las declarate explicit ca să fie clar că nu s-a uitat nimic aici. / .mm-tab-panel { min-width: 0; } / Bulina de notificări necitite — pe colțul clopoțelului, ca într-o aplicație. Se poziționează față de învelișul iconiței (`.mm-nav-ico-wrap`), NU față de buton: butonul e lat pe desktop (icon + text) și îngust pe mobil (icon peste text), deci o poziție calculată din lățimea lui ar cădea peste etichetă pe un layout și pe lângă icon pe celălalt. Ancorată de icon, stă corect pe amândouă, fără reguli separate pe breakpoint. / .mm-nav-ico-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .mm-nav-bulina { position: absolute; top: -7px; left: 10px; min-width: 17px; height: 17px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mm-brand); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; } .mm-nav-bulina[hidden] { display: none; } / ── Panou notificări (full-screen pe mobil, sheet lateral pe desktop) ────── / .mm-notif { position: fixed; inset: 0; z-index: 999998; display: flex; justify-content: flex-end; } .mm-notif[hidden] { display: none; } .mm-notif-fundal { position: absolute; inset: 0; background: rgba(16, 24, 40, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: mm-fade 0.2s ease; } .mm-notif-panou { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 440px; height: 100%; background: #fff; box-shadow: var(--mm-sh-3); animation: mm-slide-in 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mm-slide-in { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes mm-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .mm-notif-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--mm-line); flex: 0 0 auto; } .mm-notif-titlu { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--mm-ink); } .mm-notif-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: var(--mm-soft); color: var(--mm-ink-2) !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .mm-notif-x:hover { background: var(--mm-line) !important; color: var(--mm-ink) !important; } .mm-notif-x .mm-ico { width: 19px; height: 19px; } .mm-notif-corp { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 24px; } .mm-notif-item { display: flex; align-items: flex-start; gap: 13px; padding: 14px 20px; text-decoration: none; color: var(--mm-ink) !important; border-bottom: 1px solid var(--mm-line-2); transition: background-color 0.14s ease; } .mm-notif-item:hover { background: var(--mm-soft) !important; } .mm-notif-item-nou { background: #FBFCFE; } .mm-notif-item-ico { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mm-soft); color: var(--mm-ink-2); } .mm-notif-item-ico .mm-ico { width: 18px; height: 18px; } .mm-notif-item-nou .mm-notif-item-ico { background: var(--mm-brand-soft); color: var(--mm-brand); } .mm-notif-item-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mm-notif-item-titlu { font-size: 14.5px; font-weight: 600; line-height: 1.4; } .mm-notif-item-mesaj { font-size: 13.5px; line-height: 1.45; color: var(--mm-ink-2); } .mm-notif-item-data { margin-top: 2px; font-size: 12px; color: var(--mm-ink-3); } .mm-notif-punct { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 15px; border-radius: 50%; background: var(--mm-brand); } .mm-notif-gol { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 34px; } .mm-notif-gol-ico { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--mm-soft); color: var(--mm-ink-3); margin-bottom: 16px; } .mm-notif-gol-ico .mm-ico { width: 26px; height: 26px; } .mm-notif-gol-titlu { margin: 0 0 4px; font-size: 16px; font-weight: 700; } .mm-notif-gol-sub { margin: 0; font-size: 14px; color: var(--mm-ink-2); max-width: 260px; } / ── Alertă (acte de completat) ──────────────────────────────────────────── / / Complet galbenă — container ȘI rândurile din interior, fără insule albe (utilizatorul nu a vrut ca actele adiționale să apară pe fundal alb în mijlocul unei alerte galbene). În loc de iconul rotund „!” lipit de titlu (încercare respinsă), o etichetă mică tip pilulă, sus de tot — semnalează dintr-o privire „asta e o alertă", fără să domine vizual titlul de dedesubt. / .mm-alerta { background: var(--mm-warn-bg); border: 1px solid var(--mm-warn-line); border-radius: var(--mm-r-lg); padding: 20px 22px; } / Fundal din ACEEAȘI familie galbenă ca restul alertei (nu maro-închis cu text alb, cum era la 0.94.1) — utilizatorul a cerut explicit o culoare mai apropiată de celelalte culori din alertă. Alerta rămâne în doar 2 culori: galbenul de fond și maroul de accent/text. / .mm-alerta-eticheta { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--mm-warn-line); color: var(--mm-warn); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .mm-alerta-eticheta .mm-ico { width: 12px; height: 12px; } .mm-alerta-titlu { margin: 0 0 14px; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--mm-warn); } / Fără chenar/fundal propriu pe rânduri — o listă simplă, un rând sub altul, despărțite prin linii, nu prin carduri separate (cerere explicită a utilizatorului, ca alerta să rămână în maxim 2 culori: galbenul de fond și maroul de accent). / .mm-alerta-lista { display: flex; flex-direction: column; } / Padding pe orizontală (nu doar vertical) — altfel fundalul de la hover se lipește direct de marginea alertei, fără nicio respirație între el și "perete". / .mm-dashboard .mm-alerta-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 10px; border-bottom: 1px solid var(--mm-warn-line); text-decoration: none; color: var(--mm-ink) !important; transition: background-color 0.14s ease; } .mm-dashboard .mm-alerta-item:last-child { border-bottom: none; } / Amprentă foarte discretă la hover — o umbră a aceluiași maro de accent, nu o a treia culoare. / .mm-dashboard .mm-alerta-item:hover { background: rgba(146, 64, 14, 0.07); } .mm-alerta-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mm-alerta-item-titlu { font-size: 14.5px; font-weight: 600; line-height: 1.4; } .mm-alerta-item-sub { font-size: 13px; color: var(--mm-ink-2); } .mm-alerta-item-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mm-warn); white-space: nowrap; } .mm-alerta-item-go .mm-ico { width: 15px; height: 15px; } / Puls scurt când sari la caseta de completare dintr-un link intern. / .mm-highlight-puls { box-shadow: 0 0 0 3px var(--mm-brand-2, #EE2740) !important; transition: box-shadow 0.2s ease; } / ── Sumar (Cursanți / Instrumente / Evenimente) ────────────────────────────── Singura pată de culoare din tot portalul: fundal roșu de brand. Restul dashboard-ului rămâne alb/neutru — headerul NU e colorat (s-a încercat la 0.87.0 un hero roșu care înghițea și headerul, a fost respins). / .mm-sumar { display: flex; background: linear-gradient(135deg, #D8121F 0%, var(--mm-brand) 55%, #A80815 100%); border-radius: var(--mm-r-lg); box-shadow: 0 8px 24px rgba(203, 10, 26, 0.20); overflow: hidden; } .mm-sumar-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 24px 10px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.18); } .mm-sumar-item:last-child { border-right: none; } .mm-sumar-nr { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; } .mm-sumar-cap { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); } / ── Bloc de conținut cu titlu (Evenimentele tale / Instrumente studiate) ── / .mm-bloc-cap { margin-bottom: 14px; } .mm-bloc-titlu { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--mm-ink); } .mm-bloc-titlu .mm-ico { width: 18px; height: 18px; color: var(--mm-ink-3); } / ── Listă generică de rânduri-card (contracte, evenimente) ──────────────── / .mm-lista { display: flex; flex-direction: column; gap: 10px; } .mm-rand { background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-r); padding: 16px 18px; box-shadow: var(--mm-sh-1); scroll-margin-top: 24px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mm-rand:hover { border-color: #DADDE4; box-shadow: var(--mm-sh-2); } .mm-rand-cap { display: flex; align-items: flex-start; gap: 13px; } .mm-rand-ico { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--mm-r-sm); background: var(--mm-soft); color: var(--mm-ink-2); } .mm-rand-ico .mm-ico { width: 18px; height: 18px; } .mm-rand-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mm-rand-titlu { font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--mm-ink); overflow-wrap: anywhere; } .mm-rand-sub { font-size: 13px; color: var(--mm-ink-2); } .mm-rand-jos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mm-line-2); } / ── Etichete de stare ───────────────────────────────────────────────────── / .mm-tag { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.5; white-space: nowrap; } .mm-tag .mm-ico { width: 13px; height: 13px; } .mm-tag-verde { background: var(--mm-ok-bg); color: var(--mm-ok); } .mm-tag-rosu { background: var(--mm-bad-bg); color: var(--mm-bad); } .mm-tag-galben { background: var(--mm-warn-bg); color: var(--mm-warn); } .mm-tag-gri { background: var(--mm-soft); color: var(--mm-ink-2); } / ── Butoane secundare ───────────────────────────────────────────────────── / .mm-dashboard .mm-btn-sec { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--mm-line); border-radius: 999px; background: #fff; color: var(--mm-ink) !important; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; } .mm-dashboard .mm-btn-sec:hover { background: var(--mm-soft) !important; border-color: #DADDE4; color: var(--mm-ink) !important; } .mm-btn-sec .mm-ico { width: 16px; height: 16px; color: var(--mm-ink-3); } .mm-dashboard .mm-btn-mic { padding: 7px 13px; font-size: 12.5px; } / ── Secțiunea cursanților ───────────────────────────────────────────────── / / Zonă delimitată clar, cu propriul chenar/fundal (0.99.9, cerere explicită a utilizatorului) — până acum, cursanții stăteau doar la un `gap` de restul (header, alertă, bara roșie de sumar), fără nicio graniță vizuală, deci totul curgea ca un singur bloc continuu. Acum secțiunea e o „cutie" proprie (fundal gri deschis, chenar, colțuri rotunjite — aceleași token-uri `--mm-soft`/`--mm-line`/`--mm-r-lg` folosite deja în restul dashboard-ului), separată vizual atât de bara roșie de statistici de deasupra, cât și de header. / .mm-cursanti { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 24px; background: var(--mm-soft); border: 1px solid var(--mm-line); border-radius: var(--mm-r-lg); padding: 22px 22px 26px; } @media (max-width: 720px) { .mm-cursanti { padding: 18px 16px 22px; } } / Comutator între cursanți (doar dacă părintele are mai mulți copii) / .mm-switch { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mm-switch::-webkit-scrollbar { display: none; } .mm-dashboard .mm-switch-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 16px 6px 6px; border: 1px solid var(--mm-line); border-radius: 999px; background: #fff !important; color: var(--mm-ink-2) !important; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .mm-dashboard .mm-switch-btn:hover { background: var(--mm-soft) !important; color: var(--mm-ink) !important; border-color: #DADDE4; } / Roșu deschis, nu negru (0.96.2, cerere explicită) — se potrivește cu avatarul roșu al cursantului, în loc să contrasteze dur cu el. Numele rămâne pe text închis (`--mm-ink`), citibil clar pe fundalul deschis; roșul „vorbește" prin bordură + cercul cu inițiale, nu prin tot fundalul pilulei. / .mm-dashboard .mm-switch-btn.mm-tab-activ { background: var(--mm-brand-soft) !important; border-color: var(--mm-brand); color: var(--mm-ink) !important; } / Învelișul e cel poziționat relativ (nu butonul, nici inițiala) — la fel ca la clopoțelul de Notificări (`.mm-nav-ico-wrap`): rămâne corect ancorat indiferent de restul conținutului butonului (numele cursantului, de lungimi diferite). / .mm-switch-ini-wrap { position: relative; display: inline-flex; flex: 0 0 auto; } .mm-switch-ini { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mm-brand); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; transition: background-color 0.16s ease, color 0.16s ease; } / Bulina de „ceva așteaptă completare” pe pilula unui cursant — reutilizează exact stilul bulinei de la Notificări (`.mm-nav-bulina`), doar repoziționată: cercul cu inițiale (30px) e mult mai mare decât iconul clopoțelului, deci ancorarea implicită (gândită pentru un icon îngust) ar cădea greșit; aici bulina stă la colțul din dreapta-sus al cercului. / .mm-switch-ini-wrap .mm-nav-bulina { top: -4px; left: auto; right: -4px; } .mm-switch-nume { line-height: 1.2; } / ── Header cursant ──────────────────────────────────────────────────────── / .mm-cursant { display: flex; flex-direction: column; } .mm-cursant-cap { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--mm-line); } / Aceeași identitate vizuală ca avatarul din header (0.95.2): inel alb-roșu luminos, roșu în loc de negru pentru inițiale — ca avatarul cursantului să se simtă parte din același sistem, nu un stil separat. / .mm-cursant-ini, .mm-cursant-poza { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mm-brand), 0 0 16px rgba(203, 10, 26, 0.35); } .mm-cursant-ini { display: flex; align-items: center; justify-content: center; background: var(--mm-brand); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; } .mm-cursant-poza { object-fit: cover; } .mm-cursant-info { flex: 1 1 auto; min-width: 0; } .mm-cursant-nume { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--mm-ink); overflow-wrap: anywhere; } .mm-cursant-meta { margin: 3px 0 0; font-size: 13.5px; color: var(--mm-ink-2); } / ── Carduri instrument / contact ────────────────────────────────────────── / / auto-fit (nu auto-fill) + un plafon: coloanele goale se pliază, așa că un singur instrument primește mai multă lățime decât minimul. Plafonul e 420px, nu mai puțin, pentru că rândurile dinăuntru folosesc aceeași distanță etichetă↔valoare ca panourile de pagină (vezi `.mm-def-card` mai jos) — sub atât, un nume lung de profesor s-ar rupe pe două rânduri. / .mm-instr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 420px)); gap: 14px; margin-bottom: 28px; } / Grid-ul stă deja într-un `.mm-panou`, care are propriul padding jos — fără regula asta ar rămâne un gol dublu la baza panoului. / .mm-panou .mm-instr-grid-in-panou { margin-bottom: 0; } .mm-instr { background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-r); padding: 20px 22px; box-shadow: var(--mm-sh-1); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mm-instr:hover { border-color: #DADDE4; box-shadow: var(--mm-sh-2); } .mm-instr-cap { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .mm-instr-ico { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--mm-r-sm); background: var(--mm-soft); color: var(--mm-ink-2); } .mm-instr-ico .mm-ico { width: 18px; height: 18px; } .mm-instr-nume { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--mm-ink); overflow-wrap: anywhere; } .mm-instr-val { margin: 0; font-size: 15px; color: var(--mm-ink-2); overflow-wrap: anywhere; } / Listă etichetă↔valoare, un rând pe linie, separate prin linii subțiri. Layout-ul e MEREU pe două coloane, cu eticheta într-o coloană de lățime fixă și valorile toate începând de la aceeași verticală. Varianta veche („etichetă la stânga, valoare împinsă la dreapta”) lăsa marginea din stânga a valorilor zimțată — „Începător”, „blue” și „Alexandru Romanine” porneau fiecare din alt punct — și arăta dezordonat. / .mm-def { margin: 0; } .mm-def-rand { display: grid; grid-template-columns: minmax(104px, 150px) 1fr; align-items: baseline; gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--mm-line-2); } .mm-def-rand dt { margin: 0; font-size: 13px; font-weight: 500; color: var(--mm-ink-3); } .mm-def-rand dd { margin: 0; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--mm-ink); overflow-wrap: anywhere; } / Aceeași listă într-un container LAT (un `.mm-panou` de pagină, nu un card îngust) — are loc de o coloană de etichetă mai generoasă și de rânduri mai aerisite. / .mm-panou .mm-def-rand { grid-template-columns: minmax(120px, 200px) 1fr; gap: 4px 28px; padding: 12px 0; } .mm-panou .mm-def-rand:first-child { border-top: none; padding-top: 0; } / Cardurile de instrument dintr-un panou folosesc ACEEAȘI distanță etichetă↔valoare ca lista de pagină de mai sus (cerut explicit: „să fie distanța la fel ca la Date personale”), doar cu plafonul coloanei de etichetă puțin mai mic, ca să încapă în card. Trei clase în selector, ca să bată regula de panou fără `:not()` cu combinator, nesuportat uniform pe browsere vechi. / .mm-panou .mm-def-card .mm-def-rand { grid-template-columns: minmax(104px, 150px) 1fr; gap: 4px 24px; padding: 12px 0; } / ── Tab-uri (Contracte / Evenimente / Contact) ──────────────────────────── / .mm-tabbar { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--mm-line); overflow-x: auto; scrollbar-width: none; } .mm-tabbar::-webkit-scrollbar { display: none; } .mm-dashboard .mm-tabbar .mm-tab-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin: 0 14px 0 0; padding: 0 2px 12px; border: none; border-bottom: 2px solid transparent; background: none !important; color: var(--mm-ink-3) !important; font-size: 14.5px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .mm-dashboard .mm-tabbar .mm-tab-btn:hover { color: var(--mm-ink-2) !important; } .mm-dashboard .mm-tabbar .mm-tab-btn.mm-tab-activ { color: var(--mm-ink) !important; border-bottom-color: var(--mm-brand); } .mm-tab-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; padding: 1px 7px; border-radius: 999px; background: var(--mm-soft); color: var(--mm-ink-3); font-size: 11.5px; font-weight: 700; line-height: 1.5; } .mm-dashboard .mm-tabbar .mm-tab-btn.mm-tab-activ .mm-tab-nr { background: var(--mm-brand-soft); color: var(--mm-brand); } / ── Acte adiționale, în interiorul unui contract ────────────────────────── / .mm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; padding: 11px 13px; border-radius: var(--mm-r-sm); background: var(--mm-soft); font-size: 13.5px; color: var(--mm-ink-2); text-decoration: none; } .mm-dashboard a.mm-act-link { color: var(--mm-ink) !important; justify-content: space-between; transition: background-color 0.15s ease; } .mm-dashboard a.mm-act-link:hover { background: var(--mm-line-2) !important; } .mm-act-nume { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--mm-ink); overflow-wrap: anywhere; } .mm-act-nota { flex: 1 1 100%; font-size: 12.5px; color: var(--mm-ink-3); } / ── Caseta „documentul te așteaptă la semnat” ─────────────────────────────── Cel mai important lucru pe care îl are părintele de făcut, deci cea mai vizibilă casetă din portal: bordură de accent, tonul galben de atenționare (nu roșu — nu e o eroare, e un pas normal) și pașii numerotați. Trece pe verde-neutru („în verificare”) după ce părintele ne anunță că a semnat, ca să se vadă clar că mingea nu mai e la el. / .mm-semnare { background: #fff; border: 1px solid var(--mm-warn-line); border-left: 4px solid #E8A33D; border-radius: var(--mm-r-lg); padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--mm-sh-2); scroll-margin-top: 24px; } .mm-semnare-declarat { border-color: var(--mm-line); border-left-color: var(--mm-ok); box-shadow: var(--mm-sh-1); } .mm-semnare-cap { margin-bottom: 16px; } .mm-semnare-tag { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; background: var(--mm-warn-bg); color: var(--mm-warn); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .mm-semnare-declarat .mm-semnare-tag { background: var(--mm-ok-bg); color: var(--mm-ok); } .mm-semnare-titlu { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--mm-ink); } .mm-semnare-sub { margin: 0; font-size: 13.5px; color: var(--mm-ink-2); } .mm-semnare-text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--mm-ink-2); } .mm-semnare-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } / Butonul principal poartă iconiță, deci are nevoie de aliniere flex — `.msp-btn` de bază e un buton doar-text. / .mm-dashboard .mm-btn-descarca { display: inline-flex; align-items: center; gap: 8px; } .mm-btn-descarca .mm-ico { width: 17px; height: 17px; } / Butonul de confirmare — verde deschis, ca să se distingă clar de descărcare (roșu/brand) și să transmită "pas final, pozitiv", nu doar o acțiune secundară neutră ca restul .mm-btn-sec. / .mm-dashboard .mm-btn-am-semnat { background: var(--mm-ok-bg); border-color: transparent; color: var(--mm-ok) !important; } .mm-dashboard .mm-btn-am-semnat:hover { background: #D3F0E0 !important; border-color: transparent; color: var(--mm-ok) !important; } .mm-btn-am-semnat .mm-ico { color: var(--mm-ok); } .mm-dashboard .mm-semnare-anuleaza { padding: 0; border: none; background: none; color: var(--mm-ink-3) !important; font-size: 13px; text-decoration: underline; cursor: pointer; } .mm-dashboard .mm-semnare-anuleaza:hover { color: var(--mm-ink-2) !important; } / ── Caseta de completare a unui act adițional ───────────────────────────── / .mm-completare { background: #fff; border: 1px solid var(--mm-warn-line); border-radius: var(--mm-r-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--mm-sh-2); scroll-margin-top: 24px; } .mm-completare-cap { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--mm-line); } .mm-completare-tag { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; background: var(--mm-warn-bg); color: var(--mm-warn); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .mm-completare-titlu { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--mm-ink); } .mm-completare-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mm-ink-2); } .mm-dashboard .mm-completare-form { display: flex; flex-direction: column; gap: 20px; max-width: none; } / ── Stări goale / note ──────────────────────────────────────────────────── / .mm-gol { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 30px; background: var(--mm-soft); border-radius: var(--mm-r-lg); } .mm-gol-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--mm-ink-3); margin-bottom: 16px; } .mm-gol-ico .mm-ico { width: 24px; height: 24px; } .mm-gol-titlu { margin: 0 0 4px; font-size: 17px; font-weight: 700; } .mm-gol-sub { margin: 0; font-size: 14.5px; color: var(--mm-ink-2); max-width: 380px; } .mm-nota { margin: 14px 0 0; font-size: 13.5px; color: var(--mm-ink-2); } .mm-dashboard .mm-nota a { color: var(--mm-brand) !important; text-decoration: underline; } / ── Formularul de completare (clase partajate cu alte pagini) ───────────── / .msp-camp-simplu { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; color: var(--mm-ink, #333); max-width: 460px; } .mm-completare-form input[type="text"], .mm-completare-form input[type="number"], .mm-completare-form textarea { font-weight: 400; padding: 11px 14px; border: 1px solid #D9DDE4; border-radius: var(--mm-r-sm, 10px); font-size: 15px; color: var(--mm-ink, #14161A); background: #fff; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mm-completare-form input[type="text"]:focus, .mm-completare-form input[type="number"]:focus, .mm-completare-form textarea:focus { outline: none; border-color: var(--mm-ink, #14161A); box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.08); } .mm-completare-form textarea { resize: vertical; min-height: 84px; } .msp-camp-grup { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; } .msp-camp-grup-titlu { font-size: 14px; font-weight: 600; color: var(--mm-ink, #333); } .msp-grup-titlu { margin: 14px 0 2px; font-size: 15px; font-weight: 700; color: var(--mm-ink, #2d2d2d); border-bottom: 1px solid #eee; padding-bottom: 6px; } .msp-opt { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; font-weight: 400 !important; font-size: 14.5px !important; width: auto !important; max-width: 100%; cursor: pointer; margin: 0 !important; padding: 8px 11px !important; border-radius: var(--mm-r-sm, 10px); transition: background-color 0.12s ease; } .msp-opt:hover { background: #F6F7F9; } .msp-opt input[type="radio"], .msp-opt input[type="checkbox"] { -webkit-appearance: auto !important; appearance: auto !important; position: static !important; opacity: 1 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: 16px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 16px !important; order: 0 !important; left: auto !important; top: auto !important; } / ══ Responsive ═══════════════════════════════════════════════════════════ / / Tabletă și sub — panoul de notificări devine full-screen, urcând de jos. / @media (max-width: 760px) { .mm-notif-panou { max-width: 100%; border-radius: 0; animation: mm-slide-up 0.26s cubic-bezier(0.22, 1, 0.36, 1); } } @media (max-width: 720px) { .mm-dashboard { gap: 24px; font-size: 14.5px; } / Navigarea devine un rând de 4 butoane pe toată lățimea, cu eticheta sub icon (tipar de tab-bar de aplicație) — textul rămâne vizibil, dar încape. / .mm-head { gap: 16px; } .mm-head-user { width: 100%; } .mm-head-nav { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mm-dashboard .mm-nav-btn { flex-direction: column; gap: 5px; padding: 11px 4px; border-radius: var(--mm-r); background: var(--mm-soft) !important; border-color: transparent; font-size: 11.5px; } .mm-nav-btn .mm-ico { width: 21px; height: 21px; } .mm-head-poza img, .mm-head-ini { width: 46px; height: 46px; font-size: 16px; } .mm-head-nume { font-size: 25px; } / Sumarul rămâne pe 3 coloane (etichetele sunt scurte), dar mai compact. / .mm-sumar-item { padding: 18px 6px; } .mm-sumar-nr { font-size: 26px; } .mm-sumar-cap { font-size: 12px; } .mm-cursant-cap { gap: 14px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 20px; } .mm-cursant-ini, .mm-cursant-poza { flex-basis: 50px; width: 50px; height: 50px; font-size: 17px; } .mm-cursant-nume { font-size: 20px; } .mm-cursant-cap .mm-btn-sec { flex: 1 1 100%; justify-content: center; } .mm-instr-grid { grid-template-columns: 1fr; margin-bottom: 24px; } .mm-alerta, .mm-completare { padding: 18px; } .mm-completare-titlu { font-size: 16.5px; } .mm-alerta-item { flex-direction: column; align-items: flex-start; gap: 8px; } .mm-rand { padding: 14px 15px; } } @media (max-width: 380px) { .mm-dashboard .mm-nav-btn { font-size: 10.5px; padding: 10px 2px; } .mm-sumar-nr { font-size: 23px; } .mm-sumar-cap { font-size: 11px; } } / ══════════════════════════════════════════════════════════════════════════════ PAGINILE DE PORTAL cu shortcode (profil, evenimente, fișa cursantului, portalul profesorului). Toate împart rama comună randată de MSP_Shell — același antet ca `[mm_dashboard]`, cu buton de înapoi, titlul paginii și aceleași butoane de navigare — plus componentele de mai jos (panouri, formulare, mesaje). ══════════════════════════════════════════════════════════════════════════════ / .mm-pagina { gap: 22px; } / Antetul unei pagini interioare: buton rotund de înapoi + titlu, în loc de avatar. / .mm-head-pagina { padding-bottom: 20px; border-bottom: 1px solid var(--mm-line); } .mm-dashboard .mm-inapoi { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--mm-line); border-radius: 50%; background: #fff; color: var(--mm-ink) !important; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .mm-dashboard .mm-inapoi:hover { background: var(--mm-soft) !important; border-color: #DADDE4; transform: translateX(-2px); } .mm-inapoi .mm-ico { width: 19px; height: 19px; } / Pagina curentă, marcată în bara de navigare. / .mm-dashboard .mm-nav-btn.mm-nav-activ { background: var(--mm-ink) !important; border-color: var(--mm-ink); color: #fff !important; } / Iconul are propria culoare roșie, setată direct pe el (nu moștenită) — pe butonul activ, fundalul e închis, deci iconul trebuie forțat înapoi la alb, altfel ar rămâne roșu peste fundalul închis, în contrast urât cu restul textului alb din buton. / .mm-dashboard .mm-nav-btn.mm-nav-activ .mm-ico { color: #fff; } / ── Panou (secțiune de conținut într-o cutie albă) ──────────────────────── / .mm-panou { background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-r-lg); padding: 24px 26px; box-shadow: var(--mm-sh-1); } .mm-panou + .mm-panou, .mm-form .mm-panou + .mm-panou { margin-top: 16px; } .mm-panou-cap { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--mm-line-2); } .mm-panou-ico { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--mm-r-sm); background: var(--mm-soft); color: var(--mm-ink-2); } .mm-panou-ico .mm-ico { width: 19px; height: 19px; } .mm-panou-txt { flex: 1 1 auto; min-width: 0; } .mm-panou-titlu { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--mm-ink); } .mm-panou-sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mm-ink-2); } / ── Formulare ───────────────────────────────────────────────────────────── / .mm-form { display: block; } .mm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; } .mm-camp { display: flex; flex-direction: column; gap: 7px; min-width: 0; } / Un câmp care ocupă tot rândul (ex: strada, nume complet). / .mm-camp-lat { grid-column: 1 / -1; } / Câmp scurt (număr, bloc, etaj) — mai multe încap pe același rând. / .mm-camp-mic { grid-column: span 1; } .mm-camp-eticheta { font-size: 13px; font-weight: 600; color: var(--mm-ink); } .mm-optional { font-weight: 400; font-size: 12px; color: var(--mm-ink-3); } .mm-dashboard .mm-camp input[type="text"], .mm-dashboard .mm-camp input[type="email"], .mm-dashboard .mm-camp input[type="password"], .mm-dashboard .mm-camp input[type="number"], .mm-dashboard .mm-camp input[type="date"], .mm-dashboard .mm-camp textarea, .mm-dashboard .mm-camp select { width: 100%; padding: 11px 14px; border: 1px solid #D9DDE4; border-radius: var(--mm-r-sm); background: #fff; color: var(--mm-ink); font-size: 15px; font-weight: 400; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mm-dashboard .mm-camp input:focus, .mm-dashboard .mm-camp textarea:focus, .mm-dashboard .mm-camp select:focus { outline: none; border-color: var(--mm-ink); box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.08); } .mm-dashboard .mm-camp input:disabled { background: var(--mm-soft); color: var(--mm-ink-3); cursor: not-allowed; } .mm-ajutor { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--mm-ink-3); } .mm-ajutor .mm-ico { width: 14px; height: 14px; flex: 0 0 14px; } .mm-form-actiuni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .mm-form-inline { display: inline-block; margin: 0; } / Buton de upload — ascunde input-ul de fișier urât și pune o pastilă în loc. / .mm-dashboard .mm-btn-fisier { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--mm-line); border-radius: 999px; background: #fff; color: var(--mm-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .mm-dashboard .mm-btn-fisier:hover { background: var(--mm-soft); border-color: #DADDE4; } .mm-btn-fisier .mm-ico { width: 16px; height: 16px; color: var(--mm-ink-3); } .mm-btn-fisier input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .mm-avatar-rand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mm-avatar-rand img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--mm-line); } / ── Opțiuni (radio) sub formă de carduri selectabile ────────────────────── / .mm-optiuni { display: flex; flex-direction: column; gap: 8px; } .mm-dashboard .mm-optiune { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: #fff; cursor: pointer; font-weight: 400; transition: border-color 0.15s ease, background-color 0.15s ease; } .mm-dashboard .mm-optiune:hover { background: var(--mm-soft); } .mm-dashboard .mm-optiune:has(input:checked) { border-color: var(--mm-ink); background: var(--mm-soft); } .mm-dashboard .mm-optiune input[type="radio"] { -webkit-appearance: auto !important; appearance: auto !important; position: static !important; opacity: 1 !important; width: 17px !important; height: 17px !important; min-width: 17px !important; flex: 0 0 17px !important; margin: 2px 0 0 !important; accent-color: var(--mm-brand); } .mm-optiune-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mm-optiune-titlu { font-size: 14.5px; font-weight: 600; color: var(--mm-ink); } .mm-optiune-sub { font-size: 13px; color: var(--mm-ink-2); overflow-wrap: anywhere; } / ── Mesaje (succes / eroare / neutru) ───────────────────────────────────── / .mm-mesaj { display: flex; align-items: flex-start; gap: 11px; padding: 14px 17px; border-radius: var(--mm-r); font-size: 14px; line-height: 1.5; } .mm-mesaj .mm-ico { width: 18px; height: 18px; margin-top: 2px; } .mm-mesaj-ok { background: var(--mm-ok-bg); color: var(--mm-ok); } .mm-mesaj-rau { background: var(--mm-bad-bg); color: var(--mm-bad); } .mm-mesaj-gri { background: var(--mm-soft); color: var(--mm-ink-2); } .mm-dashboard .mm-mesaj a { color: inherit !important; text-decoration: underline; font-weight: 600; } / ── Rând-card clicabil (ex: fișele cursanților din profil) ──────────────── / .mm-dashboard a.mm-rand-link { display: block; text-decoration: none; color: var(--mm-ink) !important; } .mm-rand-sageata { flex: 0 0 auto; display: flex; align-items: center; color: var(--mm-ink-3); } .mm-rand-sageata .mm-ico { width: 18px; height: 18px; } .mm-dashboard a.mm-rand-link:hover .mm-rand-sageata { color: var(--mm-ink); } / ── Rând cu poză + camera de schimbare (fișele cursanților, din Profil) ───── Cardul NU mai e el însuși un link (ca la .mm-rand-link) — avatarul cu butonul de cameră trebuie să rămână un element separat, apăsabil independent, nu imbricat într-un . Doar partea de text + săgeată e link, ocupând restul rândului. / .mm-dashboard .mm-rand-cursant { display: flex; align-items: center; gap: 14px; } .mm-rand-cursant-poza { position: relative; flex: 0 0 auto; display: inline-flex; } .mm-rand-cursant-poza img, .mm-rand-cursant-ini { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mm-brand), 0 0 12px rgba(203, 10, 26, 0.3); } .mm-rand-cursant-poza img { object-fit: cover; } .mm-rand-cursant-ini { display: flex; align-items: center; justify-content: center; background: var(--mm-brand); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; } .mm-dashboard .mm-rand-cursant-poza-schimba { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--mm-ink); color: #fff; cursor: pointer; } .mm-rand-cursant-poza-schimba .mm-ico { width: 11px; height: 11px; } .mm-dashboard a.mm-rand-cursant-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--mm-ink) !important; } .mm-dashboard a.mm-rand-cursant-link:hover .mm-rand-sageata { color: var(--mm-ink); } / ── Evenimente ──────────────────────────────────────────────────────────── / .mm-eveniment-lista { display: flex; flex-direction: column; gap: 16px; } .mm-eveniment { background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-r-lg); padding: 24px 26px; box-shadow: var(--mm-sh-1); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mm-eveniment:hover { border-color: #DADDE4; box-shadow: var(--mm-sh-2); } .mm-eveniment-cap { margin-bottom: 14px; } .mm-eveniment-tip { display: inline-block; margin-bottom: 8px; padding: 4px 11px; border-radius: 999px; background: var(--mm-brand-soft); color: var(--mm-brand); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .mm-eveniment-nume { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--mm-ink); overflow-wrap: anywhere; } / Datele-cheie: dată, loc, preț, locuri — rânduri cu icon, pe fundal gri. / .mm-eveniment-fapte { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .mm-fapt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--mm-soft); font-size: 13px; font-weight: 500; color: var(--mm-ink-2); } .mm-fapt .mm-ico { width: 15px; height: 15px; color: var(--mm-ink-3); } .mm-fapt-plin { background: var(--mm-bad-bg); color: var(--mm-bad); } .mm-fapt-plin .mm-ico { color: var(--mm-bad); } .mm-eveniment-descriere { font-size: 14.5px; line-height: 1.6; color: var(--mm-ink-2); margin-bottom: 18px; } .mm-eveniment-descriere p { margin: 0 0 10px; } .mm-eveniment-descriere p:last-child { margin-bottom: 0; } .mm-eveniment .mm-mesaj { margin-bottom: 16px; } / Participanții (cursanții + părintele), cu starea înscrierii fiecăruia. / .mm-participanti { display: flex; flex-direction: column; border-top: 1px solid var(--mm-line-2); margin-top: 4px; } .mm-participant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--mm-line-2); } .mm-participant:last-child { border-bottom: none; padding-bottom: 0; } .mm-participant-ident { display: flex; align-items: center; gap: 11px; min-width: 0; } .mm-participant-ini { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mm-soft); color: var(--mm-ink-2); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .mm-participant-nume { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--mm-ink); overflow-wrap: anywhere; } .mm-participant-eu { padding: 2px 8px; border-radius: 999px; background: var(--mm-soft); color: var(--mm-ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .mm-participant-actiune { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mm-dashboard .mm-btn-renunta { padding: 7px 15px; border: 1px solid var(--mm-line); border-radius: 999px; background: #fff; color: var(--mm-ink-2) !important; font-size: 12.5px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mm-dashboard .mm-btn-renunta:hover { background: var(--mm-bad-bg) !important; border-color: transparent; color: var(--mm-bad) !important; } / NOTĂ: stilurile vechi `.mm-inscriere` (formularul pliat, dinainte de fereastra de înscriere introdusă la 0.99.79) au fost ȘTERSE — nu le mai folosea nimeni. / .msp-camp-afisare { color: var(--mm-ink); } /* ── Câmpuri editabile din „Informații suplimentare” (fișa cursantului) ────── Rândul e un `.mm-def-rand` normal (etichetă | valoare). În coloana valorii punem valoarea la stânga și butonul „Editează” împins la marginea din dreapta a rândului, ca să nu mai stea lipit de text. Când se apasă, zona de input coboară pe un rând propriu, pe toată lățimea. / .mm-panou .msp-camp-rand dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .mm-dashboard .msp-camp-editeaza-link { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 13px; border: 1px solid var(--mm-line); border-radius: 999px; background: #fff; color: var(--mm-ink-2) !important; font-size: 12.5px; font-weight: 600; line-height: 1.3; text-decoration: none !important; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .mm-dashboard .msp-camp-editeaza-link:hover { background: var(--mm-soft) !important; border-color: #DADDE4; color: var(--mm-ink) !important; } .msp-camp-editeaza-link .mm-ico { width: 14px; height: 14px; color: var(--mm-ink-3); } / Zona de editare ocupă rândul întreg, sub valoare. / .mm-panou .msp-camp-input-zona { flex: 1 1 100%; } .mm-dashboard .msp-camp-input-zona input, .mm-dashboard .msp-camp-input-zona textarea { width: 100%; max-width: 380px; padding: 10px 13px; border: 1px solid #D9DDE4; border-radius: var(--mm-r-sm); background: #fff; color: var(--mm-ink); font-size: 15px; font-weight: 400; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mm-dashboard .msp-camp-input-zona input:focus, .mm-dashboard .msp-camp-input-zona textarea:focus { outline: none; border-color: var(--mm-ink); box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.08); } / Text secundar/„gol” în portalul profesorului. / .msp-meta { color: #5B6472; font-size: 14px; } / ── Buton principal, varianta mică ──────────────────────────────────────── / .mm-dashboard .msp-btn-mic { padding: 8px 18px; font-size: 13px; } / ── Responsive pentru paginile de portal ────────────────────────────────── / @media (max-width: 720px) { .mm-head-pagina { padding-bottom: 16px; } .mm-panou, .mm-eveniment, .mm-semnare { padding: 18px; } .mm-semnare-titlu { font-size: 16.5px; } / Butoanele de acțiune pe toată lățimea — sunt pașii finali, merită să fie ușor de apăsat. / .mm-semnare-actiuni { flex-direction: column; align-items: stretch; } .mm-semnare-actiuni .mm-form-inline, .mm-dashboard .mm-semnare-actiuni .msp-btn, .mm-dashboard .mm-semnare-actiuni .mm-btn-sec { width: 100%; justify-content: center; } .mm-semnare-actiuni .mm-form-inline .mm-btn-sec { display: flex; } .mm-panou-cap { gap: 11px; padding-bottom: 14px; margin-bottom: 16px; } .mm-panou-titlu { font-size: 16px; } .mm-eveniment-nume { font-size: 18.5px; } / Pe mobil, un câmp normal ocupă rândul întreg (email, telefon, parolele) — două câmpuri „normale” alăturate erau prea înguste ca să fie folosibile. Doar câmpurile scurte de adresă (Număr/Bloc/Scara/Etaj/Apartament/Cod poștal) rămân două pe rând. / .mm-form-grid { grid-template-columns: repeat(2, 1fr); } .mm-camp { grid-column: 1 / -1; } .mm-camp-mic { grid-column: span 1; } / Pe mobil păstrăm aceeași așezare pe două coloane ca pe desktop (cerută explicit) — doar strângem coloana etichetei și spațiul dintre coloane, ca să încapă. / .mm-panou .mm-def-rand { grid-template-columns: minmax(88px, 118px) 1fr; gap: 4px 14px; } / Pe mobil cardul de instrument ocupă toată lățimea, deci poate păstra aceeași distanță etichetă↔valoare ca panourile — nu mai e nevoie s-o strângem. / .mm-panou .mm-def-card .mm-def-rand { grid-template-columns: minmax(88px, 118px) 1fr; gap: 4px 14px; } .mm-participant { align-items: flex-start; } .mm-participant-actiune { width: 100%; padding-left: 47px; } .mm-dashboard .mm-inapoi { flex-basis: 38px; width: 38px; height: 38px; } } / Pe telefoanele foarte înguste, până și câmpurile scurte de adresă trec pe rând propriu. / @media (max-width: 419px) { .mm-camp-mic { grid-column: 1 / -1; } } / Câmp de șablon "Pachet abonament" — carduri colorate (Blue/Red/Silver/Gold), o singură alegere din toate cele 4 categorii × 4 planuri (radio-uri native, stilizate vizual ca niște checkbox-uri, ca să semene cu cerința "bifă unică"). Grid auto-fit, ca lista întreagă să rămână pe o singură pagină (utilizatorul a respins varianta cu tab-uri per categorie). / .msp-pachete-abonament-grup { width: 100% !important; } .msp-pachete-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 10px; width: 100%; } .msp-pachet-card { border: 1px solid #e5e7eb; border-top: 3px solid var(--msp-pachet-culoare, #2563eb); border-radius: 12px; padding: 16px 16px 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .msp-pachet-card-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; } .msp-pachet-nume { font-size: 16px; font-weight: 800; color: var(--msp-pachet-culoare, #2563eb); letter-spacing: 0.03em; } .msp-pachet-subtitlu { font-size: 12px; color: #888; } .msp-pachet-optiuni { display: flex !important; flex-direction: column !important; gap: 6px !important; } .msp-pachet-optiune { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; font-weight: 400 !important; font-size: 13px !important; width: auto !important; margin: 0 !important; padding: 8px 10px !important; cursor: pointer; border-radius: 8px; border: 1px solid transparent; transition: background-color 0.12s ease, border-color 0.12s ease; } .msp-pachet-optiune:hover { background: #f7f7f8; } / Opțiunea aleasă (:checked) capătă un fundal ușor tonat cu culoarea categoriei, ca să iasă clar în evidență printre celelalte 3, fără carduri separate per opțiune. color-mix() are fallback automat (declarat înainte) pentru browsere fără suport. / .msp-pachet-optiune:has(input:checked) { background: #f3f4f6; border-color: var(--msp-pachet-culoare, #2563eb); } .msp-pachet-optiune:has(input:checked) { background: color-mix(in srgb, var(--msp-pachet-culoare, #2563eb) 8%, white); } / Opțiunea specială "curs individual / plată la ședință" — separată vizual de cardurile colorate de pachete (nu e o categorie, e o alternativă la orice abonament). Padding-ul e cel al unui card de pachet, nu al unui rând de opțiune, fiindcă stă singură, pe toată lățimea, sub grid — cu padding-ul mic de rând arăta strâmtorată. / .msp-pachet-optiune-individual { / Cardurile de pachet primesc culoarea categoriei inline; ăsta nu e o categorie, deci fără variabilă ar cădea pe fallback-ul albastru (#2563eb) și titlul/prețul s-ar face albastre la bifare, în contrast cu bifa și bordura lui gri. O declarăm explicit. / --msp-pachet-culoare: #6b7280; margin-top: 16px !important; padding: 16px !important; border: 1px dashed #c2c2c2 !important; border-radius: 12px; background: #fafafa; } .msp-pachet-optiune-individual:hover { background: #f0f0f0; } / Titlul și prețul pe același rând, prețul împins la dreapta; descrierea dedesubt, pe toată lățimea. Titlul e `display:block` în regula de bază, ceea ce l-ar face să ocupe tot rândul și ar arunca prețul pe linia următoare — de aceea îl readucem la un flex-item normal. / .msp-pachet-optiune-individual .msp-pachet-optiune-titlu { display: inline; margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .msp-pachet-optiune-individual .msp-pachet-optiune-pret { flex: 0 0 auto; } .msp-pachet-optiune-individual .msp-pachet-optiune-meta { display: block; margin-top: 6px; line-height: 1.5; } .msp-pachet-optiune-individual .msp-pachet-checkbox { border-color: #6b7280; } .msp-pachet-optiune-individual input[type="radio"]:checked + .msp-pachet-checkbox { background: #6b7280; border-color: #6b7280; } .msp-pachet-optiune-individual:has(input:checked) { background: #eceef1; border-color: #6b7280; border-style: solid !important; } / Radio-ul real rămâne funcțional (accesibil, un singur checked posibil pe grup), dar invizibil — checkbox-ul vizual e span-ul de lângă el, care se "bifează" via CSS pe :checked. / .msp-pachet-optiune input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; } .msp-pachet-checkbox { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 2px solid #c2c2c2; border-radius: 5px; display: inline-block; position: relative; background: #fff; transition: background-color 0.12s ease, border-color 0.12s ease; } .msp-pachet-optiune input[type="radio"]:checked + .msp-pachet-checkbox { background: var(--msp-pachet-culoare, #2563eb); border-color: var(--msp-pachet-culoare, #2563eb); } .msp-pachet-optiune input[type="radio"]:checked + .msp-pachet-checkbox::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .msp-pachet-optiune input[type="radio"]:focus-visible + .msp-pachet-checkbox { outline: 2px solid var(--msp-pachet-culoare, #2563eb); outline-offset: 2px; } .msp-pachet-optiune-text { line-height: 1.4; flex: 1; min-width: 0; } / Titlu (ex: "SIMPLU") pe primul rând, apoi un al doilea rând cu detaliile (ședințe) la stânga și prețul la dreapta — mai citibil decât o singură propoziție lungă, curgătoare. / .msp-pachet-optiune-titlu { display: block; font-weight: 700; font-size: 13px; color: #222; margin-bottom: 2px; } .msp-pachet-optiune input[type="radio"]:checked ~ .msp-pachet-optiune-text .msp-pachet-optiune-titlu { color: var(--msp-pachet-culoare, #2563eb); } .msp-pachet-optiune-rand { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .msp-pachet-optiune-meta { font-size: 12px; color: #777; } .msp-pachet-optiune-pret { font-size: 13px; font-weight: 700; color: #222; white-space: nowrap; } .msp-pachet-optiune input[type="radio"]:checked ~ .msp-pachet-optiune-text .msp-pachet-optiune-pret { color: var(--msp-pachet-culoare, #2563eb); } / Previzualizarea din wp-admin (tab "Pachete Abonament") — aceleași carduri, dar needitabile, cu slug-ul de marcaj afișat sub fiecare opțiune. / .msp-pachete-grid--admin .msp-pachet-optiune--admin { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; padding: 6px 8px; } .msp-pachete-grid--admin .msp-pachet-checkbox { border-color: var(--msp-pachet-culoare, #2563eb); } .msp-pachet-slug { display: inline-block; margin-top: 2px; font-size: 11px; color: #888; } .msp-lista-marcaje-abonament code { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 6px; background: #f0f0f1; border-radius: 4px; font-size: 12px; } / Portalul profesorului / .msp-tabel-prezenta { width: 100%; border-collapse: collapse; margin: 16px 0; } .msp-tabel-prezenta th, .msp-tabel-prezenta td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; } .msp-input-observatii { width: 100%; } / Singurul loc cu roșu puternic — exact ca butoanele de pe site-ul live (fundal #F73760, hover spre roșul de brand #CB0A1A). / / Butonul principal de acțiune — singurul element cu roșu plin din tot portalul. / .msp-btn { background: var(--msp-accent, #CB0A1A); color: #fff !important; border: none; padding: 12px 24px; border-radius: 999px; cursor: pointer; font-size: 14.5px; font-weight: 650; line-height: 1.3; align-self: flex-start; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .msp-btn:hover { background: #A80815; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(203, 10, 26, 0.24); } .msp-btn:active { transform: translateY(0); } .msp-note-progres { margin: 10px 0; padding-left: 18px; } .msp-nota-data { font-weight: 600; color: #555; } .msp-portal-profesor .msp-card { background: #ffffff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); padding: 20px; margin-bottom: 16px; } .msp-portal-profesor .msp-card textarea { width: 100%; margin: 8px 0; } / Evenimente publice / .msp-evenimente { display: flex; flex-direction: column; gap: 20px; margin: 20px 0; } .msp-eveniment-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); padding: 24px; } .msp-eveniment-header { margin-bottom: 8px; } .msp-eveniment-tip { display: inline-block; background: #FBEAEB; color: #CB0A1A; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-bottom: 8px; } .msp-eveniment-header h3 { margin: 4px 0 0; font-size: 20px; } .msp-eveniment-descriere { color: #555; font-size: 14px; margin: 10px 0; } .msp-eveniment-detalii { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #666; margin: 12px 0; padding: 12px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } .msp-eveniment-succes { background: #eafaf0; color: #2a8a3e; padding: 10px 14px; border-radius: 8px; font-size: 14px; } .msp-eveniment-eroare { background: #fdecea; color: #b32d2e; padding: 10px 14px; border-radius: 8px; font-size: 14px; } .msp-eveniment-plin { color: #b32d2e; font-weight: 600; font-size: 14px; } .msp-eveniment-form-details summary { cursor: pointer; font-weight: 600; color: #CB0A1A; padding: 8px 0; list-style: none; } .msp-eveniment-form-details summary::-webkit-details-marker { display: none; } .msp-eveniment-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; max-width: 420px; } .msp-eveniment-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #333; } .msp-eveniment-form input, .msp-eveniment-form select { padding: 9px 11px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; width: 100%; } / Pagina de profil / .msp-profil-form { width: 100%; margin: 20px 0; background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); padding: 28px; box-sizing: border-box; } .msp-profil-form .msp-eveniment-succes, .msp-profil-form .msp-eveniment-eroare, .msp-profil-form .msp-eroare-validare { grid-column: 1 / -1; } .msp-profil-form h3 { margin: 20px 0 4px; font-size: 16px; grid-column: 1 / -1; } .msp-profil-form h3:first-child { margin-top: 0; } / Formularul de câmpuri editabile din fișa cursantului NU trebuie să intre în grid-ul general de formulare al .msp-profil-form (ăla e gândit pentru formularul de cont) — altfel rândurile "Etichetă: valoare Editează" ies centrate/înghesuite într-o coloană îngustă. / #msp-campuri-editabile-form { display: block; } / Stilurile pentru `.msp-camp-rand` / `.msp-camp-editeaza-link` / `.msp-camp-input-zona` sunt acum grupate mai sus, în secțiunea „Câmpuri editabile din Informații suplimentare” — clasele se folosesc doar în fișa cursantului, care a fost refăcută. Nu duplica reguli aici. / .msp-optional { font-weight: 400; color: #999; font-size: 13px; } .msp-profil-form form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 24px; align-items: start; } .msp-profil-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #333; margin-bottom: 8px; } .msp-profil-form input { padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; width: 100%; } .msp-profil-form input:disabled { background: #f5f5f5; color: #888; cursor: not-allowed; } .msp-camp-blocat { font-size: 12px; color: #999; font-weight: 400; } / Autentificare / Înregistrare / Resetare parolă: mutate în assets/css/msp-auth.css la 0.93.0, odată cu refacerea completă a celor trei pagini. / / Validare vizibilă (înlocuiește tooltip-ul discret nativ al browserului) / .msp-eroare-validare { background: #fdecea; color: #b32d2e; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; margin: 0 0 16px; } .msp-camp-invalid { border-color: #b32d2e !important; background: #fff8f8; } / Elimin săgețile native ale câmpurilor numerice — ca să nu se poată schimba accidental valoarea prin scroll sau prin clic pe săgeți. / input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } / Buton "arată parola" (ochi) / .msp-camp-parola { position: relative; } .msp-camp-parola input { padding-right: 44px !important; } .msp-toggle-parola { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 6px; color: #999; } .msp-toggle-parola:hover { color: #555; } .msp-avatar-rand { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-bottom: 10px; } .msp-reprezentant-legal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; background: #F4F5FA; border-radius: 10px; padding: 14px 16px; margin-bottom: 6px; } .msp-reprezentant-legal input[type="text"] { margin-top: 4px; max-width: 320px; } .msp-avatar-rand img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; } .msp-avatar-upload { display: flex !important; flex-direction: column; gap: 6px; font-size: 13px; color: #333; } .msp-profil-form button { grid-column: 1 / -1; justify-self: start; margin-top: 10px; } .msp-eveniment-persoane { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .msp-eveniment-persoana { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F4F5FA; border-radius: 10px; padding: 10px 14px; font-size: 14px; } .msp-inscris-badge { color: #2a8a3e; font-weight: 600; font-size: 13px; white-space: nowrap; } .msp-badge-asteptare { color: #b26a00 !important; } .msp-eveniment-actiuni { display: flex; align-items: center; gap: 10px; } .msp-btn-renunta { background: none; border: 1px solid #b32d2e; color: #b32d2e; padding: 5px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; } .msp-btn-renunta:hover { background: #fdecea; } / Modal custom de confirmare (înlocuiește confirm() nativ al browserului) / .msp-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 20, 30, 0.45); z-index: 999999; align-items: center; justify-content: center; padding: 20px; } .msp-modal-overlay.msp-modal-vizibil { display: flex; } .msp-modal-box { background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); padding: 26px; max-width: 380px; width: 100%; box-sizing: border-box; } .msp-modal-mesaj { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #222; } .msp-modal-actiuni { display: flex; justify-content: flex-end; gap: 10px; } .msp-modal-btn { border: none; border-radius: 8px; padding: 9px 18px; font-size: 14px; cursor: pointer; } .msp-modal-nu { background: #f1f1f1; color: #333; } .msp-modal-nu:hover { background: #e4e4e4; } .msp-modal-da { background: #CB0A1A; color: #fff; } .msp-modal-da:hover { background: #BD0620; } / ══════════════════════════════════════════════════════════════════════════════ BUTON CONT ÎN HEADER — shortcode [msp_buton_cont] (rescris la 0.99.40) Două butoane rotunde, discrete (clopoțel + avatar), în spiritul barei de navigare din portal — NU o pastilă colorată (prima variantă, respinsă). Tokenii de culoare sunt redeclarați aici: butonul stă în header-ul temei, deci în afara `.mm-dashboard`, unde variabilele nu ajung prin moștenire. ══════════════════════════════════════════════════════════════════════════════ / .msp-hcont { --mm-brand: #CB0A1A; --mm-brand-soft: #FDF2F3; --mm-ink: #14161A; --mm-ink-2: #5B6472; --mm-ink-3: #8A93A3; --mm-line: #E7E9EE; --mm-soft: #F6F7F9; position: relative; display: inline-flex; align-items: center; gap: 4px; font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.2; } .msp-hcont .mm-ico { width: 21px; height: 21px; display: block; } / ── Nelogat: buton discret, doar contur, fără fundal plin ─────────────────── / / Nelogat: doar iconița rotundă, fără text — aceeași formă/dimensiune ca butoanele de la utilizatorul logat, ca header-ul să arate identic în ambele stări. / .msp-hcont-login { color: var(--mm-brand) !important; text-decoration: none; box-shadow: 0 0 0 1px var(--mm-line); } .msp-hcont-login:hover, .msp-hcont-login:focus-visible { background: var(--mm-brand-soft); color: var(--mm-brand) !important; box-shadow: 0 0 0 1px transparent; } / ── Logat: butoane rotunde ───────────────────────────────────────────────── / .msp-hcont-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mm-ink-2); cursor: pointer; transition: background .18s ease, color .18s ease; -webkit-tap-highlight-color: transparent; } .msp-hcont-btn:hover, .msp-hcont-btn:focus-visible, .msp-hcont-btn[aria-expanded="true"] { background: var(--mm-brand-soft); color: var(--mm-brand); } .msp-hcont-ico-wrap { position: relative; display: inline-flex; } / Bulina de necitite — ancorată de clopoțel, nu de buton. / .msp-hcont-bulina { position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mm-brand); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; box-sizing: border-box; } / Avatarul e butonul în sine: fără inel gros, doar o margine subțire. / .msp-hcont-btn--avatar { width: 45px; height: 45px; } .msp-hcont-btn--avatar:hover, .msp-hcont-btn--avatar:focus-visible, .msp-hcont-btn--avatar[aria-expanded="true"] { background: transparent; } .msp-hcont-poza, .msp-hcont-user-poza { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 50%; overflow: hidden; background: var(--mm-brand); box-shadow: 0 0 0 1px var(--mm-line); transition: box-shadow .18s ease; } .msp-hcont-btn--avatar:hover .msp-hcont-poza, .msp-hcont-btn--avatar[aria-expanded="true"] .msp-hcont-poza { box-shadow: 0 0 0 2px var(--mm-brand); } .msp-hcont-poza img, .msp-hcont-user-poza img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .msp-hcont-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; } / ── Varianta albă: [msp_buton_cont culoare="alb"] ───────────────────────── Doar iconițele devin albe. FĂRĂ inel în jurul clopoțelului sau al iconiței de login: în portal butonul de notificări (`.mm-nav-btn`) n-are nici el contur vizibil, iar un cerc desenat în jurul lui aici ar arăta ca un buton diferit de restul. Inelul rămâne doar la avatar, unde chiar are rol: desparte poza (care are fundal propriu) de fundalul închis al header-ului. / .msp-hcont--alb .msp-hcont-btn { color: #fff; } .msp-hcont--alb .msp-hcont-btn:hover, .msp-hcont--alb .msp-hcont-btn:focus-visible, .msp-hcont--alb .msp-hcont-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .18); color: #fff; } .msp-hcont--alb .msp-hcont-login { color: #fff !important; box-shadow: none; } .msp-hcont--alb .msp-hcont-login:hover, .msp-hcont--alb .msp-hcont-login:focus-visible { background: rgba(255, 255, 255, .18); color: #fff !important; box-shadow: none; } / Avatarul păstrează inelul, alb în loc de gri — aici desparte poza de fundal. / .msp-hcont--alb .msp-hcont-poza { box-shadow: 0 0 0 2px #fff; } .msp-hcont--alb .msp-hcont-btn--avatar:hover .msp-hcont-poza, .msp-hcont--alb .msp-hcont-btn--avatar[aria-expanded="true"] .msp-hcont-poza { box-shadow: 0 0 0 2px #fff; } / Bulina de necitite are un inel care o desparte de fundal — pe închis, alb-ul acela ar face o pată; îl facem transparent, roșul se vede oricum pe fundal întunecat. / .msp-hcont--alb .msp-hcont-bulina { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } / ── Panouri (notificări / meniu) ─────────────────────────────────────────── / .msp-hcont-panou { position: absolute; top: calc(100% + 10px); right: 0; z-index: 99999; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--mm-line); border-radius: 14px; box-shadow: 0 16px 44px rgba(20, 22, 26, .14); overflow: hidden; text-align: left; color: var(--mm-ink); animation: mspHcontApare .16s ease; } .msp-hcont-panou[hidden] { display: none; } @keyframes mspHcontApare { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .msp-hcont-panou-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--mm-line); font-size: 13.5px; font-weight: 700; } .msp-hcont-nr { padding: 2px 8px; border-radius: 999px; background: var(--mm-brand); color: #fff; font-size: 10.5px; font-weight: 700; } .msp-hcont-notificari { list-style: none; margin: 0; padding: 4px 0; max-height: 340px; overflow-y: auto; } .msp-hcont-notif { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; text-decoration: none; color: var(--mm-ink) !important; border-left: 3px solid transparent; transition: background .15s ease; } .msp-hcont-notif:hover { background: var(--mm-soft); } .msp-hcont-notif.este-noua { border-left-color: var(--mm-brand); background: var(--mm-brand-soft); } .msp-hcont-notif-titlu { font-size: 13.5px; font-weight: 600; line-height: 1.35; } .msp-hcont-notif-mesaj { font-size: 12.5px; color: var(--mm-ink-2); line-height: 1.4; } .msp-hcont-notif-timp { font-size: 11.5px; color: var(--mm-ink-3); } .msp-hcont-gol { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 20px 28px; text-align: center; } .msp-hcont-gol .mm-ico { width: 26px; height: 26px; color: var(--mm-ink-3); margin-bottom: 4px; } .msp-hcont-gol strong { font-size: 13.5px; } .msp-hcont-gol span { font-size: 12.5px; color: var(--mm-ink-2); line-height: 1.45; } / ── Meniul contului ──────────────────────────────────────────────────────── / .msp-hcont-user { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--mm-line); } .msp-hcont-user-poza { width: 40px; height: 40px; flex: 0 0 40px; } .msp-hcont-user-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .msp-hcont-user-txt strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msp-hcont-user-txt small { font-size: 12px; color: var(--mm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msp-hcont-linkuri { list-style: none; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--mm-line); } .msp-hcont-linkuri a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--mm-ink) !important; text-decoration: none; transition: background .15s ease, color .15s ease; } .msp-hcont-linkuri a:hover { background: var(--mm-brand-soft); color: var(--mm-brand) !important; } .msp-hcont-iesire { display: flex; align-items: center; gap: 9px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--mm-brand) !important; text-decoration: none; transition: background .15s ease; } .msp-hcont-iesire .mm-ico { width: 17px; height: 17px; } .msp-hcont-iesire:hover { background: var(--mm-brand-soft); } / ── Mobil: butoanele rămân la fel de mari (țintă de atingere), panourile se lipesc de marginile ecranului. `fixed` are poziția pe verticală calculată din JS, altfel s-ar lipi de marginea de sus. ────────────────────────────── / @media (max-width: 640px) { .msp-hcont { gap: 2px; } .msp-hcont-panou { position: fixed; top: auto; left: 12px; right: 12px; width: auto; max-width: none; } .msp-hcont-notificari { max-height: 52vh; } } / ── Consimțământ pentru salvarea datelor sensibile pe cont (0.99.41) ──────── Bifa NU folosește `.msp-camp-simplu` (clasa câmpurilor normale): aceea e flex pe coloană și bold, deci arunca textul sub căsuță și-l îngroșa tot — arăta ca un titlu de secțiune, nu ca o notă opțională. Aici: căsuță + text pe același rând, text normal (nu bold), într-o casetă discretă care se citește ca o informație secundară, nu ca încă un câmp obligatoriu de completat. ─────────────────────────────────────────────────────────────────────────── / / Selectorul include `.msp-eveniment-form label` fiindcă acela (clasă + element) are specificitate mai mare decât o singură clasă și, altfel, ne-ar suprascrie `flex-direction` cu `column` — de-acolo venea căsuța așezată DEASUPRA textului, nu lângă el. / .msp-consimtamant, .msp-eveniment-form label.msp-consimtamant { display: flex; flex-direction: row; align-items: flex-start; gap: 11px; max-width: 620px; margin: 6px 0 4px; padding: 13px 15px; border: 1px solid var(--mm-line, #E7E9EE); border-radius: 12px; background: var(--mm-soft, #F6F7F9); cursor: pointer; transition: border-color .18s ease, background .18s ease; } .msp-consimtamant:hover { border-color: #D5D9E0; } .msp-consimtamant:focus-within { border-color: var(--mm-brand, #CB0A1A); background: #fff; } / Resetăm explicit width/padding/border: regula generală `.msp-eveniment-form input` le dă tuturor câmpurilor `width: 100%` + padding + chenar, ceea ce ar transforma căsuța de bifat într-un dreptunghi întins pe tot rândul. / .msp-consimtamant-bifa, .msp-eveniment-form .msp-consimtamant-bifa { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; padding: 0; border: 0; border-radius: 0; accent-color: var(--mm-brand, #CB0A1A); cursor: pointer; } .msp-consimtamant-txt, .msp-eveniment-form .msp-consimtamant-txt { font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--mm-ink-2, #5B6472); } / Nota „date preluate din contul tău”, deasupra câmpurilor precompletate. / .msp-camp-nota-presalvat { max-width: 620px; margin: 2px 0 10px; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--mm-ink-3, #8A93A3); } @media (max-width: 640px) { .msp-consimtamant { padding: 12px 13px; gap: 10px; } .msp-consimtamant-txt, .msp-eveniment-form .msp-consimtamant-txt { font-size: 13px; } } / ── Butonul de cont pentru pagina de meniu — [msp_buton_cont_pastila] (0.99.65) Copiază EXACT butoanele din bara de navigare a portalului (`.mm-nav-btn`): pe desktop pastilă orizontală, transparentă, cu iconiță + text pe același rând; pe mobil devin carduri verticale, cu colțuri rotunjite și fundal gri deschis. Valorile sunt scrise explicit, nu prin variabile — shortcode-ul se pune într-o pagină obișnuită, unde tokenii `.mm-dashboard` nu ajung. ─────────────────────── / .msp-cont-pastile { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .msp-cont-pastila { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #5B6472 !important; font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease; } .msp-cont-pastila:hover, .msp-cont-pastila:focus-visible { background: #FDF2F3; color: #CB0A1A !important; border-color: transparent; } .msp-cont-pastila-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .msp-cont-pastila .mm-ico { width: 19px; height: 19px; display: block; color: #CB0A1A; } / „Ieșire” — la fel ca `.mm-nav-iesire` din portal: se colorează în roșul de avertizare doar la hover, altfel arată ca orice alt buton. / .msp-cont-pastila--iesire:hover, .msp-cont-pastila--iesire:focus-visible { background: #FEF0EF; color: #B42318 !important; } .msp-cont-pastila--iesire:hover .mm-ico, .msp-cont-pastila--iesire:focus-visible .mm-ico { color: #B42318; } / Bulina de notificări necitite, ancorată de iconiță (ca la clopoțelul din portal). / .msp-cont-pastila-nr { position: absolute; top: -7px; left: 10px; min-width: 17px; height: 17px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #CB0A1A; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; box-sizing: border-box; } / Varianta pentru fundal închis: text și iconiță albe. / .msp-cont-pastila--alb, .msp-cont-pastila--alb:hover, .msp-cont-pastila--alb:focus-visible { color: #fff !important; } .msp-cont-pastila--alb .mm-ico, .msp-cont-pastila--alb:hover .mm-ico { color: #fff; } .msp-cont-pastila--alb:hover, .msp-cont-pastila--alb:focus-visible { background: rgba(255, 255, 255, .18); } .msp-cont-pastila--alb .msp-cont-pastila-nr { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); } / ── Mobil: exact ca în portal — carduri verticale, cu fundal gri și colțuri rotunjite, împărțind lățimea în mod egal. ─────────────────────────────────── / @media (max-width: 720px) { .msp-cont-pastile { gap: 8px; } .msp-cont-pastila { flex: 1 1 0; flex-direction: column; gap: 5px; padding: 11px 4px; border-radius: 14px; background: #F6F7F9; border-color: transparent; font-size: 11.5px; } .msp-cont-pastila .mm-ico { width: 21px; height: 21px; } .msp-cont-pastila-nr { top: -6px; left: 11px; } .msp-cont-pastila--alb { background: rgba(255, 255, 255, .14); } / Un singur buton („Autentificare”, când nu e nimeni logat) — se întinde pe toată lățimea coloanei și rămâne pe orizontală, cu text mai mare. Un card îngust, vertical, ca la perechea „Contul meu / Ieșire”, ar fi arătat pierdut singur. / .msp-cont-pastile--singur { display: block; } .msp-cont-pastile--singur .msp-cont-pastila { width: 100%; flex-direction: row; gap: 9px; padding: 15px 18px; font-size: 15px; } .msp-cont-pastile--singur .msp-cont-pastila .mm-ico { width: 20px; height: 20px; } } @media (max-width: 380px) { .msp-cont-pastila { font-size: 10.5px; padding: 10px 2px; } .msp-cont-pastile--singur .msp-cont-pastila { font-size: 14.5px; padding: 14px 16px; } } / ── Date sensibile salvate în cont, în pagina de profil (0.99.69) ──────────── Fiecare bloc e un card cu: titlu + data acordului, valorile efectiv salvate (vizibile DOAR aici, în contul propriu — în admin sunt ascunse intenționat) și butonul de retragere, stilizat ca restul butoanelor din portal. ────────────── / .mm-dashboard .mm-date-salvate { padding: 16px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: #fff; } .mm-dashboard .mm-date-salvate + .mm-date-salvate { margin-top: 12px; } .mm-date-salvate-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .mm-date-salvate-titlu { font-size: 14.5px; font-weight: 700; color: var(--mm-ink); } .mm-date-salvate-data { font-size: 12.5px; color: var(--mm-ink-3); } .mm-date-salvate-lista { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--mm-soft); display: grid; gap: 8px; } .mm-date-salvate-rand { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .mm-date-salvate-rand dt { margin: 0; font-size: 13px; color: var(--mm-ink-2); } .mm-date-salvate-rand dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--mm-ink); text-align: right; word-break: break-word; } @media (max-width: 480px) { .mm-date-salvate-rand { flex-direction: column; gap: 2px; } .mm-date-salvate-rand dd { text-align: left; } } / ── Evenimente: afiș, buton de înscriere, pașii formularului (0.99.75) ────── / / ── Comutatorul grilă / listă ─────────────────────────────────────────────── / .mm-eve-mod { display: inline-flex; gap: 4px; margin-bottom: 16px; padding: 4px; border-radius: 999px; background: var(--mm-soft); } .mm-dashboard .mm-eve-mod-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--mm-ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .mm-eve-mod-btn .mm-ico { width: 17px; height: 17px; } .mm-dashboard .mm-eve-mod-btn.este-activ { background: #fff; color: var(--mm-ink); box-shadow: 0 1px 3px rgba(20, 22, 26, .12); } / ── Cele două moduri de afișare ───────────────────────────────────────────── / / Exact DOUĂ coloane pe desktop (jumătate fiecare). Cu `auto-fill` intrau trei, iar cardurile deveneau prea înguste — afișul se micșora, iar titlul se rupea pe rânduri. / .mm-eveniment-lista.mm-eve-mod--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } / În grilă, cardul e deja îngust — afișul îl umple pe toată lățimea, nu jumătate. / .mm-eve-mod--grid .mm-eve-afis { max-width: none; aspect-ratio: 4 / 3; } .mm-eve-mod--grid .mm-eveniment-nume { font-size: 20px; } / Sub 1000px nu mai încap două carduri lizibile una lângă alta — trecem pe una singură. / @media (max-width: 1000px) { .mm-eveniment-lista.mm-eve-mod--grid { grid-template-columns: 1fr; } } / Listă: un card pe rând, lat, cu afișul pe jumătate — vederea „detaliată”. / .mm-eveniment-lista.mm-eve-mod--lista { display: flex; flex-direction: column; gap: 18px; } @media (max-width: 720px) { / Pe mobil nu există „grilă” utilă — o singură coloană oricum, deci comutatorul dispare și afișul revine pe toată lățimea. / .mm-eve-mod { display: none; } .mm-eveniment-lista.mm-eve-mod--grid { grid-template-columns: 1fr; } .mm-eve-mod--grid .mm-eve-afis { aspect-ratio: 4 / 5; } } / Eticheta „Nou” de lângă tipul evenimentului — dispare singură după 7 zile. / .mm-eveniment-etichete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } / `.mm-eveniment-tip` avea `margin-bottom: 8px` propriu (de pe vremea când stătea singur, deasupra titlului) — în rând cu „Nou” îl ridica vizibil față de aceasta. Marginea trece pe învelișul comun, iar cele două etichete se aliniază exact. / .mm-eveniment-etichete .mm-eveniment-tip { margin-bottom: 0; } .mm-eveniment-nou, .mm-eveniment-etichete .mm-eveniment-tip { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.35; text-transform: uppercase; } .mm-eveniment-nou { background: #067A46; color: #fff; } / Afișul: cadru de proporție fixă în care imaginea încape ÎNTREAGĂ, pe un fundal făcut din ea însăși, mărit și estompat. Merge la orice raport (poster 1:1 sau 9:16, cover 16:9) fără să taie nimic și fără benzi goale. / .mm-eve-afis { position: relative; / Jumătate de coloană pe desktop: pe toată lățimea, afișul domina cardul și împingea titlul și detaliile mult sub prima vedere. Pe mobil rămâne pe toată lățimea (vezi media query-ul de jos), unde jumătate ar fi prea mic ca să se distingă ceva. / max-width: 50%; margin: 0 0 16px; border-radius: var(--mm-r); overflow: hidden; background: #0d0f12; aspect-ratio: 16 / 9; } .mm-eve-afis-fundal { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(26px) saturate(1.25) brightness(.7); transform: scale(1.1); } .mm-eve-afis img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; } @media (max-width: 720px) { .mm-eve-afis { max-width: none; aspect-ratio: 4 / 5; } } / ── Butonul mare care deschide formularul ─────────────────────────────────── / / Butonul principal al evenimentului — roșu TRANSLUCID în repaus, plin la hover (0.99.89). Varianta plină permanent ieșea prea tare în evidență: pe un card care are deja afiș, titlu și detalii, devenea singurul lucru vizibil. Așa rămâne clar că e acțiunea cardului, dar nu strigă. / .mm-dashboard .mm-eve-buton-mare { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 18px; padding: 15px 18px; border: 1.5px solid rgba(203, 10, 26, .16); border-radius: var(--mm-r); background: rgba(203, 10, 26, .06); color: var(--mm-brand); text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease; } .mm-dashboard .mm-eve-buton-mare:hover, .mm-dashboard .mm-eve-buton-mare:focus-visible { background: var(--mm-brand); border-color: var(--mm-brand); box-shadow: 0 6px 20px rgba(203, 10, 26, .26); transform: translateY(-1px); } .mm-dashboard .mm-eve-buton-mare:active { transform: translateY(0); } / Iconița e singurul element plin în repaus — dă butonului un punct de sprijin vizual, fără ca tot dreptunghiul să fie colorat. / .mm-eve-buton-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--mm-brand); color: #fff; transition: background .18s ease; } .mm-eve-buton-mare:hover .mm-eve-buton-ico, .mm-eve-buton-mare:focus-visible .mm-eve-buton-ico { background: rgba(255, 255, 255, .2); } .mm-eve-buton-ico .mm-ico { width: 16px; height: 16px; color: #fff; } .mm-eve-buton-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mm-eve-buton-txt strong { font-size: 16.5px; color: var(--mm-brand); transition: color .18s ease; } .mm-eve-buton-txt small { font-size: 13.5px; color: var(--mm-ink-2); line-height: 1.4; transition: color .18s ease; } .mm-eve-buton-mare:hover .mm-eve-buton-txt strong, .mm-eve-buton-mare:hover .mm-eve-buton-txt small, .mm-eve-buton-mare:focus-visible .mm-eve-buton-txt strong, .mm-eve-buton-mare:focus-visible .mm-eve-buton-txt small { color: #fff; } .mm-eve-buton-sageata { margin-left: auto; color: var(--mm-brand); opacity: .55; transition: color .18s ease, opacity .18s ease, transform .18s ease; } .mm-eve-buton-mare:hover .mm-eve-buton-sageata, .mm-eve-buton-mare:focus-visible .mm-eve-buton-sageata { color: #fff; opacity: 1; transform: translateX(2px); } .mm-eve-buton-sageata .mm-ico { width: 18px; height: 18px; display: block; } / ── Fereastra de înscriere ────────────────────────────────────────────────── / .mm-eve-modal[hidden] { display: none; } .mm-eve-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .mm-eve-modal-fundal { position: absolute; inset: 0; background: rgba(12, 14, 18, .55); } .mm-eve-modal-cutie { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: calc(100vh - 40px); border-radius: 18px; background: #fff; box-shadow: 0 30px 70px rgba(12, 14, 18, .35); overflow: hidden; animation: mmEveModalApare .18s ease; } @keyframes mmEveModalApare { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .mm-eve-modal-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--mm-line); } .mm-eve-modal-supra { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mm-brand); } .mm-dashboard .mm-eve-modal-titlu { margin: 3px 0 0; font-size: 20px; line-height: 1.3; color: var(--mm-ink); } .mm-eve-modal-x { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--mm-soft); color: var(--mm-ink-2); font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .mm-eve-modal-x:hover { background: var(--mm-bad-bg); color: var(--mm-bad); } / FORMULARUL trebuie să fie și el flex pe coloană. Între cutie (flex) și zona derulabilă stă `
`, iar un `` obișnuit e `display: block`: înălțimea lui creștea cât conținutul, lanțul de dimensionare se rupea acolo, iar `.mm-eve-modal-corp` nu primea niciodată o înălțime limitată — deci nu derula, iar ce depășea cutia era tăiat de `overflow: hidden`. Asta era cauza reală a „nu pot derula în jos” pe iPhone. / .mm-eve-modal-cutie .mm-eve-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } / `min-height: 0` e OBLIGATORIU și aici: într-un părinte flex pe coloană, un copil nu coboară sub înălțimea conținutului său fără el. `overscroll-behavior: contain` oprește „transferul” derulării către pagina din spate când ajungi la capătul listei. / .mm-eve-modal-corp { flex: 1 1 auto; min-height: 0; padding: 18px 22px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } / Mesajul de „n-ai ales pe nimeni”, chiar deasupra butoanelor. / .mm-eve-eroare { flex: 0 0 auto; margin: 0; padding: 13px 22px; border-top: 1px solid var(--mm-line); background: var(--mm-bad-bg); color: var(--mm-bad); font-size: 14px; font-weight: 600; line-height: 1.45; } .mm-eve-eroare[hidden] { display: none; } .mm-eve-modal-jos { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 10px; / `env(safe-area-inset-bottom)` = bara de gesturi de pe iPhone-urile fără buton fizic; fără ea, butoanele ajung sub ea și sunt greu de apăsat. / padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mm-line); background: var(--mm-soft); } / ── Pașii, fiecare în cardul lui ──────────────────────────────────────────── / .mm-eve-pas { padding: 18px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: #fff; } .mm-eve-pas + .mm-eve-pas { margin-top: 14px; } .mm-eve-pas-cap { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .mm-eve-pas-nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--mm-ink); color: #fff; font-size: 14.5px; font-weight: 700; } .mm-eve-pas-txt { display: flex; flex-direction: column; gap: 4px; } .mm-dashboard .mm-eve-pas-txt h2 { margin: 0; font-size: 19px; line-height: 1.25; color: var(--mm-ink); } .mm-eve-pas-txt small { font-size: 14px; line-height: 1.45; color: var(--mm-ink-2); } / ── Un copil + cele trei opțiuni ──────────────────────────────────────────── / / Totul pe verticală, și pe desktop: numele, întrebarea, apoi opțiunile — dacă butoanele stau în dreapta rândului, pe ecran lat ajung departe de copilul la care se referă și legătura dintre ele se pierde. / .mm-eve-copil { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; } .mm-eve-copil + .mm-eve-copil { border-top: 1px solid var(--mm-line-2); } .mm-eve-copil-ident { display: flex; align-items: center; gap: 10px; } .mm-eve-copil-nume { font-size: 16.5px; font-weight: 700; color: var(--mm-ink); } .mm-eve-copil-intrebare { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mm-ink-2); } .mm-eve-optiuni { display: flex; flex-wrap: wrap; gap: 8px; } .mm-eve-opt { cursor: pointer; } .mm-eve-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .mm-eve-opt span { display: inline-block; padding: 11px 18px; border: 1.5px solid var(--mm-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--mm-ink-2); transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .mm-eve-opt:hover span { border-color: #C9CDD6; color: var(--mm-ink); } / Fiecare alegere are culoarea ei, ca starea să se citească dintr-o privire, fără să mai fie citit textul: roșu = nu vine, verde = urcă pe scenă, albastru = privește. / .mm-eve-opt--nu input:checked + span { background: #B42318; border-color: #B42318; color: #fff; box-shadow: 0 1px 5px rgba(180, 35, 24, .28); } .mm-eve-opt--scena input:checked + span { background: #067A46; border-color: #067A46; color: #fff; box-shadow: 0 1px 5px rgba(6, 122, 70, .28); } .mm-eve-opt--spectator input:checked + span { background: #1E62C7; border-color: #1E62C7; color: #fff; box-shadow: 0 1px 5px rgba(30, 98, 199, .28); } .mm-eve-opt input:focus-visible + span { outline: 2px solid var(--mm-ink); outline-offset: 2px; } / ── Nota de nivel, spectatorii ────────────────────────────────────────────── / .mm-eve-nota { margin: 2px 0 4px; padding: 12px 14px; border-left: 3px solid var(--mm-brand); border-radius: 0 8px 8px 0; background: var(--mm-brand-soft); font-size: 14px; line-height: 1.5; color: var(--mm-ink-2); } .mm-eve-bifa { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; font-size: 15.5px; font-weight: 600; cursor: pointer; } .mm-eve-bifa input { width: 18px; height: 18px; accent-color: #067A46; cursor: pointer; } .mm-eve-insotitori { display: grid; gap: 8px; margin-bottom: 10px; } .mm-eve-insotitor { display: flex; align-items: center; gap: 8px; } .mm-dashboard .mm-eve-insotitor input { flex: 1 1 auto; padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: 10px; font-size: 15px; } / Selectorul adult/copil, lângă numele însoțitorului. / .mm-dashboard .mm-eve-tip { flex: 0 0 118px; padding: 10px 8px; border: 1px solid var(--mm-line); border-radius: 10px; font-size: 14.5px; background: #fff; } / Îndemnul care apare când un copil urcă pe scenă. / .mm-eve-indemn { margin: 0 0 14px; padding: 13px 15px; border-radius: 10px; background: #E7F6EE; border-left: 3px solid #067A46; font-size: 14px; line-height: 1.5; color: #0b5137; } .mm-eve-indemn[hidden] { display: none; } .mm-eve-scoate { flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--mm-line); border-radius: 50%; background: #fff; color: var(--mm-ink-3); font-size: 19px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .mm-eve-scoate:hover { background: var(--mm-bad-bg); border-color: transparent; color: var(--mm-bad); } / ── Rezumatul persoanelor deja anunțate ───────────────────────────────────── / .mm-dashboard .mm-eve-rezumat { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--mm-line); border-radius: var(--mm-r); background: var(--mm-soft); } .mm-eve-rezumat-titlu { display: block; font-size: 14px; font-weight: 700; color: var(--mm-ink-2); margin-bottom: 8px; } .mm-eve-rezumat-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .mm-eve-rezumat-lista li { display: flex; align-items: center; gap: 9px; font-size: 15px; } .mm-eve-ini { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--mm-brand); color: #fff; font-size: 12.5px; font-weight: 700; } .mm-eve-rol { margin-left: auto; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .mm-eve-rol--participant { background: #E7F6EE; color: #067A46; } .mm-eve-rol--spectator { background: var(--mm-line-2); color: var(--mm-ink-2); } @media (max-width: 560px) { .mm-eve-optiuni { flex-direction: column; } .mm-eve-opt span { display: block; width: 100%; padding: 12px 14px; text-align: center; font-size: 14.5px; } .mm-dashboard .mm-eve-buton-mare { padding: 14px; gap: 12px; } .mm-eve-modal { padding: 0; } .mm-eve-modal-cutie { max-width: none; height: 100%; border-radius: 0; / `dvh` ține cont de bara de adrese care apare/dispare pe mobil; `vh` rămâne ca rezervă pentru browserele mai vechi, care ignoră linia următoare. / max-height: 100vh; max-height: 100dvh; } .mm-eve-modal-jos { flex-direction: column-reverse; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } .mm-eve-modal-corp { padding-bottom: 32px; } .mm-eve-modal-jos .msp-btn, .mm-eve-modal-jos .mm-btn-sec { width: 100%; justify-content: center; text-align: center; } .mm-eve-pas { padding: 15px; } .mm-dashboard .mm-eve-tip { flex: 0 0 92px; font-size: 12.5px; } } / ══════════════════════════════════════════════════════════════════════════════ REGULĂ GENERALĂ: câmpurile de completat au MINIM 16px pe dispozitivele tactile ══════════════════════════════════════════════════════════════════════════════ Safari pe iOS mărește automat pagina („zoom”) când atingi un câmp al cărui text e sub 16px, iar apoi utilizatorul rămâne cu pagina mărită și trebuie s-o micșoreze manual. Nu e o eroare de-a noastră, e un comportament impus de sistem: singura cale de a-l evita e ca textul din câmp să fie de cel puțin 16px. Regula stă AICI, o singură dată, ca plasă de siguranță pentru TOATE câmpurile — inclusiv pentru cele adăugate în viitor, care altfel ar reintroduce problema fără ca nimeni să observe până o semnalează un părinte de pe iPhone. `pointer: coarse` prinde telefoanele și tabletele indiferent de lățime (un iPhone în peisaj e mai lat decât pragurile obișnuite), iar pragul de lățime acoperă dispozitivele care nu raportează corect tipul de pointer. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px), (hover: none) and (pointer: coarse) { .mm-dashboard input[type="text"], .mm-dashboard input[type="email"], .mm-dashboard input[type="tel"], .mm-dashboard input[type="number"], .mm-dashboard input[type="password"], .mm-dashboard input[type="search"], .mm-dashboard input[type="url"], .mm-dashboard input[type="date"], .mm-dashboard input[type="time"], .mm-dashboard select, .mm-dashboard textarea, .mm-eve-modal input[type="text"], .mm-eve-modal input[type="email"], .mm-eve-modal input[type="tel"], .mm-eve-modal input[type="number"], .mm-eve-modal select, .mm-eve-modal textarea, .mm-notif input, .mm-notif select, .mm-notif textarea { font-size: 16px; } }