/* ============================================================ STOC EXPRESS — portalul partenerilor, limbajul vizual ------------------------------------------------------------ Se încarcă DUPĂ cont.css și îi rescrie înfățișarea. Clasele sunt cele care există deja în pagină; aici nu se schimbă nicio structură, doar cum arată. Dacă vreodată trebuie dat înapoi, se scoate o singură linie din și portalul revine exact cum era. Regulile, pe scurt: · un singur font, Inter, peste tot; cifrele tabulare · text aproape negru, fără griuri spălăcite · auriu chihlimbar, folosit rar: comandă, favorit, navigație activă · fără umbre, fără gradiente, colțuri de 6–8px · dens înăuntru, aer între secțiuni ============================================================ */ /* ============================================================ TOKENURILE VECHI, RESCRISE ------------------------------------------------------------ Am tot reparat ecran cu ecran: butonul de aici, textul de dincolo. Rău. Foaia de dedesubt își ia toate culorile din variabilele astea, deci dacă le schimb pe ele se schimbă TOT dintr-o dată — și ecranele pe care nu le-am deschis încă. Ce era greșit: griul de text avea cinci trepte, toate deschise (#6C7A8D era cel mai folosit); aurul avea șapte trepte, iar butoanele luau tocmai pe cele stinse. ============================================================ */ :root{ /* textul: aceeași scară ca peste tot, aproape de negru */ --t900:#080D16; --t800:#141B26; --t700:#232C3A; --t600:#3A4553; --t500:#4B5563; /* aurul: unul singur, plin, plus nuanțele lui de fond */ --gold-50:#FDF6E3; --gold-100:#FBEFD0; --gold-200:#F2E2B8; --gold-300:#E8C97A; --gold-400:#F0B429; --gold-500:#DDA31C; --gold-600:#B7791F; --navy-950:#071426; --navy-900:#0B1B33; --white:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F6F8; --border:#DFE3E8; --border-soft:#EBEEF2; --success:#15803D; --warning:#B45309; --danger:#B91C1C; } :root{ --navy-950:#071426; --navy-900:#0B1B33; --navy-800:#122744; --navy-700:#1B3A63; --gold:#F0B429; --gold-deep:#B7791F; --gold-wash:#FDF6E3; --gold-line:#F2E2B8; --paper:#FFFFFF; --paper-2:#F5F6F8; --paper-3:#EDEFF3; --line:#DFE3E8; --line-2:#EBEEF2; --line-hard:#C3C9D2; --ink:#080D16; --ink-2:#141B26; --ink-3:#232C3A; --ink-4:#3A4553; /* în trepte sunt două lucruri diferite: câte bucăți și cât costă */ --q:#1D4ED8; --q-bg:#DBEAFE; --p:#15803D; --p-bg:#DCFCE7; --ok:#15803D; --ok-bg:#DCFCE7; --mid:#B45309; --mid-bg:#FEF3C7; --bad:#B91C1C; --bad-bg:#FEE2E2; --off:#3A4553; --off-bg:#E5E7EB; /* SCARA DE MĂRIMI, luată din Ant Design (referința din documentul tău). Nu instalăm biblioteca — ea e React, iar portalul e scris de mână — dar îi luăm sistemul, care e partea care contează: mărimile de text cresc după o progresie, nu la nimereală, iar fiecare are înălțimea ei de rând. Aveam 16 mărimi diferite, cu jumătăți de pixel. Acum sunt șase. */ --t-xs:12px; --lh-xs:1.667; --t-sm:14px; --lh-sm:1.571; --t-md:16px; --lh-md:1.5; --t-lg:20px; --lh-lg:1.4; --t-xl:24px; --lh-xl:1.333; --t-2xl:30px; --lh-2xl:1.267; /* Spațiile merg din 4 în 4, ca la ei. Aveam 7, 9, 11, 13 — nimeni nu le poate ține minte și nimic nu se aliniază. */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; /* Înălțimea controalelor: una singură, cu o variantă mică și una mare. Aveam butoane de 33, 34 și 36px pe același ecran. */ --h:32px; --h-sm:24px; --h-lg:40px; /* MIȘCAREA, luată din Material UI (a doua referință pe care mi-ai dat-o). Aveam tranziții de .12s și .18s puse la nimereală. Ei au patru durate și patru curbe, alese pentru ce se întâmplă pe ecran. */ --ms-scurt:150ms; --ms-mediu:200ms; --ms-lung:300ms; --ease:cubic-bezier(0.4, 0, 0.2, 1); /* mișcarea obișnuită */ --ease-out:cubic-bezier(0.0, 0, 0.2, 1); /* ceva care intră în ecran */ /* Stările de interacțiune, tot de la ei: în loc să inventez o culoare de hover pentru fiecare buton, pun același văl peste culoarea lui. Așa toate reacționează la fel, oricare ar fi fundalul. */ --val-hover:rgba(11,27,51,.04); --val-ales:rgba(11,27,51,.08); --val-focus:rgba(11,27,51,.12); --r:6px; --r2:8px; --f:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; } html,body{max-width:100%;overflow-x:hidden} body{ background:var(--paper-2);color:var(--ink-2);font-family:var(--f);font-size:var(--t-sm);line-height:1.5; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto; /* „l" cu coadă și „1" cu bază: într-o listă plină de coduri contează */ font-feature-settings:'cv05' 1,'cv08' 1,'ss03' 1; } .main{max-width:100%;overflow-x:clip} .cpane,.cpane>*{min-width:0;max-width:100%} /* cifrele, tabulare peste tot unde se compară pe verticală */ .pcd__pret,.pcd__sc b,.pcd__sc i,.prow__t,.prow__u,.trp__q,.trp__p, .catchip b,.snav__b,.tabb,.bfav b,.kpi b{font-variant-numeric:tabular-nums} /* ---------------- BARA LATERALĂ ---------------- */ .side{background:var(--navy-950);border-right:0} .side__logo{padding:16px 16px 16px;border-bottom:1px solid rgba(255,255,255,.07)} .side__logo b{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;color:#fff} .side__logo i{font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);font-style:normal} .side__nav{padding:8px 0;gap:0} .snav{ border-radius:0;background:transparent;padding:8px 16px;gap:12px;text-align:left; font-size:var(--t-sm);font-weight:500;color:#C3CEDC;border-left:3px solid transparent; } .snav svg{width:19px;height:19px;opacity:.9} .snav:hover{background:rgba(255,255,255,.045);color:#fff} .snav.is-on{background:rgba(240,180,41,.1);color:#fff;font-weight:700;border-left-color:var(--gold)} .snav.is-on svg{opacity:1;color:var(--gold)} .snav__b{background:rgba(255,255,255,.14);color:#fff;font-size:var(--t-xs);font-weight:600; border-radius:var(--r);padding:0 8px} /* despărțire între blocul de lucru și cel de setări */ .snav[data-nav="rapoarte"]{margin-bottom:8px;padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.07)} .promo{margin:auto 14px 16px;padding:16px 16px;border-radius:var(--r2); background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)} .promo__i{width:26px;height:26px;background:none;border:0;padding:0;margin:0 0 9px; color:var(--gold);display:block} .promo__i svg{width:26px;height:26px} .promo b{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .promo p{font-size:var(--t-xs);line-height:1.5;color:#AEBCCC;margin:7px 0 12px} .promo .btn--gold{width:100%;justify-content:center;background:var(--gold);color:#2A1D00; border:0;font-size:var(--t-sm);font-weight:700;padding:8px 8px;border-radius:var(--r);box-shadow:none} .promo .btn--gold:hover{background:#DDA31C} /* ---------------- CAPUL PAGINII ---------------- */ .mhead{padding:24px 0 18px;align-items:flex-start} .mhead__hi{font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .mhead h1{font-size:var(--t-2xl);line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:6px 0 5px} .mhead__sub{font-size:var(--t-sm);color:var(--ink-3);margin:0} .outbtn{border:1px solid var(--line-hard);background:var(--paper);border-radius:var(--r); padding:8px 16px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);box-shadow:none} .outbtn:hover{border-color:var(--ink-4)} /* ---------------- TABURI ---------------- */ .tabs{gap:8px;border-bottom:0;padding:0;margin-bottom:20px;background:none} .ctab{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r2); padding:8px 20px;font-size:var(--t-sm);font-weight:600;letter-spacing:-.005em;color:var(--ink-2); } .ctab:hover{border-color:var(--line-hard)} .ctab.on,.ctab.on:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff; box-shadow:inset 0 -3px 0 var(--gold)} .ctab.on::after{background:none} .ctab:hover{background:var(--paper)} .tabb{background:rgba(255,255,255,.16);color:#fff;font-size:var(--t-xs);border-radius:var(--r); padding:0 8px;margin-left:7px} .ctab:not(.on) .tabb{background:var(--paper-3);color:var(--ink-2)} /* ---------------- FILTRE ---------------- */ .bar{background:none;border:0;padding:0;box-shadow:none;gap:8px;margin-bottom:12px} .bsearch input,.bsel select,.bfav{ border:1px solid var(--line-hard);border-radius:var(--r);background:var(--paper); font-size:var(--t-sm);color:var(--ink); } .bsearch input{padding:8px 12px 8px 36px} .bsel select{padding:8px 32px 8px 12px;color:var(--ink-2)} .bsearch input:focus,.bsel select:focus{outline:none;border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(27,58,99,.09)} .bfav{padding:8px 12px;color:var(--ink-2);font-weight:500} .bfav.is-on,.bfav[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-deep)} .bfav b{font-size:var(--t-xs);color:var(--ink-4);font-weight:600} .bview{border:1px solid var(--line-hard);border-radius:var(--r);overflow:hidden;background:var(--paper)} .bview button{border:0;background:transparent;padding:8px 12px;color:var(--ink-4)} .bview button+button{border-left:1px solid var(--line)} /* comutatorul grila/lista: activul e navy plin, sa se vada ce ai ales */ .bview button.is-on{background:var(--navy-900);color:#fff} .bview button.is-on svg{color:#fff} .bview button:not(.is-on){background:#fff;color:#8A94A6} /* Categoriile: se așază pe câte rânduri e nevoie, nimic tăiat. Pagina are deja butonul „+N categorii" care le desface pe toate — îl îmbrăcăm, nu-l dublăm. */ .catbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding:0;border:0;background:none} .catchip{ border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:8px 12px; font-size:var(--t-sm);font-weight:600;color:var(--ink-2);display:inline-flex;gap:8px;align-items:baseline; } .catchip:hover{border-color:var(--line-hard)} .catchip.is-on{background:var(--navy-900);border-color:var(--navy-900);color:#fff} .catchip i{font-style:normal;font-size:var(--t-xs);font-weight:600;color:var(--ink-4); font-variant-numeric:tabular-nums} .catchip.is-on i{color:rgba(255,255,255,.6)} .catchip--more{border-color:var(--line-hard);color:var(--ink-2)} .catchip--more:hover{border-color:var(--gold);color:var(--gold-deep)} /* ---------------- BANDA ȘI SUMARELE ---------------- */ .engros{background:var(--navy-900);border-radius:var(--r2);padding:16px 20px;margin-bottom:16px; display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px} .engros b{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} .engros span{font-size:var(--t-sm);color:#E2E9F2} .engros strong{color:#fff;font-weight:600} /* Sumarul — clasele și stilurile copiate din machetă, nu adaptate. Stânga: starea, cu explicația dedesubt. Dreapta: treptele, cu prețul real și cât scade față de prima. */ .sum{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:24px} @media(max-width:1000px){.sum{grid-template-columns:1fr}} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);box-shadow:none} .card__t{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-3);padding:12px 16px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .stlist{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 16px 16px;gap:0} .stline{display:block;padding-left:16px;border-left:1px solid var(--line-2)} .stline:first-child{padding-left:0;border-left:0} .stline b{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:700; letter-spacing:.06em;color:var(--ink);margin-bottom:4px} .stline em{display:block;font-style:normal;font-size:var(--t-xs);line-height:1.45;color:var(--ink-3)} .dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block} .dot--ok{background:#16A34A} .dot--mid{background:#F59E0B} .dot--bad{background:#DC2626} .dot--off{background:#9CA3AF} .tiers{display:flex;align-items:stretch;padding:8px 16px 16px;gap:0} .tier{flex:1;padding-left:16px;border-left:1px solid var(--line-2);min-width:0} .tier:first-child{padding-left:0;border-left:0} .tier i{display:inline-block;font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--q); background:var(--q-bg);border-radius:var(--r);padding:0 8px;font-variant-numeric:tabular-nums} /* pretul si ce inseamna el stau pe acelasi rand: „2,72 bucati", „2,52 -7%". Pe randuri separate randul de jos parea rupt de cifra de deasupra. */ .tier__q{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .tier__q em{font-style:normal;font-size:var(--t-xs);color:var(--ink-4)} /* scaderea de pret se scrie in rosu, ca sa sara in ochi fata de pretul verde */ .tier__sc{font-weight:700;color:#C0392B} .tier__et{font-size:var(--t-xs);color:var(--ink-4)} .tier__v{display:flex;align-items:baseline;gap:7px;margin-top:8px;flex-wrap:wrap} .tier b{font-size:var(--t-lg);font-weight:700;color:var(--p); font-variant-numeric:tabular-nums;letter-spacing:-.02em} .tier span{font-size:var(--t-xs);color:var(--ink-4)} .lgd{font-style:normal;font-size:var(--t-xs);font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-4)} .lgd i{font-style:normal;font-size:var(--t-xs);font-weight:700;border-radius:var(--r);padding:0 8px; font-variant-numeric:tabular-nums} .lgd--q{color:var(--q);background:var(--q-bg)} .lgd--p{color:var(--p);background:var(--p-bg)} @media(max-width:820px){ .stlist{grid-template-columns:repeat(2,1fr);gap:16px 0} .stline:nth-child(3){padding-left:0;border-left:0} .tiers{flex-wrap:wrap;gap:16px 0} .tier{flex:0 0 50%} .tier:nth-child(3){padding-left:0;border-left:0} } .stk--suficient{background:var(--ok-bg);color:var(--ok)} .stk--mediu{background:var(--mid-bg);color:var(--mid)} .stk--critic{background:var(--bad-bg);color:var(--bad)} .stk--epuizat{background:var(--off-bg);color:var(--off)} .stk i{font-style:normal} /* legenda de preț: albastru pentru bucăți, verde pentru bani */ .trp__q--demo,.trp__q{background:var(--q-bg);color:var(--q);font-weight:700;font-size:var(--t-xs); border-radius:var(--r);padding:0 8px} .trp__p--demo,.trp__p{background:var(--p-bg);color:var(--p);font-weight:700;font-size:var(--t-xs); border-radius:var(--r);padding:0 8px;font-style:normal} /* ---------------- CARDUL ---------------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .pcd{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2); padding:0;box-shadow:none;overflow:hidden} .pcd:hover{border-color:var(--gold);box-shadow:none;transform:none} .pcd__img{position:relative;aspect-ratio:1/.86;border-radius:0;background:var(--paper); display:grid;place-items:center;padding:16px;overflow:hidden;margin:0;border-bottom:0} .pcd__img img{width:100%;height:100%;object-fit:contain;cursor:zoom-in} .pcd__img>svg{width:28px;height:28px;color:var(--ink-4)} .pcd__size{position:absolute;top:10px;left:10px;background:var(--gold);border:0;color:#2A1D00; font-size:var(--t-xs);font-weight:700;border-radius:var(--r);padding:4px 8px;letter-spacing:.02em} .pcd__fav{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:var(--r); border:1px solid var(--line);background:#fff;color:var(--ink-4);display:grid;place-items:center} .pcd__fav svg{width:16px;height:16px} /* Favoritul e roșu, plin. Auriul îl confunda cu butonul de comandă, iar o inimă goală nu se citește ca „e salvat". */ .pcd__fav.is-on{color:#DC2626;border-color:#FCA5A5;background:#FEF2F2} .pcd__fav.is-on svg{fill:currentColor;stroke:currentColor} .pcd__fav:hover{color:#DC2626;border-color:#FCA5A5} .pcd__b{padding:0 14px 14px;display:flex;flex-direction:column;flex:1;gap:0} .pcd__cat{display:none} .pcd__meta{font-size:var(--t-xs);color:var(--ink-4);margin:0 0 4px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcd__n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin:0;font-size:var(--t-sm);font-weight:600;line-height:1.35;letter-spacing:-.012em; color:var(--ink);height:38px} .pcd__row{display:flex;align-items:center;gap:8px;margin-top:8px} .pcd__price{font-size:var(--t-sm);font-weight:700;letter-spacing:-.01em;color:var(--gold-deep);white-space:nowrap} .pcd__price b{font-size:var(--t-sm)} .pcd__stk{margin-left:auto;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em; padding:4px 8px;border-radius:var(--r);white-space:nowrap} /* treptele, în caseta crem: cantitatea albastră, prețul verde */ .pcd__sc{margin-top:8px;background:var(--gold-wash);border:1px solid var(--gold-line); border-radius:8px;padding:8px 12px} .pcd__sc>div{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px} .pcd__sc span{display:flex;align-items:center;gap:8px;font-size:var(--t-xs)} .pcd__sc i{font-style:normal;font-size:var(--t-xs);font-weight:700;color:var(--q);background:var(--q-bg); border-radius:var(--r);padding:0 8px;min-width:42px;text-align:center} .pcd__sc b{font-size:var(--t-sm);font-weight:700;color:var(--p)} .pcd__sc .is-best i{background:var(--q);color:#fff} .pcd__sc .is-best b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px} .pcd__sc u{display:block;text-decoration:none;font-size:var(--t-xs);color:var(--ink-4);margin-top:8px} .pcd__add{display:flex;align-items:center;gap:8px;margin-top:12px} .qty{border:1px solid var(--line-hard);border-radius:var(--r);height:var(--h);overflow:hidden;background:var(--paper)} .qty button{width:26px;border:0;background:transparent;color:var(--ink-3);font-size:var(--t-md)} .qty button:hover{background:var(--paper-3);color:var(--ink)} .qty input{width:32px;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2); text-align:center;font-size:var(--t-sm);font-weight:600;color:var(--ink)} .pcd__buy{flex:1;height:var(--h);border:0;border-radius:var(--r);background:var(--gold);color:#3A2A00; font-size:var(--t-sm);font-weight:600;letter-spacing:.005em;display:flex;align-items:center; justify-content:center;gap:8px} .pcd__buy:hover{background:#DDA31C} .pcd__buy svg{width:16px;height:16px} .pcd__offer{margin-top:8px;height:var(--h);border:1px solid var(--gold-line);background:var(--gold-wash); border-radius:var(--r);color:var(--gold-deep);font-size:var(--t-xs);font-weight:600;display:flex; align-items:center;justify-content:center;gap:8px;width:100%} .pcd__offer:hover{border-color:var(--gold);background:#FBF0D8} .pcd__offer svg{width:14px;height:14px} .pcd__gone{flex:1;font-size:var(--t-xs);color:var(--ink-4);text-align:center} .pcd__trepte,.pcd__ask{display:none} /* ---------------- LISTA ---------------- */ .ptable{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2); overflow:hidden;max-width:100%} .ptable--grid{border:0;background:none;border-radius:0} .ptable--grid .ptable__h{display:none} .ptable__h,.prow{ display:grid; grid-template-columns:34px minmax(0,1fr) 116px repeat(4,minmax(78px,92px)) 106px 122px; align-items:center; } .ptable__h>*,.prow>*{min-width:0} .ptable__h{padding:12px 16px;background:var(--paper-3);border-bottom:1px solid var(--line); font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .ptable__h .th--grup{grid-column:4 / span 4;text-align:center} .ptable__h .th--grup .q{color:var(--q)} .ptable__h .th--grup .p{color:var(--p)} .ptable__h .th--r{text-align:right;padding-right:16px} .ptable__h .th--c{text-align:center} .prow{padding:12px 16px;border-bottom:1px solid var(--line-2)} .prow:last-child{border-bottom:0} .prow:hover{background:var(--paper-2)} .prow__chk{display:grid;place-items:center} .prow__chk input{width:14px;height:14px;accent-color:var(--navy-900);margin:0} .prow__p{display:flex;align-items:center;gap:16px;min-width:0;padding-right:24px} .prow__img{width:54px;height:54px;flex:none;border-radius:var(--r);border:1px solid var(--line); background:var(--paper);object-fit:contain;cursor:zoom-in;display:block} .prow__ph{width:54px;height:54px;flex:none;border-radius:var(--r);border:1px solid var(--line); background:var(--paper-3);display:grid;place-items:center;color:var(--ink-4)} .prow__n{display:flex;flex-direction:column;min-width:0;line-height:1.3} .prow__n b{font-size:var(--t-sm);font-weight:600;letter-spacing:-.012em;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prow__meta{font-size:var(--t-xs);color:var(--ink-4);margin-top:0px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prow__stk{display:flex;justify-content:flex-end;padding-right:16px} .prow__stk b{font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;padding:4px 8px;border-radius:var(--r)} .prow__t{text-align:right;padding-right:16px;font-size:var(--t-sm);font-weight:600;color:var(--p)} .prow__t--best{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px} .prow__u{text-align:right;padding-right:16px;font-size:var(--t-md);font-weight:600;letter-spacing:-.015em; color:var(--ink);white-space:nowrap} .prow__a{display:flex;align-items:center;justify-content:center;gap:4px} .prow__buy{width:var(--h);height:var(--h);flex:none;border:0;border-radius:var(--r);background:var(--gold); color:#3A2A00;display:grid;place-items:center;cursor:pointer} .prow__buy:hover{background:#DDA31C} .prow__buy svg{width:17px;height:17px} .prow__ic{width:var(--h-sm);height:var(--h-sm);flex:none;border:1px solid var(--line);background:var(--paper); border-radius:var(--r);display:grid;place-items:center;cursor:pointer;color:var(--ink-4)} .prow__ic:hover{border-color:var(--line-hard);color:var(--ink-2)} .prow__ic.is-on{color:#DC2626;border-color:#FCA5A5;background:#FEF2F2} .prow__ic.is-on svg{fill:currentColor} .prow__ic svg{width:16px;height:16px} .prow__gone{width:var(--h);text-align:center;color:var(--ink-4)} @media(max-width:1400px){ .ptable__h,.prow{grid-template-columns:32px minmax(0,1fr) 104px repeat(4,74px) 96px 114px} } @media(max-width:1180px){ .ptable__h,.prow{grid-template-columns:minmax(0,1fr) 98px repeat(2,72px) 92px 108px} .prow__chk,.ptable__h .th--chk{display:none} .ptable__h .th--grup{grid-column:3 / span 2} .prow__t:nth-of-type(3),.prow__t:nth-of-type(4){display:none} } @media(max-width:860px){ .ptable__h{display:none} .prow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 16px} .prow__stk{grid-column:1;justify-content:flex-start;padding:0} .prow__t{display:none} .prow__u{grid-column:1;text-align:left;padding:0} .prow__a{grid-column:2;grid-row:1 / span 3} } /* ---------------- PANOURI, TABELE, BUTOANE ---------------- */ .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);box-shadow:none} .panel__cap{padding:16px 16px;border-bottom:1px solid var(--line-2);background:transparent} .panel__cap h2{margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3)} .cap__i{display:none} .kpi,.card,.box{box-shadow:none;border-radius:var(--r2);border:1px solid var(--line)} .btn--gold{background:var(--gold);color:#2A1D00;border:0;border-radius:var(--r); font-weight:600;box-shadow:none} .btn--gold:hover{background:#DDA31C} .btn--ghost{background:var(--paper);border:1px solid var(--line-hard);color:var(--ink-2); border-radius:var(--r);box-shadow:none} .tbl th{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);background:var(--paper-3);border-bottom:1px solid var(--line)} .tbl td{border-bottom:1px solid var(--line-2);font-size:var(--t-sm);color:var(--ink-2)} .tbl tr:hover td{background:var(--paper-2)} /* ---------------- TOOLTIP ---------------- */ .tipn{position:fixed;z-index:400;max-width:22rem;padding:8px 12px;background:var(--navy-900); color:#fff;border-radius:var(--r);font-size:var(--t-xs);line-height:1.45; box-shadow:0 10px 26px rgba(8,16,30,.28);pointer-events:none;opacity:0; transform:translateY(3px);transition:opacity .13s,transform .13s} .tipn.on{opacity:1;transform:none} .tipn:after{content:"";position:absolute;top:100%;left:var(--varf,50%);margin-left:-5px; border:5px solid transparent;border-top-color:var(--navy-900)} .tipn--jos:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--navy-900)} /* ---------------- POZA MĂRITĂ ---------------- */ .zoomw{position:fixed;inset:0;z-index:500;display:none;place-items:center; background:rgba(8,13,22,.82);padding:32px} .zoomw.on{display:grid} .zoomw img{max-width:min(880px,92vw);max-height:86vh;background:#fff;border-radius:var(--r2); padding:24px;object-fit:contain} .zoomw__x{position:absolute;top:18px;right:22px;width:38px;height:38px;border:0;border-radius:8px; background:rgba(255,255,255,.12);color:#fff;font-size:var(--t-lg);cursor:pointer} .zoomw__x:hover{background:rgba(255,255,255,.2)} .zoomw__n{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff; font-size:var(--t-sm);font-weight:600} /* ============================================================ REPARAȚII PESTE STILUL VECHI Lucruri pe care foaia de dedesubt le desena deja, iar acum ieșeau de două ori: chenar peste chenar, fundal peste fundal. ============================================================ */ /* 1. Selectoarele și comutatorul aveau chenar și pe înveliș, și pe control */ .bsel{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important} .bsel select{width:100%} .bview{box-shadow:none} .bview button{border-radius:0} .bfav{box-shadow:none} .bsearch{border:0!important;background:none!important;box-shadow:none!important;padding:0!important} .bsearch input{width:100%} /* 2. Panourile de sumar erau într-un înveliș care avea la rândul lui fundal */ .sumar{background:none;border:0;padding:0;box-shadow:none} .sumar>.stkey{margin:0} .stkey--pret{margin-top:0} /* 3. Fontul: tot portalul pe Inter, inclusiv placa „Powered by" */ .powered__l,.powered__t,.powered__s{font-family:var(--f)!important} /* 4. Poza mărită: peste tot ecranul, centrată, indiferent ce e sub ea */ .zoomw{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important; width:100vw;height:100vh;margin:0;display:none;place-content:center;place-items:center; background:rgba(8,13,22,.86)} .zoomw.on{display:grid!important} .zoomw img{margin:0 auto;display:block} /* 5. Acasă: aceleași reguli ca la catalog */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:24px} .kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2); padding:16px 16px;box-shadow:none;display:block} .kpi:hover{border-color:var(--line-hard);transform:none;box-shadow:none} .kpi{display:flex;align-items:flex-start;gap:12px} .kpi__i{width:36px;height:var(--h);flex:none;border-radius:var(--r);background:var(--paper-3); color:var(--ink-3);display:grid;place-items:center;border:1px solid var(--line-2);margin:0} .kpi__i svg{width:18px;height:18px} .kpi>div{min-width:0} .kpi>div>span{display:block;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-bottom:4px} .kpi b{display:block;font-size:var(--t-2xl);font-weight:700;letter-spacing:-.03em;color:var(--ink); line-height:1.1;font-variant-numeric:tabular-nums} .kpi small{display:block;font-size:var(--t-xs);color:var(--ink-4);margin-top:4px} .cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:1000px){.cols2{grid-template-columns:1fr}} .lnk{background:none;border:0;font-size:var(--t-xs);font-weight:600;color:var(--ink-3); display:inline-flex;align-items:center;gap:4px} .lnk:hover{color:var(--gold-deep)} .lnk svg{width:14px;height:14px} /* rândurile din „Comenzile recente" / „Ofertele recente" */ .orow,.ordrow,.panel__b--flush>div{border-bottom:1px solid var(--line-2)} .panel__b--flush>div:last-child{border-bottom:0} /* banda navy de pe Acasă/Comenzi/Rapoarte */ .nbanner{background:var(--navy-900);border-radius:var(--r2);border:0;box-shadow:none;padding:24px} .nbanner__t h3{color:var(--gold);font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;margin:0 0 8px} .nbanner__t p{color:#D7DFEA;font-size:var(--t-sm);line-height:1.55;margin:0 0 14px} .nbanner__t .btn{background:var(--gold);color:#2A1D00;border:0;border-radius:var(--r); font-size:var(--t-sm);font-weight:600;padding:8px 16px;box-shadow:none} .nbanner__t .btn:hover{background:#DDA31C} .nstat{border-left:1px solid rgba(255,255,255,.14);padding-left:16px;background:none;border-radius:0} .nstat:first-child{border-left:0;padding-left:0} .nstat svg{width:18px;height:18px;color:var(--gold);opacity:1} .nstat b{display:block;font-size:var(--t-xl);line-height:var(--lh-xl);font-weight:700;letter-spacing:-.03em;color:#fff; margin-top:8px;font-variant-numeric:tabular-nums} .nstat span{display:block;font-size:var(--t-xs);font-weight:600;color:#E2E9F2;margin-top:4px} .nstat small{display:block;font-size:var(--t-xs);color:#9FB0C4;margin-top:0px} /* eticheta „NOU" de pe produsele recente */ .pcd__new,.car .pcd__size{background:var(--navy-900);color:#fff} /* ============================================================ ETICHETELE DE STARE — pline, nu spălăcite ------------------------------------------------------------ Erau fond aproape alb, chenar palid și text colorat. La 11px, pe un ecran luminos, nu se citeau. Acum sunt pline, cu text alb: se văd de la un metru și se deosebesc dintr-o privire una de alta. Se aplică peste tot: comenzi, oferte, plăți, cereri. ============================================================ */ .ost{ border:0!important;color:#fff!important;font-weight:600;letter-spacing:.01em; padding:4px 12px 4px 8px;border-radius:6px; } .ost::before{background:rgba(255,255,255,.85)!important;box-shadow:none!important} .ost--pending{background:#B45309!important} /* în lucru */ .ost--approved{background:#1D4ED8!important} /* confirmată */ .ost--ready,.ost--ordered,.ost--accepted{background:#15803D!important} /* gata */ .ost--collected{background:#334155!important} /* încheiată */ .ost--expired{background:#6B7280!important} /* expirată */ .ost--cancelled,.ost--rejected,.ost--refused{background:#B91C1C!important} /* oprită */ /* etichetele de stoc, la fel: pline, nu tinte palide */ .pcd__stk,.prow__stk b,.stk{color:#fff!important;border:0!important} .stk--suficient,.pcd__stk.stk--suficient,.prow__stk b.stk--suficient{background:#15803D!important} .stk--mediu,.pcd__stk.stk--mediu,.prow__stk b.stk--mediu{background:#B45309!important} .stk--critic,.pcd__stk.stk--critic,.prow__stk b.stk--critic{background:#B91C1C!important} .stk--epuizat,.pcd__stk.stk--epuizat,.prow__stk b.stk--epuizat{background:#475569!important} .stk i{color:inherit} /* bulinele din sumar rămân colorate pe alb — acolo e legendă, nu etichetă */ .stline .dot{box-shadow:none} /* ============================================================ NOUTĂȚI — ce s-a adăugat și ce a reintrat pe stoc Stau deasupra catalogului, pe fond ușor diferit, ca să se vadă că e altceva decât lista obișnuită. Aceleași carduri, deci nimic de învățat. ============================================================ */ .nout{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2); margin-bottom:16px;overflow:hidden} .nout__cap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px; padding:16px 16px;border-bottom:1px solid var(--line-2);background:var(--paper-3)} .nout__cap h2{margin:0;font-size:var(--t-md);font-weight:700;letter-spacing:-.02em;color:var(--ink)} .nout__tabs{display:flex;gap:8px;margin-left:auto} .nout__t{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:8px 12px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);cursor:pointer; display:inline-flex;align-items:center;gap:8px} .nout__t:hover{border-color:var(--line-hard)} .nout__t.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff} .nout__t b{font-size:var(--t-xs);font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums} .nout__t.on b{color:rgba(255,255,255,.65)} .nout__b{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:16px 16px} .nout__gol{grid-column:1/-1;margin:0;padding:16px 0;font-size:var(--t-sm);color:var(--ink-4)} @media(max-width:640px){ .nout__tabs{margin-left:0;width:100%} .nout__t{flex:1;justify-content:center} } /* ============================================================ STĂRILE DE INTERACȚIUNE Un singur văl peste orice element apăsabil, în loc de o culoare inventată pentru fiecare. Regula e de la Material UI: 4% la trecerea cu mouse-ul, 8% pe cel ales, 12% la focalizarea din tastatură. ============================================================ */ .prow:hover,.tbl tr:hover td,.catchip:hover,.ctab:hover,.bview button:hover{ background:var(--val-hover); } .pcd,.prow,.catchip,.ctab,.bfav,.bview button,.pcd__buy,.prow__buy,.pcd__fav,.prow__ic,.pcd__offer{ transition:background-color var(--ms-scurt) var(--ease), border-color var(--ms-scurt) var(--ease), color var(--ms-scurt) var(--ease); } /* focalizarea din tastatură se vede întotdeauna — cineva comandă și de la tastatură, iar un contur invizibil îl lasă rătăcit în pagină */ .catchip:focus-visible,.ctab:focus-visible,.pcd__buy:focus-visible,.prow__buy:focus-visible, .pcd__fav:focus-visible,.prow__ic:focus-visible,.bview button:focus-visible,.bfav:focus-visible{ outline:2px solid var(--navy-700);outline-offset:2px; } /* Ținta de atins pe telefon: minimum 44px. Butoanele de 31px sunt bune cu mouse-ul, dar cu degetul se ratează. */ @media (pointer:coarse){ .pcd__buy,.prow__buy,.pcd__fav,.prow__ic,.pcd__offer,.bview button,.qty button{ min-height:44px;min-width:44px; } } /* ============================================================ BARA DE SELECȚIE — tiparul din Polaris ------------------------------------------------------------ Apare de jos când bifezi produse și dispare când renunți. Stă peste conținut, nu împinge pagina: dacă ar împinge-o, rândurile s-ar mișca exact când vrei să bifezi următorul. ============================================================ */ .selbar{ position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(140%); z-index:60;display:flex;align-items:center;gap:var(--s-2); background:var(--navy-900);color:#fff;border-radius:var(--r2); padding:var(--s-2) var(--s-3);box-shadow:0 12px 32px rgba(8,16,30,.28); transition:transform var(--ms-mediu) var(--ease-out);max-width:calc(100vw - 32px); } .selbar.on{transform:translateX(-50%) translateY(0)} .selbar__n{font-size:var(--t-sm);color:#D7DFEA;white-space:nowrap;padding:0 var(--s-2)} .selbar__n b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums} .selbar__b{ display:inline-flex;align-items:center;gap:var(--s-1);height:var(--h); padding:0 var(--s-3);border:1px solid rgba(255,255,255,.22);border-radius:var(--r); background:transparent;color:#fff;font-size:var(--t-sm);font-weight:600;cursor:pointer; white-space:nowrap; } .selbar__b:hover{background:rgba(255,255,255,.1)} .selbar__b svg{width:16px;height:16px} .selbar__b--gold{background:var(--gold);border-color:var(--gold);color:#2A1D00} .selbar__b--gold:hover{background:#DDA31C} .selbar__x{ width:var(--h);height:var(--h);border:0;border-radius:var(--r);background:transparent; color:#9FB0C4;font-size:20px;line-height:1;cursor:pointer; } .selbar__x:hover{background:rgba(255,255,255,.1);color:#fff} /* rândul bifat se vede, ca să știi ce ai adunat */ .prow:has(.prow__chk input:checked){background:var(--val-ales)} /* confirmarea scurtă de jos */ .selmsg{ position:fixed;left:50%;bottom:76px;transform:translateX(-50%) translateY(12px); z-index:61;background:var(--ink);color:#fff;border-radius:var(--r); padding:var(--s-2) var(--s-4);font-size:var(--t-sm);font-weight:600; opacity:0;pointer-events:none;transition:opacity var(--ms-scurt) var(--ease), transform var(--ms-scurt) var(--ease); } .selmsg.on{opacity:1;transform:translateX(-50%) translateY(0)} @media(max-width:640px){ .selbar{left:12px;right:12px;transform:translateY(140%);max-width:none;flex-wrap:wrap} .selbar.on{transform:translateY(0)} .selbar__b{flex:1;justify-content:center} } /* ============================================================ DENSITATEA TABELULUI — valorile din Polaris celulă 6px, card 16px, distanța dintre butoane 8px ============================================================ */ .ptable__h,.prow{padding-top:var(--s-2);padding-bottom:var(--s-2)} .prow__a{gap:var(--s-2)} /* ============================================================ CODUL SMS, PE ȘASE CĂSUȚE O casetă lungă nu-ți arată unde ai rămas și nici câte cifre mai ai. Șase căsuțe rezolvă amândouă, fără nicio explicație. ============================================================ */ .otpbox{display:flex;gap:var(--s-2);justify-content:space-between;max-width:340px} .otpbox__c{ flex:1;min-width:0;height:52px;text-align:center; border:1.5px solid var(--line-hard);border-radius:var(--r);background:var(--paper); font-size:var(--t-lg);font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums; transition:border-color var(--ms-scurt) var(--ease),box-shadow var(--ms-scurt) var(--ease); } .otpbox__c:focus{ outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(27,58,99,.12); } /* căsuța completată se vede, ca să știi câte mai ai de scris */ .otpbox__c:not(:placeholder-shown),.otpbox__c[value]:not([value=""]){ border-color:var(--navy-900); } @media(max-width:420px){ .otpbox{gap:var(--s-1)} .otpbox__c{height:48px;font-size:var(--t-md)} } /* Butonul confirmă singur că produsul a intrat în comandă. Ascundeam doar iconița, nu și cuvântul „Adaugă", care e text simplu în buton — de-aia ieșea „Adaugă Adăugat ✓". Cu font-size:0 pe buton dispare și textul, iar confirmarea își pune singură mărimea la loc. */ .pcd__buy.adaugat,.prow__buy.adaugat{ background:var(--ok);color:#fff;font-size:0;gap:0; } .pcd__buy.adaugat svg,.prow__buy.adaugat svg{display:none} .pcd__buy.adaugat::after{content:"Adăugat ✓";font-size:var(--t-sm);font-weight:600} .prow__buy.adaugat::after{content:"✓";font-size:var(--t-md);font-weight:700} /* ============================================================ MODUL ÎNTUNECAT ------------------------------------------------------------ Foaia veche avea variantă întunecată, dar eu am adus tokenuri noi și le-am scris doar pe cele deschise: hârtie albă, text aproape negru, linii palide. Pe fond întunecat ieșea exact ce ai văzut. Aici sunt aceleași tokenuri, cu valorile pentru întuneric. Regula e simplă: fundalurile coboară, textele urcă, iar culorile de accent se deschid — un verde de #15803D pe negru nu se mai citește. ============================================================ */ body.dark{ --paper:#141B26; /* suprafața cardurilor */ --paper-2:#0D131C; /* fundalul paginii */ --paper-3:#1B2432; /* capete de tabel, casete */ --line:#28313F; --line-2:#222A37; --line-hard:#3A4556; --ink:#F2F4F7; --ink-2:#DDE2E9; --ink-3:#AAB4C2; --ink-4:#8592A3; --navy-900:#1B2A45; /* butoanele navy trebuie să iasă din fundal */ --navy-800:#22355480; --navy-700:#4A7BB8; --gold:#F0B429; --gold-deep:#E0A93A; --gold-wash:#2A2313; --gold-line:#4A3E1E; /* accentele, deschise ca să se citească pe întuneric */ --q:#7BA5F5; --q-bg:#1B2942; --p:#5BC98A; --p-bg:#16301F; --ok:#5BC98A; --ok-bg:#16301F; --mid:#E0A93A; --mid-bg:#2E2410; --bad:#F08981; --bad-bg:#33191A; --off:#8592A3; --off-bg:#232B37; --val-hover:rgba(255,255,255,.05); --val-ales:rgba(255,255,255,.09); } /* bara laterală e deja închisă; pe întuneric o coborâm și mai mult ca să se despartă de conținut */ body.dark .side{background:#080D15} /* poza produsului: pe alb arăta bine, pe întuneric produsele decupate pe fundal alb ies ca niște pete. Le punem un fundal deschis, propriu. */ body.dark .pcd__img{background:#EEF1F5} body.dark .tier__sc{color:#F0776A} body.dark .prow__img{background:#EEF1F5} body.dark .prow__ph{background:var(--paper-3)} /* butoanele aurii au text închis, deci rămân la fel; cele navy au nevoie de chenar ca să nu se topească în fundal */ body.dark .pcd__buy,body.dark .prow__buy{color:#241A00} body.dark .ctab.on{background:var(--navy-900);border-color:var(--navy-700)} body.dark .engros{background:#16253E} body.dark .selbar{background:#1B2A45;border:1px solid var(--line-hard)} body.dark .tipn{background:#22334F;border:1px solid var(--line-hard)} /* etichetele de stare: pe întuneric, fond stins și text deschis se citesc mai bine decât fond plin */ body.dark .pcd__stk,body.dark .prow__stk b,body.dark .stk{color:inherit!important} body.dark .stk--suficient{background:var(--ok-bg)!important;color:var(--ok)!important} body.dark .stk--mediu{background:var(--mid-bg)!important;color:var(--mid)!important} body.dark .stk--critic{background:var(--bad-bg)!important;color:var(--bad)!important} body.dark .stk--epuizat{background:var(--off-bg)!important;color:var(--off)!important} body.dark .ost{color:#fff!important} /* casetele crem din carduri devin o nuanță caldă închisă, nu galben aprins */ body.dark .pcd__sc{background:#221C10;border-color:#3D3319} body.dark .pcd__offer{background:#221C10;border-color:#3D3319;color:var(--gold-deep)} body.dark .pcd__size{color:#241A00} /* căsuțele de cod SMS */ body.dark .otpbox__c{background:var(--paper-3);border-color:var(--line-hard);color:var(--ink)} body.dark .otpbox__c.plin,body.dark .otpbox__c:focus{border-color:var(--gold)} /* poza mărită, pe fundal și mai închis */ body.dark .zoomw{background:rgba(0,0,0,.88)} /* ============================================================ CURIERII CLIENTULUI ============================================================ */ .curlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-3)} .curcard{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s-4);background:var(--paper)} .curcard.is-legat{border-color:var(--ok)} .curcard__t{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)} .curcard__t b{font-size:var(--t-sm);font-weight:700;color:var(--ink)} .curcard__ok,.curcard__no{margin-left:auto;font-size:var(--t-xs);font-weight:700; padding:2px 8px;border-radius:var(--r)} .curcard__ok{background:var(--ok-bg);color:var(--ok)} .curcard__no{background:var(--paper-3);color:var(--ink-4)} .curcard__d{font-size:var(--t-xs);line-height:1.55;color:var(--ink-3)} .curcard__d i{font-style:normal;font-weight:600;color:var(--ink-2)} .curcard__e{margin-top:var(--s-2);font-size:var(--t-xs);color:var(--bad)} .curcard__a{display:flex;gap:var(--s-2);margin-top:var(--s-3)} .btn--sm{padding:6px 12px;font-size:var(--t-xs)} /* ferestrele de legare și de AWB */ .cur-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center; background:rgba(8,13,22,.6);padding:var(--s-4)} .cur-modal[hidden]{display:none} .cur-box{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column; background:var(--paper);border-radius:var(--r2);overflow:hidden;border:1px solid var(--line)} .cur-h{display:flex;align-items:center;padding:var(--s-4);border-bottom:1px solid var(--line-2)} .cur-h h3{margin:0;font-size:var(--t-md);font-weight:700;color:var(--ink)} .cur-x{margin-left:auto;width:var(--h);height:var(--h);border:0;background:none; font-size:22px;line-height:1;color:var(--ink-4);cursor:pointer;border-radius:var(--r)} .cur-x:hover{background:var(--paper-3);color:var(--ink)} .cur-b{padding:var(--s-4);overflow-y:auto;display:grid;gap:var(--s-3)} .cur-f{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4); border-top:1px solid var(--line-2);background:var(--paper-2)} .cur-f .btn{margin-left:0} .cur-f .btn--gold{margin-left:0} .cur-msg{flex:1;font-size:var(--t-xs);color:var(--ink-3)} .cur-msg--rau{color:var(--bad);font-weight:600} .cur-msg--bun{color:var(--ok);font-weight:600} .cur-f1{display:block} .cur-f1>span{display:block;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-bottom:var(--s-1)} .cur-f1 input[type=text],.cur-f1 input[type=password],.cur-f1 select{ width:100%;height:var(--h);padding:0 12px;border:1px solid var(--line-hard); border-radius:var(--r);font:inherit;font-size:var(--t-sm);color:var(--ink);background:var(--paper)} .cur-f1 input:focus,.cur-f1 select:focus{outline:none;border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(27,58,99,.1)} .cur-nec{font-style:normal;font-weight:500;color:var(--ink-4)} .cur-hint{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-4);margin-top:var(--s-1)} .cur-ajutor{margin:0;padding:var(--s-3);background:var(--gold-wash);border:1px solid var(--gold-line); border-radius:var(--r);font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)} .cur-sep{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-4);padding-top:var(--s-2);border-top:1px solid var(--line-2)} .cur-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)} .cur-gol{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-3)} .cur-gol b{display:block;color:var(--ink);margin-bottom:var(--s-1)} /* raportul ANAF de sub CUI, la înscriere */ .anafp{margin-top:var(--s-2);padding:10px 12px;border-radius:var(--r); border:1px solid var(--line);background:var(--paper); font-size:var(--t-xs);line-height:1.5;color:var(--ink-2)} .anafp b{display:block;color:var(--ink);font-weight:700} .anafp__m{display:block;color:var(--ink-3);margin-top:2px} .anafp__s{display:block;font-weight:600;margin-top:4px} .anafp--bun{border-color:#A7D8BB;background:var(--ok-bg)} .anafp--bun b{color:var(--ok)} .anafp--rau{border-color:#F0BDB8;background:var(--bad-bg);color:var(--bad)} .anafp--rau b,.anafp--rau .anafp__s{color:var(--bad)} /* ============================================================ SEMNUL CURIERULUI Pătrat în culoarea firmei, cu inițialele și o dungă în culoarea a doua. Se recunoaște dintr-o privire și nu depinde de niciun fișier extern. ============================================================ */ .cursemn{ position:relative;flex:none;width:40px;height:40px;border-radius:var(--r); display:grid;place-items:center;overflow:hidden; } .cursemn i{position:absolute;left:0;right:0;bottom:0;height:5px} .cursemn b{ position:relative;color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1; padding-bottom:3px; } /* pe modul întunecat culorile firmelor rămân aceleași — sunt ale lor, nu ale noastre — dar le dăm un chenar ca să nu se lipească de fundal */ body.dark .cursemn{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .curcard__t{align-items:center} /* alegerea curierului la AWB: cartonașe, nu listă derulantă — logo-ul e mai rapid de recunoscut decât numele citit */ .curpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s-2)} .curpick__o{ display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2); border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--paper); } .curpick__o:hover{border-color:var(--line-hard)} .curpick__o input{margin:0;accent-color:var(--navy-900)} .curpick__o span{font-size:var(--t-xs);font-weight:600;color:var(--ink-2);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .curpick__o:has(input:checked){border-color:var(--navy-900);background:var(--val-ales)} .curpick__o .cursemn{width:30px;height:30px} .curpick__o .cursemn b{font-size:12px!important} .curpick__o .cursemn i{height:4px} /* câmpurile completate de curier se văd: omul trebuie să știe ce a scris el și ce a venit de la Cargus sau DPD */ .cur-auto{border-color:var(--ok)!important;background:var(--ok-bg)!important} .cur-info{margin:0;font-size:var(--t-xs);color:var(--ink-3)} .cur-f .btn--soft{margin-left:0} /* Siglele curierilor. Fundal alb chiar și pe modul întunecat: sunt desenate pentru hârtie albă, iar pe negru multe devin ilizibile. */ .cursigla{display:grid;place-items:center;width:44px;height:44px;flex:none; border-radius:var(--r);background:#fff;border:1px solid var(--line);padding:5px} .cursigla img{max-width:100%;max-height:100%;object-fit:contain;display:block} body.dark .cursigla{border-color:rgba(255,255,255,.16)} .curpick__o .cursigla{width:32px;height:32px;padding:3px} /* ============================================================ SETĂRILE — pe același limbaj cu restul portalului ------------------------------------------------------------ Ecranul ăsta rămăsese pe stilul vechi: meniu cu pastile aurii, capete de panou cu descrierea aruncată în dreapta, câmpuri de altă înălțime decât cele din catalog. Aici îl aduc la aceleași reguli — aceeași scară de mărimi, aceleași controale de 32px, același navy pe activ. ============================================================ */ /* meniul din stânga: rânduri cu dungă, ca în bara laterală */ .setnav{ padding:var(--s-1);background:var(--paper);border:1px solid var(--line); border-radius:var(--r2);gap:0;box-shadow:none; } .setnav button{ height:auto;padding:10px 12px;border-radius:var(--r);gap:10px; font-size:var(--t-sm);font-weight:500;color:var(--ink-2); border-left:2px solid transparent; } .setnav button svg{width:17px;height:17px;color:var(--ink-4)} .setnav button:hover{background:var(--val-hover);color:var(--ink)} .setnav button.is-on{ background:var(--val-ales);color:var(--ink);font-weight:600; border-left-color:var(--gold);border-radius:var(--r); } .setnav button.is-on svg{color:var(--gold-deep)} /* capul de panou: titlul și explicația una sub alta, la stânga. Erau pe același rând, cu explicația împinsă în dreapta ecranului — ochiul făcea drumul înapoi de fiecare dată. */ .panel__cap{display:block;padding:var(--s-4);border-bottom:1px solid var(--line-2);background:transparent} .panel__cap h2{margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3)} .panel__cap p{margin:6px 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--ink-3);max-width:70ch} .panel__b{padding:var(--s-4)} /* câmpurile de formular, aceleași ca peste tot */ .frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)} .fld>label,.fld__l{display:block;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-bottom:var(--s-1)} .fld__in input,.fld__in select,.fld input,.fld select{ height:44px;border:1px solid var(--line-hard);border-radius:var(--r); font-size:var(--t-sm);color:var(--ink);background:var(--paper); } .fld__in input:focus,.fld input:focus{outline:none;border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(27,58,99,.1)} .fld__ic{color:var(--ink-4)} .setfoot{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line-2)} /* ---------------- cartonașele de curier ---------------- */ /* Erau întinse la înălțimea celui mai înalt, cu textul de lungimi diferite. Acum au aceeași structură: siglă, nume, stare, explicație scurtă, buton lipit de jos. */ .curlist{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-3);align-items:start} .curcard{display:flex;flex-direction:column;padding:var(--s-4);gap:var(--s-3);min-height:0} .curcard__t{gap:var(--s-3);margin:0} .curcard__t b{font-size:var(--t-sm);line-height:1.3;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .curcard__d{ margin:0;font-size:var(--t-xs);line-height:1.55;color:var(--ink-3); /* trei rânduri, atât: explicațiile lor au lungimi foarte diferite și altfel cartonașele ies inegale */ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .curcard__a{margin-top:auto;padding-top:0} .curcard__a .btn{flex:1;justify-content:center} /* starea contului: aceeași etichetă plină ca la stocuri și comenzi */ .curcard__ok,.curcard__no{ margin-left:auto;flex:none;font-size:10px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:4px 8px;border-radius:var(--r);color:#fff; } .curcard__ok{background:var(--ok)} .curcard__no{background:var(--off)} body.dark .curcard__ok{background:var(--ok-bg);color:var(--ok)} body.dark .curcard__no{background:var(--off-bg);color:var(--off)} /* ============================================================ FORMULARELE DIN SETĂRI Câmpurile erau doar de citit, pe fond crem — de acolo venea galbenul spălăcit. Acum sunt câmpuri adevărate, albe, cu chenar ca peste tot. ============================================================ */ .frow .fld{display:block} .fld--full{grid-column:1/-1} .frow .fld>span{display:block;font-size:var(--t-xs);font-weight:600; color:var(--ink-2);margin-bottom:var(--s-1)} .frow .fld input,.frow .fld select{ width:100%;height:44px;padding:0 12px;border:1px solid var(--line-hard); border-radius:var(--r);background:var(--paper);font:inherit; font-size:var(--t-sm);color:var(--ink); } .frow .fld input:focus,.frow .fld select:focus{outline:none;border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(27,58,99,.1)} /* câmpul blocat arată blocat, nu doar altfel colorat */ .frow .fld input:disabled{background:var(--paper-3);color:var(--ink-3);cursor:not-allowed} .fld__n{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-4);margin-top:var(--s-1)} .setfoot{display:flex;align-items:center;gap:var(--s-3);justify-content:flex-end} .setmsg{flex:1;font-size:var(--t-xs);color:var(--ink-3)} .setmsg--bun{color:var(--ok);font-weight:600} .setmsg--rau{color:var(--bad);font-weight:600} /* rândurile vechi de doar-citit dispar odată cu formularele */ .fitem{display:none} /* ============================================================ ALINIEREA CÂMPURILOR ------------------------------------------------------------ Câmpurile ieșeau unul mai sus, altul mai jos, fiindcă unele au notă dedesubt și altele nu, iar grila le lipea de jos. Le fixăm sus și le dăm aceeași structură: etichetă, câmp, notă — în ordinea asta, mereu. ============================================================ */ .frow{align-items:start} .frow .fld{ display:flex;flex-direction:column;justify-content:flex-start; align-self:start;margin:0;min-width:0; } .frow .fld>span{order:0;min-height:18px} .frow .fld input,.frow .fld select{order:1;flex:none} .frow .fld .fld__n{order:2} /* aceeași regulă și în ferestrele de curieri */ .cur-b .cur-f1{display:flex;flex-direction:column;align-self:start} /* ---------------- SCHIMBAREA PAROLEI ---------------- */ .secpass{padding-top:var(--s-4);border-top:1px solid var(--line-2);margin-top:var(--s-4)} .secpass__t{margin-bottom:var(--s-3)} .secpass__t b{display:block;font-size:var(--t-sm);font-weight:700;color:var(--ink)} .secpass__t small{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px} /* ============================================================ NOTELE DE SUBSOL Erau pe fond crem, cu text auriu-șters — aceeași problemă ca la câmpurile de doar-citit. O notă e text, nu decor: o linie în stânga și scris citibil. ============================================================ */ .cnote,.setnote,.hintbox,.panel__b>.note{ background:transparent!important;border:0!important;border-left:3px solid var(--line-hard)!important; border-radius:0!important;padding:2px 0 2px var(--s-3)!important; font-size:var(--t-xs);line-height:1.6;color:var(--ink-3)!important; } .cnote svg,.setnote svg,.hintbox svg{color:var(--ink-4);width:16px;height:16px;flex:none} .hintbox{display:flex;align-items:flex-start;gap:var(--s-2)} /* ============================================================ CARTONAȘUL „ALT CURIER?" Ultimul din listă, cu chenar întrerupt: se vede că nu e un curier legat, ci o invitație. ============================================================ */ .curcard--cere{border-style:dashed;border-color:var(--line-hard);background:var(--paper-2)} .curcard--cere:hover{border-color:var(--gold)} .cursemn--plus{ display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r); background:var(--paper-3);border:1px dashed var(--line-hard); color:var(--ink-4);font-size:22px;font-weight:400;line-height:1; } .curcard--cere:hover .cursemn--plus{border-color:var(--gold);color:var(--gold-deep)} /* câmpurile din cererea de integrare */ .cur-f1 textarea{ width:100%;min-height:88px;padding:10px 12px;border:1px solid var(--line-hard); border-radius:var(--r);font:inherit;font-size:var(--t-sm);color:var(--ink); background:var(--paper);resize:vertical; } .cur-f1 textarea:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(27,58,99,.1)} .cur-f1 input[type=file]{ width:100%;padding:9px 12px;border:1px dashed var(--line-hard);border-radius:var(--r); font-size:var(--t-xs);color:var(--ink-3);background:var(--paper-2);cursor:pointer; } .cur-f1 input[type=file]:hover{border-color:var(--gold)} /* ============================================================ BARA DE SALVARE ------------------------------------------------------------ Butonul plutea în stânga, într-o casetă cât o coloană. Motivul: îl scriam ÎN interiorul grilei de câmpuri, deci devenea el însuși un câmp și primea o singură coloană. Acum ocupă toată lățimea, cu o linie deasupra care-l desparte de formular, și stă la dreapta — acolo unde se termină de citit. ============================================================ */ .frow .setfoot{ grid-column:1/-1; display:flex;align-items:center;gap:var(--s-3);justify-content:flex-end; margin-top:var(--s-2);padding-top:var(--s-4); border-top:1px solid var(--line-2); } .setfoot .btn{flex:none} .setmsg{flex:1;min-width:0;font-size:var(--t-xs);color:var(--ink-3)} /* pe ecran îngust, butonul se întinde: cu degetul e mai ușor de nimerit */ @media(max-width:560px){ .frow .setfoot{flex-wrap:wrap} .frow .setfoot .btn{width:100%;justify-content:center} .setmsg{width:100%;flex:none;text-align:center} } /* ============================================================ BUTOANELE, GLOBAL ------------------------------------------------------------ „btn--soft" era chenar auriu pal cu text auriu stins — la 12px nu se citea. E butonul secundar din tot portalul: Repetă comanda, Vezi oferta, Deconectează-mă. Un buton secundar e text negru pe chenar neutru; aurul rămâne pentru butonul principal, unul singur pe ecran. ============================================================ */ .btn--soft{ background:var(--paper);border:1px solid var(--line-hard);color:var(--ink-2);font-weight:600; } .btn--soft:hover{background:var(--val-hover);border-color:var(--ink-4);color:var(--ink)} .btn--soft svg{color:var(--ink-4)} .btn--soft:hover svg{color:var(--ink-2)} .btn--gold{background:var(--gold);border:0;color:#2A1D00;font-weight:700} .btn--gold:hover{background:#DDA31C;color:#2A1D00} .btn--ghost{background:var(--paper);border:1px solid var(--line-hard);color:var(--ink-2)} .btn--ghost:hover{border-color:var(--ink-4);color:var(--ink)} /* ============================================================ TEXTUL MĂRUNT DE PE CARDURI „1 produse · 1 buc · 56,26 lei · ridicare" și datele erau pe griul cel mai deschis. Sunt datele comenzii, nu note de subsol. ============================================================ */ .ocd__list,.ocd__meta,.ocd__date,.ocd__note,.ofd__list,.ofd__meta,.ofd__date, .ofd__r,.crow__meta,.osum__meta{color:var(--ink-2)} .ocd__list svg,.ocd__date svg,.ofd__list svg,.ofd__date svg{color:var(--ink-4)} /* inima de favorit, peste tot în portal: roșie când e pornită */ .bfav.is-on,.bfav[aria-pressed="true"]{ border-color:#FCA5A5;background:#FEF2F2;color:#DC2626; } .bfav.is-on svg,.bfav[aria-pressed="true"] svg{fill:currentColor} .fitem--fav .ico-heart,.crow__fav.is-on{color:#DC2626} body.dark .pcd__fav.is-on,body.dark .prow__ic.is-on,body.dark .bfav.is-on{ background:#3B1A1A;border-color:#7F3838;color:#FCA5A5; } /* filtre rapide: produse noi si produse reintrate pe stoc */ .bfel.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff} .bfel.on svg{color:#fff} .ost--sters{background:#7A1420!important} /* stearsa de noi */ /* Comutatorul grila/lista: activul TREBUIE sa se vada. Regula de mai sus se pierdea intre celelalte (hover, focus, cont.css), asa ca o punem la sfarsit, cu selector mai tare, si acoperim si hover. */ /* `important` aici, dinadins: butonul ăsta e atins de șapte reguli din trei fișiere (cont.css îl face auriu, cont-ui transparent, hover-ul îl spală). E un singur comutator, nu merită încă o rundă de specificitate. */ .bview button.is-on, .bview button.is-on:hover, .bview button.is-on:focus{background:#0B1B33!important;border-color:#0B1B33!important;color:#fff!important} .bview button.is-on svg, .bview button.is-on:hover svg{color:#fff!important} .bview button:not(.is-on), .bview button:not(.is-on):hover{background:#fff!important;color:#8A94A6!important} /* Inelul de focus era patrat in jurul unui camp rotunjit — de aceea aratau coltrile „rupte". Il facem sa urmeze forma campului. */ .bsearch input:focus-visible, .bsel select:focus-visible, input[type="search"]:focus-visible, input[type="text"]:focus-visible{outline:none} .bsearch input:focus{border-color:#0B1B33;box-shadow:0 0 0 3px rgba(11,27,51,.10)} /* TREPTELE DE PE CARD: cifra iesea din caseta. Coloanele erau `1fr 1fr`, dar continutul lor nu putea cobori sub latimea proprie (min-width implicit `auto`), asa ca preturile lungi — 438,15 — impingeau in afara. Le lasam sa se stranga si taiem spatiul dintre ele cand e nevoie. */ .pcd__sc>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px} .pcd__sc span{min-width:0} .pcd__sc i{min-width:0;padding:0 6px;flex:0 0 auto} .pcd__sc b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-variant-numeric:tabular-nums} /* sublinierea pretului cel mai bun ramane pe cifra, nu peste marginea casetei */ .pcd__sc .is-best b{text-decoration-skip-ink:none;display:inline-block;max-width:100%} @media(max-width:420px){ .pcd__sc>div{grid-template-columns:minmax(0,1fr);gap:3px} } /* Bara laterala a crescut peste inaltimea ecranului odata cu „Preturile mele": meniul se deruleaza singur, iar sigla, cartonasul de reduceri si butonul de strangere raman mereu la vedere. Fara bara de derulare. */ .side{overflow:hidden} .side__logo{flex:none} .side__nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden; scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain} .side__nav::-webkit-scrollbar{width:0;height:0} .side .promo{flex:none;margin-top:12px} .side .baratog{flex:none;margin-top:0}