/* * De Obște — main.css (unic, servit de fiecare serviciu la GET /assets/main.css) * =========================================================================== * Sistem vizual propriu, scris DE LA ZERO pe valorile de token-uri distilate * din „Unitar Design System" (RM) — vezi docs/design/design-referinta.md și * ADR-0007. NU conține cod copiat din sursă (sursa nu are licență); doar * valori factuale (hex, px). * * DIRECȚIA VIZUALĂ (decizie founder): „Instituțional modern 2026" — * docs/design/propuneri/01-institutional-modern.html. Evoluția rafinată a * sistemului Unitar: light, aerisit, încredere; accentul albastru folosit * chirurgical (fir pe carduri, trama de puncte în hero), identificatori * tehnici în mono (împrumut aprobat din direcția 3). * * FONT: system font stack (fără fonturi externe la runtime — CSP `self`). * Fontul de referință al sursei este „Onest" (publicat pe Google Fonts sub * SIL OFL 1.1). Poate fi self-hostat ulterior ca WOFF2 DIN SURSA OFICIALĂ * (fonts.google.com/specimen/Onest / github.com/googlefonts — cu OFL.txt), * NU din copia design/egov-moldova-design-system (acolo lipsește licența). * La adoptare: preload în , font-display: swap, greutăți 400/500/600. * * Greutăți tipografice: mapare STANDARD 400/500/600 (sursa mapează atipic * Medium→600, Bold→700 în @font-face — noi nu preluăm maparea aceea). * * Versionare: link-urile din template-uri folosesc ?v=YYYYMMDD. * Mobile-first: stiluri de bază pentru 320px, ajustări cu min-width. * * LAYOUT (paritate cu preview-ul aprobat 01-institutional-modern.html): * cadru/shell (antet, main, subsol) ... 1100px (--latime-continut) * coloană de lectură (proză) .......... 544px ≈ 65ch (--latime-proza) * coloană de formular ................. 640px (--latime-formular) * componente largi (tabele, grila .lista-persoane, .componente) → tot cadrul. * * CONTRAST (WCAG AA, calculat — nu estimat) pe perechile folosite: * text #121212 pe alb #ffffff ................. 18.73:1 AA/AAA * text #121212 pe canvas #FBFBFC .............. 18.11:1 AA/AAA * secundar #383838 pe alb ..................... 11.73:1 AA/AAA * secundar #383838 pe canvas .................. 11.34:1 AA/AAA * estompat #616161 pe alb ..................... 6.19:1 AA (înlocuiește * #757575, care pe canvas ar fi doar 4.46:1 — sub prag; corecția din * propunerea 01: textul auxiliar folosește gray-500) * estompat #616161 pe canvas / #F5F5F5 ........ 5.99:1 / 5.68:1 AA * link #0058D2 pe alb / canvas ................ 6.31:1 / 6.10:1 AA * link hover #0046A8 pe alb ................... 8.60:1 AA/AAA * supratitlu #0046A8 pe canvas #FBFBFC ........ 8.30:1 AA/AAA * alb pe buton primar #0058D2 ................. 6.31:1 AA * alb pe hover #0046A8 / activ #00357E ........ 8.60:1 / 11.60:1 * alb pe buton pericol #D92D20 ................ 4.83:1 AA * alb pe hover pericol #B32318 ................ 6.62:1 AA * #121212 pe banner context #E8F0FB ........... 16.31:1 AA/AAA * banner demo: #B54708 pe #FEF5DD ............. 4.99:1 AA * banner demo strong: #93370D pe #FEF5DD ...... 6.92:1 AA * badge succes: #027948 pe #E6F5EE ............ 4.87:1 AA * badge eșec: #B32318 pe #FEE4E2 ............ 5.49:1 AA * badge refuz: #93370D pe #FEEFC6 ............ 6.58:1 AA * badge/insignă neutră: #383838 pe #F1F1F1 .... 10.38:1 AA/AAA * insignă rol: #0046A8 pe #E8F0FB ............. 7.49:1 AA/AAA * avatar: #00357E pe #D6E5F8 .................. 9.07:1 AA/AAA * avatar neutru: #383838 pe #F1F1F1 ........... 10.38:1 AA/AAA * mesaj pericol / sumar erori: #B32318 pe #FEEFEE 5.93:1 AA * focus ring #0058D2 pe alb / canvas .......... 6.31:1 / 6.10:1 (≥3:1) * bordură input #757575 pe alb ................ 4.61:1 (≥3:1 non-text) * borduri semantice pe alb: #DC6803 3.49:1, #D92D20 4.83:1, #027948 5.48:1 * trama de puncte din hero (#D6E5F8) e DECORATIVĂ — fără cerință de contrast. */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { /* -- Paletă (valori din distilat; treapta 600 = implicită) -- */ --black: #121212; --white: #ffffff; --gray-100: #f5f5f5; --gray-200: #f1f1f1; --gray-250: #d9d9d9; --gray-300: #b2b2b2; --gray-400: #757575; --gray-500: #616161; --gray-600: #444444; --gray-700: #383838; --gray-900: #1e1e1e; --blue-100: #e8f0fb; --blue-150: #d6e5f8; --blue-200: #ccdef6; --blue-300: #99bced; --blue-600: #0058d2; --blue-700: #0046a8; --blue-800: #00357e; --green-50: #ebf7f1; --green-100: #e6f5ee; --green-200: #cdeadd; --green-600: #039855; --green-700: #027948; --green-800: #05603a; --apricot-50: #fef5dd; --apricot-100: #feefc6; --apricot-200: #fedf89; --apricot-300: #fec84b; --apricot-600: #dc6803; --apricot-700: #b54708; --apricot-800: #93370d; --red-50: #feefee; --red-100: #fee4e2; --red-200: #fecdc9; --red-600: #d92d20; --red-700: #b32318; --red-800: #912018; /* -- Suprafețe & linii (propunerea 01) -- */ --canvas: #fbfbfc; --hairline: #e7e7ea; /* -- Token-uri semantice -- */ --color-text: var(--black); --color-text-secondary: var(--gray-700); /* Estompat: gray-500 (NU gray-400 — 4.46:1 pe canvas, sub pragul AA). */ --color-text-muted: var(--gray-500); --color-text-inverse: var(--white); --color-bg-page: var(--canvas); --color-surface: var(--white); --color-surface-raised: var(--gray-100); --color-brand: var(--blue-600); --color-brand-hover: var(--blue-700); --color-brand-active: var(--blue-800); --color-brand-subtle: var(--blue-100); --color-link: var(--blue-600); --color-link-hover: var(--blue-700); --color-border: var(--gray-250); --color-border-hairline: var(--hairline); --color-border-strong: var(--gray-400); --color-border-input: var(--gray-400); /* Focus ring: sursa referă `--color-focus` NEDEFINIT (bug documentat în design-referinta.md §9) — aici e definit EXPLICIT. 6.31:1 pe alb (≥3:1). */ --color-focus: var(--blue-600); --focus-ring: 0 0 0 3px var(--blue-200); --color-succes: var(--green-700); --color-succes-bg: var(--green-100); --color-succes-border: var(--green-700); --color-avertisment: var(--apricot-700); --color-avertisment-bg: var(--apricot-50); --color-avertisment-border: var(--apricot-600); --color-pericol: var(--red-700); --color-pericol-bg: var(--red-50); --color-pericol-border: var(--red-600); --color-info-bg: var(--blue-100); --color-info-border: var(--blue-600); /* -- Tipografie: system stack (vezi nota de licență din antet) -- */ --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* -- Spacing (scara din distilat, px → rem) -- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ /* -- Radii / borduri / elevation (trepte Unitar 100–400) -- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; --elevation-100: 0 0 0.5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15); --elevation-200: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08); --elevation-300: 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08), 0 5px 12px rgba(0, 0, 0, 0.08); --elevation-400: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08); /* -- Mișcare (propunerea 01: 0.2s, curbă standard) -- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.2s; --transition-fast: var(--dur) var(--ease); /* -- Layout: cadru larg (shell) + coloane interne de lectură/formular. Cadrul se lărgește la 1100px pe TOATE paginile (paritate cu preview-ul aprobat 01-institutional-modern.html). Interior: proza rămâne la o măsură de lectură (~65ch), formularele la ~640px, iar componentele largi (tabele, grile de carduri) folosesc tot cadrul. -- */ --latime-continut: 68.75rem; /* 1100px — cadru/shell (antet, main, subsol) */ --latime-proza: 34rem; /* 544px ≈ 65ch — coloană de lectură */ --latime-formular: 40rem; /* 640px — coloană de formular */ /* -- Ținte tactile -- */ --tinta-tactila: 44px; } /* ========================================================================== 2. Reset + bază ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-base); font-size: 1rem; line-height: 1.5; color: var(--color-text); background: var(--color-bg-page); min-height: 100vh; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } /* Focus vizibil pe ORICE element interactiv: 2px + offset (WCAG 2.4.7). */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } ::selection { background: var(--blue-150); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================================== 3. Tipografie ========================================================================== */ /* Scara fluidă din propunerea 01: clamp + tracking negativ pe display. */ h1 { font-size: clamp(1.5rem, 5vw, 2rem); /* 24 → 32px */ font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: var(--sp-6) 0 var(--sp-3); text-wrap: balance; } h2 { font-size: clamp(1.1875rem, 3.5vw, 1.375rem); /* 19 → 22px */ font-weight: 650; line-height: 1.3; letter-spacing: -0.015em; margin: var(--sp-6) 0 var(--sp-2); } h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; margin: 0 0 var(--sp-1); } p { margin: 0 0 var(--sp-3); } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--color-link-hover); } .muted { color: var(--color-text-muted); font-size: 0.875rem; } code { font-family: var(--font-mono); font-size: 0.875em; background: var(--gray-200); border-radius: var(--radius-sm); padding: 0.0625rem 0.25rem; overflow-wrap: anywhere; } /* Identificatori tehnici (hash-uri, ID-uri de corelare, username-uri, timestamp-uri) — împrumut aprobat din propunerea 03. */ .mono { font-family: var(--font-mono); font-size: 0.875em; letter-spacing: -0.01em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* ========================================================================== 4. Structura paginii: antet, conținut, subsol ========================================================================== */ header, footer { width: 100%; } main { max-width: var(--latime-continut); margin: 0 auto; padding: 0 var(--sp-4) var(--sp-6); } /* Coloană de lectură: chiar dacă cadrul e lat (1100px), proza (titluri, paragrafe, liste-text) se limitează la o măsură confortabilă — nu se întinde pe tot cadrul. Componentele „largi" ies din limită mai jos. `:where()` are specificitate 0, deci orice clasă de componentă o depășește. */ main :where(h1, h2, h3, h4, p, ul, ol, dl, blockquote) { max-width: var(--latime-proza); } /* Formularele: coloană proprie (~640px). Input-urile umplu 100% din ea, deci nu se lățesc pe tot cadrul (un input de 1100px e UX prost). */ main form { max-width: var(--latime-formular); } /* Grila de carduri de persoană folosește TOT cadrul (iese din coloana de lectură) — 2 coloane la lățimea nouă. Tabelele (.tabel-scroll/table) și grila de componente sunt deja elemente ne-vizate de regula de proză. */ main .lista-persoane { max-width: none; } /* Bara de marcă — pattern-ul de pre-header instituțional, cu identitatea proprie De Obște (fără heraldică de stat, fără tricolor). Sticky, ca în propunerea 01. */ .antet-bara { background: var(--color-surface); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 20; } .antet-inner { max-width: var(--latime-continut); margin: 0 auto; padding: var(--sp-2) var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .marca { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--color-text); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; min-height: var(--tinta-tactila); } .marca:hover { color: var(--color-brand-hover); } /* Simbolul: cerc de noduri legate (comunitate) — SVG inline, decorativ. */ .marca-simbol { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-brand); } /* Pastila mono cu domeniul serviciului (propunerea 01). */ .antet-serviciu { font-size: 0.8125rem; color: var(--color-text-secondary); /* #383838 pe #F5F5F5 = 10.76:1 */ font-family: var(--font-mono); background: var(--gray-100); border: 1px solid var(--hairline); border-radius: var(--radius-full); padding: 0.25rem 0.75rem; white-space: nowrap; } /* Benzile de sub bara de marcă (demo + context) stau în lățimea conținutului. */ .antet-benzi { max-width: var(--latime-continut); margin: 0 auto; padding: 0 var(--sp-4); } footer { margin-top: var(--sp-10); } .subsol-inner { max-width: var(--latime-continut); margin: 0 auto; padding: 0 var(--sp-4) var(--sp-6); } .subsol-inner p { border-top: 1px solid var(--hairline); padding-top: var(--sp-3); margin: 0; } /* ========================================================================== 5. Hero de landing (trama de puncte — ecou al simbolului din logo) ========================================================================== */ /* Secțiunea-erou a landing-urilor. Trama e DECORATIVĂ (sub pragul de contrast intenționat) și mascată spre colțul din dreapta-sus. */ .erou { position: relative; padding: var(--sp-8) 0 var(--sp-6); } .erou::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle, var(--blue-150) 1.5px, transparent 1.5px ); background-size: 26px 26px; -webkit-mask-image: radial-gradient( 120% 90% at 85% 0%, rgba(0, 0, 0, 0.8), transparent 60% ); mask-image: radial-gradient( 120% 90% at 85% 0%, rgba(0, 0, 0, 0.8), transparent 60% ); pointer-events: none; } .erou > * { position: relative; } .erou h1 { font-size: clamp(2rem, 7vw, 2.75rem); /* 32 → 44px */ line-height: 1.12; letter-spacing: -0.025em; margin-top: 0; } .erou .conducere { font-size: clamp(1.0625rem, 2.4vw, 1.1875rem); line-height: 1.55; } @media (min-width: 768px) { .erou { padding: var(--sp-12) 0 var(--sp-8); } } /* Paragraf de deschidere (lead) sub h1 — puțin mai mare, ton secundar. */ .conducere { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: var(--latime-formular); } /* Supratitlu (eyebrow) deasupra h1: majuscule discrete + fir albastru scurt. #0046A8 pe canvas #FBFBFC = 8.30:1 — AA/AAA. */ .supratitlu { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-700); } .supratitlu::before { content: ""; width: 24px; height: 1px; background: var(--color-brand); } /* Rândul de acțiuni din hero (butoane-ancoră). */ .actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } /* Buton-ancoră (link stilizat ca buton) — pereche cu