@charset "UTF-8";
/* ==========================================================================
PIAȚA STOMATOLOGICĂ — DESIGN TOKENS
--------------------------------------------------------------------------
Documentație: docs/design/DESIGN-SYSTEM.md
Surse: docs/design/spec-*.md (extrase din Figma, fileKey BOoy1mQmve5mQla181AfO6)
Stack: ASP.NET Core MVC 10 — CSS standard, fără SCSS, fără build step.
ORDINEA DE ÎNCĂRCARE — acest fișier se încarcă PRIMUL, înaintea oricărui
alt CSS:
CONVENȚII
--ps-- pentru tokeni
.ps-__-- pentru componente
stările persistente se exprimă prin ARIA ([aria-current], [aria-pressed], …)
MARCAJE
[FIGMA] valoare extrasă direct din design / variabilă publicată
[PROPUS] valoare derivată (stări, breakpoint-uri, modal, alertă) — de validat cu designerul
========================================================================== */
/* ==========================================================================
0. FONTURI
--------------------------------------------------------------------------
Familii folosite:
Open Sans (variabil 300–800) — tot textul, inclusiv titlurile
Material Symbols Outlined — toate iconurile
Acum vin de pe Google Fonts (linkurile din , în layout-uri, înaintea
acestui fișier). Varianta recomandată pentru GDPR / CSP: auto-găzduite în
wwwroot/fonts/ (woff2, subset latin-ext pentru ă â î ș ț), declarate aici cu
@font-face și preîncărcate în :
@font-face {
font-family: 'Open Sans';
src: url('../fonts/open-sans-latin-ext-var.woff2') format('woff2');
font-weight: 300 800; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0100-024F, U+0218-021B, U+2000-206F;
}
@font-face {
font-family: 'Material Symbols Outlined';
src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
font-weight: 100 700; font-style: normal; font-display: block;
}
========================================================================== */
/* ==========================================================================
1. TOKENI
========================================================================== */
:root {
color-scheme: light;
/* ------------------------------------------------------------------
1.1 PALETĂ PRIMITIVĂ — VERDE (brand)
Verdele platformei este #248A53 (HSL 148° 59% 34%); toată scara are
aceeași nuanță, doar mai deschisă sau mai închisă.
------------------------------------------------------------------ */
--ps-c-green-1000: #114A2C; /* link verde apăsat */
--ps-c-green-800: #18623B; /* footer, border CAUTĂ, titluri */
--ps-c-green-700: #1D7245; /* „CAUTĂ”, cifre statistici */
--ps-c-green-600: #207C4B; /* verde link / navbar (5,2:1 pe alb) */
--ps-c-green-550: #21824E; /* Aplică pe card promovat */
--ps-c-green-500: #248A53; /* verdele platformei: butoane, acțiuni */
--ps-c-green-450: #2F9D62; /* CTA hover */
--ps-c-green-400: #39AC6F; /* tab activ */
--ps-c-green-350: #207E4C; /* bandă newsletter */
--ps-c-green-300: #248A53; /* hero / bară de pagină */
--ps-c-green-200: #47B87C; /* track toggle activ */
--ps-c-green-150: #69BF91; /* umbră card anunț */
--ps-c-green-100: #B7E1CB; /* contur (icon bttn) */
--ps-c-green-75: #CDF4DF; /* text soft pe bandă „Portal" */
--ps-c-green-50: #DAF6E7; /* hover */
--ps-c-green-30: #EDFAF3; /* fundal selecție */
--ps-c-green-20: #F5FCF8; /* fundal card statistică */
--ps-c-green-verified: #00A300; /* badge „Verificat”, verde și pe PM [FIGMA] */
--ps-c-green-ink: #123623; /* titlu card promovat */
/* triplete pentru transparențe: rgb(var(--ps-rgb-green-500) / .2) */
--ps-rgb-green-300: 36 138 83;
--ps-rgb-green-500: 36 138 83;
--ps-rgb-green-800: 24 98 59;
--ps-rgb-umbra: 20 20 19; /* umbre și fundaluri de modal, neutre pe ambele platforme */
/* ------------------------------------------------------------------
1.2 PALETĂ PRIMITIVĂ — ALBASTRU / TEAL (secondary)
------------------------------------------------------------------ */
--ps-c-blue-900: #004362; /* nume partener [FIGMA] */
--ps-c-blue-800: #005C84; /* gradient firmă, stânga [FIGMA] */
--ps-c-blue-700: #006787; /* teal ink, „Vezi profil" [FIGMA] */
--ps-c-blue-600: #0086C3; /* link „Vezi toate…" [FIGMA] */
--ps-c-blue-550: #009ED0; /* CTA gradient, stânga [FIGMA] */
--ps-c-blue-500: #00A4EA; /* gradient firmă, dreapta [FIGMA] */
--ps-c-blue-450: #00B5EE; /* Albastru buton mesaj 2 [FIGMA] */
--ps-c-blue-300: #62CCFA; /* CTA gradient, dreapta [FIGMA] */
--ps-c-blue-200: #A4F5F5; /* teal soft, parteneri [FIGMA] */
--ps-c-blue-link: #0094FF; /* link standalone articol [FIGMA] */
--ps-c-facebook: #087AFF; /* buton Facebook [FIGMA] */
/* ------------------------------------------------------------------
1.3 PALETĂ PRIMITIVĂ — ACCENT / FEEDBACK
------------------------------------------------------------------ */
--ps-c-orange-600: #EE9612; /* Rich Orange [FIGMA] */
--ps-c-orange-500: #FF9900; /* PROMOVATE [FIGMA] */
--ps-c-red-600: #D60909; /* Close icon red [FIGMA] */
--ps-c-red-500: #E5484D; /* favorite activ [PROPUS] */
--ps-c-red-400: #D93025; /* eroare de câmp [PROPUS] */
/* ------------------------------------------------------------------
1.4 PALETĂ PRIMITIVĂ — NEUTRE
------------------------------------------------------------------ */
--ps-c-white: #FFFFFF;
--ps-c-grey-75: #FAFAFA; /* navbar, panouri [FIGMA] */
--ps-c-grey-200: #EEEEEE;
--ps-c-grey-300: #DEDEDE; /* track toggle inactiv [FIGMA] */
--ps-c-grey-350: #D9D9D9; /* border carduri [FIGMA] */
--ps-c-grey-500: #949494; /* iconuri în machete [FIGMA] */
--ps-c-grey-550: #6B7280; /* Iconuri (variabilă) [FIGMA] */
--ps-c-grey-650: #63657E; /* text footer [FIGMA] */
--ps-c-grey-675: #A59E9E; /* breadcrumb inactiv [FIGMA] */
--ps-c-grey-750: #515151; /* text UI în machete [FIGMA] */
--ps-c-grey-900: #333333; /* Text black 333 [FIGMA] */
--ps-c-grey-950: #111A11; /* etichete card eveniment [FIGMA] */
--ps-c-black: #000000;
/* alfa derivate din #515151 — folosite masiv în machete */
--ps-c-ink-80: rgba(81, 81, 81, .8);
--ps-c-ink-70: rgba(81, 81, 81, .7);
--ps-c-ink-50: rgba(81, 81, 81, .5);
--ps-c-ink-12: rgba(81, 81, 81, .12);
--ps-c-ink-06: rgba(81, 81, 81, .06);
/* ------------------------------------------------------------------
1.5 CULORI SEMANTICE
------------------------------------------------------------------ */
/* --- primary (verde acțiune) --- */
--ps-primary: var(--ps-c-green-500);
--ps-primary-hover: var(--ps-c-green-450);
--ps-primary-active: var(--ps-c-green-700); /* [PROPUS] */
--ps-primary-disabled: var(--ps-c-green-100); /* [PROPUS] */
--ps-primary-contrast: var(--ps-c-white);
--ps-primary-soft: var(--ps-c-green-30); /* fundal selecție */
--ps-primary-soft-hover: var(--ps-c-green-50); /* fundal hover rânduri */
/* --- verzuri cu rol propriu (NU sunt sinonime — a nu se confunda) --- */
--ps-green-action: var(--ps-c-green-500); /* butoane „Aplică" / „Adaugă" */
--ps-green-ps: var(--ps-c-green-700); /* „CAUTĂ", cifre statistici */
--ps-green-dark: var(--ps-c-green-800); /* footer, titluri de secțiune */
--ps-green-link: var(--ps-c-green-600); /* „Adaugă anunț", breadcrumb */
--ps-green-promo: var(--ps-c-green-550); /* „Aplică" pe card promovat */
--ps-green-hero: var(--ps-c-green-300); /* benzi verzi */
--ps-green-strip: var(--ps-c-green-350); /* bandă newsletter */
--ps-green-tab: var(--ps-c-green-400); /* tab activ */
--ps-green-stroke: var(--ps-c-green-100); /* borduri outline */
--ps-green-surface: var(--ps-c-green-20); /* card statistică */
--ps-green-selection: var(--ps-c-green-30);
--ps-green-on-dark: var(--ps-c-green-75); /* text și accente pe benzile verzi */
/* --- secondary (albastru / teal) --- */
--ps-secondary: var(--ps-c-blue-450);
--ps-secondary-strong: var(--ps-c-blue-600);
--ps-secondary-contrast: var(--ps-c-white);
--ps-teal-ink: var(--ps-c-blue-700);
--ps-teal-name: var(--ps-c-blue-900);
--ps-teal-soft: var(--ps-c-blue-200);
--ps-orange: var(--ps-c-orange-600);
--ps-red: var(--ps-c-red-600);
/* --- text: aproape negru, cald --- */
--ps-text: #1F1E1D; /* text principal */
--ps-text-secondary: #5E5D59;
--ps-text-ui: var(--ps-text-secondary);
--ps-text-strong: #141413; /* titluri */
--ps-text-muted: var(--ps-c-ink-80);
--ps-text-faint: var(--ps-c-ink-70);
--ps-text-disabled: var(--ps-c-ink-50);
--ps-text-footer: var(--ps-c-grey-650);
--ps-text-breadcrumb: var(--ps-c-grey-675);
--ps-text-on-dark: var(--ps-c-grey-75);
--ps-text-inverse: var(--ps-c-white);
/* variante conforme AA — vezi DESIGN-SYSTEM.md §11.3 */
--ps-text-faint-aa: #73726C;
--ps-text-disabled-aa: rgba(81, 81, 81, .75);
/* --- iconuri --- */
--ps-icon: var(--ps-c-grey-550); /* variabilă Figma #6B7280 */
--ps-icon-ui: var(--ps-c-grey-500); /* valoare din machete #949494 */
--ps-icon-nav: var(--ps-c-grey-750);
--ps-icon-ui-aa: #767676; /* variantă conformă AA */
/* --- suprafețe calde --- */
--ps-bg: #FAF9F5;
--ps-bg-warm: #F5F4EE;
--ps-surface: var(--ps-c-white);
--ps-surface-alt: var(--ps-bg);
--ps-surface-muted: #F0EEE6;
--ps-surface-auth: var(--ps-bg);
--ps-surface-tint: color-mix(in srgb, var(--ps-primary) 7%, var(--ps-c-white)); /* tenta platformei */
/* sticlă: navbar, bare plutitoare, panouri peste imagini */
--ps-glass-bg: rgba(250, 249, 245, .78);
--ps-glass-bg-dark: rgb(var(--ps-rgb-umbra) / .42);
--ps-glass-border: rgba(255, 255, 255, .55);
--ps-glass-blur: saturate(1.6) blur(16px);
/* --- borduri / linii: fine, calde --- */
--ps-line: #E8E6DC;
--ps-border: var(--ps-line);
--ps-border-soft: rgba(31, 30, 29, .08);
--ps-border-panel: var(--ps-line);
--ps-border-input: #DAD7CC;
--ps-border-input-hover: #B9C6B9;
--ps-bg-nav-active: rgba(238, 238, 238, .6);
--ps-border-width: 1px;
/* --- feedback --- */
--ps-success: var(--ps-c-green-500);
--ps-success-bg: var(--ps-c-green-30);
--ps-info: var(--ps-c-blue-450);
--ps-info-bg: #E6F8FE; /* [PROPUS] */
--ps-warning: var(--ps-c-orange-600);
--ps-warning-bg: #FDF3E3; /* [PROPUS] */
--ps-danger: var(--ps-c-red-600);
--ps-danger-bg: #FDECEC; /* [PROPUS] */
--ps-danger-field: var(--ps-c-red-400); /* [PROPUS] */
--ps-promoted: var(--ps-c-orange-500);
--ps-favorite: var(--ps-c-red-500); /* [PROPUS] */
/* --- overlay --- */
--ps-overlay-light: rgba(255, 255, 255, .12);
/* --- gradiente --- */
--ps-gradient-logo: linear-gradient(90deg, var(--ps-c-green-800) 0%, var(--ps-c-green-450) 100%);
--ps-gradient-logo-pm: linear-gradient(90deg, #7A9A00 0%, #009CE4 100%); /* inimioara PM */
--ps-gradient-cta: linear-gradient(90deg, var(--ps-c-blue-550) 0%, var(--ps-c-blue-300) 100%);
--ps-gradient-firma: linear-gradient(90deg, var(--ps-c-blue-800) 0%, var(--ps-c-blue-500) 100%);
--ps-gradient-hero-img: linear-gradient(180deg, rgba(217,217,217,.2) 29.5%, rgba(0,72,104,.2) 74%);
/* panourile verzi de sub navbar: culoarea plată, o lumină sus și umbra în colțul opus */
--ps-panou-verde:
radial-gradient(70% 90% at 12% 0%, rgba(255, 255, 255, .22) 0%, transparent 60%),
radial-gradient(60% 80% at 100% 100%, rgb(var(--ps-rgb-umbra) / .28) 0%, transparent 65%),
var(--ps-green-hero);
--ps-gutter-panou: clamp(8px, 1.4vw, 20px); /* marginea laterală a panourilor care plutesc */
/* ------------------------------------------------------------------
1.6 TIPOGRAFIE
------------------------------------------------------------------ */
--ps-font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ps-font-alt: var(--ps-font-sans);
--ps-font-ui: var(--ps-font-sans);
--ps-font-icons: 'Material Symbols Outlined';
--ps-font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
/* greutăți */
--ps-fw-light: 300;
--ps-fw-regular: 400;
--ps-fw-medium: 500;
--ps-fw-semibold: 600;
--ps-fw-bold: 700;
--ps-fw-extrabold: 800;
/* dimensiuni (px — designul e integral în px, nu converti la rem fără recalcul) */
--ps-fs-10: 10px;
--ps-fs-12: 12px;
--ps-fs-13: 13px;
--ps-fs-14: 14px;
--ps-fs-15: 15px;
--ps-fs-16: 16px;
--ps-fs-18: 18px;
--ps-fs-20: 20px;
--ps-fs-22: 22px;
--ps-fs-24: 24px;
--ps-fs-28: 28px;
--ps-fs-30: 30px;
--ps-fs-36: 36px;
--ps-fs-48: 48px;
/* line-height — în Figma este „normal" peste tot (≈ 1.22) */
--ps-lh-flat: 1;
--ps-lh-tight: 1.2;
--ps-lh-normal: 1.22;
--ps-lh-body: 1.45;
--ps-ls-none: 0;
--ps-ls-tight: -.02em;
--ps-ls-title: -.012em; /* titlurile mari */
--ps-ls-caps: .08em;
/* --- tokeni compoziți (font shorthand) — folosire: font: var(--ps-type-body); ---
Titlurile mari sunt serif și fluide (clamp): respiră pe ecrane mari și mici. */
--ps-type-hero: var(--ps-fw-medium) clamp(34px, 2.4vw + 20px, 66px)/1.05 var(--ps-font-sans);
--ps-type-rotator: var(--ps-fw-extrabold) var(--ps-fs-36)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-h1: var(--ps-fw-medium) clamp(28px, 1.1vw + 18px, 40px)/1.12 var(--ps-font-sans);
--ps-type-section: var(--ps-fw-medium) clamp(26px, 1.2vw + 17px, 42px)/1.1 var(--ps-font-sans);
--ps-type-stat: var(--ps-fw-regular) var(--ps-fs-30)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-price: var(--ps-fw-semibold) var(--ps-fs-30)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-section-sm: var(--ps-fw-regular) var(--ps-fs-28)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-h2: var(--ps-fw-semibold) clamp(20px, .4vw + 16px, 26px)/1.2 var(--ps-font-sans);
--ps-type-pagebar: var(--ps-fw-medium) clamp(24px, .8vw + 17px, 34px)/1.15 var(--ps-font-sans);
--ps-type-h3: var(--ps-fw-medium) var(--ps-fs-20)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-card-title: var(--ps-fw-medium) var(--ps-fs-18)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-lead: var(--ps-fw-regular) clamp(16px, .3vw + 14px, 19px)/1.6 var(--ps-font-sans);
--ps-type-nav: var(--ps-fw-medium) var(--ps-fs-16)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-footer-title: var(--ps-fw-medium) var(--ps-fs-16)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-meta: var(--ps-fw-regular) var(--ps-fs-16)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-btn-lg: var(--ps-fw-medium) var(--ps-fs-15)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-body: var(--ps-fw-regular) var(--ps-fs-14)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-body-medium: var(--ps-fw-medium) var(--ps-fs-14)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-label: var(--ps-fw-semibold) var(--ps-fs-14)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-small: var(--ps-fw-regular) var(--ps-fs-13)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-btn: var(--ps-fw-medium) var(--ps-fs-13)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-btn-sm: var(--ps-fw-semibold) var(--ps-fs-12)/var(--ps-lh-tight) var(--ps-font-sans);
--ps-type-caption: var(--ps-fw-regular) var(--ps-fs-12)/var(--ps-lh-normal) var(--ps-font-sans);
--ps-type-micro: var(--ps-fw-medium) var(--ps-fs-10)/14px var(--ps-font-ui);
/* ------------------------------------------------------------------
1.7 SPACING — pas de bază 5px (excepții reale din design: 3, 7, 13)
------------------------------------------------------------------ */
--ps-space-0: 0;
--ps-space-2: 2px;
--ps-space-3: 3px;
--ps-space-5: 5px;
--ps-space-6: 6px;
--ps-space-7: 7px;
--ps-space-10: 10px;
--ps-space-13: 13px;
--ps-space-15: 15px;
--ps-space-20: 20px;
--ps-space-25: 25px;
--ps-space-30: 30px;
--ps-space-37: 37px;
--ps-space-40: 40px;
--ps-space-50: 50px;
--ps-space-60: 60px;
--ps-space-70: 70px;
--ps-space-90: 90px;
--ps-space-185: 185px;
/* aliasuri semantice */
--ps-gap-inline: var(--ps-space-10); /* gap implicit între elemente în linie */
--ps-gap-stack: var(--ps-space-20); /* gap implicit între blocuri verticale */
--ps-pad-card: var(--ps-space-20);
--ps-pad-panel: var(--ps-space-30);
/* ------------------------------------------------------------------
1.8 RADIUS
------------------------------------------------------------------ */
--ps-radius-0: 0;
--ps-radius-2: 2px;
--ps-radius-3: 3px;
--ps-radius-4: 4px; /* variabila Figma „borderRadius" (nefolosită în machete) */
--ps-radius-5: 5px; /* implicit pentru controale */
--ps-radius-8: 8px;
--ps-radius-10: 10px; /* implicit pentru carduri */
--ps-radius-20: 20px;
--ps-radius-60: 60px;
--ps-radius-full: 9999px;
--ps-radius-control: 6px;
--ps-radius-card: 6px;
--ps-radius-panel: 8px;
--ps-radius-pill: var(--ps-radius-full);
/* butoanele nu urmează rotunjirea cardurilor */
--ps-radius-btn: 12px;
--ps-radius-btn-lg: 20px;
/* ------------------------------------------------------------------
1.9 UMBRE / ELEVAȚIE — stratificate, neutre și foarte moi
------------------------------------------------------------------ */
--ps-shadow-xs: 0 1px 2px rgb(var(--ps-rgb-umbra) / .05);
--ps-shadow-card: 0 1px 2px rgb(var(--ps-rgb-umbra) / .04), 0 6px 20px -12px rgb(var(--ps-rgb-umbra) / .10);
--ps-shadow-card-soft: 0 1px 2px rgb(var(--ps-rgb-umbra) / .04), 0 16px 40px -20px rgb(var(--ps-rgb-umbra) / .14);
--ps-shadow-float: 0 2px 6px rgb(var(--ps-rgb-umbra) / .06), 0 24px 48px -24px rgb(var(--ps-rgb-umbra) / .28);
--ps-shadow-photo: 0 2px 6px rgb(var(--ps-rgb-umbra) / .07), 0 18px 40px -18px rgb(var(--ps-rgb-umbra) / .26);
--ps-shadow-navbar: 0 1px 0 rgb(var(--ps-rgb-umbra) / .06);
--ps-shadow-bar: var(--ps-shadow-navbar);
--ps-shadow-hover: 0 2px 6px rgb(var(--ps-rgb-umbra) / .05), 0 24px 48px -24px rgb(var(--ps-rgb-umbra) / .24);
--ps-shadow-cta-hover: 0 10px 24px -8px rgb(var(--ps-rgb-green-500) / .55);
--ps-shadow-promoted: 0 0 0 1.5px rgba(238, 150, 18, .55), 0 14px 34px -14px rgba(238, 150, 18, .45);
--ps-shadow-card-green: 0 0 0 1px rgb(var(--ps-rgb-green-500) / .10), 0 10px 28px -14px rgb(var(--ps-rgb-green-500) / .40);
--ps-shadow-glow: 0 0 0 6px rgb(var(--ps-rgb-green-500) / .12);
--ps-shadow-pill: 0 8px 24px -12px rgb(var(--ps-rgb-umbra) / .22);
--ps-shadow-inset: inset 2px 2px 6px 0 rgba(0,0,0,.25),
inset -2px -2px 6px 0 rgba(0,0,0,.25);
--ps-shadow-filterbar: 0 1px 2px rgba(0,0,0,.25);
--ps-shadow-newsletter: 0 1px 6px 0 rgb(var(--ps-rgb-umbra) / .5),
inset 0 -1px 4px 0 rgba(0,0,0,.25);
--ps-shadow-modal: 0 24px 80px -16px rgb(var(--ps-rgb-umbra) / .32);
/* ------------------------------------------------------------------
1.10 Z-INDEX
------------------------------------------------------------------ */
--ps-z-below: -1;
--ps-z-base: 0;
--ps-z-raised: 10;
--ps-z-sticky: 100; /* navbar, bara de filtre */
--ps-z-floating: 200; /* rail flotant, tab lateral, go-to-top */
--ps-z-dropdown: 300; /* meniu cont, panou notificări, listbox */
--ps-z-overlay: 900;
--ps-z-modal: 1000;
--ps-z-toast: 1100;
--ps-z-tooltip: 1200;
/* ------------------------------------------------------------------
1.11 LAYOUT / CONTAINERE
------------------------------------------------------------------ */
--ps-container: 1460px; /* container general de pagină */
--ps-container-wide: 1470px; /* footer */
--ps-container-md: 1200px; /* cadru central detaliu anunț */
--ps-container-sm: 900px; /* card de articol */
--ps-content-870: 870px; /* coloana de listare (căutare+filtre+listă) */
--ps-content-820: 820px; /* card de căutare Home */
--ps-content-800: 800px; /* conținut card de articol */
--ps-content-340: 340px; /* coloana dreaptă detaliu anunț */
--ps-sidebar: 300px; /* panou de filtre Marketplace */
--ps-gutter: 24px;
--ps-navbar-h: 68px;
--ps-pagebar-h: 70px;
--ps-control-h: 44px; /* input / buton de formular */
--ps-control-h-sm: 40px; /* bare de căutare, selecturi */
--ps-optiune-h: 40px; /* rândul unei liste de opțiuni (dropdown) */
--ps-optiuni-vizibile: 5; /* câte opțiuni se văd fără derulare */
--ps-nav-item-w: 70px;
--ps-nav-item-h: 50px;
--ps-icon-16: 16px;
--ps-icon-20: 20px;
--ps-icon-24: 24px;
--ps-icon-30: 30px;
--ps-icon-36: 36px;
/* ------------------------------------------------------------------
1.12 MIȘCARE — easing de tip arc (linear() mai jos, unde există)
------------------------------------------------------------------ */
--ps-ease: cubic-bezier(.2, .8, .2, 1);
--ps-ease-out: cubic-bezier(.16, 1, .3, 1);
--ps-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
--ps-duration-fast: .14s;
--ps-duration: .2s;
--ps-duration-slow: .32s;
--ps-transition-color: color var(--ps-duration) var(--ps-ease),
background-color var(--ps-duration) var(--ps-ease),
border-color var(--ps-duration) var(--ps-ease);
--ps-transition-shadow: box-shadow var(--ps-duration-slow) var(--ps-ease),
transform var(--ps-duration-slow) var(--ps-ease);
/* inel de focus unificat, cu halou */
--ps-focus-color: var(--ps-green-link);
--ps-focus-width: 2px;
--ps-focus-offset: 3px;
--ps-focus-halo: 0 0 0 4px rgb(var(--ps-rgb-green-500) / .22);
/* ------------------------------------------------------------------
1.13 BREAKPOINTS [PROPUS — nu există în Figma]
------------------------------------------------------------------
ATENȚIE: custom properties NU funcționează în `@media`. Valorile de mai jos
sunt expuse doar pentru citire din JS:
getComputedStyle(document.documentElement).getPropertyValue('--ps-bp-lg')
În CSS, breakpoint-urile se scriu LITERAL:
xs @media (max-width: 575.98px)
sm @media (min-width: 576px)
md @media (min-width: 768px)
lg @media (min-width: 992px)
xl @media (min-width: 1200px)
xxl @media (min-width: 1440px)
Perechile „max-width" folosesc .98px ca să nu se suprapună cu „min-width".
------------------------------------------------------------------ */
--ps-bp-sm: 576px;
--ps-bp-md: 768px;
--ps-bp-lg: 992px;
--ps-bp-xl: 1200px;
--ps-bp-xxl: 1440px;
--ps-bp-design: 1920px;
}
@supports (transition-timing-function: linear(0, 1)) {
:root {
--ps-ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%,
1.067, 1.099 24.3%, 1.106, 1.099 29.1%, 1.017 39.6%, .993 45.4%,
1.001 61.6%, 1);
}
}
/* pe ecrane mici și la atingere, rândurile listelor respectă ținta minimă de 44px (WCAG 2.5.8) */
@media (max-width: 599.98px), (pointer: coarse) {
:root { --ps-optiune-h: 44px; }
}
/* ==========================================================================
2. RESET MINIMAL
--------------------------------------------------------------------------
Înlocuiește bootstrap-reboot. Bootstrap NU trebuie încărcat: designul nu
folosește niciuna dintre componentele lui, iar reboot-ul intră în conflict
cu line-height-ul și marginile de paragraf din machete.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
background: var(--ps-bg);
color: var(--ps-text);
font: var(--ps-type-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 {
font-weight: var(--ps-fw-medium);
line-height: var(--ps-lh-normal);
overflow-wrap: break-word;
}
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:not([class]) { color: var(--ps-green-dark); text-decoration: underline; text-underline-offset: 2px; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea, optgroup {
font: inherit;
color: inherit;
margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
textarea { resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
hr {
border: 0;
border-top: 1px solid var(--ps-border);
margin: 0;
height: 0;
}
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
/* inel de focus unificat — nu elimina `outline` fără înlocuitor */
:focus-visible {
outline: var(--ps-focus-width) solid var(--ps-focus-color);
outline-offset: var(--ps-focus-offset);
}
/* pe suprafețe verzi / albastre, inelul comută pe alb */
.ps-on-brand :focus-visible { outline-color: var(--ps-c-white); }
::selection { background: rgb(var(--ps-rgb-green-500) / .18); color: var(--ps-text); }
:target { scroll-margin-top: calc(var(--ps-navbar-h) + var(--ps-space-20)); }
/* ==========================================================================
3. BAZA TIPOGRAFICĂ
========================================================================== */
.ps-hero-title { font: var(--ps-type-hero); color: var(--ps-text-on-dark); }
.ps-title { font: var(--ps-type-h1); color: var(--ps-text); }
.ps-title-2 { font: var(--ps-type-h2); color: var(--ps-text); }
.ps-title-3 { font: var(--ps-type-h3); color: var(--ps-text); }
.ps-section-title{ font: var(--ps-type-section); color: var(--ps-green-dark); text-align: center; }
.ps-card-title { font: var(--ps-type-card-title); color: var(--ps-text); }
.ps-body { font: var(--ps-type-body); color: var(--ps-text); }
.ps-body-medium { font: var(--ps-type-body-medium); }
.ps-label { font: var(--ps-type-label); }
.ps-small { font: var(--ps-type-small); color: var(--ps-text-ui); }
.ps-caption { font: var(--ps-type-caption); color: var(--ps-text-faint-aa); }
.ps-micro { font: var(--ps-type-micro); }
.ps-text-muted { color: var(--ps-text-muted); }
.ps-text-faint { color: var(--ps-text-faint-aa); }
.ps-text-footer { color: var(--ps-text-footer); }
.ps-text-brand { color: var(--ps-green-dark); }
.ps-text-action { color: var(--ps-green-action); }
.ps-text-danger { color: var(--ps-danger); }
.ps-text-inverse { color: var(--ps-text-inverse); }
.ps-uppercase { text-transform: uppercase; }
.ps-capitalize { text-transform: capitalize; }
.ps-lowercase { text-transform: lowercase; }
.ps-center { text-align: center; }
.ps-right { text-align: right; }
.ps-justify { text-align: justify; hyphens: auto; }
.ps-nowrap { white-space: nowrap; }
/* text cu gradient (nume firmă, wordmark) */
.ps-text-gradient {
background-image: var(--ps-gradient-firma);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
.ps-text-gradient { color: var(--ps-c-blue-500); background-image: none; }
}
/* iconuri Material Symbols */
.material-symbols-outlined,
.ps-icon-glyph {
font-family: var(--ps-font-icons);
font-weight: normal;
font-style: normal;
font-size: var(--ps-icon-24);
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
direction: ltr;
user-select: none;
-webkit-font-feature-settings: 'liga';
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ps-icon-glyph--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ps-icon-glyph--16 { font-size: var(--ps-icon-16); }
.ps-icon-glyph--20 { font-size: var(--ps-icon-20); }
.ps-icon-glyph--24 { font-size: var(--ps-icon-24); }
.ps-icon-glyph--30 { font-size: var(--ps-icon-30); }
.ps-icon-glyph--36 { font-size: var(--ps-icon-36); }
/* ==========================================================================
4. UTILITARE DE BAZĂ
========================================================================== */
/* --- containere -------------------------------------------------------- */
.ps-container {
width: 100%;
max-width: var(--ps-container);
margin-inline: auto;
padding-inline: var(--ps-gutter);
}
.ps-container--wide { max-width: var(--ps-container-wide); }
.ps-container--md { max-width: var(--ps-container-md); }
.ps-container--sm { max-width: var(--ps-container-sm); }
/* coloana de listare de 870px — panou de căutare, bară de filtre, listă de carduri */
.ps-container--lista { max-width: var(--ps-content-870); }
.ps-container--articol{ max-width: var(--ps-content-800); }
/* bandă care iese din container pe toată lățimea ferestrei
(separatorul de footer, divider-ele full-bleed) */
.ps-full-bleed {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* --- primitive de layout ---------------------------------------------- */
.ps-stack { display: flex; flex-direction: column; gap: var(--ps-gap-stack); }
.ps-stack--tight { gap: var(--ps-space-5); }
.ps-stack--loose { gap: var(--ps-space-30); }
.ps-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-gap-inline); }
.ps-cluster--between { justify-content: space-between; }
.ps-cluster--center { justify-content: center; }
.ps-cluster--end { justify-content: flex-end; }
.ps-center-both { display: flex; align-items: center; justify-content: center; }
/* grilă cu 3 zone în care zona centrală rămâne centrată pe viewport
(navbar: zonele laterale au lățimi diferite → NU flex + space-between) */
.ps-tri-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.ps-tri-grid > :first-child { justify-self: start; }
.ps-tri-grid > :last-child { justify-self: end; }
/* --- suprafețe --------------------------------------------------------- */
.ps-surface-card {
background: var(--ps-surface);
border-radius: var(--ps-radius-card);
box-shadow: var(--ps-shadow-card);
}
.ps-surface-outlined {
background: var(--ps-surface);
border: var(--ps-border-width) solid var(--ps-border);
border-radius: var(--ps-radius-card);
}
.ps-elev-hover { transition: var(--ps-transition-shadow); }
.ps-elev-hover:hover { box-shadow: var(--ps-shadow-hover); transform: translateY(-2px); }
/* --- trunchiere -------------------------------------------------------- */
.ps-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.ps-clamp-2,
.ps-clamp-3,
.ps-clamp-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ps-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ps-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } /* descrierea din cardul de anunț */
.ps-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
/* --- accesibilitate ---------------------------------------------------- */
.ps-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.ps-sr-only-focusable:not(:focus):not(:focus-within) {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* link „Sari la conținut" */
.ps-skip-link {
position: absolute;
left: var(--ps-space-10);
top: var(--ps-space-10);
z-index: var(--ps-z-tooltip);
padding: var(--ps-space-10) var(--ps-space-20);
background: var(--ps-surface);
border-radius: var(--ps-radius-5);
box-shadow: var(--ps-shadow-card);
font: var(--ps-type-body-medium);
color: var(--ps-green-dark);
transform: translateY(-200%);
transition: transform var(--ps-duration) var(--ps-ease);
}
.ps-skip-link:focus { transform: translateY(0); }
/* pattern „stretched link": întregul card e clicabil, dar butoanele din interior
rămân acțiuni proprii. NU înfășura butoane într-un . */
.ps-stretch { position: relative; }
.ps-stretch__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ps-stretch__action { position: relative; z-index: 2; }
/* blochează scroll-ul paginii cât timp modalul e deschis */
.ps-no-scroll { overflow: hidden; }
/* --- ajutoare ---------------------------------------------------------- */
.ps-hide { display: none !important; }
@media (max-width: 767.98px) { .ps-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .ps-hide-desktop { display: none !important; } }
/* ==========================================================================
5. MIȘCARE REDUSĂ
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
PIAȚA MEDICALĂ — verdele devine albastrul logo-ului (#009CE4)
--------------------------------------------------------------------------
: aceleași roluri, aceeași luminozitate relativă.
Succesul și badge-ul „Verificat” rămân verzi: sunt stări, nu culoarea mărcii.
========================================================================== */
:root[data-ps-platforma="pm"] {
--ps-c-green-1000: #035C84;
--ps-c-green-800: #0474A8;
--ps-c-green-700: #007AB2;
--ps-c-green-600: #0593D4;
--ps-c-green-550: #05A1E9;
--ps-c-green-500: #009CE4;
--ps-c-green-450: #00A8F5;
--ps-c-green-400: #33B2ED;
--ps-c-green-350: #0A85C2;
--ps-c-green-300: #009CE4;
--ps-c-green-200: #48B4E6;
--ps-c-green-150: #5CBCE9;
--ps-c-green-100: #BBE4F7;
--ps-c-green-75: #CCEEFE;
--ps-c-green-50: #D8F3FF;
--ps-c-green-30: #EEFAFF;
--ps-c-green-20: #F4FCFF;
--ps-c-green-ink: #0B4560;
--ps-rgb-green-300: 0 156 228;
--ps-rgb-green-500: 0 156 228;
--ps-rgb-green-800: 4 116 168;
--ps-success: #22AD01;
--ps-success-bg: #EBFFE6;
}