/* ========================================================================== PEPCheck — sistem de design v2 -------------------------------------------------------------------------- Structura: 1. Tokens sursa unica de adevar pentru culoare/spatiu/tip 2. Punte catre v1 variabilele vechi, remapate pe tokens 3. Baza reset, tipografie, focus, motion 4. Shell sidebar, bara de sus, zona de lucru 5. Componente buton, card, pastila, tabel, formular 6. API-ul vechi de clase .card/.btn/.stat-card/... reimplementate 7. Suprapuneri mesaje, banner cookies, modal inactivitate 8. Responsive & print Sectiunile 2 si 6 sunt puntea care face migrarea incrementala posibila: cele 97 de template-uri existente arata ca v2 fara sa fie atinse. Ambele dispar la final, cand template-urile sunt rescrise pe clasele noi. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { color-scheme: light; /* --- suprafete, reci, cu o urma de albastru --- */ --pc-ground: #F5F6F9; --pc-surface: #FFFFFF; --pc-surface-2: #FAFBFC; --pc-surface-3: #F0F2F6; --pc-line: #E4E7ED; --pc-line-2: #CFD4DE; --pc-ink: #14161B; --pc-ink-2: #565E70; --pc-ink-3: #8A91A1; /* --- accent: doar interactivitate, niciodata decor --- */ --pc-accent: #2E3A8F; --pc-accent-hi: #242E75; --pc-accent-soft: #ECEEF9; --pc-accent-line: #C3C9EC; /* --- semantica de risc: separata de accent, rezervata entitatilor --- */ --pc-crit: #B42318; --pc-crit-soft: #FDECEA; --pc-crit-line: #F0BFB9; --pc-warn: #B54708; --pc-warn-soft: #FDF2E8; --pc-warn-line: #EFCDAD; --pc-ok: #05683F; --pc-ok-soft: #E9F5EF; --pc-ok-line: #B2DBC7; --pc-info: #2E3A8F; --pc-info-soft: #ECEEF9; --pc-info-line: #C3C9EC; --pc-shadow-1: 0 1px 2px rgba(20, 22, 27, .06), 0 1px 1px rgba(20, 22, 27, .04); --pc-shadow-2: 0 4px 16px rgba(20, 22, 27, .08), 0 1px 3px rgba(20, 22, 27, .05); --pc-r-sm: 4px; --pc-r: 6px; --pc-r-lg: 10px; /* Stiva de sistem, deliberat: fara CDN de fonturi. Google Fonts trimite IP-ul vizitatorului catre Google — expunere GDPR inutila pentru o platforma de conformitate. Bonus: zero CLS. */ --pc-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pc-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; --pc-side-w: 232px; --pc-top-h: 52px; /* Suprafata inchisa, folosita o singura data pe pagina publica: hero-ul. */ --pc-deep: #141833; --pc-deep-2: #241C52; --pc-deep-line: #363061; --pc-deep-ink: #EFF0F8; --pc-deep-ink-2:#A6A8CC; /* --- brand, doar pe paginile publice --------------------------------- Violetul din v1 (#7B61FF), matur: la saturatia veche nu trecea contrastul pe alb. Rosul, chihlimbarul si verdele sunt luate de semantica de risc, iar bleumarinul de interactiune — violetul si cyanul erau singurele nuante libere, si erau deja in identitatea veche. In aplicatie nu intra: acolo culoarea inseamna risc, si atat. */ --pc-brand: #5B47D6; --pc-brand-hi: #4A38BE; --pc-brand-lite: #9B8CFF; --pc-brand-soft: #F1EEFE; --pc-brand-line: #D3CAFA; /* Cyanul preia semnalele "gratuit / fara credite", ca sa nu mai imprumute verdele de la "fara risc". */ --pc-free: #0C707A; /* 5.19:1 pe fundalul propriu — pastilele au text de 10.5px */ --pc-free-soft: #E6F5F6; --pc-free-line: #A9D9DD; } /* Dark pregatit, dar neactivat: se aprinde doar cu data-theme="dark" pe . Fara media query, ca sa nu surprinda pe nimeni inainte sa fie verificat. */ :root[data-theme="dark"] { color-scheme: dark; --pc-ground: #0E1014; --pc-surface: #15181E; --pc-surface-2: #191D24; --pc-surface-3: #1F242C; --pc-line: #252A33; --pc-line-2: #333A46; --pc-ink: #E9ECF2; --pc-ink-2: #9AA3B4; --pc-ink-3: #6C7486; --pc-accent: #8D99F2; --pc-accent-hi: #A6AFF7; --pc-accent-soft: #1A1F33; --pc-accent-line: #2E3760; --pc-crit: #F58C81; --pc-crit-soft: #2A1513; --pc-crit-line: #4C211C; --pc-warn: #E8A268; --pc-warn-soft: #26190E; --pc-warn-line: #452A15; --pc-ok: #55C79A; --pc-ok-soft: #0E2219; --pc-ok-line: #1C3D2F; --pc-info: #8D99F2; --pc-info-soft: #1A1F33; --pc-info-line: #2E3760; --pc-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --pc-shadow-2: 0 4px 20px rgba(0, 0, 0, .5); } /* ========================================================================== 2. PUNTE CATRE V1 Template-urile vechi au 2414 atribute style="" care citesc variabilele de mai jos. Remapate, nu sterse — altfel textul devine negru sau invizibil. ========================================================================== */ :root { --primary: var(--pc-accent); --primary-hover: var(--pc-accent-hi); --primary-dark: var(--pc-ink); --success: var(--pc-ok); --success-hover: var(--pc-ok); --accent: var(--pc-warn); --accent-hover: var(--pc-warn); --danger: var(--pc-crit); --danger-hover: var(--pc-crit); --dark: var(--pc-ink); --light: var(--pc-surface); --bg-color: var(--pc-ground); --text-main: var(--pc-ink); --text-secondary:var(--pc-ink-2); --border-color: var(--pc-line); --card-dark: var(--pc-surface-3); } /* ========================================================================== 3. BAZA ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--pc-ground); color: var(--pc-ink); font-family: var(--pc-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; letter-spacing: -.02em; text-wrap: balance; } h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13.5px; } p { margin: 0 0 .75em; } p:last-child { margin-bottom: 0; } a { color: var(--pc-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--pc-line); margin: 20px 0; } code, pre, .pc-mono, .mono { font-family: var(--pc-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* Focus vizibil peste tot. v1 avea 10 x `outline:none` si zero focus-visible. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; border-radius: var(--pc-r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .pc-lab, .lab { font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3); } .pc-num { font-variant-numeric: tabular-nums; } .pc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 4. SHELL ========================================================================== */ .pc-shell { display: grid; grid-template-columns: var(--pc-side-w) minmax(0, 1fr); min-height: 100vh; } /* --- sidebar --- */ .pc-side { background: var(--pc-surface); border-right: 1px solid var(--pc-line); display: flex; flex-direction: column; padding-bottom: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .pc-side__top { display: flex; align-items: center; gap: 9px; height: var(--pc-top-h); padding: 0 16px; border-bottom: 1px solid var(--pc-line); flex: none; } .pc-side__top:hover { text-decoration: none; } .pc-mark { width: 24px; height: 24px; flex: none; border-radius: 5px; display: grid; place-items: center; overflow: hidden; } .pc-mark img { width: 24px; height: 24px; display: block; } .pc-side__name { font-size: 14.5px; font-weight: 650; letter-spacing: -.015em; color: var(--pc-ink); } .pc-side__grp { padding: 14px 10px 0; } .pc-side__grp > .pc-lab { display: block; padding: 0 8px 6px; } .pc-nav { display: flex; flex-direction: column; gap: 1px; } .pc-nav__i { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--pc-r); color: var(--pc-ink-2); font-size: 13.2px; transition: background .12s, color .12s; } .pc-nav__i:hover { background: var(--pc-surface-3); color: var(--pc-ink); text-decoration: none; } .pc-nav__i.is-here { background: var(--pc-accent-soft); color: var(--pc-accent); font-weight: 600; } .pc-nav__i svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; opacity: .85; } .pc-nav__i.is-here svg { opacity: 1; } .pc-nav__ct { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--pc-ink-3); font-variant-numeric: tabular-nums; } .pc-nav__ct.is-alert { color: var(--pc-crit); } .pc-side__foot { margin-top: auto; padding: 12px 16px 0; border-top: 1px solid var(--pc-line); display: flex; align-items: center; gap: 9px; } .pc-avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--pc-surface-3); border: 1px solid var(--pc-line-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 650; color: var(--pc-ink-2); } .pc-side__who { min-width: 0; } .pc-side__who b { display: block; font-size: 12.8px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-side__who span { font-size: 11px; color: var(--pc-ink-3); } /* --- bara de sus --- */ .pc-top { height: var(--pc-top-h); border-bottom: 1px solid var(--pc-line); background: var(--pc-surface); display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 30; } .pc-crumb { font-size: 13px; color: var(--pc-ink-3); display: flex; align-items: center; gap: 7px; min-width: 0; } .pc-crumb b { color: var(--pc-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-top__r { margin-left: auto; display: flex; align-items: center; gap: 14px; } .pc-meter { display: flex; align-items: center; gap: 9px; } .pc-meter__bar { width: 78px; height: 5px; border-radius: 100px; background: var(--pc-surface-3); overflow: hidden; } .pc-meter__fill { height: 100%; background: var(--pc-accent); border-radius: 100px; } .pc-meter__fill.is-warn { background: var(--pc-warn); } .pc-meter__fill.is-crit { background: var(--pc-crit); } .pc-meter__txt { font-size: 12px; color: var(--pc-ink-2); font-variant-numeric: tabular-nums; } .pc-meter__txt b { color: var(--pc-ink); font-weight: 600; } .pc-iconbtn { width: 30px; height: 30px; border-radius: var(--pc-r); border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--pc-ink-2); position: relative; } .pc-iconbtn:hover { background: var(--pc-surface-3); color: var(--pc-ink); text-decoration: none; } .pc-iconbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; } .pc-dot { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 100px; background: var(--pc-crit); color: #fff; border: 1.5px solid var(--pc-surface); font-size: 9.5px; font-weight: 700; line-height: 12px; text-align: center; font-variant-numeric: tabular-nums; } /* comutatorul de skin — temporar, cat tine redesign-ul */ .pc-skin { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pc-ok); border: 1px solid var(--pc-ok-line); background: var(--pc-ok-soft); border-radius: 100px; padding: 3px 11px; white-space: nowrap; } .pc-skin::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pc-skin:hover { text-decoration: none; background: var(--pc-surface-3); } /* --- zona de lucru --- */ .pc-main { min-width: 0; } .pc-work { padding: 24px; max-width: 1200px; } .pc-foot { border-top: 1px solid var(--pc-line); padding: 18px 24px; color: var(--pc-ink-3); font-size: 12.2px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; } .pc-foot a { color: var(--pc-ink-2); } .pc-foot a:hover { color: var(--pc-ink); } .pc-foot__org { margin-left: auto; } /* ========================================================================== 5. COMPONENTE ========================================================================== */ /* --- buton: trei niveluri, nu opt --- */ .pc-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--pc-r); border: 1px solid var(--pc-line-2); background: var(--pc-surface); color: var(--pc-ink); font-family: inherit; font-size: 13px; font-weight: 550; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; } .pc-btn:hover { background: var(--pc-surface-3); text-decoration: none; } .pc-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; } .pc-btn[disabled], .pc-btn.is-disabled { opacity: .5; cursor: not-allowed; } .pc-btn--pri { background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; } .pc-btn--pri:hover { background: var(--pc-accent-hi); border-color: var(--pc-accent-hi); } :root[data-theme="dark"] .pc-btn--pri { color: #0E1014; } .pc-btn--ghost { border-color: transparent; background: transparent; color: var(--pc-ink-2); } .pc-btn--ghost:hover { background: var(--pc-surface-3); color: var(--pc-ink); } .pc-btn--crit { border-color: var(--pc-crit-line); color: var(--pc-crit); } .pc-btn--crit:hover { background: var(--pc-crit-soft); } .pc-btn--ok { border-color: var(--pc-ok-line); color: var(--pc-ok); } .pc-btn--ok:hover { background: var(--pc-ok-soft); } .pc-btn--lg { padding: 9px 18px; font-size: 13.5px; } .pc-btn--sm { padding: 5px 10px; font-size: 12.2px; } /* --- card --- */ .pc-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); } .pc-card__hd { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--pc-line); } .pc-card__hd h3 { font-size: 13.5px; font-weight: 650; } .pc-card__bd { padding: 16px; } .pc-card__ft { padding: 10px 16px; border-top: 1px solid var(--pc-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--pc-ink-3); } /* --- pastila de status: doar semantica de risc --- */ .pc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 100px; font-size: 11.5px; font-weight: 600; border: 1px solid; white-space: nowrap; } .pc-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pc-pill--crit { color: var(--pc-crit); background: var(--pc-crit-soft); border-color: var(--pc-crit-line); } .pc-pill--warn { color: var(--pc-warn); background: var(--pc-warn-soft); border-color: var(--pc-warn-line); } .pc-pill--ok { color: var(--pc-ok); background: var(--pc-ok-soft); border-color: var(--pc-ok-line); } .pc-pill--info { color: var(--pc-info); background: var(--pc-info-soft); border-color: var(--pc-info-line); } .pc-pill--mute { color: var(--pc-ink-3); background: var(--pc-surface-3); border-color: var(--pc-line); } /* --- formular --- */ .pc-field { display: grid; gap: 5px; margin-bottom: 12px; } .pc-field > label { font-size: 12.5px; font-weight: 550; color: var(--pc-ink-2); } .pc-field__help { font-size: 11.5px; color: var(--pc-ink-3); } .pc-req { color: var(--pc-crit); } .pc-inp { width: 100%; padding: 8px 11px; border: 1px solid var(--pc-line-2); border-radius: var(--pc-r); background: var(--pc-surface); color: var(--pc-ink); font-family: inherit; font-size: 13.5px; } .pc-inp::placeholder { color: var(--pc-ink-3); } .pc-inp:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px var(--pc-accent-soft); } textarea.pc-inp { min-height: 72px; resize: vertical; } .pc-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--pc-surface-3); border-radius: var(--pc-r); } .pc-seg button { border: 0; background: transparent; cursor: pointer; padding: 5px 12px; border-radius: var(--pc-r-sm); font-family: inherit; font-size: 12.5px; font-weight: 550; color: var(--pc-ink-2); } .pc-seg button[aria-pressed="true"] { background: var(--pc-surface); color: var(--pc-ink); box-shadow: var(--pc-shadow-1); } /* --- tabel-registru --- */ .pc-tblwrap { overflow-x: auto; } .pc-reg { width: 100%; border-collapse: collapse; font-size: 13.2px; } .pc-reg thead th { text-align: left; padding: 8px 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3); background: var(--pc-surface-2); border-bottom: 1px solid var(--pc-line); white-space: nowrap; } .pc-reg tbody td { padding: 9px 12px; border-bottom: 1px solid var(--pc-line); vertical-align: middle; } .pc-reg tbody tr:last-child td { border-bottom: 0; } .pc-reg tbody tr:hover td { background: var(--pc-surface-2); } .pc-reg .is-r { text-align: right; } /* jgheab de severitate: coloana fixa de 3px, citibila inainte de primul cuvant */ .pc-reg .pc-rail { width: 3px; padding: 0; background: var(--pc-line-2); border-bottom: 1px solid var(--pc-line); } .pc-reg tr[data-risk="crit"] .pc-rail { background: var(--pc-crit); } .pc-reg tr[data-risk="warn"] .pc-rail { background: var(--pc-warn); } .pc-reg tr[data-risk="ok"] .pc-rail { background: var(--pc-ok); } /* "mute" = randul e inactiv, nu are verdict de risc (ex. cont dezactivat). */ .pc-reg tr[data-risk="mute"] .pc-rail { background: var(--pc-line-2); } /* --- fasie de cifre, folosita de listele cu rezumat --- */ .pc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--pc-line); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); overflow: hidden; margin-bottom: 18px; } .pc-strip__i { background: var(--pc-surface); padding: 11px 14px; display: grid; gap: 3px; } .pc-strip__v { font-size: 19px; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.2; } .pc-strip__v.is-crit { color: var(--pc-crit); } .pc-strip__v.is-warn { color: var(--pc-warn); } .pc-strip__v.is-ok { color: var(--pc-ok); } .pc-strip__v.is-sm { font-size: 14px; } .pc-strip__d { font-size: 11.5px; color: var(--pc-ink-3); } /* --- bara de filtre --- */ .pc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); padding: 12px 14px; margin-bottom: 18px; } .pc-filter { display: grid; gap: 4px; } .pc-filter > label { font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3); } .pc-filter .pc-inp { padding: 6px 9px; font-size: 12.8px; } .pc-filter--check { align-self: center; padding-top: 14px; } .pc-filter--check label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.8px; color: var(--pc-ink-2); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; } .pc-filter--check input { width: auto; margin: 0; } .pc-filters__go { display: flex; gap: 6px; margin-left: auto; align-self: flex-end; } /* --- paginare --- */ .pc-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; } .pc-pager__at { font-size: 12.8px; color: var(--pc-ink-2); font-variant-numeric: tabular-nums; } .pc-pager__at b { color: var(--pc-ink); font-weight: 600; } /* --- card de pachet --- */ .pc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; } .pc-plan { display: flex; flex-direction: column; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); padding: 20px; } .pc-plan.is-current { border-color: var(--pc-accent); box-shadow: 0 0 0 1px var(--pc-accent); } .pc-plan__tag { align-self: flex-start; margin-bottom: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--pc-accent); background: var(--pc-accent-soft); border: 1px solid var(--pc-accent-line); border-radius: 100px; padding: 2px 9px; } .pc-plan__n { font-size: 16px; font-weight: 650; letter-spacing: -.02em; } .pc-plan__p { font-size: 28px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 10px 0 2px; } .pc-plan__p small { font-size: 13px; font-weight: 500; color: var(--pc-ink-3); letter-spacing: 0; } .pc-plan__q { font-size: 13.2px; color: var(--pc-ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--pc-line); } .pc-plan__f { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 6px; font-size: 13px; } .pc-plan__f li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; color: var(--pc-ink-2); } .pc-plan__f li::before { content: "✓"; color: var(--pc-ok); font-weight: 700; } .pc-plan__go { margin-top: auto; } .pc-plan__go .pc-btn { width: 100%; justify-content: center; } /* --- notificare --- */ .pc-notif { display: flex; gap: 12px; align-items: flex-start; background: var(--pc-surface); border: 1px solid var(--pc-line); border-left-width: 3px; border-left-color: var(--pc-line-2); border-radius: var(--pc-r); padding: 11px 14px; } .pc-notif.is-unread { background: var(--pc-accent-soft); border-color: var(--pc-accent-line); } .pc-notif[data-level="alert"] { border-left-color: var(--pc-crit); } .pc-notif[data-level="warning"] { border-left-color: var(--pc-warn); } .pc-notif[data-level="success"] { border-left-color: var(--pc-ok); } .pc-notif[data-level="info"] { border-left-color: var(--pc-accent); } .pc-notif__bd { flex: 1; min-width: 0; } .pc-notif__t { font-size: 13.2px; font-weight: 600; } .pc-notif__m { font-size: 12.8px; color: var(--pc-ink-2); margin-top: 3px; white-space: pre-line; } .pc-notif__meta { font-size: 11.5px; color: var(--pc-ink-3); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; } .pc-notif__act { flex: none; } /* --- stare goala --- */ .pc-empty { text-align: center; padding: 40px 24px; color: var(--pc-ink-2); } .pc-empty h3 { margin-bottom: 6px; } .pc-empty p { font-size: 13.2px; max-width: 46ch; margin-inline: auto; } /* --- caseta de nota: inlocuieste cele ~40 de div-uri cu stil inline din v1 --- */ .pc-note { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--pc-line); border-left: 3px solid var(--pc-ink-3); border-radius: var(--pc-r-lg); background: var(--pc-surface-2); margin-bottom: 16px; } .pc-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--pc-ink-3); fill: none; stroke-width: 1.9; } .pc-note__bd { min-width: 0; font-size: 12.8px; color: var(--pc-ink-2); line-height: 1.55; } .pc-note__bd > b:first-child { display: block; color: var(--pc-ink); font-size: 13.2px; margin-bottom: 3px; } .pc-note__bd p { margin: 0; } .pc-note__bd ul { margin: 7px 0 0; padding-left: 17px; } .pc-note__bd li + li { margin-top: 4px; } .pc-note--info { border-color: var(--pc-accent-line); border-left-color: var(--pc-accent); background: var(--pc-accent-soft); } .pc-note--info svg { stroke: var(--pc-accent); } .pc-note--warn { border-color: var(--pc-warn-line); border-left-color: var(--pc-warn); background: var(--pc-warn-soft); } .pc-note--warn svg { stroke: var(--pc-warn); } .pc-note--warn .pc-note__bd > b:first-child { color: var(--pc-warn); } .pc-note--crit { border-color: var(--pc-crit-line); border-left-color: var(--pc-crit); background: var(--pc-crit-soft); } .pc-note--crit svg { stroke: var(--pc-crit); } .pc-note--crit .pc-note__bd > b:first-child { color: var(--pc-crit); } .pc-note--ok { border-color: var(--pc-ok-line); border-left-color: var(--pc-ok); background: var(--pc-ok-soft); } .pc-note--ok svg { stroke: var(--pc-ok); } .pc-note--ok .pc-note__bd > b:first-child { color: var(--pc-ok); } /* --- lista cheie/valoare --- */ .pc-kv { display: grid; } .pc-kv > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--pc-line); font-size: 13.2px; } .pc-kv > div:last-child { border-bottom: 0; } .pc-kv dt { color: var(--pc-ink-2); font-size: 12.5px; } .pc-kv dd { font-weight: 550; overflow-wrap: anywhere; } .pc-kv dd.is-empty { font-weight: 400; color: var(--pc-ink-3); } @media (max-width: 520px) { .pc-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* --- optiune selectabila (radio/checkbox pe card) --- */ .pc-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 13px 15px; border: 1px solid var(--pc-line-2); border-radius: var(--pc-r-lg); background: var(--pc-surface); cursor: pointer; } .pc-opt:hover { border-color: var(--pc-line-2); background: var(--pc-surface-2); } .pc-opt input { width: auto; margin: 2px 0 0; accent-color: var(--pc-accent); } .pc-opt b { display: block; font-size: 13.2px; font-weight: 600; } .pc-opt span { display: block; font-size: 12.5px; color: var(--pc-ink-2); margin-top: 3px; line-height: 1.5; } .pc-opt:has(input:checked) { border-color: var(--pc-accent); background: var(--pc-accent-soft); box-shadow: 0 0 0 1px var(--pc-accent); } .pc-opt:has(input:focus-visible) { outline: 2px solid var(--pc-accent); outline-offset: 2px; } .pc-opt:has(input:disabled) { cursor: not-allowed; background: var(--pc-surface-3); border-color: var(--pc-line); } .pc-opt:has(input:disabled) b, .pc-opt:has(input:disabled) span { color: var(--pc-ink-3); } /* --- rand de securitate: stare + actiune --- */ .pc-sec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--pc-line); } .pc-sec:last-child { border-bottom: 0; } .pc-sec__bd { flex: 1; min-width: 180px; } .pc-sec__bd b { display: block; font-size: 13.2px; font-weight: 600; } .pc-sec__bd span { display: block; font-size: 12.5px; color: var(--pc-ink-2); margin-top: 2px; } /* ========================================================================== 6. API-UL VECHI DE CLASE Reimplementat pe tokens, ca template-urile neatinse sa arate ca v2. Dispare pe masura ce template-urile sunt rescrise. ========================================================================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0; } .card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); padding: 20px; margin-bottom: 16px; } .card:hover { box-shadow: var(--pc-shadow-1); } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--pc-r); border: 1px solid var(--pc-line-2); background: var(--pc-surface); color: var(--pc-ink); font-family: inherit; font-size: 13px; font-weight: 550; line-height: 1.4; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--pc-surface-3); text-decoration: none; } .btn-primary, .btn.btn-primary { background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; } .btn-primary:hover { background: var(--pc-accent-hi); border-color: var(--pc-accent-hi); color: #fff; } .btn-success { background: var(--pc-ok); border-color: var(--pc-ok); color: #fff; } .btn-success:hover { background: var(--pc-ok); color: #fff; } .btn-danger { background: var(--pc-crit); border-color: var(--pc-crit); color: #fff; } .btn-danger:hover { background: var(--pc-crit); color: #fff; } .btn-secondary { background: var(--pc-surface); border-color: var(--pc-line-2); color: var(--pc-ink); } .btn-secondary:hover { background: var(--pc-surface-3); } .btn-outline { background: var(--pc-surface); border-color: var(--pc-line-2); color: var(--pc-ink); } .btn-outline:hover { background: var(--pc-surface-3); } .btn-settings { background: var(--pc-surface); border-color: var(--pc-line-2); color: var(--pc-ink); } .btn-settings:hover { background: var(--pc-surface-3); } .btn-sm { padding: 5px 10px; font-size: 12.2px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 100px; border: 1px solid; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .badge-success { color: var(--pc-ok); background: var(--pc-ok-soft); border-color: var(--pc-ok-line); } .badge-danger { color: var(--pc-crit); background: var(--pc-crit-soft); border-color: var(--pc-crit-line); } .badge-warning { color: var(--pc-warn); background: var(--pc-warn-soft); border-color: var(--pc-warn-line); } .badge-info { color: var(--pc-info); background: var(--pc-info-soft); border-color: var(--pc-info-line); } .package-badge { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600; color: var(--pc-ok); background: var(--pc-ok-soft); border: 1px solid var(--pc-ok-line); } .role-badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 600; color: var(--pc-accent); background: var(--pc-accent-soft); border: 1px solid var(--pc-accent-line); } .status-badge { padding: 2px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; } .status-badge.active { color: var(--pc-ok); background: var(--pc-ok-soft); border-color: var(--pc-ok-line); } .status-badge.inactive { color: var(--pc-crit); background: var(--pc-crit-soft); border-color: var(--pc-crit-line); } /* antet de pagina */ .dashboard-header, .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .dashboard-header h1, .page-header h1 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: var(--pc-ink); } .dashboard-header p, .page-header .breadcrumb { margin: 3px 0 0; color: var(--pc-ink-2); font-size: 13.2px; } .section-title { font-size: 13.5px; font-weight: 650; color: var(--pc-ink); margin-bottom: 12px; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pc-line); } .card-title { font-size: 13.5px; font-weight: 650; color: var(--pc-ink); } .user-badge { display: flex; align-items: center; gap: 9px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: 100px; padding: 5px 14px 5px 5px; } .user-badge .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--pc-surface-3); color: var(--pc-ink-2); border: 1px solid var(--pc-line-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 650; } .user-badge span { font-size: 12.8px; font-weight: 500; color: var(--pc-ink-2); } /* grile */ .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .bottom-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; } .subscription-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; } .charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-card, .chart-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); padding: 14px 16px; } .stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3); margin-bottom: 8px; } .stat-value { font-size: 22px; font-weight: 650; letter-spacing: -.03em; color: var(--pc-ink); font-variant-numeric: tabular-nums; } .stat-subtitle { font-size: 12.5px; color: var(--pc-ink-2); } .chart-container { position: relative; height: 200px; } /* bara inchisa de statistici din v1 devine o banda sobra */ .stats-bar { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); color: var(--pc-ink); padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .stats-bar-item { display: flex; align-items: center; gap: 10px; } .stats-bar-item .label { font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--pc-ink-3); } .stats-bar-item .value { font-size: 17px; font-weight: 650; color: var(--pc-ink); letter-spacing: -.02em; } .stats-bar .progress-bar { width: 100px; background: var(--pc-surface-3); } .stats-bar .progress-fill { background: var(--pc-accent); } .progress-bar, .progress-container { width: 100%; height: 5px; background: var(--pc-surface-3); border-radius: 100px; overflow: hidden; margin-top: 10px; } .progress-fill { height: 100%; background: var(--pc-accent); border-radius: 100px; } .progress-fill.warning { background: var(--pc-warn); } .progress-fill.danger { background: var(--pc-crit); } .usage-display { text-align: center; padding: 16px 0; } .usage-numbers { font-size: 38px; font-weight: 650; letter-spacing: -.03em; color: var(--pc-ink); font-variant-numeric: tabular-nums; } .usage-total { font-size: 20px; font-weight: 400; color: var(--pc-ink-3); } .usage-label { font-size: 13px; color: var(--pc-ink-2); margin-top: 6px; } .usage-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--pc-ink-3); } .plan-name { font-size: 26px; font-weight: 650; letter-spacing: -.03em; color: var(--pc-ink); margin-bottom: 4px; } .plan-price { font-size: 15px; color: var(--pc-ink-2); margin-bottom: 16px; } .plan-price strong { color: var(--pc-ink); font-weight: 650; } .info-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13.2px; } .info-label { color: var(--pc-ink-3); } .info-value { color: var(--pc-ink); font-weight: 550; } /* actiuni si pasi */ .action-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); padding: 14px 16px; margin-bottom: 10px; color: var(--pc-ink); text-decoration: none; } .action-btn:hover { border-color: var(--pc-line-2); background: var(--pc-surface-2); text-decoration: none; } .action-btn.primary { background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; } .action-btn.primary:hover { background: var(--pc-accent-hi); } .action-btn h4 { font-size: 13.5px; font-weight: 650; margin-bottom: 2px; } .action-btn p { font-size: 12.5px; margin: 0; opacity: .85; } .action-btn.secondary p { color: var(--pc-ink-2); } .action-btn .arrow { font-size: 16px; color: var(--pc-ink-3); } .steps-list { list-style: none; padding: 0; margin: 0; } .step-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; } .step-number { flex: none; min-width: 22px; height: 22px; border-radius: 50%; background: var(--pc-accent-soft); color: var(--pc-accent); border: 1px solid var(--pc-accent-line); display: grid; place-items: center; font-size: 11px; font-weight: 650; } .step-text { font-size: 13.2px; color: var(--pc-ink-2); } .footer-actions, .form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } /* formulare vechi */ .form-group { margin-bottom: 12px; display: grid; gap: 5px; } .form-group label { font-size: 12.5px; font-weight: 550; color: var(--pc-ink-2); text-transform: none; letter-spacing: 0; margin: 0; } .form-group label .required, .required { color: var(--pc-crit); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .form-group.full-width { grid-column: 1 / -1; } .form-container { padding: 16px; } /* Erorile randate de Django ({{ form.x.errors }}) veneau nestilizate. */ .errorlist { list-style: none; padding: 0; margin: 4px 0 0; font-size: 11.5px; color: var(--pc-crit); } .errorlist li + li { margin-top: 2px; } .pc-field .errorlist { margin: 0; } .form-control.is-invalid, input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--pc-crit); } label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 550; color: var(--pc-ink-2); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="url"], select, textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--pc-line-2); border-radius: var(--pc-r); background: var(--pc-surface); color: var(--pc-ink); font-family: inherit; font-size: 13.5px; } input::placeholder, textarea::placeholder { color: var(--pc-ink-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px var(--pc-accent-soft); } .search-card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-1); overflow: hidden; max-width: 640px; margin: 0 auto; } .search-type-selector { display: flex; gap: 2px; padding: 4px; background: var(--pc-surface-3); border-bottom: 1px solid var(--pc-line); } .type-btn { flex: 1; border: 0; background: transparent; cursor: pointer; padding: 7px 12px; border-radius: var(--pc-r-sm); font-family: inherit; font-size: 12.5px; font-weight: 550; color: var(--pc-ink-2); display: flex; align-items: center; justify-content: center; gap: 6px; } .type-btn:hover { color: var(--pc-ink); } .type-btn.active { background: var(--pc-surface); color: var(--pc-ink); box-shadow: var(--pc-shadow-1); } .type-btn svg { width: 14px; height: 14px; } .form-footer { background: var(--pc-surface-2); padding: 12px 16px; border-top: 1px solid var(--pc-line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .quota-info { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 550; color: var(--pc-warn); background: var(--pc-warn-soft); border: 1px solid var(--pc-warn-line); border-radius: 100px; padding: 3px 10px; } /* tabele vechi */ table { width: 100%; border-collapse: collapse; background: transparent; font-size: 13.2px; } th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--pc-line); } th { background: var(--pc-surface-2); color: var(--pc-ink-3); font-size: 10.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; white-space: nowrap; } tbody tr:hover { background: var(--pc-surface-2); } /* ========================================================================== 7. SUPRAPUNERI ========================================================================== */ .messages { display: grid; gap: 8px; margin-bottom: 18px; } .message { padding: 11px 14px; border-radius: var(--pc-r); border: 1px solid; border-left-width: 3px; font-size: 13.2px; } .message.success { color: var(--pc-ok); background: var(--pc-ok-soft); border-color: var(--pc-ok-line); } .message.error { color: var(--pc-crit); background: var(--pc-crit-soft); border-color: var(--pc-crit-line); } .message.warning { color: var(--pc-warn); background: var(--pc-warn-soft); border-color: var(--pc-warn-line); } .message.info { color: var(--pc-info); background: var(--pc-info-soft); border-color: var(--pc-info-line); } .message.debug { color: var(--pc-ink-2); background: var(--pc-surface-3); border-color: var(--pc-line); } .cookie-banner { position: fixed; bottom: 20px; left: 20px; max-width: 400px; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-2); padding: 20px; z-index: 10000; transform: translateY(120%); opacity: 0; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .35s; } .cookie-banner.show { transform: translateY(0); opacity: 1; } .cookie-banner.hide { transform: translateY(120%); opacity: 0; } .cookie-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cookie-icon { display: none; } .cookie-title { font-size: 14.5px; font-weight: 650; color: var(--pc-ink); } .cookie-text { font-size: 12.8px; color: var(--pc-ink-2); margin-bottom: 14px; } .cookie-link { color: var(--pc-accent); } .cookie-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .cookie-buttons .btn { flex: 1; min-width: 96px; justify-content: center; } .cookie-settings { position: fixed; inset: 0; background: rgba(20, 22, 27, .5); z-index: 10001; display: none; align-items: center; justify-content: center; padding: 20px; } .cookie-settings.show { display: flex; } .settings-modal { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-2); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; } .settings-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--pc-line); } .settings-title { font-size: 16px; font-weight: 650; } .close-btn { width: 30px; height: 30px; border: 0; border-radius: var(--pc-r); background: transparent; color: var(--pc-ink-2); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .close-btn:hover { background: var(--pc-surface-3); color: var(--pc-ink); } .cookie-category { padding: 16px 20px; border-bottom: 1px solid var(--pc-line); } .cookie-category:last-of-type { border-bottom: 0; } .category-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .category-title { font-size: 13.5px; font-weight: 650; } .category-description { font-size: 12.8px; color: var(--pc-ink-2); } .settings-footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--pc-line); } .settings-footer .btn { flex: 1; justify-content: center; } .toggle { width: 40px; height: 23px; flex: none; background: var(--pc-line-2); border-radius: 100px; position: relative; cursor: pointer; transition: background .2s; } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: var(--pc-shadow-1); } .toggle.active { background: var(--pc-accent); } .toggle.active::after { transform: translateX(17px); } .toggle.disabled { opacity: .55; cursor: not-allowed; } /* ========================================================================== 8. RESPONSIVE & PRINT ========================================================================== */ @media (max-width: 1000px) { .bottom-grid, .subscription-grid, .charts-grid { grid-template-columns: minmax(0, 1fr); } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .pc-shell { grid-template-columns: minmax(0, 1fr); } .pc-side { position: fixed; inset: 0 auto 0 0; width: var(--pc-side-w); z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--pc-shadow-2); } .pc-side.is-open { transform: translateX(0); } .pc-scrim { position: fixed; inset: 0; background: rgba(20, 22, 27, .45); z-index: 50; } .pc-work { padding: 16px; } .pc-top { padding: 0 16px; } .pc-meter { display: none; } .stats-grid, .form-grid { grid-template-columns: minmax(0, 1fr); } .cookie-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; } .cookie-buttons { flex-direction: column; } .cookie-buttons .btn { width: 100%; } } .pc-burger { display: none; } @media (max-width: 760px) { .pc-burger { display: grid; } } @media print { .pc-side, .pc-top, .pc-foot, .cookie-banner, .cookie-settings, .pc-skin { display: none !important; } .pc-shell { grid-template-columns: minmax(0, 1fr); } .pc-work { padding: 0; max-width: none; } body { background: #fff; } .card, .pc-card { box-shadow: none; break-inside: avoid; } } /* ========================================================================== 9. PAGINI PUBLICE DE AUTENTIFICARE login, inregistrare, verificare 2FA, blocare cont, resetare parola. Nu extind shell-ul aplicatiei: sunt documente de sine statatoare. ========================================================================== */ .pc-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Un strop mai inchis decat --pc-ground: formularul e un card alb asezat pe fundalul asta, iar la trei procente diferenta cardul nu se vedea deloc. */ background: var(--pc-surface-3); } /* Panoul din stanga: context, nu decor. Dispare cand nu incape. */ .pc-auth__side { background: var(--pc-surface); border-right: 1px solid var(--pc-line); padding: 40px 44px; display: flex; flex-direction: column; } .pc-auth__side > footer { margin-top: auto; font-size: 11.5px; color: var(--pc-ink-3); } .pc-auth__pitch { margin: auto 0; max-width: 40ch; } .pc-auth__pitch h2 { font-size: 23px; font-weight: 650; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 10px; } .pc-auth__pitch > p { font-size: 13.8px; color: var(--pc-ink-2); line-height: 1.6; margin: 0; } .pc-auth__pts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; } .pc-auth__pts li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px; } .pc-auth__pts svg { width: 16px; height: 16px; margin-top: 2px; stroke: var(--pc-ok); fill: none; stroke-width: 2.2; } .pc-auth__pts b { display: block; font-size: 13.2px; font-weight: 600; } .pc-auth__pts span { display: block; font-size: 12.5px; color: var(--pc-ink-2); margin-top: 2px; line-height: 1.5; } /* Coloana formularului. */ .pc-auth__main { display: flex; flex-direction: column; padding: 40px 44px; min-width: 0; } /* `margin:auto` centreaza pe verticala cand incape, si se comporta ca margin:0 cand nu incape — spre deosebire de justify-content:center, care taie partea de sus, inaccesibil, la continut mai inalt decat ecranul. Coloana nu are overflow propriu: ce nu incape deruleaza pagina, nu coloana. */ .pc-auth__box { margin: auto; width: 100%; max-width: 380px; } .pc-auth__box.is-wide { max-width: 620px; } /* Cardul propriu-zis. Marca si linkurile legale raman in afara lui, ca sa se vada limpede unde incepe si unde se termina ce ai de completat. */ .pc-auth__card { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-2); padding: 26px 26px 28px; } .pc-auth__card > h1:first-child, .pc-auth__card > p:first-of-type { margin-top: 0; } /* Despartitorul si subsolul cardului merg pana la marginile lui. */ .pc-auth__card .pc-auth__alt { margin: 22px -26px -28px; padding: 16px 26px; border-top: 1px solid var(--pc-line); border-radius: 0 0 var(--pc-r-lg) var(--pc-r-lg); background: var(--pc-surface-2); } .pc-auth__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; letter-spacing: -.015em; color: var(--pc-ink); margin-bottom: 30px; } .pc-auth__brand:hover { text-decoration: none; color: var(--pc-accent); } .pc-auth__brand img { width: 26px; height: 26px; } .pc-auth__box h1 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 4px; } .pc-auth__box > p { font-size: 13.2px; color: var(--pc-ink-2); margin: 0 0 22px; } .pc-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 18px; font-size: 12.8px; } .pc-auth__row label { display: inline-flex; align-items: center; gap: 7px; color: var(--pc-ink-2); cursor: pointer; margin: 0; font-weight: 400; } .pc-auth__row input { width: auto; margin: 0; accent-color: var(--pc-accent); } .pc-auth__alt { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--pc-line); font-size: 13px; color: var(--pc-ink-2); text-align: center; } .pc-auth__foot { margin-top: 26px; font-size: 11.5px; color: var(--pc-ink-3); text-align: center; } .pc-auth__foot a { color: var(--pc-ink-3); } .pc-auth__foot a:hover { color: var(--pc-accent); } /* Sectiuni in formularul de inregistrare. */ .pc-auth__sec + .pc-auth__sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pc-line); } .pc-auth__sec > h2 { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-3); margin: 0 0 13px; } .pc-auth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pc-auth__grid .is-wide { grid-column: 1 / -1; } .pc-auth__consent { display: grid; gap: 10px; } .pc-auth__consent label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 12.8px; color: var(--pc-ink-2); line-height: 1.5; cursor: pointer; margin: 0; font-weight: 400; } .pc-auth__consent input { width: auto; margin: 2px 0 0; accent-color: var(--pc-accent); } @media (max-width: 900px) { .pc-auth { grid-template-columns: minmax(0, 1fr); } .pc-auth__side { display: none; } .pc-auth__main { padding: 28px 20px; } } @media (max-width: 420px) { /* Pe ecran ingust cardul ar avea rame de cateva pixeli de fiecare parte. Il lasam sa curga pana la margini si pastram doar liniile orizontale. */ .pc-auth__main { padding: 22px 0 28px; } .pc-auth__brand, .pc-auth__foot { padding-inline: 18px; } .pc-auth__card { border-inline: 0; border-radius: 0; box-shadow: none; padding: 22px 18px 24px; } .pc-auth__card .pc-auth__alt { margin-inline: -18px; padding-inline: 18px; border-radius: 0; } } /* ========================================================================== 10. PAGINI PUBLICE DE PREZENTARE landing si paginile de continut. Aceeasi paleta ca aplicatia, dar cu mai mult aer: aici se citeste, nu se lucreaza. ========================================================================== */ .pc-pub { --pc-pub-w: 1080px; } .pc-pub__in { max-width: var(--pc-pub-w); margin: 0 auto; padding: 0 24px; } .pc-pub section { padding: 64px 0; } .pc-pub section + section { border-top: 1px solid var(--pc-line); } .pc-pub section.is-tint { background: var(--pc-surface); } .pc-pub h2 { font-size: 26px; font-weight: 650; letter-spacing: -.028em; line-height: 1.2; margin: 0 0 10px; } .pc-pub__lead { font-size: 14.5px; color: var(--pc-ink-2); line-height: 1.6; max-width: 62ch; margin: 0; } .pc-pub__hd { margin-bottom: 32px; } /* --- bara de navigatie --- */ .pc-nav2 { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pc-line); } .pc-nav2__in { max-width: var(--pc-pub-w); margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; gap: 24px; } .pc-nav2__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; color: var(--pc-ink); } .pc-nav2__brand:hover { text-decoration: none; } .pc-nav2__brand img { width: 25px; height: 25px; } .pc-nav2__links { display: flex; gap: 20px; margin-left: auto; } .pc-nav2__links a { font-size: 13.2px; color: var(--pc-ink-2); } .pc-nav2__links a:hover { color: var(--pc-ink); text-decoration: none; } .pc-nav2__go { display: flex; gap: 8px; align-items: center; } @media (max-width: 860px) { .pc-nav2__links { display: none; } .pc-nav2__go { margin-left: auto; } } /* --- hero: singura suprafata inchisa din pagina --- */ .pc-hero { padding: 84px 0 76px; /* Bleumarin catre violet: aceeasi familie, dar cu drum intre capete. Un ton unic arata vopsit; un degrade pe diagonala are directie. */ background: linear-gradient(148deg, var(--pc-deep) 0%, #1A1B40 46%, var(--pc-deep-2) 100%); color: var(--pc-deep-ink); position: relative; overflow: hidden; } /* Doua straturi de lumina, foarte discrete: fara ele suprafata inchisa arata ca un dreptunghi vopsit. Cu ele capata adancime, fara sa devina decor. */ .pc-hero::before, .pc-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .pc-hero::before { width: 620px; height: 620px; top: -320px; right: -120px; background: radial-gradient(circle, rgba(123, 97, 255, .34), transparent 68%); } .pc-hero::after { width: 500px; height: 500px; bottom: -300px; left: -160px; background: radial-gradient(circle, rgba(54, 228, 218, .16), transparent 70%); } .pc-hero > * { position: relative; z-index: 1; } .pc-hero h1 { font-size: 52px; font-weight: 700; letter-spacing: -.042em; line-height: 1.04; margin: 0 0 18px; max-width: 15ch; color: #fff; text-wrap: balance; } .pc-hero h1 em { font-style: normal; color: var(--pc-brand-lite); } .pc-hero__sub { font-size: 16.5px; color: var(--pc-deep-ink-2); line-height: 1.6; max-width: 52ch; margin: 0 0 30px; } .pc-hero__grid { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: center; } /* Pastila cu dovada, sub butoane: cifre, nu adjective. */ .pc-hero__facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--pc-deep-line); } .pc-hero__facts div b { display: block; font-size: 21px; font-weight: 680; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; } .pc-hero__facts div span { display: block; font-size: 12.2px; color: var(--pc-deep-ink-2); margin-top: 2px; } /* Butoanele isi inverseaza rolurile pe fundal inchis. */ .pc-hero .pc-btn { background: transparent; border-color: var(--pc-deep-line); color: var(--pc-deep-ink); } .pc-hero .pc-btn:hover { background: var(--pc-deep-2); border-color: #454E86; } .pc-hero .pc-btn--pri { background: #fff; border-color: #fff; color: var(--pc-deep); } .pc-hero .pc-btn--pri:hover { background: #E7EAF7; border-color: #E7EAF7; } @media (max-width: 940px) { .pc-hero { padding: 48px 0 44px; } .pc-hero h1 { font-size: 33px; max-width: none; } .pc-hero__sub { font-size: 15px; } .pc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .pc-hero__facts { gap: 20px; margin-top: 26px; } } /* caseta de demonstratie */ .pc-try { background: var(--pc-surface); border: 1px solid var(--pc-line-2); border-radius: var(--pc-r-lg); /* Umbra e mai adanca decat --pc-shadow-2: cardul sta pe suprafata inchisa si trebuie sa pluteasca peste ea, nu sa fie lipit. */ box-shadow: 0 20px 50px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .24); overflow: hidden; } /* Hero-ul e inchis: sectiunea de dupa nu mai are nevoie de linie de separare. */ .pc-hero + section { border-top: 0; } .pc-try__hd { padding: 13px 16px; border-bottom: 1px solid var(--pc-line); background: var(--pc-surface-2); } .pc-try__hd b { display: block; font-size: 13.4px; font-weight: 650; } .pc-try__hd span { display: block; font-size: 11.8px; color: var(--pc-ink-3); margin-top: 2px; } .pc-try__bd { padding: 16px; } .pc-try__form { display: flex; gap: 8px; } .pc-try__form .pc-inp { flex: 1; min-width: 0; } .pc-try__note { font-size: 11.5px; color: var(--pc-ink-3); margin: 9px 0 0; } .pc-try__out { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pc-line); } .pc-try__co { font-size: 13.8px; font-weight: 600; margin: 0 0 12px; overflow-wrap: anywhere; } .pc-try__score { display: flex; align-items: center; gap: 16px; } .pc-try__ring { width: 84px; height: 84px; flex: none; position: relative; } .pc-try__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .pc-try__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 680; font-variant-numeric: tabular-nums; } .pc-try__lvl { font-size: 15px; font-weight: 650; margin: 0 0 3px; } .pc-try__hint { font-size: 12.5px; color: var(--pc-ink-2); line-height: 1.5; margin: 0; } /* --- grile de continut --- */ .pc-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--pc-line); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); overflow: hidden; } .pc-grid3 > article { background: var(--pc-surface); padding: 20px; } .pc-grid3 h3 { font-size: 14.5px; font-weight: 650; margin: 0 0 6px; } .pc-grid3 p { font-size: 13.2px; color: var(--pc-ink-2); line-height: 1.55; margin: 0; } .pc-grid3 ul { margin: 10px 0 0; padding-left: 17px; font-size: 12.5px; color: var(--pc-ink-3); } .pc-grid3 li + li { margin-top: 3px; } .pc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } /* --- cele doua moduri de lucru --- */ .pc-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .pc-way { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); padding: 24px; display: flex; flex-direction: column; } .pc-way.is-lead { border-color: var(--pc-accent-line); box-shadow: 0 0 0 1px var(--pc-accent-line); } .pc-way__k { font-size: 10.5px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; color: var(--pc-ink-3); } .pc-way h3 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; margin: 7px 0 8px; } .pc-way__p { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 4px; } .pc-way__p small { font-size: 12.5px; font-weight: 450; color: var(--pc-ink-3); letter-spacing: 0; } .pc-way > p { font-size: 13.2px; color: var(--pc-ink-2); line-height: 1.55; margin: 0 0 14px; } .pc-way ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; } .pc-way li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; font-size: 13px; color: var(--pc-ink-2); line-height: 1.5; } .pc-way li::before { content: "·"; color: var(--pc-ink-3); font-weight: 700; text-align: center; } .pc-way__go { margin-top: auto; } /* --- intrebari --- */ .pc-faq { display: grid; } .pc-faq details { border-bottom: 1px solid var(--pc-line); } .pc-faq summary { padding: 15px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 12px; } .pc-faq summary::-webkit-details-marker { display: none; } .pc-faq summary::after { content: "+"; margin-left: auto; flex: none; font-size: 17px; font-weight: 400; color: var(--pc-ink-3); } .pc-faq details[open] summary::after { content: "−"; } .pc-faq summary:hover { color: var(--pc-accent); } .pc-faq__a { padding: 0 0 16px; font-size: 13.4px; color: var(--pc-ink-2); line-height: 1.6; max-width: 74ch; } /* --- lista de surse, pliata --- */ .pc-src > summary { cursor: pointer; list-style: none; font-size: 13.4px; font-weight: 600; color: var(--pc-accent); padding: 13px 16px; border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); background: var(--pc-surface); } .pc-src > summary::-webkit-details-marker { display: none; } .pc-src > summary::before { content: "▸ "; } .pc-src[open] > summary { border-radius: var(--pc-r-lg) var(--pc-r-lg) 0 0; border-bottom: 0; } .pc-src[open] > summary::before { content: "▾ "; } .pc-src__bd { border: 1px solid var(--pc-line); border-top: 0; border-radius: 0 0 var(--pc-r-lg) var(--pc-r-lg); background: var(--pc-surface); padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; } .pc-src__cat h3 { font-size: 12.5px; font-weight: 650; margin: 0 0 3px; } .pc-src__cat > span { font-size: 11px; color: var(--pc-ink-3); } .pc-src__cat ul { list-style: none; padding: 0; margin: 9px 0 0; } .pc-src__cat li { font-size: 11.8px; color: var(--pc-ink-2); padding: 2px 0; line-height: 1.45; } /* --- articole --- */ .pc-arts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .pc-art { display: block; color: var(--pc-ink); } .pc-art:hover { text-decoration: none; } .pc-art:hover b { color: var(--pc-accent); } .pc-art time { font-size: 11.5px; color: var(--pc-ink-3); } .pc-art b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; margin: 5px 0 5px; } .pc-art p { font-size: 12.8px; color: var(--pc-ink-2); line-height: 1.5; margin: 0; } /* --- subsol --- */ .pc-pub__foot { background: var(--pc-surface); border-top: 1px solid var(--pc-line); padding: 40px 0 28px; } .pc-pub__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; } .pc-pub__cols h4 { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-3); margin: 0 0 11px; } .pc-pub__cols nav { display: grid; gap: 7px; } .pc-pub__cols nav a { font-size: 12.8px; color: var(--pc-ink-2); } .pc-pub__cols p { font-size: 12.5px; color: var(--pc-ink-2); line-height: 1.55; margin: 9px 0 0; max-width: 34ch; } .pc-pub__legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--pc-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11.8px; color: var(--pc-ink-3); } @media (max-width: 760px) { .pc-pub__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- diagrama fluxului de screening --- */ .pc-flow { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); padding: 22px; } .pc-flow > figcaption { font-size: 11.5px; color: var(--pc-ink-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pc-line); } .pc-flow svg { display: block; width: 100%; height: auto; } .pc-flow .fl-box { fill: var(--pc-surface-2); stroke: var(--pc-line-2); stroke-width: 1; } .pc-flow .fl-box-in { fill: var(--pc-accent-soft); stroke: var(--pc-accent-line); } .pc-flow .fl-link { stroke: var(--pc-line-2); stroke-width: 1.2; fill: none; } .pc-flow .fl-t { font-size: 10px; font-weight: 600; fill: var(--pc-ink); } .pc-flow .fl-s { font-size: 8.5px; fill: var(--pc-ink-3); } .pc-flow .fl-n { font-size: 8.5px; font-weight: 650; fill: var(--pc-ink-2); } .pc-flow .fl-ok { fill: var(--pc-ok-soft); stroke: var(--pc-ok-line); } .pc-flow .fl-warn { fill: var(--pc-warn-soft); stroke: var(--pc-warn-line); } .pc-flow .fl-ok-t { fill: var(--pc-ok); font-size: 10px; font-weight: 650; } .pc-flow .fl-warn-t { fill: var(--pc-warn); font-size: 10px; font-weight: 650; } /* -------------------------------------------------------------------------- Brandul, doar pe paginile publice. Totul e limitat la .pc-pub si .pc-auth: in aplicatie culoarea inseamna risc, si nimic altceva. Aici nu se afiseaza niciun risc, deci pagina are voie sa fie mai bogata fara sa strice vreun semnal. -------------------------------------------------------------------------- */ .pc-pub a:not(.pc-btn):not(.pc-art):not(.pc-nav2__brand), .pc-auth a:not(.pc-btn) { color: var(--pc-brand); } .pc-pub a:not(.pc-btn):hover { color: var(--pc-brand-hi); } .pc-pub .pc-btn--pri, .pc-auth .pc-btn--pri { background: var(--pc-brand); border-color: var(--pc-brand); } .pc-pub .pc-btn--pri:hover, .pc-auth .pc-btn--pri:hover { background: var(--pc-brand-hi); border-color: var(--pc-brand-hi); } .pc-pub .pc-inp:focus, .pc-auth .pc-inp:focus { border-color: var(--pc-brand); box-shadow: 0 0 0 3px var(--pc-brand-soft); } /* Titlurile de sectiune capata un semn scurt deasupra, in loc sa inceapa sec. */ .pc-pub__hd > h2::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--pc-brand); margin-bottom: 13px; } /* Cardul recomandat dintre cele doua moduri de lucru. */ .pc-way.is-lead { border-color: var(--pc-brand-line); box-shadow: 0 0 0 1px var(--pc-brand-line), var(--pc-shadow-1); } .pc-way.is-lead .pc-way__k { color: var(--pc-brand); } /* "Fara credite" trece pe cyan: verdele inseamna "fara risc" in aplicatie si nu trebuie sa insemne si "gratuit" pe landing. */ .pc-pub .pc-pill--ok, .pc-auth .pc-pill--ok { color: var(--pc-free); background: var(--pc-free-soft); border-color: var(--pc-free-line); } /* Sageata din navigatie si marca raman neutre; doar starea activa e brand. */ .pc-nav2__links a:hover { color: var(--pc-brand); } /* Diagrama urmeaza aceeasi familie. */ .pc-flow .fl-link { stroke: var(--pc-brand-line); } .pc-flow .fl-box-in { fill: var(--pc-brand-soft); stroke: var(--pc-brand-line); } .pc-flow .fl-n { fill: var(--pc-brand); } /* Panoul din stanga paginilor de autentificare: un ton, nu alb pe alb. */ .pc-auth__side { background: linear-gradient(168deg, var(--pc-surface) 0%, var(--pc-brand-soft) 100%); } .pc-auth__pts svg { stroke: var(--pc-brand); } /* --- antet de pagina de continut --- */ .pc-pub__page-hd { padding: 48px 0 40px; background: linear-gradient(160deg, var(--pc-surface) 0%, var(--pc-brand-soft) 140%); border-bottom: 1px solid var(--pc-line); } .pc-pub__page-hd h1 { font-size: 36px; font-weight: 690; letter-spacing: -.035em; line-height: 1.12; margin: 0; max-width: 22ch; } .pc-pub__page-hd p { font-size: 15px; color: var(--pc-ink-2); line-height: 1.6; max-width: 62ch; margin: 12px 0 0; } .pc-pub__crumb { font-size: 12.5px; color: var(--pc-ink-3); margin-bottom: 12px; } .pc-pub__crumb a { color: var(--pc-ink-3); } .pc-pub__crumb span { margin: 0 6px; } @media (max-width: 700px) { .pc-pub__page-hd { padding: 32px 0 28px; } .pc-pub__page-hd h1 { font-size: 27px; } } /* --- text lung: articole, ghiduri, pagini legale --- */ .pc-prose { max-width: 72ch; font-size: 15px; line-height: 1.72; color: var(--pc-ink-2); } .pc-prose > * + * { margin-top: 1.1em; } .pc-prose h2 { font-size: 21px; font-weight: 660; letter-spacing: -.022em; color: var(--pc-ink); margin-top: 2em; margin-bottom: .1em; scroll-margin-top: 76px; } .pc-prose h3 { font-size: 16.5px; font-weight: 650; color: var(--pc-ink); margin-top: 1.6em; margin-bottom: .1em; scroll-margin-top: 76px; } .pc-prose h2 + p, .pc-prose h3 + p { margin-top: .45em; } .pc-prose ul, .pc-prose ol { padding-left: 22px; } .pc-prose li + li { margin-top: .4em; } .pc-prose strong, .pc-prose b { color: var(--pc-ink); font-weight: 620; } .pc-prose code { font-family: var(--pc-mono); font-size: .87em; background: var(--pc-surface-3); border: 1px solid var(--pc-line); border-radius: var(--pc-r-sm); padding: 1px 5px; } .pc-prose pre { background: var(--pc-deep); color: var(--pc-deep-ink); border-radius: var(--pc-r); padding: 15px 17px; overflow-x: auto; font-size: 12.8px; line-height: 1.6; } .pc-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .pc-prose blockquote { border-left: 3px solid var(--pc-brand-line); padding-left: 16px; color: var(--pc-ink-2); font-style: italic; } .pc-prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .pc-prose th, .pc-prose td { padding: 9px 11px; border-bottom: 1px solid var(--pc-line); text-align: left; } .pc-prose th { font-weight: 640; color: var(--pc-ink); background: var(--pc-surface-2); } .pc-prose img { border-radius: var(--pc-r); border: 1px solid var(--pc-line); } .pc-prose hr { margin: 2em 0; } /* --- pagina de continut cu cuprins lateral --- */ .pc-doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; align-items: start; } .pc-doc__toc { position: sticky; top: 76px; } .pc-doc__toc h2 { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--pc-ink-3); margin: 0 0 10px; } .pc-doc__toc nav { display: grid; gap: 2px; border-left: 1px solid var(--pc-line); } .pc-doc__toc a { font-size: 12.8px; color: var(--pc-ink-2); padding: 4px 0 4px 13px; margin-left: -1px; border-left: 2px solid transparent; line-height: 1.4; } .pc-doc__toc a:hover { color: var(--pc-ink); text-decoration: none; } .pc-doc__toc a.is-here { color: var(--pc-brand); border-left-color: var(--pc-brand); font-weight: 600; } @media (max-width: 900px) { .pc-doc { grid-template-columns: minmax(0, 1fr); gap: 26px; } .pc-doc__toc { position: static; } .pc-doc__toc nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-left: 0; padding-bottom: 6px; } .pc-doc__toc a { padding: 5px 11px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; } .pc-doc__toc a.is-here { border-left: 0; border-bottom-color: var(--pc-brand); } } /* -------------------------------------------------------------------------- Punte pentru paginile legale. GDPR, confidentialitate si termeni impart un sablon parinte si folosesc, in continut, clasele vechi (legal-section, info-box) plus un pumn de utilitare Tailwind. Le remapam aici, ca sa nu fie nevoie sa rescriem trei documente juridice — textul lor conteaza, marcajul nu. Totul e limitat la .pc-legal. -------------------------------------------------------------------------- */ .pc-legal { max-width: 74ch; } /* Fiecare document isi aduce propriul antet; il folosim ca titlu de pagina in loc sa cerem copiilor un bloc nou. */ .pc-legal .legal-header { margin-bottom: 32px; } .pc-legal .legal-header h1 { font-size: 34px; font-weight: 690; letter-spacing: -.035em; line-height: 1.14; color: var(--pc-ink); margin: 0; } .pc-legal .legal-header p { font-size: 14.5px; color: var(--pc-ink-2); margin: 10px 0 0; } @media (max-width: 700px) { .pc-legal .legal-header h1 { font-size: 26px; } } .pc-legal .legal-section { margin-bottom: 34px; } .pc-legal .legal-section h2 { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 660; letter-spacing: -.022em; color: var(--pc-ink); margin: 0 0 12px; scroll-margin-top: 76px; } .pc-legal .icon-section { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pc-brand-soft); border: 1px solid var(--pc-brand-line); color: var(--pc-brand); display: grid; place-items: center; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; } .pc-legal h3 { font-size: 15.5px; font-weight: 640; color: var(--pc-ink); margin: 22px 0 6px; } .pc-legal p, .pc-legal li { font-size: 14.5px; line-height: 1.7; color: var(--pc-ink-2); } .pc-legal p { margin: 0 0 12px; } .pc-legal ul, .pc-legal ol { padding-left: 21px; margin: 0 0 14px; } .pc-legal li + li { margin-top: 5px; } .pc-legal strong, .pc-legal b { color: var(--pc-ink); font-weight: 620; } .pc-legal a { color: var(--pc-brand); } .pc-legal .info-box, .pc-legal .warning-box { border: 1px solid var(--pc-line); border-left: 3px solid var(--pc-ink-3); border-radius: var(--pc-r-lg); background: var(--pc-surface-2); padding: 14px 16px; margin: 16px 0; font-size: 13.6px; line-height: 1.62; color: var(--pc-ink-2); } .pc-legal .info-box { border-color: var(--pc-brand-line); border-left-color: var(--pc-brand); background: var(--pc-brand-soft); } .pc-legal .warning-box { border-color: var(--pc-warn-line); border-left-color: var(--pc-warn); background: var(--pc-warn-soft); } .pc-legal .info-box strong:first-child, .pc-legal .warning-box strong:first-child { display: block; margin-bottom: 4px; } /* Utilitarele Tailwind ramase in continut, traduse pe tokens. */ .pc-legal .grid { display: grid; gap: 14px; } .pc-legal .gap-4 { gap: 14px; } @media (min-width: 760px) { .pc-legal .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pc-legal .bg-white\/5 { background: var(--pc-surface-2); } .pc-legal .border { border: 1px solid var(--pc-line); } .pc-legal .border-white\/10 { border-color: var(--pc-line); } .pc-legal .rounded-xl { border-radius: var(--pc-r-lg); } .pc-legal .rounded { border-radius: var(--pc-r-sm); } .pc-legal .p-5 { padding: 16px; } .pc-legal .p-4 { padding: 14px; } .pc-legal .px-2 { padding-inline: 7px; } .pc-legal .py-1 { padding-block: 2px; } .pc-legal .text-white { color: var(--pc-ink); } .pc-legal .text-slate-400 { color: var(--pc-ink-2); } .pc-legal .text-neon-green { color: var(--pc-brand); } .pc-legal .bg-neon-green\/20 { background: var(--pc-brand-soft); color: var(--pc-brand); } .pc-legal .hover\:border-neon-green\/30:hover { border-color: var(--pc-brand-line); } .pc-legal .text-sm { font-size: 13.4px; } .pc-legal .text-xs { font-size: 12px; } .pc-legal .text-2xl { font-size: 19px; font-weight: 650; color: var(--pc-ink); } .pc-legal .font-semibold { font-weight: 620; color: var(--pc-ink); } .pc-legal .inline-block { display: inline-block; } .pc-legal .list-none { list-style: none; padding-left: 0; } .pc-legal .ml-0 { margin-left: 0; } .pc-legal .mb-1 { margin-bottom: 4px; } .pc-legal .mb-2 { margin-bottom: 7px; } .pc-legal .mt-2 { margin-top: 7px; } .pc-legal .mt-4 { margin-top: 14px; } .pc-legal .mt-6 { margin-top: 20px; } .pc-legal .mt-8 { margin-top: 26px; } .pc-legal .transition { transition: border-color .12s, background .12s; } /* -------------------------------------------------------------------------- Punte pentru ghiduri: ajutor si bune practici. Aceeasi idee ca la paginile legale — continutul lor ramane cum e, doar clasele sunt remapate pe tokens. -------------------------------------------------------------------------- */ .pc-guide { max-width: 74ch; } .pc-guide .help-container { max-width: none; padding: 0; } .pc-guide .help-header { display: none; } /* titlul vine din banda de sus */ .pc-guide .help-section { margin-bottom: 34px; scroll-margin-top: 76px; } .pc-guide .help-section > h2 { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 660; letter-spacing: -.022em; color: var(--pc-ink); margin: 0 0 14px; } .pc-guide .icon-section { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pc-brand-soft); border: 1px solid var(--pc-brand-line); color: var(--pc-brand); display: grid; place-items: center; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; } .pc-guide h3 { font-size: 15.5px; font-weight: 645; color: var(--pc-ink); margin: 24px 0 7px; scroll-margin-top: 76px; } .pc-guide h4 { font-size: 14px; font-weight: 630; color: var(--pc-ink); margin: 18px 0 5px; } .pc-guide p, .pc-guide li { font-size: 14.5px; line-height: 1.7; color: var(--pc-ink-2); } .pc-guide p { margin: 0 0 12px; } .pc-guide ul, .pc-guide ol { padding-left: 21px; margin: 0 0 14px; } .pc-guide li + li { margin-top: 5px; } .pc-guide strong, .pc-guide b { color: var(--pc-ink); font-weight: 620; } .pc-guide table { width: 100%; border-collapse: collapse; font-size: 13.6px; margin: 0 0 16px; } .pc-guide th, .pc-guide td { padding: 9px 11px; border-bottom: 1px solid var(--pc-line); text-align: left; } .pc-guide th { font-weight: 640; color: var(--pc-ink); background: var(--pc-surface-2); } /* Casetele de nota, toate pe acelasi tipar: chenar subtire, o dunga la stanga. */ .pc-guide .info-box, .pc-guide .tip-box, .pc-guide .warning-box, .pc-guide .danger-box, .pc-guide .checklist-box, .pc-guide .result-box { border: 1px solid var(--pc-line); border-left: 3px solid var(--pc-ink-3); border-radius: var(--pc-r-lg); background: var(--pc-surface-2); padding: 14px 16px; margin: 16px 0; font-size: 13.8px; line-height: 1.62; } .pc-guide .info-box { border-color: var(--pc-brand-line); border-left-color: var(--pc-brand); background: var(--pc-brand-soft); } .pc-guide .tip-box { border-color: var(--pc-free-line); border-left-color: var(--pc-free); background: var(--pc-free-soft); } .pc-guide .warning-box { border-color: var(--pc-warn-line); border-left-color: var(--pc-warn); background: var(--pc-warn-soft); } .pc-guide .danger-box { border-color: var(--pc-crit-line); border-left-color: var(--pc-crit); background: var(--pc-crit-soft); } .pc-guide .checklist-box { border-left-color: var(--pc-ok); } .pc-guide .info-box p:last-child, .pc-guide .tip-box p:last-child, .pc-guide .warning-box p:last-child, .pc-guide .danger-box p:last-child, .pc-guide .result-box p:last-child { margin-bottom: 0; } /* Verdictele din ghidul de bune practici pastreaza semantica de risc: acolo verde/galben/rosu chiar inseamna rezultatul unei verificari. */ .pc-guide .result-negative { border-color: var(--pc-ok-line); border-left-color: var(--pc-ok); background: var(--pc-ok-soft); } .pc-guide .result-partial { border-color: var(--pc-warn-line); border-left-color: var(--pc-warn); background: var(--pc-warn-soft); } .pc-guide .result-positive { border-color: var(--pc-crit-line); border-left-color: var(--pc-crit); background: var(--pc-crit-soft); } .pc-guide .code-block { background: var(--pc-deep); color: var(--pc-deep-ink); border-radius: var(--pc-r); padding: 14px 16px; overflow-x: auto; font-family: var(--pc-mono); font-size: 12.8px; line-height: 1.6; margin: 0 0 16px; } .pc-guide .help-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; } /* --- lista de articole --- */ .pc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .pc-cardl { position: relative; background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); padding: 20px; display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; } .pc-cardl:hover { border-color: var(--pc-brand-line); box-shadow: var(--pc-shadow-2); } /* Toata cartela e tinta, dar linkul ramane un singur element accesibil. */ .pc-cardl__hit { position: absolute; inset: 0; border-radius: inherit; } .pc-cardl__hit:focus-visible { outline: 2px solid var(--pc-brand); outline-offset: 2px; } .pc-cardl__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--pc-ink-3); margin-bottom: 11px; } .pc-cardl h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 8px; color: var(--pc-ink); } .pc-cardl:hover h2 { color: var(--pc-brand); } .pc-cardl p { font-size: 13.4px; color: var(--pc-ink-2); line-height: 1.6; margin: 0 0 16px; } .pc-cardl__go { margin-top: auto; font-size: 12.8px; font-weight: 600; color: var(--pc-brand); } .pc-cardl__go::after { content: " →"; } /* Segmentele de filtrare din lista de articole sunt linkuri, nu butoane. */ .pc-seg a { padding: 5px 12px; border-radius: var(--pc-r-sm); font-size: 12.5px; font-weight: 550; color: var(--pc-ink-2); } .pc-seg a:hover { color: var(--pc-ink); text-decoration: none; } .pc-seg a[aria-current="page"] { background: var(--pc-surface); color: var(--pc-ink); box-shadow: var(--pc-shadow-1); } /* --- articol --- */ .pc-article { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; } .pc-article__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--pc-ink-3); padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--pc-line); } .pc-article__aside { position: sticky; top: 76px; display: grid; gap: 18px; } @media (max-width: 900px) { .pc-article { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pc-article__aside { position: static; } } /* ========================================================================== 11. DOCUMENTATIE API Blocurile de cod raman pe fundal inchis: e conventia in documentatia pentru dezvoltatori si, practic, evidentierea sintaxei are nevoie de contrast. Restul paginii sta pe acelasi sistem ca tot ce e public. ========================================================================== */ .pc-api__ep { border: 1px solid var(--pc-line); border-radius: var(--pc-r-lg); background: var(--pc-surface); margin-bottom: 22px; overflow: hidden; scroll-margin-top: 76px; } .pc-api__hd { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--pc-line); background: var(--pc-surface-2); } .pc-api__verb { font-family: var(--pc-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: var(--pc-r-sm); background: var(--pc-brand-soft); border: 1px solid var(--pc-brand-line); color: var(--pc-brand); } .pc-api__verb.is-post { background: var(--pc-warn-soft); border-color: var(--pc-warn-line); color: var(--pc-warn); } .pc-api__path { font-family: var(--pc-mono); font-size: 13.4px; font-weight: 600; color: var(--pc-ink); overflow-wrap: anywhere; } .pc-api__path em { font-style: normal; color: var(--pc-brand); } .pc-api__cost { margin-left: auto; } .pc-api__bd { padding: 16px; } .pc-api__bd > p:first-child { margin-top: 0; font-size: 13.8px; color: var(--pc-ink-2); line-height: 1.6; } .pc-api__lab { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-3); margin: 20px 0 8px; } .pc-api__lab:first-child { margin-top: 0; } /* Taburi de limbaj. Radio-uri ascunse: functioneaza si fara JavaScript. */ .pc-tabs { border: 1px solid var(--pc-line-2); border-radius: var(--pc-r); overflow: hidden; } .pc-tabs > input { position: absolute; opacity: 0; pointer-events: none; } .pc-tabs__bar { display: flex; background: var(--pc-surface-3); border-bottom: 1px solid var(--pc-line-2); } .pc-tabs__bar label { padding: 8px 15px; cursor: pointer; margin: 0; font-size: 12.2px; font-weight: 600; color: var(--pc-ink-3); border-bottom: 2px solid transparent; } .pc-tabs__bar label:hover { color: var(--pc-ink); } .pc-tabs__pane { display: none; } .pc-tabs > input:nth-of-type(1):checked ~ .pc-tabs__bar label:nth-of-type(1), .pc-tabs > input:nth-of-type(2):checked ~ .pc-tabs__bar label:nth-of-type(2), .pc-tabs > input:nth-of-type(3):checked ~ .pc-tabs__bar label:nth-of-type(3) { color: var(--pc-brand); border-bottom-color: var(--pc-brand); background: var(--pc-surface); } .pc-tabs > input:nth-of-type(1):checked ~ .pc-tabs__pane:nth-of-type(1), .pc-tabs > input:nth-of-type(2):checked ~ .pc-tabs__pane:nth-of-type(2), .pc-tabs > input:nth-of-type(3):checked ~ .pc-tabs__pane:nth-of-type(3) { display: block; } .pc-tabs > input:focus-visible ~ .pc-tabs__bar label { outline: 2px solid var(--pc-brand); outline-offset: -2px; } .pc-code { position: relative; background: var(--pc-deep); margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--pc-mono); font-size: 12.4px; line-height: 1.65; color: #D7DBEF; white-space: pre; tab-size: 2; } .pc-code .c-com { color: #7E85AE; } .pc-code .c-str { color: #9BD6A4; } .pc-code .c-key { color: #9FB0FF; } .pc-code .c-num { color: #E5B78B; } .pc-code .c-fn { color: #E0C4FF; } .pc-copy { position: absolute; top: 8px; right: 8px; border: 1px solid var(--pc-deep-line); background: rgba(255, 255, 255, .06); color: var(--pc-deep-ink-2); border-radius: var(--pc-r-sm); padding: 3px 9px; font-family: var(--pc-sans); font-size: 11px; font-weight: 550; cursor: pointer; } .pc-copy:hover { background: rgba(255, 255, 255, .12); color: #fff; } .pc-api__tbl { width: 100%; border-collapse: collapse; font-size: 13.2px; } .pc-api__tbl th, .pc-api__tbl td { padding: 8px 11px; border-bottom: 1px solid var(--pc-line); text-align: left; vertical-align: top; } .pc-api__tbl th { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--pc-ink-3); background: var(--pc-surface-2); } .pc-api__tbl code { font-family: var(--pc-mono); font-size: 12.2px; color: var(--pc-ink); } .pc-api__tbl td:last-child { color: var(--pc-ink-2); } /* -------------------------------------------------------------------------- Navigatie: meniu pentru ecrane inguste + potrivirea cu paginile de cont. -------------------------------------------------------------------------- */ .pc-nav2__burger { display: none; position: relative; margin-left: 8px; } .pc-nav2__burger > summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--pc-line-2); border-radius: var(--pc-r); color: var(--pc-ink-2); } .pc-nav2__burger > summary::-webkit-details-marker { display: none; } .pc-nav2__burger > summary svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; } .pc-nav2__burger[open] > summary { background: var(--pc-surface-3); color: var(--pc-ink); } .pc-nav2__burger > nav { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 210px; display: grid; background: var(--pc-surface); border: 1px solid var(--pc-line-2); border-radius: var(--pc-r-lg); box-shadow: var(--pc-shadow-2); padding: 6px; } .pc-nav2__burger > nav a { padding: 8px 11px; border-radius: var(--pc-r); font-size: 13.2px; color: var(--pc-ink); } .pc-nav2__burger > nav a:hover { background: var(--pc-surface-3); text-decoration: none; } @media (max-width: 860px) { .pc-nav2__go { margin-left: auto; } .pc-nav2__burger { display: block; } /* Butonul de autentificare incape si pe telefon; restul intra in meniu. */ .pc-nav2__go .pc-btn:not(.pc-btn--pri) { display: none; } } /* Paginile de cont au acum antet si subsol: ecranul nu mai e inaltimea intreaga. */ .pc-auth { min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); } .pc-auth__side > footer { display: none; } /* subsolul comun il inlocuieste */ /* -------------------------------------------------------------------------- Meniul de cont din bara laterală. `list-style:none` scoate triunghiul implicit al
, deci rezumatul arăta ca text simplu: nimeni nu ghicea că se deschide, iar Deconectarea era de negăsit. Punem o săgeată proprie și comportament de control. -------------------------------------------------------------------------- */ .pc-menu > summary { padding: 7px 9px; border-radius: var(--pc-r); border: 1px solid transparent; transition: background .12s, border-color .12s; } .pc-menu > summary::-webkit-details-marker { display: none; } .pc-menu > summary:hover { background: var(--pc-surface-3); } .pc-menu[open] > summary { background: var(--pc-surface-3); border-color: var(--pc-line); } .pc-menu > summary:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; } .pc-menu__chev { margin-left: auto; flex: none; width: 15px; height: 15px; stroke: var(--pc-ink-3); fill: none; stroke-width: 2; transition: transform .15s; } .pc-menu[open] .pc-menu__chev { transform: rotate(180deg); } /* Deconectarea e ultima si separata: e singura actiune din meniu care te scoate. */ .pc-menu .pc-nav__i.is-out { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--pc-line); border-radius: 0 0 var(--pc-r) var(--pc-r); color: var(--pc-crit); } .pc-menu .pc-nav__i.is-out:hover { background: var(--pc-crit-soft); } .pc-menu .pc-nav__i.is-out svg { stroke: currentColor; }