/* ============================================================================ microsite.css — site-ul propriu al unei unități de învățământ. DE CE A FOST REFĂCUT Prima versiune s-a scris fără mockup-ul de referință, așa că microsite-ul a ieșit în limbajul vizual al portalului: albastru de platformă, rotunjiri de 12–20px, pastile. Mockup-ul cere altceva, și are dreptate: pagina unei școli e un document public, nu o aplicație. De acolo vin rotunjirea de 2px, serif pe titluri, mono pe cifre și pe etichete, hârtie caldă în loc de alb rece. ACEST FIȘIER ÎȘI ADUCE PROPRIA BAZĂ _LayoutMicrosite încarcă numai _tokens.css și acest fișier — NU site.css. Deci resetarea (margini, box-sizing, imagini, linkuri) trebuie să fie aici. Toată e încadrată în .er-ms-body, ca să nu poată scăpa în portal dacă vreodată cineva încarcă foaia altundeva. CONVENȚIA DE CULOARE — de citit înainte de a adăuga o regulă Aici nu se scrie NICIO culoare de mână. Toate vin din --ms-* (plus --er-text-on-dark*, care e exact rolul „text pe fundal închis"). Motivul e modul de contrast ridicat: body.er-a11y-contrast din _tokens.css rescrie variabilele, deci o culoare scrisă direct ar rămâne neschimbată și ar strica tocmai pagina pe care modul trebuie să o repare. Pentru vălurile translucide de pe fundalurile închise — linii de 1px, umplutura butonului fantomă, întunecarea de peste fotografii — nu există token. rgba(255,255,255,…) scris de mână ar fi exact culoarea care nu se comută, așa că se folosește color-mix() peste un token care se comută: - peste --ms-accent-2-light pentru linii și margini de pe închis: în paleta normală iese un auriu stins, iar în contrast ridicat tokenul devine alb, deci linia rămâne vizibilă pe negru; - peste --ms-ink pentru întunecarea de peste fotografii: în contrast devine negru pur, deci legenda albă de deasupra rămâne lizibilă. Vezi raportul feliei pentru tokenii propuși care ar face ocolul inutil. CELE DOUĂ AURIURI NU SUNT INTERȘANJABILE — regula care se greșește cel ușor În paleta normală, --ms-accent-2 (#C9A227) și --ms-accent-2-light (#E7C766) sunt două nuanțe ale aceluiași auriu și par să se poată înlocui una cu alta. În contrast ridicat NU sunt: primul devine NEGRU, al doilea devine ALB. Deci: - pe hârtie (alb în contrast) se folosește --ms-accent-2 → iese negru pe alb; - pe fundal închis (negru în contrast) --ms-accent-2-light → iese alb pe negru. Aurul „normal" pus pe bleumarin arată bine azi și devine negru pe negru în contrast ridicat — nevăzut la build, nevăzut în teste, văzut doar de omul care avea nevoie de contrast. Fiecare auriu de mai jos e ales după această regulă. ============================================================================ */ /* ============================================================================ 1. BAZĂ ȘI RESETARE ============================================================================ */ /* scroll-behavior se aplică pe elementul care derulează, adică , iar layout-ul nu e al nostru. :has() îl atinge fără să-l modificăm. Preferința de mișcare redusă îl întoarce la auto — regula globală e deja în _tokens.css. */ html:has(> .er-ms-body) { scroll-behavior: smooth; } .er-ms-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--ms-font-text); font-size: var(--ms-text-base); line-height: 1.6; color: var(--ms-ink); background: var(--ms-paper); -webkit-font-smoothing: antialiased; } .er-ms-body *, .er-ms-body *::before, .er-ms-body *::after { box-sizing: border-box; } /* main crește, ca subsolul să stea jos și pe paginile scurte — pagina unui articol de trei rânduri altfel ar fi lăsat subsolul la mijlocul ecranului. */ .er-ms-body > main { flex: 1 0 auto; } .er-ms-body h1, .er-ms-body h2, .er-ms-body h3, .er-ms-body h4 { margin: 0; font-family: var(--ms-font-titlu); font-weight: 600; letter-spacing: -0.01em; line-height: 1.18; color: inherit; } .er-ms-body p, .er-ms-body ul, .er-ms-body ol, .er-ms-body figure, .er-ms-body blockquote { margin: 0; } .er-ms-body ul { list-style: none; padding: 0; } .er-ms-body img { max-width: 100%; display: block; } .er-ms-body a { color: inherit; text-decoration: none; } .er-ms-body button { font: inherit; cursor: pointer; } /* Antetul stă lipit sus, deci o ancoră ar ajunge dedesubtul lui și primul rând al zonei nu s-ar vedea. Se rezervă înălțimea antetului plus aer. Regula prinde orice element cu id, nu doar ancorele scrise azi: o zonă adăugată mâine ar fi altfel intrat exact în aceeași capcană. */ .er-ms-body [id] { scroll-margin-top: 94px; } /* Conturul de focus e auriu pe hârtie și auriu deschis pe fundalurile închise. În contrast ridicat primul devine negru, al doilea alb — deci rămâne vizibil în toate cele patru combinații. */ .er-ms-body :focus-visible { outline: 3px solid var(--ms-accent-2); outline-offset: 2px; } .er-ms-a11y :focus-visible, .er-ms-antet :focus-visible, .er-ms-hero :focus-visible, .er-ms-cifre :focus-visible, .er-ms-avizier :focus-visible, .er-ms-subsol :focus-visible { outline-color: var(--ms-accent-2-light); } /* ============================================================================ 2. AJUTOARE COMUNE Lățimea de 1180px și pasul de 28px vin din mockup. Sunt mai strânse decât --er-container-max (1280px) al portalului, intenționat: un text de document se citește greu pe rânduri lungi. ============================================================================ */ .er-ms-lat { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; } /* Eticheta mică de deasupra titlurilor: mono, majuscule, aurie. E singurul loc în care microsite-ul folosește spațiere mare între litere. */ .er-ms-supratitlu { font-family: var(--ms-font-cifre); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ms-accent-2); } .er-ms-sectiune { padding: 88px 0; } .er-ms-sectiune-hartie { background: var(--ms-paper); } .er-ms-sectiune-hartie-calda { background: var(--ms-paper-warm); } .er-ms-sectiune-cap { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--er-space-lg); margin-bottom: 44px; } .er-ms-sectiune-cap h2 { font-size: clamp(1.7rem, 3vw, var(--ms-titlu-md)); } .er-ms-sectiune-descriere { max-width: 380px; font-size: 0.92rem; line-height: 1.55; color: var(--ms-ink-soft); } /* Textele scrise de instituție se afișează escapate, deci rândurile lor există numai ca separatori de linie. pre-wrap le păstrează, fără să permită HTML. */ .er-ms-text { white-space: pre-wrap; color: var(--ms-ink-soft); max-width: 72ch; } /* ============================================================================ 3. BUTOANE Muchii drepte, 2px de rotunjire, fără umbră. Ridicarea de 2px la hover e singura mișcare, iar preferința de mișcare redusă o oprește prin regula globală din _tokens.css. ============================================================================ */ .er-ms-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1.5px solid transparent; border-radius: var(--ms-radius); font-family: var(--ms-font-text); font-size: 0.92rem; font-weight: 600; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .er-ms-btn:hover { transform: translateY(-2px); } .er-ms-btn .material-icons { font-size: 19px; } /* Auriul deschis, nu cel normal: butonul plin trebuie să rămână un dreptunghi deschis cu text închis și în contrast ridicat, unde auriul deschis devine alb iar --ms-accent-dark devine negru. Cu auriul normal ar fi ieșit negru pe negru. Hover-ul nu schimbă fondul, ci pune un inel: orice altă culoare de fond ar fi reintrodus exact problema, pe stare de hover. */ .er-ms-btn-plin { background: var(--ms-accent-2-light); color: var(--ms-accent-dark); } .er-ms-btn-plin:hover { box-shadow: inset 0 0 0 2px var(--ms-accent-2); } /* Butonul fantomă de pe fundal închis. Marginea e la 55% ca să treacă și în contrast ridicat, unde tokenul devine alb; umplutura poate rămâne discretă, fiindcă forma butonului o dă marginea, nu fondul. */ .er-ms-btn-fantoma { border-color: color-mix(in srgb, var(--ms-accent-2-light) 55%, transparent); color: var(--er-text-on-dark); } .er-ms-btn-fantoma:hover { border-color: var(--ms-accent-2-light); background: color-mix(in srgb, var(--ms-accent-2-light) 12%, transparent); } /* Același buton, dar pe hârtie: zona de contact și pagina articolului. */ .er-ms-btn-contur { border-color: var(--ms-line); color: var(--ms-accent); background: var(--ms-surface); } .er-ms-btn-contur:hover { border-color: var(--ms-accent); background: var(--ms-paper-warm); } .er-ms-btn-mic { padding: 10px 18px; font-size: 0.86rem; } /* Linkul de întoarcere: mono, cu săgeata aurie. Nu e buton, deci nu se ridică. */ .er-ms-inapoi { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ms-font-cifre); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-ink-soft); } .er-ms-inapoi:hover { color: var(--ms-accent); } .er-ms-inapoi .material-icons { font-size: 16px; color: var(--ms-accent-2); } /* ============================================================================ 4. STARE DE GOL O zonă fără conținut trebuie să arate ca o zonă care încă nu a fost scrisă, nu ca o pagină stricată: chenar punctat, un cuvânt de explicație, fără roșu și fără pictogramă de eroare. date-test.sql nu inserează articole, anunțuri, galerie, personal sau indicatori, deci starea asta e cea care se vede cel mai des la rulare. ============================================================================ */ .er-ms-gol { border: 1px dashed var(--ms-line); border-radius: var(--ms-radius); background: var(--ms-surface); padding: 34px 28px; text-align: center; color: var(--ms-ink-soft); } .er-ms-gol .material-icons { font-size: 30px; color: var(--ms-accent-2); } .er-ms-gol-titlu { font-family: var(--ms-font-titlu); font-size: var(--ms-titlu-sm); color: var(--ms-ink); margin: 10px 0 8px; } .er-ms-gol-text { font-size: 0.92rem; line-height: 1.6; max-width: 46ch; margin: 0 auto; } /* ============================================================================ 5. BARA DE ACCESIBILITATE Randată de _LayoutMicrosite, deasupra antetului. În mockup e bara de utilitate de sus: mono mărunt pe bleumarin închis, cu butoane-pastilă. Aici sunt singurul loc din microsite unde pastila rotundă are voie să apară — un comutator se apasă, deci arată ca un buton, nu ca un document. ============================================================================ */ .er-ms-a11y { background: var(--ms-accent-dark); color: var(--er-text-on-dark-soft); font-family: var(--ms-font-cifre); font-size: 0.74rem; } .er-ms-a11y-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 7px 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .er-ms-a11y-eticheta { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; } .er-ms-a11y-eticheta .material-icons { font-size: 17px; color: var(--ms-accent-2-light); } .er-ms-a11y-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 45%, transparent); border-radius: var(--er-radius-full); color: var(--er-text-on-dark-soft); font-family: var(--ms-font-cifre); font-size: 0.7rem; padding: 3px 11px; transition: var(--er-transition); } .er-ms-a11y-btn:hover { border-color: var(--ms-accent-2-light); color: var(--er-text-on-dark); } /* Starea apăsată se vede și fără culoare — plin, nu doar altă nuanță — fiindcă e comutatorul folosit de cine distinge greu culorile. */ .er-ms-a11y-activ { background: var(--ms-accent-2-light); border-color: var(--ms-accent-2-light); color: var(--ms-accent-dark); font-weight: 600; } /* Fondul nu se schimbă la hover. Butonul „Contrast ridicat" e apăsat exact când e activ modul de contrast, deci e singurul buton din site care TREBUIE să fie lizibil în modul de contrast — o a doua culoare de fond ar fi fost cea mai ușoară cale de a-l face negru pe negru. */ .er-ms-a11y-activ:hover { box-shadow: inset 0 0 0 2px var(--ms-accent-2); } .er-ms-a11y-link { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; color: var(--er-text-on-dark-soft); } .er-ms-a11y-link:hover { color: var(--ms-accent-2-light); } /* Sări la conținut: primul element focusabil din pagină, scos din flux până e focusat. Nu se ascunde cu display:none — un element ascuns așa nu poate fi focusat, deci scurtătura ar fi existat doar în cod. */ .er-ms-sari { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ms-accent-2-light); color: var(--ms-accent-dark); font-weight: 600; padding: 12px 20px; border-radius: var(--ms-radius); } .er-ms-sari:focus { left: 12px; top: 12px; } /* ============================================================================ 6. ANTETUL ȘCOLII ============================================================================ */ .er-ms-antet { position: sticky; top: 0; z-index: 50; background: var(--ms-accent); color: var(--er-text-on-dark); border-bottom: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 30%, transparent); } .er-ms-antet-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: var(--er-space-lg); } .er-ms-marca { display: flex; align-items: center; gap: 14px; min-width: 0; } .er-ms-marca-logo { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; border: 1.5px solid color-mix(in srgb, var(--ms-accent-2-light) 60%, transparent); border-radius: var(--ms-radius); background: var(--ms-surface); padding: 3px; } .er-ms-marca-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .er-ms-marca-denumire { font-family: var(--ms-font-titlu); font-size: 1.12rem; font-weight: 600; } .er-ms-marca-sub { font-family: var(--ms-font-cifre); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--er-text-on-dark-soft); margin-top: 3px; } .er-ms-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; } /* Subliniere care crește la hover, ca în mockup. Se scrie pe ::after ca linia să nu miște textul când apare. */ .er-ms-nav a { position: relative; padding: 6px 0; font-size: 0.92rem; font-weight: 500; color: var(--er-text-on-dark-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .er-ms-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ms-accent-2-light); transition: width 0.2s ease; } .er-ms-nav a:hover { color: var(--er-text-on-dark); } .er-ms-nav a:hover::after { width: 100%; } .er-ms-nav-extern { font-size: 14px !important; opacity: 0.7; } /* Telefonul din antet e singura intrare cu chenar: pe pagina unei școli e acțiunea cerută cel mai des, iar un părinte care sună nu are timp să citească meniul. */ .er-ms-nav-telefon { border: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 50%, transparent); border-radius: var(--er-radius-full); padding: 6px 14px !important; font-family: var(--ms-font-cifre); font-size: 0.8rem !important; color: var(--ms-accent-2-light) !important; } .er-ms-nav-telefon::after { display: none; } .er-ms-nav-telefon:hover { border-color: var(--ms-accent-2-light); background: color-mix(in srgb, var(--ms-accent-2-light) 12%, transparent); } .er-ms-nav-telefon .material-icons { font-size: 15px; } /* ============================================================================ 7. HERO Bleumarinul școlii, cu o lumină aurie sus-stânga și hașura diagonală din mockup. Când unitatea are imagine de hero, view-ul pune fotografia și vălul ca stil inline — calea vine din bază, deci nu poate fi o clasă. ============================================================================ */ .er-ms-hero { position: relative; overflow: hidden; color: var(--er-text-on-dark); background-color: var(--ms-accent-dark); background-image: radial-gradient(1100px 500px at 20% -10%, color-mix(in srgb, var(--ms-accent-2) 22%, transparent), transparent 60%), linear-gradient(120deg, var(--ms-accent-soft) 0%, var(--ms-accent-dark) 68%); background-size: cover; background-position: center; } /* Hașura: singurul ornament al paginii. La 3,5% nu se citește ca dungi, dar scoate fundalul din plat. */ .er-ms-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--ms-accent-2-light) 5%, transparent) 0 2px, transparent 2px 90px); } .er-ms-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; /* Jos e loc pentru scurtăturile care urcă peste hero cu margine negativă. */ padding: 62px 28px 96px; } .er-ms-hero-supratitlu { color: var(--ms-accent-2-light); } .er-ms-hero h1 { font-size: clamp(2.1rem, 5vw, var(--ms-titlu-xl)); line-height: 1.06; margin: 16px 0 20px; max-width: 24ch; } .er-ms-hero-lead { max-width: 56ch; font-size: var(--ms-text-lg); line-height: 1.55; color: var(--er-text-on-dark-soft); margin-bottom: 28px; white-space: pre-wrap; } .er-ms-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 30px; font-size: 0.88rem; color: var(--er-text-on-dark-soft); } .er-ms-hero-meta-item { display: inline-flex; align-items: center; gap: 7px; } .er-ms-hero-meta-item .material-icons { font-size: 17px; color: var(--ms-accent-2-light); } /* Cifrele — nota, numărul de elevi — în mono, ca toate cifrele paginii. */ .er-ms-hero-meta-item strong { font-family: var(--ms-font-cifre); font-weight: 600; color: var(--er-text-on-dark); } .er-ms-hero-actiuni { display: flex; flex-wrap: wrap; gap: 14px; } /* ============================================================================ 8. SCURTĂTURI Banda de carduri care urcă peste hero. Intrările nu sunt scrise în pagină: se construiesc din zonele care există efectiv, ca banda să nu ducă niciodată la o secțiune care nu s-a randat. ============================================================================ */ .er-ms-scurtaturi { background: var(--ms-paper-warm); border-bottom: 1px solid var(--ms-line); } .er-ms-scurtaturi-grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); position: relative; z-index: 5; margin-top: -58px; box-shadow: var(--er-shadow-xl); } .er-ms-scurtatura { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--ms-surface); border-right: 1px solid var(--ms-line); padding: 28px 24px; transition: background 0.2s ease, transform 0.2s ease; } .er-ms-scurtatura:last-child { border-right: none; } .er-ms-scurtatura::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; /* Bara apare la hover, iar la hover cardul are fundal închis: auriul deschis e cel care rămâne vizibil și în contrast ridicat. */ background: var(--ms-accent-2-light); transition: width 0.25s ease; } .er-ms-scurtatura:hover { background: var(--ms-accent); transform: translateY(-4px); } .er-ms-scurtatura:hover::before { width: 100%; } .er-ms-scurtatura:hover .er-ms-scurtatura-titlu, .er-ms-scurtatura:hover .er-ms-scurtatura-descriere { color: var(--er-text-on-dark); } .er-ms-scurtatura:hover .er-ms-scurtatura-numar, .er-ms-scurtatura:hover .er-ms-scurtatura-actiune { color: var(--ms-accent-2-light); } .er-ms-scurtatura-numar { font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-ink-soft); transition: color 0.2s ease; } .er-ms-scurtatura-titlu { font-family: var(--ms-font-titlu); font-size: 1.2rem; font-weight: 600; margin: 10px 0 6px; color: var(--ms-ink); transition: color 0.2s ease; } .er-ms-scurtatura-descriere { font-size: 0.86rem; line-height: 1.5; color: var(--ms-ink-soft); transition: color 0.2s ease; } .er-ms-scurtatura-actiune { margin-top: 16px; font-family: var(--ms-font-cifre); font-size: 0.78rem; color: var(--ms-accent-2); } /* ============================================================================ 9. BARA DE ANCORE Antetul e al școlii și nu are ancore, iar pagina are șapte zone. Bara asta e cuprinsul paginii: mono, majuscule, pe hârtie caldă. ============================================================================ */ .er-ms-ancore { background: var(--ms-paper-warm); border-bottom: 1px solid var(--ms-line); } .er-ms-ancore-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; display: flex; gap: 30px; overflow-x: auto; /* Bara ajunge să se deruleze pe telefon; fără asta, marginile de jos ale linkurilor se taie în unele browsere. */ scrollbar-width: thin; } .er-ms-ancore-inner a { padding: 15px 0; font-family: var(--ms-font-cifre); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--ms-ink-soft); border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .er-ms-ancore-inner a:hover { color: var(--ms-accent); border-bottom-color: var(--ms-accent-2); } /* ============================================================================ 10. AVIZIER ȘI NOUTĂȚI Proporția din mockup: noutățile 2/3, avizierul 1/3. Avizierul din mockup e plută cu bilețele prinse în piuneze; aici plută nu se poate face din tokeni, deci ideea s-a păstrat, materialul nu: tablă bleumarin, bilețele de hârtie caldă, piuneză roșie, eticheta aurie a tablei. Se comută corect în contrast ridicat, ceea ce plută desenată cu maro scris de mână nu ar fi făcut. ============================================================================ */ .er-ms-avizier-strat { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; } /* ---------- noutăți ---------- */ .er-ms-vesti { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .er-ms-vest { display: flex; flex-direction: column; background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); transition: box-shadow 0.2s ease, transform 0.2s ease; } .er-ms-vest:hover { transform: translateY(-3px); box-shadow: var(--er-shadow-lg); } /* Prima veste ține toată lățimea, cu imaginea în stânga: dă ierarhie unei liste care altfel ar fi fost trei carduri egale. */ .er-ms-vest-larg { grid-column: 1 / -1; display: grid; grid-template-columns: 240px 1fr; } .er-ms-vest-imagine { width: 100%; height: 152px; object-fit: cover; } .er-ms-vest-larg .er-ms-vest-imagine { height: 100%; min-height: 152px; } /* Locul imaginii, când articolul nu are una. Nu se lasă gol și nu se pune o fotografie de stoc: un dreptunghi bleumarin cu titlul zonei e cinstit. */ .er-ms-vest-fara-imagine { display: flex; align-items: center; justify-content: center; min-height: 152px; background: linear-gradient(135deg, var(--ms-accent) 0%, var(--ms-accent-soft) 100%); font-family: var(--ms-font-cifre); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--er-text-on-dark-soft); } .er-ms-vest-corp { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1 1 auto; } .er-ms-vest-data { font-family: var(--ms-font-cifre); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-accent-2); } .er-ms-vest-titlu { font-size: 1.02rem; line-height: 1.35; } .er-ms-vest-titlu a:hover { color: var(--ms-accent); text-decoration: underline; text-underline-offset: 3px; } .er-ms-vest-extras { font-size: 0.85rem; line-height: 1.5; color: var(--ms-ink-soft); } .er-ms-vest-link { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--ms-font-cifre); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-accent); } .er-ms-vest-link .material-icons { font-size: 15px; color: var(--ms-accent-2); } .er-ms-vest-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- avizier ---------- */ .er-ms-avizier { position: relative; background: var(--ms-accent); border: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 35%, transparent); padding: 30px 18px 22px; } .er-ms-avizier-eticheta { position: absolute; top: -12px; left: 18px; background: var(--ms-accent-dark); color: var(--ms-accent-2-light); font-family: var(--ms-font-cifre); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 45%, transparent); } .er-ms-note { display: flex; flex-direction: column; gap: 20px; } .er-ms-nota { position: relative; background: var(--ms-paper-warm); color: var(--ms-ink); padding: 18px 16px 16px; box-shadow: var(--er-shadow-md); } /* Înclinarea alternantă e cea care face zona să arate ca un avizier și nu ca o listă. Nu e animație, deci nu intră sub preferința de mișcare redusă. */ .er-ms-nota:nth-child(odd) { transform: rotate(-0.7deg); } .er-ms-nota:nth-child(even) { transform: rotate(0.6deg); } .er-ms-nota-fixat { outline: 2px solid var(--ms-accent-2); outline-offset: -2px; } .er-ms-nota-pin { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--ms-urgent); box-shadow: var(--er-shadow-sm); } .er-ms-nota-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } /* Culorile etichetei vin din nomenclator și se pun ca stil inline din view. Implicitul de aici e cel care se vede când anunțul nu are etichetă colorată. */ .er-ms-nota-eticheta { font-family: var(--ms-font-cifre); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; background: var(--ms-accent); color: var(--er-text-on-dark); } .er-ms-nota-fixat-marca { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ms-font-cifre); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-urgent); } .er-ms-nota-fixat-marca .material-icons { font-size: 14px; } .er-ms-nota-titlu { font-size: 1rem; line-height: 1.35; margin-bottom: 6px; } .er-ms-nota-text { font-size: 0.84rem; line-height: 1.5; color: var(--ms-ink-soft); white-space: pre-wrap; } .er-ms-nota-jos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-family: var(--ms-font-cifre); font-size: 0.68rem; color: var(--ms-ink-soft); } .er-ms-nota-document { display: inline-flex; align-items: center; gap: 5px; color: var(--ms-accent); font-weight: 500; } .er-ms-nota-document:hover { text-decoration: underline; text-underline-offset: 3px; } .er-ms-nota-document .material-icons { font-size: 15px; } /* Starea de gol a avizierului stă pe tabla închisă, deci nu poate folosi .er-ms-gol, care e scris pentru hârtie. */ .er-ms-avizier-gol { border: 1px dashed color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); padding: 24px 18px; text-align: center; font-size: 0.86rem; line-height: 1.6; color: var(--er-text-on-dark-soft); } /* ============================================================================ 11. CONTOARE ȘI CUVÂNTUL DIRECTORULUI Banda închisă din mijlocul paginii. Cifrele sunt mono și aurii; separatorul dintre ele e derivat din auriul deschis, ca să rămână o linie și în contrast ridicat, unde tokenul devine alb. ============================================================================ */ .er-ms-cifre { background-color: var(--ms-accent-dark); background-image: radial-gradient(700px 300px at 85% 0%, color-mix(in srgb, var(--ms-accent-2) 16%, transparent), transparent 60%); color: var(--er-text-on-dark); } .er-ms-cifre-grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); } .er-ms-cifra { padding: 32px 22px; border-left: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); } .er-ms-cifra:first-child { border-left: none; } .er-ms-cifra-valoare { font-family: var(--ms-font-cifre); font-weight: 600; font-size: var(--ms-titlu-lg); line-height: 1; color: var(--ms-accent-2-light); } .er-ms-cifra-eticheta { margin-top: 10px; font-size: 0.82rem; line-height: 1.4; color: var(--er-text-on-dark-soft); } .er-ms-director { display: grid; grid-template-columns: 150px 1fr; gap: 34px; align-items: center; margin-top: 56px; padding-top: 48px; border-top: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); } /* Fără contoare, cuvântul directorului e singurul lucru din bandă și nu are ce să delimiteze. */ .er-ms-director-singur { margin-top: 0; padding-top: 0; border-top: none; } .er-ms-director-foto, .er-ms-director-initiala { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 2px solid color-mix(in srgb, var(--ms-accent-2-light) 55%, transparent); } .er-ms-director-initiala { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--ms-accent-soft), var(--ms-accent-dark)); font-family: var(--ms-font-titlu); font-size: var(--ms-titlu-md); color: var(--ms-accent-2-light); } .er-ms-director-citat { font-family: var(--ms-font-titlu); font-style: italic; font-size: 1.28rem; line-height: 1.5; color: var(--er-text-on-dark); white-space: pre-wrap; } .er-ms-director-semnatura { margin-top: 16px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ms-accent-2-light); } /* ============================================================================ 12. DESPRE ȘI NIVELURI În mockup, zona „ghidul candidatului": carduri egale, cu pasul scris mono deasupra titlului. Aici pașii sunt nivelurile de învățământ, singurul conținut pe care îl are orice unitate înscrisă. ============================================================================ */ .er-ms-despre-strat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; } .er-ms-despre-text { font-size: var(--ms-text-lg); line-height: 1.75; color: var(--ms-ink-soft); max-width: 62ch; white-space: pre-wrap; margin-top: var(--er-space-md); } .er-ms-niveluri { display: grid; gap: 14px; } .er-ms-nivel { background: var(--ms-surface); border: 1px solid var(--ms-line); border-left: 3px solid transparent; border-radius: var(--ms-radius); padding: 16px 18px; } .er-ms-nivel-principal { border-left-color: var(--ms-accent-2); } .er-ms-nivel-nume { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-family: var(--ms-font-titlu); font-size: 1.05rem; font-weight: 600; } .er-ms-nivel-marca { font-family: var(--ms-font-cifre); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-accent-2); border: 1px solid var(--ms-accent-2); padding: 1px 7px; } .er-ms-nivel-cifre { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-family: var(--ms-font-cifre); font-size: 0.74rem; color: var(--ms-ink-soft); } .er-ms-nivel-libere { color: var(--ms-calm); font-weight: 600; } .er-ms-nivel-complet { color: var(--ms-urgent); font-weight: 600; } /* ============================================================================ 13. VIAȚA ȘCOLII Mozaicul din mockup, cu prima fotografie pe două coloane și două rânduri. Legenda stă peste imagine, pe o întunecare derivată din cerneală: în contrast ridicat cerneala e neagră, deci textul alb de deasupra rămâne lizibil. ============================================================================ */ .er-ms-viata { background: var(--ms-calm-light); } .er-ms-mozaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; gap: 8px; } .er-ms-mozaic-item { position: relative; overflow: hidden; margin: 0; background: var(--ms-accent); } .er-ms-mozaic-item:first-child { grid-column: span 2; grid-row: span 2; } .er-ms-mozaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .er-ms-mozaic-item:hover img { transform: scale(1.04); } .er-ms-mozaic-item figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; background: linear-gradient(0deg, color-mix(in srgb, var(--ms-ink) 78%, transparent) 0%, transparent 100%); color: var(--er-text-on-dark); font-family: var(--ms-font-cifre); font-size: 0.7rem; line-height: 1.45; letter-spacing: 0.03em; } .er-ms-mozaic-item figcaption strong { display: block; font-weight: 600; } /* ============================================================================ 14. CONDUCEREA Nu există în mockup, fiindcă mockup-ul nu avea datele. Se scrie în aceeași limbă: hârtie, funcția în mono, fără pastile. ============================================================================ */ .er-ms-echipa { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 26px; } .er-ms-persoana { background: var(--ms-surface); border: 1px solid var(--ms-line); border-top: 3px solid var(--ms-accent); border-radius: var(--ms-radius); padding: 26px 22px; } .er-ms-persoana-foto, .er-ms-persoana-initiala { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; } .er-ms-persoana-initiala { display: flex; align-items: center; justify-content: center; background: var(--ms-paper-warm); border: 1px solid var(--ms-line); font-family: var(--ms-font-titlu); font-size: var(--ms-titlu-sm); color: var(--ms-accent); } .er-ms-persoana-nume { font-family: var(--ms-font-titlu); font-size: 1.05rem; font-weight: 600; } .er-ms-persoana-functie { margin-top: 5px; font-family: var(--ms-font-cifre); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-accent-2); } .er-ms-persoana-discipline { margin-top: 8px; font-size: 0.84rem; color: var(--ms-ink-soft); } .er-ms-persoana-citat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ms-line); font-family: var(--ms-font-titlu); font-style: italic; font-size: 0.92rem; line-height: 1.55; color: var(--ms-ink-soft); white-space: pre-wrap; } /* ============================================================================ 15. CONTACT Subsolul randat de layout are deja adresa, telefonul, adresa de e-mail, rețelele și linkurile legale. Zona asta nu le repetă: ține ce nu are subsolul — drumul până la poartă, punctul de reper și programul secretariatului. ============================================================================ */ .er-ms-contact { background: var(--ms-paper-warm); border-top: 1px solid var(--ms-line); } .er-ms-contact-grila { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; } .er-ms-contact-col h3 { font-family: var(--ms-font-cifre); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-ink-soft); margin-bottom: 16px; } .er-ms-contact-linie { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.92rem; line-height: 1.6; color: var(--ms-ink-soft); } .er-ms-contact-linie .material-icons { font-size: 18px; color: var(--ms-accent-2); flex: 0 0 auto; margin-top: 2px; } .er-ms-contact-linie a { color: var(--ms-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .er-ms-contact-program { white-space: pre-wrap; } .er-ms-contact-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--ms-line); font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.04em; } .er-ms-contact-legal a { color: var(--ms-ink-soft); text-decoration: underline; text-underline-offset: 3px; } .er-ms-contact-legal a:hover { color: var(--ms-accent); } /* ============================================================================ 16. PAGINA UNUI ARTICOL ============================================================================ */ .er-ms-articol-cap { background: var(--ms-accent); color: var(--er-text-on-dark); padding: 34px 0 40px; } .er-ms-articol-cap-inner, .er-ms-articol-corp-inner { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 28px; } .er-ms-articol-cap .er-ms-inapoi { color: var(--er-text-on-dark-soft); } .er-ms-articol-cap .er-ms-inapoi:hover { color: var(--er-text-on-dark); } .er-ms-articol-cap .er-ms-inapoi .material-icons { color: var(--ms-accent-2-light); } .er-ms-articol-titlu { margin: 20px 0 16px; font-size: clamp(1.8rem, 4vw, var(--ms-titlu-lg)); line-height: 1.14; } .er-ms-articol-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-accent-2-light); } .er-ms-articol-corp { padding: 48px 0 88px; } .er-ms-articol-imagine { width: 100%; border-radius: var(--ms-radius); border: 1px solid var(--ms-line); margin-bottom: 32px; } /* Extrasul e chapeau-ul articolului: serif, mai mare decât textul, cu o linie aurie în stânga. Nu e citat, deci nu e cursiv. */ .er-ms-articol-extras { font-family: var(--ms-font-titlu); font-size: 1.22rem; line-height: 1.5; color: var(--ms-ink); border-left: 3px solid var(--ms-accent-2); padding-left: 20px; margin-bottom: 30px; white-space: pre-wrap; } .er-ms-articol-text { font-size: var(--ms-text-lg); line-height: 1.8; color: var(--ms-ink); max-width: none; } .er-ms-articol-jos { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ms-line); } /* ============================================================================ 17. SUBSOLUL ȘCOLII ============================================================================ */ .er-ms-subsol { background: var(--ms-accent-dark); color: var(--er-text-on-dark-soft); padding: 66px 0 24px; margin-top: auto; } .er-ms-subsol-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px 42px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; border-bottom: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 30%, transparent); } .er-ms-subsol-col h4 { color: var(--er-text-on-dark); font-family: var(--ms-font-cifre); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } /* Prima coloană poartă numele școlii, deci titlul ei e serif, nu mono. */ .er-ms-subsol-col:first-child h4 { font-family: var(--ms-font-titlu); font-size: 1.12rem; letter-spacing: -0.01em; text-transform: none; } .er-ms-subsol-col p { font-size: 0.86rem; line-height: 1.7; margin: 5px 0; } .er-ms-subsol-col li { margin-bottom: 9px; font-size: 0.86rem; } .er-ms-subsol-col a:hover { color: var(--ms-accent-2-light); text-decoration: underline; text-underline-offset: 3px; } .er-ms-subsol-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .er-ms-subsol-social a { font-family: var(--ms-font-cifre); font-size: 0.7rem; letter-spacing: 0.06em; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 35%, transparent); transition: var(--er-transition); } .er-ms-subsol-social a:hover { border-color: var(--ms-accent-2-light); color: var(--ms-accent-2-light); text-decoration: none; } .er-ms-subsol-jos { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 28px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.03em; } .er-ms-subsol-jos a { color: var(--ms-accent-2-light); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================================ 18. ECRANE MICI ============================================================================ */ @media (max-width: 992px) { .er-ms-sectiune { padding: 64px 0; } .er-ms-avizier-strat, .er-ms-despre-strat { grid-template-columns: 1fr; gap: 40px; } .er-ms-vesti { grid-template-columns: 1fr; } .er-ms-vest-larg { grid-template-columns: 1fr; } .er-ms-vest-larg .er-ms-vest-imagine { height: 200px; } .er-ms-director { grid-template-columns: 1fr; gap: 24px; } .er-ms-mozaic { grid-template-columns: repeat(2, 1fr); } .er-ms-subsol-inner { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 768px) { /* Antetul nu mai stă lipit sus: pe telefon, cu numele școlii pe două rânduri și cu meniul dedesubt, ar fi mâncat jumătate de ecran. */ .er-ms-antet { position: static; } /* Antetul nu mai e lipit sus, deci ancorele nu mai au ce să ocolească. */ .er-ms-body [id] { scroll-margin-top: 12px; } .er-ms-antet-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 20px; } .er-ms-nav { gap: 8px 18px; } .er-ms-lat, .er-ms-hero-inner, .er-ms-a11y-inner, .er-ms-ancore-inner, .er-ms-articol-cap-inner, .er-ms-articol-corp-inner, .er-ms-subsol-inner, .er-ms-subsol-jos { padding-left: 20px; padding-right: 20px; } .er-ms-hero-inner { padding-top: 44px; padding-bottom: 64px; } /* Scurtăturile nu mai urcă peste hero: pe un ecran îngust, cardul de sus ar fi acoperit ultimul rând al textului. */ .er-ms-scurtaturi-grila { margin-top: 0; box-shadow: none; } .er-ms-scurtatura { border-right: none; border-bottom: 1px solid var(--ms-line); } .er-ms-hero-actiuni .er-ms-btn { flex: 1 1 100%; justify-content: center; } .er-ms-cifra { border-left: none; border-top: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); } .er-ms-cifra:first-child { border-top: none; } .er-ms-mozaic { grid-auto-rows: 140px; } .er-ms-mozaic-item:first-child { grid-column: span 2; grid-row: span 1; } .er-ms-subsol-jos { flex-direction: column; } } /* ============================================================ 19. MENIUL GRUPAT DIN ANTET Grupurile sunt
/, nu meniuri pe hover: funcționează fără JavaScript, se deschid cu Enter de la tastatură, iar browserul le anunță cititoarelor de ecran ca „extins/restrâns". Vezi motivul întreg în _LayoutMicrosite.cshtml. Consecința pentru stil: nu se poate folosi :hover pentru deschidere. Panoul se afișează pe [open], deci starea o ține browserul, nu CSS-ul. ============================================================ */ .er-ms-nav-link, .er-ms-nav-grup > summary { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; font-family: var(--ms-font-text); font-size: var(--ms-text-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--ms-accent-2-light); border-bottom: 2px solid transparent; cursor: pointer; transition: var(--er-transition); } .er-ms-nav-link:hover, .er-ms-nav-grup > summary:hover, .er-ms-nav-grup[open] > summary { color: var(--ms-surface); border-bottom-color: var(--ms-accent-2); } /* Inelul de focus rămâne vizibil: e singurul indiciu pentru cine navighează de la tastatură, iar meniul e primul lucru pe care îl parcurge. */ .er-ms-nav-link:focus-visible, .er-ms-nav-grup > summary:focus-visible { outline: 2px solid var(--ms-accent-2); outline-offset: 2px; } .er-ms-nav-grup { position: relative; } /* Triunghiul implicit al lui se scoate și se pune unul propriu, ca să se rotească la deschidere fără să depindă de felul în care îl desenează fiecare browser. */ .er-ms-nav-grup > summary { list-style: none; } .er-ms-nav-grup > summary::-webkit-details-marker { display: none; } .er-ms-nav-grup > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; } .er-ms-nav-grup[open] > summary::after { transform: rotate(-135deg) translateY(-1px); } .er-ms-nav-panou { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 230px; display: flex; flex-direction: column; padding: 6px; background: var(--ms-surface); border: 1px solid var(--ms-line); border-top: 2px solid var(--ms-accent-2); box-shadow: var(--er-shadow-lg); } .er-ms-nav-panou a { padding: 9px 12px; font-family: var(--ms-font-text); font-size: var(--ms-text-sm); color: var(--ms-ink); border-left: 2px solid transparent; } .er-ms-nav-panou a:hover { background: var(--ms-paper); border-left-color: var(--ms-accent-2); color: var(--ms-accent); } .er-ms-nav-panou a:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; } /* ============================================================ 20. SCHELETUL PAGINILOR INTERIOARE Contractul comun pe care se sprijină toate cele unsprezece pagini de secțiune. Există ca să nu-și inventeze fiecare pagină propriul cap și propria grilă: pe un site de școală, unde paginile se adaugă una câte una, în ani, diferențele de așezare se acumulează până când situl arată ca zece situri lipite. Fiecare pagină primește: un cap cu firimituri și titlu, o coloană de conținut, o grilă de cartonașe, un tabel de listă și o pastilă de etichetă. ============================================================ */ .er-ms-pagina { background: var(--ms-paper); min-height: 60vh; } .er-ms-pagina-cap { padding: 44px 0 32px; background: var(--ms-accent); color: var(--ms-surface); border-bottom: 3px solid var(--ms-accent-2); } .er-ms-pagina-cap-inner, .er-ms-pagina-corp { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .er-ms-pagina-corp { padding-top: 40px; padding-bottom: 64px; } /* Firimiturile: calea de întoarcere. Pe paginile interioare ale unui microsite, vizitatorul ajunge des direct din motorul de căutare și nu are de unde ști unde e. */ .er-ms-firimituri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-accent-2-light); } .er-ms-firimituri a { border-bottom: 1px solid transparent; } .er-ms-firimituri a:hover { border-bottom-color: var(--ms-accent-2); } .er-ms-firimituri-separator { opacity: 0.55; } .er-ms-pagina-titlu { margin: 0; font-family: var(--ms-font-titlu); font-size: var(--ms-titlu-lg); font-weight: 600; line-height: 1.12; } .er-ms-pagina-descriere { max-width: 62ch; margin: 12px 0 0; font-family: var(--ms-font-text); font-size: var(--ms-text-lg); line-height: 1.6; color: var(--ms-accent-2-light); } /* Grila de cartonașe. Fără număr fix de coloane: se așază singură după lățime, deci aceeași grilă merge pentru trei facilități și pentru douăzeci de documente. */ .er-ms-grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .er-ms-grila-larga { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } .er-ms-cartonas { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius); transition: var(--er-transition); } .er-ms-cartonas:hover { border-color: var(--ms-accent-2); box-shadow: var(--er-shadow-md); } .er-ms-cartonas-titlu { margin: 0; font-family: var(--ms-font-titlu); font-size: var(--ms-titlu-sm); font-weight: 600; line-height: 1.25; color: var(--ms-accent); } .er-ms-cartonas-meta { font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ms-ink-soft); } .er-ms-cartonas-text { margin: 0; font-family: var(--ms-font-text); font-size: var(--ms-text-base); line-height: 1.65; color: var(--ms-ink-soft); } /* Textele scrise de școală se afișează escapat, cu rândurile păstrate: nu există niciun curățător de HTML în proiect, iar Html.Raw pe text venit din panoul de administrare ar fi lăsat orice școală să ruleze script pe un domeniu al platformei. Consecința acceptată: formatarea bogată nu se vede. */ .er-ms-text-pastrat { white-space: pre-wrap; } /* Lista tabelară, pentru orar, documente și medii de admitere. */ .er-ms-tabel { width: 100%; border-collapse: collapse; background: var(--ms-surface); border: 1px solid var(--ms-line); font-family: var(--ms-font-text); font-size: var(--ms-text-sm); } .er-ms-tabel caption { padding: 12px 14px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--ms-ink-soft); } .er-ms-tabel th, .er-ms-tabel td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--ms-line); vertical-align: top; } .er-ms-tabel thead th { background: var(--ms-accent); color: var(--ms-surface); font-family: var(--ms-font-cifre); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: none; } .er-ms-tabel tbody tr:last-child td { border-bottom: none; } .er-ms-tabel tbody tr:hover { background: var(--ms-paper); } /* Tabelele largi — orarul are șapte coloane — se derulează pe orizontală în propriul lor cadru, ca pagina să nu se lățească pe telefon. */ .er-ms-tabel-cadru { overflow-x: auto; border-radius: var(--ms-radius); } .er-ms-eticheta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--ms-calm-light); color: var(--ms-accent); border-radius: var(--ms-radius); font-family: var(--ms-font-cifre); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .er-ms-eticheta-accent { background: var(--ms-accent-2); color: var(--ms-accent-dark); } .er-ms-eticheta-urgent { background: var(--ms-urgent); color: var(--ms-surface); } /* Grup de conținut: titlul unei categorii plus ce e sub el. Documentele se grupează pe categorii, performanțele pe ani, orarul pe zile. */ .er-ms-grup { margin-bottom: 40px; } .er-ms-grup-titlu { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ms-accent-2); font-family: var(--ms-font-titlu); font-size: var(--ms-titlu-md); font-weight: 600; color: var(--ms-accent); } .er-ms-grup-numar { font-family: var(--ms-font-cifre); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ms-ink-soft); } /* ============================================================ 21. ECRANE MICI — paginile interioare ============================================================ */ @media (max-width: 900px) { /* Pe telefon meniul se așază pe coloană, iar panourile devin obișnuite: un panou absolut ar fi ieșit din ecran. */ .er-ms-nav-panou { position: static; min-width: 0; box-shadow: none; border: none; border-left: 2px solid var(--ms-accent-2); background: transparent; } .er-ms-nav-panou a { color: var(--ms-accent-2-light); } .er-ms-nav-panou a:hover { background: transparent; color: var(--ms-surface); } .er-ms-pagina-cap { padding: 30px 0 24px; } .er-ms-pagina-titlu { font-size: var(--ms-titlu-md); } .er-ms-pagina-descriere { font-size: var(--ms-text-base); } .er-ms-grila, .er-ms-grila-larga { grid-template-columns: 1fr; } .er-ms-grup-titlu { font-size: var(--ms-titlu-sm); } }