/* ============================================================================ stil.v1.css — sistemul de design „Ștampila" (varianta H, maturizată) Asociația Profesioniștilor în Tehnologie Juridică · accesdirect-just.ro ---------------------------------------------------------------------------- Fundația comună a tuturor paginilor (/, /instrumente/, /despre/, /ghiduri/…). Regulă de versionare: schimbarea = bump de nume (stil.v2.css), pentru că nginx servește *.css cu cache immutable. Convenție: clasele păstrează numele din homepage-ul H validat de echipă — NU se redenumesc. Componentele noi sunt marcate [NOU]. Manifestul componentelor: _bmad-output/.../.working/stil-manifest.md ========================================================================== */ /* ============ 1. TOKENS ============ Paleta H: hârtie de dosar + teal instituțional. Teracota (--terra) este REZERVATĂ graficii și evidențierilor (ștampila AI, urechi de filă) — nu se folosește pe text de conținut sau butoane. */ :root{ --bg:#fbfcfd; /* fundalul general al paginii */ --panel:#ffffff; /* fundal fișe/panouri */ --paper:#faf7f0; /* hârtie de dosar — token H, decizie asumată (design-runda3 §Addendum 11) */ --ink:#101720; /* text principal */ --ink-soft:#3d4854; /* text secundar */ --teal:#0b5c58; /* culoarea instituțională — linkuri, butoane, ștampila-verificare */ --teal-dark:#08423f; /* hover pe teal */ --terra:#b4441f; /* teracotă — DOAR grafică și evidențieri (ștampila AI) */ --mint:#12b886; /* confirmări, bife */ --mint-tint:#e6f7f0; /* fundal confirmări */ --line:#dbe2e8; /* linii standard */ --line-soft:#e8edf2; /* linii discrete */ --line-strong:#b9c4cd; /* linii accentuate, perforații */ --r:8px; /* raza standard */ --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } /* ============ 2. RESET + BAZĂ ============ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body);font-size:1rem;line-height:1.6;color:var(--ink); background:var(--bg);-webkit-font-smoothing:antialiased; } img,svg{max-width:100%;display:block} a{color:var(--teal)} h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-0.015em;font-weight:700} button{font:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px} ::selection{background:var(--mint-tint)} [id]{scroll-margin-top:4.5rem} /* ancorele nu se ascund sub headerul sticky */ /* ============ 3. SKIP-LINK + SR-ONLY ============ .skip-link — primul element din , sare la #continut (id-ul lui
). */ .skip-link{ position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff; padding:.6rem 1rem;border-radius:0 0 var(--r) 0;font-weight:600;text-decoration:none; } .skip-link:focus{left:0} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ============ 4. UTILITARE ============ .wrap — containerul standard (max 72rem, padding fluid) .eyebrow — supratitlu mono deasupra oricărui h2 de secțiune .sec-head— capul de secțiune (eyebrow + h2 + p) .paper-ruled [NOU] — grila de „hârtie de registru": fundal-semnătură al sistemului; hero-ul o are inclusă, subpaginile o aplică pe orice bandă care trebuie să arate a dosar. */ .wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)} .mono{font-family:var(--mono)} .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--teal); } section{padding-block:clamp(3rem,7vw,5.5rem)} .sec-head{max-width:44rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)} .sec-head h2{font-size:clamp(1.6rem,3.2vw,2.35rem);margin-top:.5rem} .sec-head p{color:var(--ink-soft);margin-top:.75rem} .sec-more{margin-top:1.5rem} .paper-ruled{ background-color:var(--paper); background-image:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(11,92,88,.05) 30px 31px); } /* ============ 5. PANOUL CU COLȚARE (.panel) ============ Fișa de bază a sistemului: chenar + două colțare teal (sus-stânga, jos-dreapta) care citează colțarele de dosar. Orice card e un .panel. */ .panel{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r); } .panel::before,.panel::after{ content:"";position:absolute;width:11px;height:11px;pointer-events:none; } .panel::before{top:-1px;left:-1px;border-top:2px solid var(--teal);border-left:2px solid var(--teal);border-top-left-radius:var(--r)} .panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--teal);border-right:2px solid var(--teal);border-bottom-right-radius:var(--r)} /* ============ 6. BADGE-URI DE STATUS ============ .badge (neutru) · .badge-live (verde, „Funcționează acum/Live") · .badge-dev (gri, „În dezvoltare"). Punctul .dot e semaforul. */ .badge{ display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono); font-size:.7rem;font-weight:500;letter-spacing:.04em;padding:.25rem .6rem; border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft); white-space:nowrap; } .badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--line);flex:none} .badge-live{border-color:#bfe8d8;background:var(--mint-tint);color:var(--teal-dark)} .badge-live .dot{background:var(--mint)} .badge-dev{border-color:#cdd8e2;background:#f1f5f8;color:var(--ink-soft)} .badge-dev .dot{background:#8fa3b3} /* ============ 7. ETICHETE-ȘTAMPILĂ (text real, nu imagine) ============ .tag-ill — mini-ștampila dreptunghiulară „exemplu ilustrativ"/„demo" .reg-label — eticheta de registratură (mono, ușor rotită) — capul de dosar din hero și breadcrumbul vizual al subpaginilor. */ .tag-ill{ display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft); border:1.5px solid currentColor;border-radius:3px;padding:.16rem .55rem; background:transparent;transform:rotate(-1.4deg);opacity:.9; } .reg-label{ display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft); border:1.5px solid rgba(61,72,84,.75);border-radius:3px;padding:.28rem .75rem; transform:rotate(-1.2deg);margin-bottom:1rem;background:rgba(255,255,255,.4); } /* ============ 8. LINIA PERFORATĂ (.perf) ============ Separatorul consecvent între secțiuni: