/* ============================================================================
dn-auth.css — paginile de autentificare: index.php, inregistrare.php,
recuperare.php.
Se include ULTIMUL in , dupa bootstrap.min.css / app.min.css, ca sa
bata sablonul Ubold. Blocul de tema din _setari.php (tokenii --cn-*) se
emite si mai devreme, inaintea lui , deci variabilele sunt deja
definite cand se citeste fisierul asta.
Ce inlocuieste: sablonul `auth-fluid` din Ubold, adica panoul alb de 480px
lipit de marginea stanga plus fotografia de stoc `bg-auth.jpg` cu un
testimonial de ~90 de cuvinte peste ea. Nimic din toate astea nu era din
paleta aplicatiei: bej si maro langa un canvas gri-cald si carduri albe.
Principiu: pagina de autentificare arata ca prima pagina din aplicatie, nu
ca o pagina de prezentare. Acelasi card alb pe canvas, aceeasi raza de 16px,
acelasi chenar, aceeasi umbra. Formularul isi pastreaza clasele Bootstrap
(.form-control, .btn-primary), deci se coloreaza singur din tema — daca se
schimba --cn-primary in _setari.php, se schimba si aici, fara sa umblam in
fisierul asta.
TOATE culorile de aici vin din tokeni. Nu scrie hex direct: nu ar urma
modul intunecat. Singura exceptie e specimenul de eticheta (.dn-auth__spec),
unde negrul pe hartie e intentionat in ambele teme — vezi comentariul de
acolo.
========================================================================= */
/* ---------------------------------------------------------------------------
1. Tokeni proprii paginii
Doi tokeni pe care paleta aplicatiei nu-i acopera:
--dn-auth-panou: fundalul panoului din dreapta. NU folosim --cn-paper
direct, desi asta e „hartia" temei: blocul de dark mode din _setari.php
(cauta `2) Detectare dark mode`) redefineste --cn-bg, --cn-surface,
--cn-line s.a.m.d., dar NU si --cn-paper. Pe intuneric ar fi ramas bejul
#f7f3ea, adica un dreptunghi luminos pe o pagina inchisa. Il legam explicit
mai jos, la sectiunea de dark mode.
--dn-auth-hartie / --dn-auth-cerneala: specimenul de eticheta.
------------------------------------------------------------------------ */
.dn-auth{
--dn-auth-panou: var(--cn-paper, #f7f3ea);
--dn-auth-hartie: #fffdf8;
--dn-auth-cerneala: #1c1917;
--dn-auth-cerneala-2: #44403c;
--dn-auth-latime-card: 400px;
}
/* Dark mode. Selectorii sunt copiati din _setari.php („acoperim mai multe
variante"): Ubold scrie atributul cand pe , cand pe , in functie
de unde vine setarea — head.js il pune pe , comutatorul din
_setaritema.php pe . Daca acoperi doar una, pagina ramane pe jumatate
in cealalta tema. */
body[data-layout-mode="dark"] .dn-auth,
body[data-bs-theme="dark"] .dn-auth,
html[data-bs-theme="dark"] body .dn-auth,
[data-theme="dark"] body .dn-auth{
/* O treapta peste card, in loc de bej. Aceeasi idee ca --cn-nivel-1 din
tema: ierarhia se citeste din culoare, nu din umbra. */
--dn-auth-panou: color-mix(in srgb, var(--cn-primary) 6%, var(--cn-surface));
/* Hartia se stinge putin: alb pur pe o pagina intunecata straluceste. */
--dn-auth-hartie: #f5f2eb;
}
/* ---------------------------------------------------------------------------
2. Scena
`margin: auto` pe copil, nu `align-items: center` pe parinte: la centrare cu
align-items, un card mai inalt decat ecranul se taie IN SUS si nu mai poti
ajunge la primul camp cu scroll. Se vede pe inregistrare.php, care are opt
campuri. Cu `margin:auto` centrarea e identica, dar surplusul iese in jos,
unde exista scroll.
------------------------------------------------------------------------ */
.dn-auth{
min-height: 100vh;
display: flex;
padding: clamp(1rem, 4vw, 3rem) 1rem;
background: var(--cn-bg);
}
.dn-auth__scena{
margin: auto;
width: min(1140px, 100%);
display: grid;
grid-template-columns: minmax(0, var(--dn-auth-latime-card)) minmax(0, 1fr);
gap: clamp(1.25rem, 3vw, 2.5rem);
align-items: center;
}
/* Sub 992px scena devine o singura coloana. Ascunderea panoului NU se face
aici, ci la finalul sectiunii 7, dupa ce panoul isi primeste `display: grid`:
ambele reguli au aceeasi specificitate (0,1,0), deci decide ordinea din
fisier, iar un `display: none` scris inainte ar fi fost anulat de `display:
grid` scris dupa. Asa si aratase prima varianta pe telefon — panoul ramanea
vizibil, mutat sub formular. */
@media (max-width: 991.98px){
.dn-auth__scena{
grid-template-columns: minmax(0, 1fr);
max-width: 460px;
}
}
/* ---------------------------------------------------------------------------
3. Cardul de formular
Nu foloseste clasa .card a temei intentionat: `_setari.php` are un set de
reguli pe `.card > .card-header` (fundal pe treapta tonala, raze calculate,
`overflow`) care aici n-au ce cauta si care s-ar aplica peste orice element
ajunge primul in card. Valorile sunt insa aceleasi, luate din aceiasi
tokeni, deci cardul e vizual identic cu cele din aplicatie.
------------------------------------------------------------------------ */
.dn-auth__card{
background: var(--cn-surface);
border: 1px solid var(--cn-line);
border-radius: var(--cn-radius, 16px);
box-shadow: var(--cn-shadow, 0 10px 28px rgba(15,23,42,.08));
padding: clamp(1.5rem, 3vw, 2.25rem);
display: flex;
flex-direction: column;
gap: 1.5rem;
color: var(--cn-text);
}
/* Logo. Inaltime fixa si latime calculata, exact ca in _sidebar.php: sablonul
punea `width:190px;height:60px` pe un fisier de 600x249, adica cerea un
raport de 3,17 de la o imagine cu raportul 2,41 — logo-ul iesea vizibil
intins pe orizontala.
`align-self: flex-start` ca zona de clic sa se opreasca la marginea
logo-ului: cardul e un flex column, deci fara asta ancora s-ar intinde pe
toata latimea si ar fi clicabil si spatiul gol din dreapta lui. */
.dn-auth__brand{
display: inline-block;
align-self: flex-start;
line-height: 0;
}
.dn-auth__brand img{
height: 56px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Comutarea intre cele doua logo-uri, pentru cand va exista al doilea.
Azi `_auth_brand.php` emite un singur ![]()
,
fiindca logo-dark.png, logo-dark-2.png si logo-light-2.png sunt acelasi
fisier byte cu byte — nu exista o varianta desenata pentru fundal inchis.
Regulile raman scrise: cand apare fisierul, se adauga ![]()
si atat. */
.dn-auth__brand .dn-auth__logo-light{ display: none; }
body[data-layout-mode="dark"] .dn-auth__brand .dn-auth__logo-light,
body[data-bs-theme="dark"] .dn-auth__brand .dn-auth__logo-light,
html[data-bs-theme="dark"] body .dn-auth__brand .dn-auth__logo-light,
[data-theme="dark"] body .dn-auth__brand .dn-auth__logo-light{ display: block; }
body[data-layout-mode="dark"] .dn-auth__brand:has(.dn-auth__logo-light) .dn-auth__logo-dark,
body[data-bs-theme="dark"] .dn-auth__brand:has(.dn-auth__logo-light) .dn-auth__logo-dark,
html[data-bs-theme="dark"] body .dn-auth__brand:has(.dn-auth__logo-light) .dn-auth__logo-dark,
[data-theme="dark"] body .dn-auth__brand:has(.dn-auth__logo-light) .dn-auth__logo-dark{ display: none; }
/* Placuta alba de sub logo, doar pe tema intunecata.
Logo-ul are textul intr-un albastru mediu, desenat pentru hartie alba; pe
--cn-surface (#111b31) da un contrast de ~2,5:1, adica se ghiceste mai
degraba decat se citeste. Pana cand exista un logo pentru fundal inchis,
ii dam hartia lui inapoi. Colturile si spatiul sunt cat sa arate ca o
eticheta lipita, nu ca o eroare de transparenta. */
body[data-layout-mode="dark"] .dn-auth__brand,
body[data-bs-theme="dark"] .dn-auth__brand,
html[data-bs-theme="dark"] body .dn-auth__brand,
[data-theme="dark"] body .dn-auth__brand{
background: #fff;
border-radius: var(--cn-radius-sm, 12px);
padding: .6rem .85rem;
align-self: flex-start;
}
.dn-auth__titlu{
display: flex;
flex-direction: column;
gap: .25rem;
}
.dn-auth__titlu h1{
margin: 0;
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -.01em;
color: var(--cn-text);
text-wrap: balance;
}
.dn-auth__titlu p{
margin: 0;
font-size: .875rem;
color: var(--cn-muted);
}
/* ---------------------------------------------------------------------------
4. Formular
Distantele le da `gap`, nu marginile .mb-3 ale Bootstrap-ului: intre doua
campuri alaturate marginile se aduna cu gap-ul si ies spatii inegale acolo
unde un camp are eticheta cu link (Parola) si altul nu.
------------------------------------------------------------------------ */
.dn-auth__form{
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.dn-auth__form .mb-3{ margin-bottom: 0 !important; }
.dn-auth__camp{
display: flex;
flex-direction: column;
gap: .4rem;
}
/* Randul etichetei. `baseline` ca „Parola" si „Ai uitat parola?" sa stea pe
aceeasi linie de scris, desi au corpuri diferite. */
.dn-auth__eticheta-rand{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.dn-auth__camp .form-label{
margin: 0;
font-weight: 600;
font-size: .875rem;
color: var(--cn-text);
}
/* „Ai uitat parola?" era `.text-muted float-end` intr-un : gri deschis,
12px, fara nimic care sa spuna ca e un link. E singura iesire pentru cineva
care nu poate intra in cont, deci arata ca un link. */
.dn-auth__link-mic{
font-size: .8125rem;
font-weight: 600;
color: var(--cn-primary-ink);
text-decoration: none;
white-space: nowrap;
}
.dn-auth__link-mic:hover,
.dn-auth__link-mic:focus{
color: var(--cn-primary-2);
text-decoration: underline;
}
/* Inaltimea si spatiul interior al campurilor. Restul (fundal pe treapta
tonala, raza 999px, chenar, inelul de focus) vine din _setari.php si NU se
repeta aici — daca se schimba acolo, se schimba si pe paginile astea. */
.dn-auth .form-control{
min-height: 46px;
padding: .55rem 1.15rem;
font-size: .9375rem;
}
/* Campul de parola cu butonul-ochi in interiorul pilulei.
Sablonul folosea `.input-group.input-group-merge`, care lipeste de pilula un
patrat gri cu colturi drepte — doua forme care nu se potrivesc. */
.dn-auth__parola{
position: relative;
display: block;
}
.dn-auth__parola .form-control{
padding-right: 3rem;
}
.dn-auth__ochi{
position: absolute;
right: .4rem;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--cn-muted);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color .12s ease, color .12s ease;
}
.dn-auth__ochi:hover{
background: var(--cn-primary-soft);
color: var(--cn-primary-ink);
}
.dn-auth__ochi:focus-visible{
outline: none;
box-shadow: var(--cn-ring, 0 0 0 4px rgba(37,99,235,.28));
color: var(--cn-primary-ink);
}
.dn-auth__ochi svg{
width: 18px;
height: 18px;
display: block;
}
/* Linia taiata peste ochi apare doar cand parola e vizibila. */
.dn-auth__ochi .dn-auth__ochi-taiat{ display: none; }
.dn-auth__ochi[aria-pressed="true"] .dn-auth__ochi-taiat{ display: block; }
/* Bifa „Sesiune prelungita". Bootstrap-ul o deseneaza cu o imagine de fundal
SVG cu bifa alba; o lasam pe a lui si ii dam doar culoarea brandului, ca sa
nu ramana pe albastrul #2892fd al temei. */
.dn-auth__retine{
display: flex;
align-items: center;
gap: .55rem;
margin: 0;
font-size: .875rem;
color: var(--cn-text);
cursor: pointer;
}
.dn-auth__retine .form-check-input{
margin: 0;
float: none;
width: 18px;
height: 18px;
flex: none;
cursor: pointer;
}
/* Butonul principal. Culorile vin din .btn-primary (tema), aici doar forma. */
.dn-auth__form .btn-primary{
width: 100%;
min-height: 46px;
font-size: .9375rem;
}
/* ---------------------------------------------------------------------------
5. Alertele PHP (cont inactiv, date gresite, cont creat)
Paginile le emit din PHP cu clasele Bootstrap. Le dam doar raza cardului si
scoatem marginea de jos, ca sa intre in ritmul de `gap` al cardului.
------------------------------------------------------------------------ */
.dn-auth__card .alert{
margin: 0;
border-radius: var(--cn-radius-sm, 12px);
font-size: .875rem;
}
/* ---------------------------------------------------------------------------
6. Subsolul cardului
------------------------------------------------------------------------ */
.dn-auth__subsol{
padding-top: 1.25rem;
border-top: 1px solid var(--cn-line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: .875rem;
color: var(--cn-muted);
}
.dn-auth__subsol a{
font-weight: 700;
color: var(--cn-primary-ink);
text-decoration: none;
}
.dn-auth__subsol a:hover,
.dn-auth__subsol a:focus{
color: var(--cn-primary-2);
text-decoration: underline;
}
/* Comutatorul de limba. Exista in aplicatie (_topbar.php), dar lipsea de pe
autentificare — adica exact acolo unde un utilizator strain nu are cum sa
ajunga la el, fiindca bara de sus e dupa login. */
.dn-auth__limbi{
display: flex;
gap: .25rem;
}
.dn-auth__limbi a{
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
padding: .2rem .55rem;
border-radius: 999px;
color: var(--cn-muted);
border: 1px solid transparent;
text-decoration: none;
}
.dn-auth__limbi a:hover{
color: var(--cn-text);
background: var(--cn-surface-2, rgba(0,0,0,.04));
text-decoration: none;
}
.dn-auth__limbi a[aria-current="true"]{
color: var(--cn-primary-ink);
background: var(--cn-primary-soft);
border-color: rgba(var(--cn-primary-rgb, 37,99,235), .25);
}
/* ---------------------------------------------------------------------------
7. Panoul din dreapta
Inlocuieste fotografia de stoc. Contine trei rubrici care oglindesc
sectiunile din meniul aplicatiei (Retete, Etichete si Rapoarte, Meniu QR) si
un specimen de declaratie nutritionala — obiectul pe care il produce
aplicatia. E o alegere de continut, nu de decor: cine ajunge aici stie in
doua secunde ce face platforma, ceea ce cele 90 de cuvinte de testimonial nu
spuneau.
------------------------------------------------------------------------ */
.dn-auth__panou{
background: var(--dn-auth-panou);
border: 1px solid var(--cn-line);
border-radius: var(--cn-radius, 16px);
padding: clamp(1.5rem, 3vw, 2.5rem);
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 2rem;
align-items: center;
position: relative;
overflow: hidden;
color: var(--cn-text);
}
/* Aura de brand din coltul de jos-dreapta. Un singur gradient radial, foarte
slab (10%), ca panoul sa nu fie o suprafata complet plata. */
.dn-auth__panou::before{
content: "";
position: absolute;
right: -20%;
bottom: -40%;
width: 60%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--cn-primary-rgb, 37,99,235), .10), transparent 70%);
pointer-events: none;
}
/* Sub 1180px specimenul trece sub text, altfel se ingusteaza atat incat
randurile din tabel se rup pe doua linii si eticheta nu mai arata a eticheta. */
@media (max-width: 1180px){
.dn-auth__panou{ grid-template-columns: minmax(0, 1fr); }
.dn-auth__spec{ justify-self: start; width: 320px; transform: rotate(-1.5deg); }
}
.dn-auth__panou-text{
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
}
.dn-auth__eyebrow{
font-size: .75rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cn-primary-ink);
}
.dn-auth__panou h2{
margin: 0;
font-size: clamp(1.375rem, 2.4vw, 1.75rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.015em;
color: var(--cn-text);
text-wrap: balance;
max-width: 22ch;
}
.dn-auth__beneficii{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .9rem;
}
.dn-auth__beneficii li{
display: grid;
grid-template-columns: 34px 1fr;
gap: .8rem;
align-items: start;
}
.dn-auth__ic{
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--cn-primary-soft);
color: var(--cn-primary-ink);
border: 1px solid rgba(var(--cn-primary-rgb, 37,99,235), .18);
display: grid;
place-items: center;
}
.dn-auth__ic svg{ width: 18px; height: 18px; display: block; }
.dn-auth__beneficii b{
display: block;
font-weight: 700;
font-size: .9375rem;
color: var(--cn-text);
}
.dn-auth__beneficii span{
display: block;
font-size: .875rem;
color: var(--cn-muted);
max-width: 34ch;
}
/* ---------------------------------------------------------------------------
8. Specimenul de declaratie nutritionala
Singurul loc din fisier cu culori scrise direct, si e intentionat: eticheta
e un obiect tiparit pe hartie. Negru pe hartie in ambele teme, fiindca asa
arata si cand iese din imprimanta — daca ar urma tema, in modul intunecat ar
deveni o eticheta alba pe negru, care nu exista in realitate. Tokenii
--dn-auth-hartie / --dn-auth-cerneala sunt definiti mai sus tocmai ca
exceptia sa fie explicita, iar hartia se stinge putin pe intuneric.
Continutul (Energie / Grasimi / din care saturate / ...) foloseste
formularile din Reg. (UE) 1169/2011, aceleasi variabile $lang_* ca etichetele
reale exportate de aplicatie.
------------------------------------------------------------------------ */
.dn-auth__spec{
margin: 0;
background: var(--dn-auth-hartie);
color: var(--dn-auth-cerneala);
border: 1.5px solid var(--dn-auth-cerneala);
border-radius: 6px;
padding: .8rem .9rem;
box-shadow: 0 18px 40px rgba(15,23,42,.14), inset 0 2px 0 rgba(255,255,255,.6);
transform: rotate(-2deg);
/* 12px: sub asta randul „din care acizi grasi saturati" se rupe in doua,
iar o eticheta cu randuri rupte nu mai arata a eticheta. Latimea coloanei
(320px, mai sus) e aleasa impreuna cu marimea asta. */
font-size: .75rem;
line-height: 1.35;
position: relative;
font-variant-numeric: tabular-nums;
}
.dn-auth__spec-cap{
font-weight: 800;
font-size: .875rem;
letter-spacing: -.01em;
border-bottom: 3px solid var(--dn-auth-cerneala);
padding-bottom: .3rem;
margin-bottom: .35rem;
}
.dn-auth__spec-per{
display: flex;
justify-content: space-between;
font-weight: 700;
border-bottom: 1px solid var(--dn-auth-cerneala);
padding: .15rem 0;
}
/* `!important` pe culoare, si e singurul loc din fisier unde chiar trebuie.
Blocul de tema din _setari.php are, pentru modul intunecat:
html[data-bs-theme="dark"] table { color: var(--cn-text) !important; }
adica alb pe orice tabel din aplicatie. Specimenul e insa hartie tiparita,
nu o suprafata a interfetei: fara exceptia asta, in modul intunecat toate
randurile lui ieseau alb pe crem, adica invizibile. (Randurile „din care..."
scapau, fiindca aveau deja o culoare proprie — de aici si simptomul ciudat,
ca se vedea doar jumatate din eticheta.) */
.dn-auth__spec,
.dn-auth__spec table{
width: auto;
border-collapse: collapse;
color: var(--dn-auth-cerneala) !important;
}
.dn-auth__spec table{ width: 100%; }
.dn-auth__spec td{
padding: .18rem 0;
border-bottom: 1px solid rgba(28,25,23,.25);
vertical-align: top;
color: var(--dn-auth-cerneala) !important;
background: transparent !important;
}
.dn-auth__spec td:last-child{
text-align: right;
white-space: nowrap;
font-weight: 700;
padding-left: .6rem;
}
.dn-auth__spec tr.dn-auth__spec-sub td{
padding-left: .9rem;
font-weight: 400;
color: var(--dn-auth-cerneala-2) !important;
}
.dn-auth__spec tr.dn-auth__spec-sub td:last-child{ font-weight: 400; }
.dn-auth__spec tr:last-child td{ border-bottom: 3px solid var(--dn-auth-cerneala); }
.dn-auth__spec-alergeni{
margin-top: .45rem;
font-size: .72rem;
color: var(--dn-auth-cerneala-2);
}
.dn-auth__spec-alergeni b{ color: var(--dn-auth-cerneala); }
/* Ascunderea panoului pe ecran mic. Sta AICI, dupa toate regulile lui, nu sus
langa celelalte reguli responsive: `.dn-auth__panou{display:grid}` de mai sus
are aceeasi specificitate, deci ar fi castigat prin ordine.
Pe telefon utilizatorul a venit sa intre in cont; trei rubrici si un specimen
de eticheta doar i-ar impinge butonul „Autentificare" sub linia de plutire.
Pe inregistrare, unde formularul are opt campuri, ar fi si mai jos. */
@media (max-width: 991.98px){
.dn-auth__panou{ display: none; }
}
/* Pastila verde. Foloseste --cn-success (5.48:1 cu alb), nu verdele deschis al
temei, care da 1.93:1 si face eticheta ilizibila. */
.dn-auth__spec-stampila{
position: absolute;
right: -10px;
top: -12px;
background: var(--cn-success, #2f7d4f);
color: #fff;
font-size: .66rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
padding: .25rem .55rem;
border-radius: 999px;
transform: rotate(4deg);
box-shadow: 0 4px 10px rgba(var(--cn-success-rgb, 47,125,79), .35);
}
/* ---------------------------------------------------------------------------
9. Detalii de sistem
------------------------------------------------------------------------ */
/* Butonul rotund „Sus" vine din _buton_sus.php, inclus de blocul de tema din
_setari.php pe toate paginile. Pe autentificare n-are ce sa deruleze. */
.dn-auth-body .dn-sus{ display: none !important; }
/* Sablonul Ubold punea `padding-bottom` pe body pentru footerul fix al
aplicatiei; aici footerul e in card. */
.dn-auth-body{
background: var(--cn-bg);
min-height: 100vh;
}
@media (prefers-reduced-motion: no-preference){
.dn-auth__card,
.dn-auth__panou{
animation: dn-auth-apare .45s ease both;
}
.dn-auth__panou{ animation-delay: .08s; }
@keyframes dn-auth-apare{
from{ opacity: 0; transform: translateY(8px); }
to{ opacity: 1; transform: none; }
}
}
/* ---------------------------------------------------------------------------
10. Varianta lata — inregistrare.php
Login-ul are doua campuri, inregistrarea are opt. Pe latimea comuna de 400px
iesea o coloana de 1086px, adica un formular pe care nu-l vedeai niciodata
intreg: cat completai campurile de sus, butonul „Inregistrare" statea sub
linia de plutire.
Cardul primeste 620px si campurile se aseaza pe doua coloane, deci opt
campuri incap in sase randuri. Login-ul si recuperarea raman la 400: acolo o
latime dubla ar fi un dreptunghi gol in jurul a doua campuri.
Cat s-a castigat, masurat pe pagina: asezarea pe doua coloane scoate ~150px,
dar cele doua titluri de grup si randul de ajutor de la C.U.I. pun la loc
~95, deci cardul trece de la 1086px la 1030. Pe un laptop obisnuit (~900px
utili) tot se deruleaza putin. E o imbunatatire, nu o rezolvare: inaltimea o
dau cele opt campuri, si singurul mod de a o taia serios ar fi sa se renunte
la campuri sau sa se imparta inregistrarea in doi pasi — amandoua, decizii
de produs, nu de foaie de stil.
Se activeaza cu clasa .dn-auth--larg pe , nu automat dupa numarul de
campuri: tot ce e aici e o decizie de pagina, luata in pagina.
------------------------------------------------------------------------ */
.dn-auth--larg{
--dn-auth-latime-card: 620px;
}
.dn-auth--larg .dn-auth__scena{
/* 1320 in loc de 1140: cardul a crescut cu 220px, deci fara asta ar fi
mancat exact atat din panou. */
width: min(1320px, 100%);
}
/* Pe varianta lata, panoul isi pune INTOTDEAUNA specimenul sub text, nu langa.
Fara media query, si nu din neatentie: scena e plafonata la 1320px, deci
latimea panoului nu mai creste cu ecranul. Oricat de lat ar fi monitorul,
raman aceiasi 1320 - 620 (card) - 40 (gap) = 660px de panou, din care 80 de
padding si 320 de specimen lasa 226px de text. Titlul „Eticheta nutritionala,
corecta si gata de tiparit." se rupea in cinci randuri.
Prima varianta scrisese aici `@media (max-width: 1399.98px)`, care nu se
aplica niciodata pe un ecran mare — media query-ul masoara fereastra, dar
panoul se ingusteaza din cauza cardului, nu a ferestrei.
Pe verticala e loc: cardul de inregistrare are ~1050px, panoul cu textul si
specimenul unul sub altul are ~600. Regula bate media query-ul de la
sectiunea 7 prin specificitate (0,2,0 fata de 0,1,0). */
.dn-auth--larg .dn-auth__panou{ grid-template-columns: minmax(0, 1fr); }
.dn-auth--larg .dn-auth__spec{ justify-self: start; width: 320px; transform: rotate(-1.5deg); }
/* Sub 992px scena e deja o singura coloana (sectiunea 2), dar cu max-width 460.
Pe varianta lata o lasam la 640, cat sa incapa in continuare doua coloane de
campuri pe o tableta in portret. */
@media (max-width: 991.98px){
.dn-auth--larg .dn-auth__scena{ max-width: 640px; }
}
/* ---------------------------------------------------------------------------
11. Formularul pe doua coloane
Grila, nu flex: campurile pline pe lat („C.U.I.", „Societate", „Adresa") se
scriu cu `span 2` si atat. Cu flex ar fi trebuit calculate latimi in procente
minus jumatate din gap, adica exact genul de aritmetica pe care grid-ul o
face singur.
Sub 700px ramane o coloana. Nu e o alegere de estetica: la doua coloane pe
telefon, un camp de 130px cu eticheta „Nr. Reg." deasupra e mai greu de
completat decat unul lat.
------------------------------------------------------------------------ */
.dn-auth__form--grila{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.1rem 1.25rem;
align-items: start;
}
@media (min-width: 700px){
.dn-auth__form--grila{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dn-auth__camp--lat{ grid-column: 1 / -1; }
}
/* Titlul de grup („Datele societatii"). Desparte cele trei campuri de cont de
cele cinci ale firmei — la opt campuri unul dupa altul nu se mai vede unde
se termina o intrebare si incepe alta. Linia orizontala e trasata cu
`border-top` pe un element gol de langa text, nu cu
, ca sa nu intre un
element in plus in ordinea de citire a formularului. */
.dn-auth__grup{
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: .75rem;
margin-top: .35rem;
font-size: .75rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--cn-muted);
}
.dn-auth__grup::after{
content: "";
flex: 1;
border-top: 1px solid var(--cn-line);
}
/* Butonul de trimitere: pe toata latimea grilei, ca inainte. */
.dn-auth__form--grila .btn-primary{ grid-column: 1 / -1; }
/* ---------------------------------------------------------------------------
12. Campul C.U.I. cu cautare la ANAF
Butonul sta LANGA camp, nu in interiorul pilulei ca ochiul de la parola:
ochiul e o comutare fara consecinte, asta pleaca la un serviciu extern si
rescrie trei campuri. Merita sa arate ca un buton si sa aiba un cuvant scris
pe el.
------------------------------------------------------------------------ */
.dn-anaf__rand{
display: flex;
gap: .5rem;
align-items: stretch;
/* Cu wrap, pe un telefon ingust butonul coboara pe randul lui in loc sa
stranga campul la cinci caractere vizibile. 11rem e cat sa se vada un
C.U.I. intreg. */
flex-wrap: wrap;
}
.dn-anaf__rand .form-control{ flex: 1 1 11rem; min-width: 0; }
.dn-anaf__buton{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1rem;
min-height: 46px;
border-radius: 999px;
border: 1px solid rgba(var(--cn-primary-rgb, 37,99,235), .35);
background: var(--cn-primary-soft);
color: var(--cn-primary-ink);
font-size: .875rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dn-anaf__buton:hover:not(:disabled){
background: var(--cn-primary);
border-color: var(--cn-primary);
color: #fff;
}
.dn-anaf__buton:focus-visible{
outline: 2px solid var(--cn-primary);
outline-offset: 2px;
}
.dn-anaf__buton:disabled{ opacity: .65; cursor: default; }
.dn-anaf__buton svg{ width: 16px; height: 16px; display: block; }
/* Cat tine cererea, lupa se schimba intr-un inel care se invarte. Nu lupa
insasi pusa pe rotit: o lupa care se roteste in jurul centrului ei arata a
greseala, nu a asteptare. Latimea butonului nu se schimba — inelul are exact
dimensiunea iconitei — deci randul nu tresare la fiecare cautare.
Cu `prefers-reduced-motion` inelul sta pe loc, dar butonul ramane dezactivat
si textul de sub camp spune ca se cauta, deci starea se vede oricum. */
.dn-anaf__buton.e-ocupat svg{ display: none; }
.dn-anaf__buton.e-ocupat::before{
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: dn-anaf-roteste .8s linear infinite;
}
@keyframes dn-anaf-roteste{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
.dn-anaf__buton.e-ocupat::before{ animation: none; }
}
/* Randul de stare de sub camp. Gol nu ocupa loc (`:empty`), ca sa nu lase o
gaura in grila cat timp nu s-a cautat nimic. */
.dn-anaf__stare{
font-size: .8125rem;
line-height: 1.35;
color: var(--cn-muted);
margin-top: .1rem;
}
.dn-anaf__stare:empty{ display: none; }
/* Tokenii `-ink`, nu cei plini: --cn-success / --cn-danger sunt culori de
FUNDAL de buton, calibrate pentru text alb peste ele; ca text pe hartie sunt
prea deschise. Perechea -ink e cea calibrata pentru text mic, si e si
singura redefinita in blocul de dark mode din _setari.php. */
.dn-anaf__stare--bine{ color: var(--cn-success-ink, #286a43); font-weight: 600; }
.dn-anaf__stare--atentie{ color: var(--cn-warning-ink, #ae3b22); font-weight: 600; }
.dn-anaf__stare--eroare{ color: var(--cn-danger-ink, #b91c1c); font-weight: 600; }
/* Exceptia: --cn-warning-ink e singurul din cei trei pe care blocul de dark
mode NU il redefineste — ar ramane maro inchis (#ae3b22) pe fundal bleumarin,
adica text invizibil. Il legam de tinta, ca pe celelalte doua. Selectorii sunt
copiati din capul fisierului: tema se scrie cand pe , cand pe . */
body[data-layout-mode="dark"] .dn-anaf__stare--atentie,
body[data-bs-theme="dark"] .dn-anaf__stare--atentie,
html[data-bs-theme="dark"] body .dn-anaf__stare--atentie,
[data-theme="dark"] body .dn-anaf__stare--atentie{
color: var(--cn-warning-tint, #eca393);
}
/* Ajutorul de sub camp, scris o data si lasat acolo: „scrie C.U.I.-ul si se
completeaza restul" trebuie citit INAINTE de a completa de mana, nu dupa. */
.dn-anaf__ajutor{
font-size: .8125rem;
color: var(--cn-muted);
margin-top: .1rem;
}
/* Campul completat din ANAF clipeste scurt in verde. Fara asta, cine se uita la
campul C.U.I. cand apasa butonul nu vede ca s-au schimbat trei campuri de
dedesubt — pagina pare ca n-a facut nimic.
Culoarea vine din --cn-success-rgb ca sa mearga si pe tema intunecata; e o
evidentiere temporara, nu o stare de validare, deci nu foloseste .is-valid al
Bootstrap-ului, care lasa si o bifa in camp. */
.dn-anaf-completat{
animation: dn-anaf-clipeste 1.6s ease-out;
}
@keyframes dn-anaf-clipeste{
0%{ background-color: rgba(var(--cn-success-rgb, 47,125,79), .18); }
100%{ background-color: transparent; }
}
@media (prefers-reduced-motion: reduce){
.dn-anaf-completat{ animation: none; }
}