/* ============================================================================ 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; } /* CONTROALELE NU MOSTENESC LITERA — aceeasi regula a browserului ca pe portal, unde e explicata pe larg, in site.css. Foaia asta nu incarca site.css, deci regula trebuie scrisa si aici. Selector de ELEMENT dinadins: pierde in fata oricarei reguli cu clasa, deci butoanele care trebuie sa rămână monospatiate — bara de accesibilitate — rămân cum sunt. */ button, input, select, textarea, optgroup { font-family: inherit; } .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: 12px; } /* 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 20px; } /* 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: 64px 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 20px; 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: static; 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); } /* Meniul si etichetele de grup, la marirea literelor. De ce e nevoie de reguli anume: restul paginii creste de la font-size pus pe :root, fiindca e declarat in rem. Meniul, masurat, NU urmeaza — nici cu regula lui de 0.92rem, nici cu una nouă pusa peste cu !important. Marimile de aici sunt scrise direct, ca sa nu depinda de ce anume blocheaza mostenirea acolo. !important e neapărat, nu neglijenta: foaia asta foloseste deja !important pe bucati de meniu (er-ms-nav-extern), iar fara el regula de aici era batuta — masurat: prinsese pe er-ms-nav-panou a, dar nu pe er-ms-nav a si nu pe summary. */ /* Ordinea conteaza: „foarte mare” vine dupa „mare”, ca la aceeasi specificitate sa castige cand ambele clase ar fi puse din greseala. ============================================================ */ :root.er-a11y-text-mare .er-ms-nav a, :root.er-a11y-text-mare .er-ms-nav-grup > summary, :root.er-a11y-text-mare .er-ms-nav-panou a { font-size: 16.5px !important; } :root.er-a11y-text-foarte-mare .er-ms-nav a, :root.er-a11y-text-foarte-mare .er-ms-nav-grup > summary, :root.er-a11y-text-foarte-mare .er-ms-nav-panou a { font-size: 18.5px !important; } /* ============================================================ BARA UTILITARA — rândul de sus al antetului Specificația o cere „cu font mai mic" decât meniul principal. Meniul e la 0.92rem (vezi .er-ms-nav a), deci bara stă la 0.78rem. Diferența trebuie să fie vizibilă, nu simbolică: rândul de sus e pentru unelte, nu pentru navigare. Fundalul e o umbrire peste accentul școlii, nu o culoare proprie: bara trebuie să se citească drept parte a antetului, despărțită de meniu printr-o linie. ============================================================ */ .er-ms-bara-utilitara { background: rgba(0, 0, 0, .18); border-bottom: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 18%, transparent); } .er-ms-bara-utilitara-inner { width: 100%; max-width: var(--ms-lat-pagina, 1200px); margin: 0 auto; padding: 5px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; } .er-ms-bara-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 4px; /* MAI MIC decat meniul principal (0.92rem). Asta e chiar cerinta. */ font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; color: var(--er-text-on-dark-soft); transition: background-color .15s ease, color .15s ease; } .er-ms-bara-link:hover { background: rgba(255, 255, 255, .1); color: var(--er-text-on-dark); text-decoration: none; } .er-ms-bara-link:focus-visible { outline: 2px solid var(--ms-accent-2-light); outline-offset: 1px; } .er-ms-bara-link .material-icons { font-size: 15px; } .er-ms-bara-extern { opacity: .6; font-size: 13px !important; } .er-ms-antet-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px 20px; min-height: 78px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-direction: column; } .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; } /* Monograma din antet, cand scoala nu are inca sigla incarcata. Aceeasi CASETA ca sigla — 46x46, aceeasi bordura si aceeasi rotunjire — ca antetul sa arate la fel indiferent care din cele doua se randeaza. O monograma de alta marime ar fi mutat denumirea cu cativa pixeli intre doua scoli. Fundalul e var(--ms-accent), adica CULOAREA SCOLII cand si-a pus una, altfel accentul implicit. Nu se scrie culoarea aici: declaratiile scolii se injecteaza pe body:not(.er-a11y-contrast), deci monograma urmeaza si modul de contrast ridicat, fara nicio regula in plus. */ .er-ms-marca-monograma { width: 46px; height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center; border: 1.5px solid color-mix(in srgb, var(--ms-accent-2-light) 60%, transparent); border-radius: var(--ms-radius); background: var(--ms-accent); color: #fff; font-family: var(--ms-font-titlu, inherit); font-size: 17px; font-weight: 700; letter-spacing: 0.5px; /* Literele nu se selecteaza: e un desen, nu un text de citit sau de copiat. */ user-select: none; } .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; } /* MENIUL, PE TELEFON: O COLOANĂ, nu un rând care se înfășoară. Aici era stricăciunea la deschiderea grupurilor. Sub 900px panoul unui
e „position: static" — se deschide ÎNĂUNTRUL meniului, nu peste pagină. Cât timp meniul era un rând cu „flex-wrap: wrap" și „align-items: center", deschiderea unui grup făcea trei lucruri deodată, toate greșite: 1. Grupul deschis devenea un element înalt în rând, iar „align-items: center" recentra pe verticală TOATE celelalte legături față de el — săreau la mijlocul rândului. 2. Ce venea după el era împins pe alte rânduri, deci meniul își schimba forma sub degetul care tocmai apăsase. 3. Panoul, fiind element de flex dimensionat după conținut, rămânea îngust și lipit de eticheta lui, în loc să se citească drept listă. Ca o coloană, un grup care se deschide împinge pur și simplu ce e sub el — purtarea de acordeon, cea așteptată pe telefon. Antetul nu e lipit sus pe mobil (position: static până la 768px), deci un meniu mai înalt doar se derulează, nu fură ecranul. De la 768px meniul redevine rând, iar panourile devin plutitoare — vezi acolo. Regula care leagă cele două: panou în firul paginii NUMAI cât timp meniul e coloană. */ .er-ms-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } /* 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; } /* Aici stăteau regulile pentru „er-ms-nav-telefon", numărul cu chenar din meniu. Numărul a fost scos din antet, deci clasa nu mai e pusă de nimeni și regulile au plecat cu ea. Numărul se vede mai departe în subsol, pe prima pagină și pe pagina de contact — acolo are stilurile lui, altele. */ /* ============================================================================ 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); } /* Filmul de fundal al zonei de întâmpinare, când școala a scris o adresă. Acoperă secțiunea fără să se deformeze; ce iese din cadru se taie, fiindcă .er-ms-hero are deja overflow: hidden. z-index explicit, nu lăsat pe „auto": hașura din ::before și filmul sunt amândouă poziționate, iar la z-index auto ordinea ar fi hotărât-o poziția în document — filmul, venind al doilea, ar fi acoperit hașura. Aici straturile se scriu: film 0, văl 1, cuprins 2. */ .er-ms-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Vălul de peste film. Aceleași două opriri ca vălul pus inline peste fotografie, din aceiași tokeni: în contrast ridicat accentul devine negru pur, deci textul alb rămâne lizibil fără nicio regulă în plus. */ .er-ms-hero-val { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient( color-mix(in srgb, var(--ms-accent-dark) 72%, transparent), color-mix(in srgb, var(--ms-accent-dark) 88%, transparent)); } .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: 44px 20px 64px; } .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: 0; box-shadow: none; } .er-ms-scurtatura { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--ms-surface); border-right: none; padding: 28px 24px; transition: background 0.2s ease, transform 0.2s ease; border-bottom: 1px solid var(--ms-line); } .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); } /* „Ce urmează" — evenimentele din coloana noutatilor. Data e desenata ca o foaie de calendar (zi mare, luna mica), nu scrisa in rand: la un eveniment viitor, DATA e ce caută ochiul, nu titlul. */ .er-ms-urmeaza { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ms-line); } .er-ms-urmeaza-titlu, .er-ms-noutati-titlu { margin: 0 0 14px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-ink-soft); } .er-ms-urmeaza-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .er-ms-urmeaza-rand { display: flex; align-items: center; gap: 12px; } .er-ms-urmeaza-data { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; padding: 5px 0 6px; background: var(--ms-surface); border: 1px solid var(--ms-line); border-top: 2px solid var(--ms-accent-2); border-radius: var(--ms-radius); } .er-ms-urmeaza-zi { font-family: var(--ms-font-cifre); font-size: 1.05rem; font-weight: 700; line-height: 1; color: var(--ms-accent); } .er-ms-urmeaza-luna { font-family: var(--ms-font-cifre); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-ink-soft); } .er-ms-urmeaza-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .er-ms-urmeaza-nume { font-family: var(--ms-font-text); font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-ink); } .er-ms-urmeaza-loc { font-family: var(--ms-font-text); font-size: 0.75rem; color: var(--ms-ink-soft); } /* Telefoanele pe departamente. */ .er-ms-contact-dep { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--ms-line); } .er-ms-contact-dep-titlu { margin: 0 0 4px; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-ink-soft); } .er-ms-contact-dep-intro { margin: 0 0 12px; font-family: var(--ms-font-text); font-size: 0.8rem; color: var(--ms-ink-soft); } .er-ms-contact-dep-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } /* Fiecare departament e un bloc, nu un rand: numele, telefonul, mailul si programul stau unul sub altul, ca sa se citeasca si pe telefon. */ .er-ms-contact-dep-rand { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid var(--ms-accent-2); } .er-ms-contact-dep-nume { font-family: var(--ms-font-text); font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-ink); } .er-ms-contact-dep-tel, .er-ms-contact-dep-mail { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ms-font-text); font-size: 0.82rem; color: var(--ms-accent); width: fit-content; } .er-ms-contact-dep-tel .material-icons { font-size: 14px !important; } .er-ms-contact-dep-program { font-family: var(--ms-font-text); font-size: 0.76rem; color: var(--ms-ink-soft); } /* Harta interactiva din pagina de contact. Raport 4:3 prin aspect-ratio, nu inaltime fixa: pe telefon o harta de 400px inalta mananca tot ecranul, iar pe desktop una de 200px nu arata nimic. */ .er-ms-contact-harta { margin: 14px 0 8px; aspect-ratio: 4 / 3; max-height: 320px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden; background: var(--ms-paper); } .er-ms-contact-harta iframe { display: block; width: 100%; height: 100%; border: 0; } .er-ms-contact-harta-mare { display: inline-block; margin-bottom: 12px; font-family: var(--ms-font-text); font-size: 0.78rem; color: var(--ms-ink-soft); } .er-ms-contact-harta-mare:hover { color: var(--ms-accent); } /* Piciorul avizierului: ieșirile spre paginile intregi. */ .er-ms-avizier-picior { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ms-line); } .er-ms-avizier-picior .material-icons { font-size: 16px !important; } /* Pictograma cardului. Scoala o putea alege din panou si nu se randa nicaieri. Sta peste numar, nu langa el: numarul spune al catelea e cardul, pictograma spune despre ce e. Doua reperuri pe acelasi rand s-ar fi batut intre ele. */ .er-ms-scurtatura-pictograma { display: block; font-size: 26px !important; line-height: 1; margin-bottom: 10px; color: var(--ms-accent-2); transition: color 0.2s ease, transform 0.2s ease; } .er-ms-scurtatura:hover .er-ms-scurtatura-pictograma { color: var(--ms-accent); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .er-ms-scurtatura:hover .er-ms-scurtatura-pictograma { transform: none; } } .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 20px; 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: 1fr; gap: 40px; align-items: start; } /* ---------- noutăți ---------- */ .er-ms-vesti { display: grid; grid-template-columns: 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. */ /* Cardul lat, si cel rămas singur pe ultimul rand. Al doilea se intindea pe amandoua coloanele, dar pastra asezarea de card INGUST: banda de imagine ieșea pe toata latimea, un dreptunghi de 4,7:1, langa un card lat care are imaginea in stanga. Acum impart aceeasi asezare, deci un rand cu un singur card arata ca primul. */ .er-ms-vest-larg, .er-ms-vesti > .er-ms-vest:last-child:nth-child(even), .er-ms-vesti > .er-ms-vest:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; } .er-ms-vest-imagine { width: 100%; height: 152px; object-fit: cover; } .er-ms-vest-larg .er-ms-vest-imagine, .er-ms-vesti > .er-ms-vest:last-child:nth-child(even) .er-ms-vest-imagine, .er-ms-vesti > .er-ms-vest:only-child .er-ms-vest-imagine { height: 200px; 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: none; border-top: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); } .er-ms-cifra:first-child { border-left: none; border-top: 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: 1fr; gap: 24px; 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: 1fr; gap: 40px; 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(2, 1fr); grid-auto-rows: 140px; 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 1; } .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 20px; } .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 20px 42px; display: grid; /* PATRU coloane: contact, utile, legal, social. Legalul si socialul erau in aceeasi coloana, iar specificatia le cere despartite. Golul e mai mic decat inainte fiindca acum sunt patru, nu trei. */ grid-template-columns: 1fr; gap: 30px; border-bottom: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 30%, transparent); } /* Sigla din prima coloana a subsolului, langa denumire. */ .er-ms-subsol-marca { display: flex; align-items: center; gap: 10px; } .er-ms-subsol-marca h4 { margin: 0; } .er-ms-subsol-logo, .er-ms-subsol-monograma { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--ms-radius); } .er-ms-subsol-logo { object-fit: contain; background: var(--ms-surface); padding: 2px; } /* Monograma din subsol sta pe fundal inchis, deci se inverseaza fata de cea din antet: litere in culoarea accentului pe patrat deschis. Pe fundalul inchis al subsolului, un patrat de aceeasi culoare cu fundalul ar fi fost invizibil. */ .er-ms-subsol-monograma { display: flex; align-items: center; justify-content: center; background: var(--er-text-on-dark); color: var(--ms-accent); font-family: var(--ms-font-titlu, inherit); font-size: 14px; font-weight: 700; letter-spacing: 0.4px; user-select: none; } .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 20px 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; flex-direction: column; } .er-ms-subsol-jos a { color: var(--ms-accent-2-light); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================================ 18. ECRANE MICI ============================================================================ */ /* ============================================================ 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); } /* ATENȚIE la display-ul de aici, e chiar capcana în care a căzut meniul. Un
închis își ascunde conținutul prin foaia de stil a browserului. Un „display" pus de autor pe un copil direct BATE ascunderea aceea — așa că, scris necondiționat, display:flex făcea toate cele patru panouri vizibile permanent, absolute, unul peste altul. Măsurat pe pagina unei grădinițe: toate cu open=false, la x=504, 641, 767, 905, lățime 230 — adică suprapunere de ~93px, iar etichetele („Profiluri și spec…", „Cluburi și activită…") păreau tăiate, deși erau doar acoperite de panoul următor. De aceea: ascuns implicit, și desfăcut NUMAI pe [open]. Nu se pune „display" fără condiție pe un copil de
. */ .er-ms-nav-panou { position: static; top: 100%; left: 0; z-index: 40; min-width: 0; display: none; flex-direction: column; padding: 6px; background: transparent; border-right: none; border-bottom: none; border-left: 2px solid var(--ms-accent-2); border-top: none; box-shadow: none; } /* Perechea lui display:none de mai sus. Fara ea, meniul nu s-ar deschide deloc. */ .er-ms-nav-grup[open] > .er-ms-nav-panou { display: flex; } .er-ms-nav-panou a { padding: 9px 12px; font-family: var(--ms-font-text); font-size: var(--ms-text-sm); color: var(--ms-accent-2-light); border-left: 2px solid transparent; } .er-ms-nav-panou a:hover { background: transparent; border-left-color: var(--ms-accent-2); color: var(--ms-surface); } .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: 30px 0 24px; 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-md); 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-base); 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: 1fr; gap: 20px; } .er-ms-grila-larga { grid-template-columns: 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. */ /* Cadrul de derulare al tabelelor. Specificatia cere ca tabelele administrative — orarul si mediile — sa nu ceara „scroll orizontal infinit”. Un orar E o grila cu doua dimensiuni: stivuit pe cartonase isi pierde chiar sensul, fiindca relatia ora × zi dispare. Deci nu se desface tabelul; se face derularea suportabila. Ce lipsea si s-a adaugat: COLOANA FIXA. Fara ea, derulat spre dreapta pe telefon, omul vedea patru celule fara sa mai stie la ce ora se uita. Cu prima coloana lipita, ora rămâne la vedere tot timpul. scroll-snap pe coloane: derularea se opreste pe zi intreaga, nu la jumatate de celula. overscroll-behavior-inline: contain opreste derularea tabelului sa tragă pagina cu ea la capat. */ .er-ms-tabel-cadru { overflow-x: auto; border-radius: var(--ms-radius); overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; /* Umbra care spune ca mai e continut in dreapta. Se vede doar cand chiar se poate derula, fiindca e prinsa de fundal, nu desenata peste. */ background: linear-gradient(to right, var(--ms-surface) 30%, transparent), linear-gradient(to left, var(--ms-surface) 30%, transparent), linear-gradient(to right, rgba(0,0,0,.09), transparent 12px), linear-gradient(to left, rgba(0,0,0,.09), transparent 12px); background-repeat: no-repeat; background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%; background-position: left center, right center, left center, right center; background-attachment: local, local, scroll, scroll; } /* Prima coloana lipita, pe ecranele unde tabelul chiar nu incape. Peste 760px tabelele intra intregi, si o coloana lipita ar fi doar o umbra in plus. */ .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-sm); 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 ============================================================ */ /* Selectoare care inainte trăiau numai in blocul max-width. In mobile-first locul lor e aici, in baza: asa arata ecranul mic. Ce urmeaza dupa praguri le anuleaza. */ .er-ms-hero-actiuni .er-ms-btn { flex: 1 1 100%; justify-content: center; } .er-ms-tabel-cadru .er-ms-tabel th[scope="row"]:first-child { position: sticky; left: 0; z-index: 2; background: var(--ms-surface); box-shadow: 1px 0 0 var(--ms-line); } .er-ms-tabel-cadru .er-ms-tabel thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--ms-surface); box-shadow: 1px 0 0 var(--ms-line); } .er-ms-tabel-cadru .er-ms-tabel thead th { scroll-snap-align: start; } /* ============================================================ PRAGURILE, MOBILE-FIRST Tot ce e mai sus e pentru ECRAN MIC. De aici in jos se adauga, pe masura ce ecranul creste. Inainte era invers — baza era desktop si se stramta in jos cu max-width — iar specificatia cere anume mobile-first. Pragurile sunt scrise cu .02px, nu cu numar intreg plus unu: intre max-width: 760px si min-width: 761px rămâne o fereastra de latimi fractionare (760,5px la zoom, sau pe unele ecrane) in care nu s-ar aplica niciuna. Trecerea nu a fost facuta pe ochi: pentru fiecare selector si proprietate s-a calculat ce valoare avea pe fiecare banda de latime inainte, si s-a scris CSS care da exact aceeasi secventa. Deci nu se schimba nimic la nicio latime. ============================================================ */ @media (min-width: 760.02px) { .er-ms-tabel-cadru .er-ms-tabel th[scope="row"]:first-child { position: revert; left: revert; z-index: revert; background: revert; box-shadow: revert; } .er-ms-tabel-cadru .er-ms-tabel thead th:first-child { position: revert; left: revert; z-index: revert; background: var(--ms-accent); box-shadow: revert; } .er-ms-tabel-cadru .er-ms-tabel thead th { scroll-snap-align: revert; } } @media (min-width: 768.02px) { .er-ms-body [id] { scroll-margin-top: 94px; } .er-ms-lat { padding-right: 28px; padding-left: 28px; } .er-ms-a11y-inner { padding-right: 28px; padding-left: 28px; } .er-ms-antet { position: sticky; } .er-ms-antet-inner { padding: 0 28px; gap: var(--er-space-lg); align-items: center; flex-direction: revert; } /* De aici încolo meniul redevine RÂND: încape pe lățime, iar antetul e lipit sus, deci o coloană l-ar fi umflat peste conținut la fiecare derulare. */ .er-ms-nav { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 28px; } /* PANOURILE DEVIN PLUTITOARE ODATĂ CU RÂNDUL, și asta e legătura care lipsea. Regulile astea stăteau la pragul de 900px. Între 768 și 900 meniul era deja rând, dar panoul rămânea în firul lui: se deschidea înăuntrul rândului și îl umfla, împingând celelalte legături — aceeași stricăciune ca pe telefon, doar pe o bandă mai îngustă de lățimi, unde se vedea mai rar. Regula, scrisă o dată: panou în firul paginii cât timp meniul e coloană, panou plutitor de îndată ce meniul e rând. Un singur prag pentru amândouă. Culorile se schimbă odată cu poziția: în firul meniului panoul stă pe bleumarinul antetului și are litere deschise; plutitor, stă pe fundal propriu și are litere închise. */ .er-ms-nav-panou { position: absolute; min-width: 230px; background: var(--ms-surface); border-top: 2px solid var(--ms-accent-2); border-right: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); border-left-width: 1px; border-left-color: var(--ms-line); box-shadow: var(--er-shadow-lg); } .er-ms-nav-panou a { color: var(--ms-ink); } .er-ms-nav-panou a:hover { background: var(--ms-paper); color: var(--ms-accent); } .er-ms-hero-inner { padding: 62px 28px 96px; } .er-ms-scurtaturi-grila { margin-top: -58px; box-shadow: var(--er-shadow-xl); } .er-ms-scurtatura { border-right: 1px solid var(--ms-line); border-bottom: revert; } .er-ms-ancore-inner { padding-right: 28px; padding-left: 28px; } .er-ms-cifra { border-top: revert; border-left: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent); } .er-ms-cifra:first-child { border-top: revert; } .er-ms-mozaic { grid-auto-rows: 158px; } .er-ms-mozaic-item:first-child { grid-row: span 2; } .er-ms-articol-cap-inner { padding-right: 28px; padding-left: 28px; } .er-ms-articol-corp-inner { padding-right: 28px; padding-left: 28px; } .er-ms-subsol-inner { padding-right: 28px; padding-left: 28px; } .er-ms-subsol-jos { padding-right: 28px; padding-left: 28px; flex-direction: revert; } .er-ms-hero-actiuni .er-ms-btn { flex: revert; justify-content: revert; } } @media (min-width: 900.02px) { /* Regulile pentru „er-ms-nav-panou" stăteau aici. Au COBORÂT la pragul de 768px, acolo unde meniul redevine rând: panoul trebuie să devină plutitor în aceeași clipă în care meniul se așază pe orizontală, altfel se deschide înăuntrul rândului și îl umflă. Lăsate aici, banda 768–900 rămânea stricată. Vezi nota de acolo. */ .er-ms-pagina-cap { padding-top: 44px; padding-bottom: 32px; } .er-ms-pagina-titlu { font-size: var(--ms-titlu-lg); } .er-ms-pagina-descriere { font-size: var(--ms-text-lg); } .er-ms-grila { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .er-ms-grila-larga { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } .er-ms-grup-titlu { font-size: var(--ms-titlu-md); } } @media (min-width: 992.02px) { .er-ms-sectiune { padding-top: 88px; padding-bottom: 88px; } .er-ms-avizier-strat { gap: 48px; grid-template-columns: 2fr 1fr; } .er-ms-vesti { grid-template-columns: 1fr 1fr; } /* Paritatea de mai jos e explicata o data, aici; regula care da asezarea sta sus, langa cardul lat. Ultimul card rămas singur pe rând se întinde pe amândouă coloanele, ca să nu rămână o jumătate de rând goală lângă el. Paritatea spune totul, fiindcă primul card ocupă un rând întreg (grid-column: 1 / -1 mai jos): al doilea și al treilea umplu rândul următor, al patrulea începe unul nou și rămâne fără pereche. Deci un ultim card pe poziție PARĂ e exact cazul cu gaură, iar pe poziție impară nu e — la trei articole rândul e plin și regula nu se aprinde. Specificația cere „3-4 articole" în coloana asta. Fără regula de aici ar fi trebuit ales trei, ca rândurile să iasă întregi; cu ea se pot ține patru, adică tot ce permite textul, fără gol în pagină. */ .er-ms-vesti > .er-ms-vest:last-child:nth-child(even), .er-ms-vesti > .er-ms-vest:only-child { grid-column: 1 / -1; } .er-ms-vest-larg, .er-ms-vesti > .er-ms-vest:last-child:nth-child(even), .er-ms-vesti > .er-ms-vest:only-child { grid-template-columns: 240px 1fr; } .er-ms-vest-larg .er-ms-vest-imagine, .er-ms-vesti > .er-ms-vest:last-child:nth-child(even) .er-ms-vest-imagine, .er-ms-vesti > .er-ms-vest:only-child .er-ms-vest-imagine { height: 100%; } .er-ms-director { gap: 34px; grid-template-columns: 150px 1fr; } .er-ms-despre-strat { gap: 56px; grid-template-columns: 1.4fr 1fr; } .er-ms-mozaic { grid-template-columns: repeat(4, 1fr); } .er-ms-subsol-inner { gap: 36px; grid-template-columns: 1.6fr 1fr 1fr 1fr; } } /* ============================================================================ TRIMITERI ÎNRUDITE — rândul de la coada unei pagini. Cardurile de profil din prima pagină promit câte trei destinații, dar un card are o singură adresă. Pagina în care se ajunge duce traseul mai departe, o dată, la coadă: elevul care a citit orarul află de aici că există consiliul elevilor și cluburile, iar părintele ajuns la contact află de burse. Fără media query: rândul se rupe singur pe telefon, prin flex-wrap. ============================================================================ */ .er-ms-vezi-si { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--ms-line); } .er-ms-vezi-si-eticheta { font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-ink-soft); } .er-ms-vezi-si a { color: var(--ms-accent-dark); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ============================================================================ TABELE CARE SE DESFAC PE TELEFON — „er-ms-tabel-stiva" Capitolul IV al specificatiei cere ca orarele si mediile sa se redimensioneze, nu sa se tragă lateral. Masurat inainte: orarul cerea 681px oricat de strans era cadrul, iar ecranul unui telefon da vreo 330px de conținut. Sase coloane cu nume de discipline nu incap, si nicio micsorare de font nu le face sa incapa. Deci pe ecran ingust randul devine cartela: capul de rand (ora, specializarea) e titlul, iar fiecare celula isi scrie eticheta coloanei inaintea valorii. Eticheta vine din atributul data-coloana, pus in vedere — nu din CSS, ca sa fie tradusa din resursa, ca tot restul. CLASA E DE ALEGERE, nu pusa pe „.er-ms-tabel" in general: tabelele cu doua-trei coloane scurte incap si asa, iar desfacute ar fi ocupat de trei ori mai mult loc degeaba. Semantica rămâne: display se schimba, marcajul nu. nu se ascunde cu „display: none" — ar fi scos capetele si din citirea cu voce — ci se scoate din vazut, ca sa rămână legatura th/td pentru cititoarele de ecran. ============================================================================ */ .er-ms-tabel-stiva, .er-ms-tabel-stiva tbody, .er-ms-tabel-stiva tr, .er-ms-tabel-stiva th, .er-ms-tabel-stiva td { display: block; width: auto; } .er-ms-tabel-stiva thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .er-ms-tabel-stiva tr { border-bottom: 1px solid var(--ms-line); padding: 4px 0 10px; } .er-ms-tabel-stiva tbody tr:last-child { border-bottom: 0; } /* Capul de rand — ora, ori numele specializarii — e titlul cartelei. */ .er-ms-tabel-stiva th[scope="row"] { padding: 10px 14px 6px; font-family: var(--ms-font-titlu); font-size: var(--ms-text-md); text-align: left; } .er-ms-tabel-stiva td { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 5px 14px; border: 0; } /* Eticheta coloanei, inaintea valorii. Fara data-coloana nu se scrie nimic, deci o celula nemarcata arata doar valoarea — degradare linistita. */ .er-ms-tabel-stiva td[data-coloana]::before { content: attr(data-coloana); flex: 0 0 auto; font-family: var(--ms-font-cifre); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-ink-soft); } /* Celula libera din orar: liniuta se aliniaza la dreapta, ca valorile. */ .er-ms-tabel-stiva td.er-ms-aoc-orar-liber { justify-content: space-between; } @media (min-width: 760.02px) { /* De aici incolo e tabel adevarat, cu capete la vedere. */ .er-ms-tabel-stiva { display: table; width: 100%; } .er-ms-tabel-stiva tbody { display: table-row-group; } .er-ms-tabel-stiva tr { display: table-row; border-bottom: 0; padding: 0; } .er-ms-tabel-stiva th, .er-ms-tabel-stiva td { display: table-cell; } .er-ms-tabel-stiva thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: table-header-group; } .er-ms-tabel-stiva td[data-coloana]::before { content: none; } }