/* ====================================================================== Lab-404 — pagina de pachete, stilurile specifice ---------------------------------------------------------------------- Extras VERBATIM din prototipul WHMCS-tests/d1v5b-cu-sidebar.html, ca randarea sa fie identica. Se incarca dupa lab404-pg-base.css si lab404-pg-comun.css. ====================================================================== */ /* d1 v4 - "Ce primești" si "Facilități care diferă" rămân EXACT cum erau: rândurile .lista-pachet cu ✓/✕, valoarea aliniata la dreapta si "de la " pentru ce lipsește. Alea functionau. - Doar blocul de jos se schimba: e acum pd-board, componenta din index.html (#lab-404-pricing .pd-board) - grila pe doua coloane, Fira Code la .74rem, buline de 9px verzi cu glow. */ /* Bara de breadcrumb a temei (nav.master-breadcrumb) arata un singur nivel, "Coș de cumpărături", care nu spune nimic si nu duce nicaieri - iar pagina are deja titlul ei mare dedesubt. O ascundem aici, nu in header.tpl: pe restul zonei de client breadcrumb-ul chiar ajuta. */ nav.master-breadcrumb { display: none; } /* --- Fundalul violet-fucsia ------------------------------------------ In prototip gradientul era body::before, deci fundalul lui body stătea sub el. Aici nu putem pune o clasa pe , iar un element fixed cu z-index negativ ingropat in pagina rămâne SUB fundalurile parintilor nepoziționați (body = #0b1220, section#main-body = #030712, ambele opace) - de aceea nu se vedea nimic. Il pictam direct pe section#main-body, ca background-image: nimeni altcineva nu scrie proprietatea asta, deci nu e nevoie de !important, iar culoarea de dedesubt e deja #030712, exact baza pe care e desenat designul. background-attachment: fixed reproduce ancorarea la ecran a pseudo-elementului original. Foaia se incarca doar pe paginile noastre, deci regula e deja limitata la ele - nu are nevoie de alt scoping. */ section#main-body { /* Cele trei pete. Geometria rămâne aceeasi pe orice pagina - ea da senzatia de "acelasi site" - si se schimba doar NUANTA, pe familie de produse. Plasa de pătrate de mai jos e alba, deci nu se schimba niciodata cu nuanta: de aia paginile arata din aceeasi familie chiar cand petele difera. Aici stau doar cele trei nuante. Cat de aprinsa e fiecare pata - saturatie, luminozitate, transparenta, oprire - vine din reteta comuna din custom.css. Inainte fiecare familie isi scria propriile numere, deci "mai aprins" se cerea in patru locuri si ieseau patru rezultate diferite. */ --sc-h1: 280; --sc-h2: 302; --sc-h3: 262; background-image: radial-gradient(74vw 64vh at 82% 6%, hsl(var(--sc-h1) var(--sc-s1) var(--sc-l1) / var(--sc-a1)), transparent var(--sc-stop1)), radial-gradient(62vw 58vh at 6% 50%, hsl(var(--sc-h2) var(--sc-s2) var(--sc-l2) / var(--sc-a2)), transparent var(--sc-stop2)), radial-gradient(96vw 58vh at 50% 104%, hsl(var(--sc-h3) var(--sc-s3) var(--sc-l3) / var(--sc-a3)), transparent var(--sc-stop3)); background-attachment: fixed; /* Pentru plasa de mai jos. z-index: 0 face din #main-body un context de stivuire, ca pseudo-elementul cu z-index negativ sa se deseneze DEASUPRA fundalului lui si sub conținut - fara asta ar cadea iar sub fundal, exact capcana in care a picat gradientul la inceput. */ position: relative; z-index: 0; } /* --- Plasa de pătrate, care se stinge in jos ---------------------------- Designul "Blueprint" din WibePress (designs-build/jobs-bg/g1.html): doua straturi de caroiaj, unul mare de 96px si unul fin de 24px. Acolo era mascat radial, in mijlocul secțiunii; aici masca e verticala, ca plasa sa fie plina sus si sa dispara complet pe la jumatatea paginii. Stă pe un pseudo-element, nu in lista de background-image de mai sus, fiindca masca s-ar aplica si gradientului violet - iar el trebuie sa rămână intreg. */ section#main-body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1200px; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--sc-plasa) 1px, transparent 1px), linear-gradient(90deg, var(--sc-plasa) 1px, transparent 1px), linear-gradient(var(--sc-plasa-fin) 1px, transparent 1px), linear-gradient(90deg, var(--sc-plasa-fin) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 100%); } /* --- Business E-mail: magenta cu lime -------------------------------- Alta gama, alte pete. Nuantele ocolesc tot ce e deja folosit in site: violet-magenta 262-302 (magazinul de găzduire), verde-teal 162 (domeniu), teal 168 (coș), chihlimbar 30 (configurare), azur 222 (finalizare). Aici: roz 320 sus-dreapta, magenta 300 la mijloc, lime 100 jos - doua accente care se citesc separat. Selectorul are nevoie de :has fiindca familia o stie #order-standard_cart, iar section#main-body e strămoșul lui: nu se poate urca in cascada altfel. Pe paginile fara atributul asta nu se schimba nimic, deci găzduirea rămâne violet. */ body:has(.lab404-pachete[data-familie="email"]) section#main-body { --sc-h1: 320; --sc-h2: 300; --sc-h3: 100; } /* --- Servere VPS Fusion: cupru --------------------------------------- Cald, fiindca un VPS se cumpara pentru putere, iar caldul citeste ca putere; albastrul citeste ca liniste. Nuanțele ocolesc tot ce e deja folosit: violet-magenta 262-302 (găzduire), magenta+lime 320/100 (Business E-mail), verde-teal 162 (domeniu), teal 168 (coș), chihlimbar 30 (configurare), azur 222 (finalizare). Geometria petelor si plasa alba de pătrate rămân aceleasi - doar culorile se schimba. */ body:has(.lab404-pachete[data-familie="vps"]) section#main-body { --sc-h1: 15; --sc-h2: 32; --sc-h3: 5; } /* --- n8n Hosting: indigo --------------------------------------------- Foloseste caseta VPS-urilor, dar nu e un VPS: e o unealta de automatizare. Indigo e rece si adânc - citeste ca "infrastructura", nu ca "putere" - si nu se loveste de nimic din ce e deja luat: violet-magenta 262-302 (găzduire), magenta+lime 320/100 (Business E-mail), verde-teal 162 (domeniu), teal 168 (coș), chihlimbar 30 si violet 262 (configurare), azur 222 (finalizare), cupru 15 (VPS). Geometria petelor si plasa alba de pătrate rămân aceleasi - doar culorile se schimba. */ body:has(.lab404-pachete[data-familie="n8n"]) section#main-body { --sc-h1: 250; --sc-h2: 236; --sc-h3: 266; } /* Accentul din interiorul paginii - cursor, statii, cifre, "↑ de la" - se calculeaza tot din --sec-h. Blocul de layout de mai jos e comun cu VPS-ul, care declara acolo 15, deci nuanta lui n8n se scrie separat, DUPA el ca ordine de cascada nu conteaza (aceeasi specificitate, selector diferit) - dar mai jos in fisier ar fi ascuns-o intre reguli de layout, iar aici sta langa petele ei. */ /* `body` in fata nu e de decor: blocul de layout de mai jos declara --sec-h: 15 pe `.lab404-pachete:is([data-familie="vps"], [data-familie="n8n"])`, adica aceeasi specificitate (0,2,0) ca regula asta - iar el vine mai tarziu in fisier, deci castiga. Cu `body` ajung la (0,2,1) si nuanta indigo se aplica de aici, unde sta langa petele ei. Verificat: fara `body`, --sec-h iesea 15 pe pagina de n8n. */ body .lab404-pachete[data-familie="n8n"] { --sec-h: 250; } /* Rezervarea de inalțime a titlului nu are rost pe pagina de e-mail. La găzduire titlurile celor trei game au lungimi diferite, iar fara rezervare antetul sare la fiecare schimbare de serviciu. La e-mail exista o singura gama si nicio banda de servicii, deci nu sare nimic: rezervarea ar lasa doar un gol sub titlu. DE REPARAT SEPARAT, in lab404-pg-comun.css: acolo regula e `min-height: calc(4.4em)`, adica patru rânduri, dar computeaza 141px in loc de 183px - adica 3,1 rânduri. Pusa inline, aceeasi valoare da 183px. Deci `em` se resolva pe mărimea implicita de

(2rem), inainte sa intre in joc var(--t-mare). Merge din noroc, fiindca cel mai lung titlu incape in trei rânduri. Se scrie in rem, nu in em - dar atunci antetul de la găzduire creste cu 42px, deci e o schimbare de aratat inainte. / .lab404-pachete[data-familie="email"] .titlu-grup, .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .titlu-grup { min-height: 0; } / --- Banda paginii --------------------------------------------------- Site-ul public lucreaza pe 1240px (public-staging/assets/base.css: .wrap { width: min(1240px, 100% - 3rem) }) si designul a fost desenat pe ea. Containerul Bootstrap din nexus da 1140px cu 15px de padding, adica 1110px utili: coloana din dreapta pierdea 130px si etichetele din pd-board se tăiau cu ellipsis. REGULA S-A MUTAT IN site-chrome.css, si odata cu ea s-a extins peste tot. Statea aici, deci se aplica doar paginilor care incarca foaia asta - iar pe restul zonei de client banda ramanea 1140. Se vedea: pe /index.php logoul statea lipit de meniu, iar pe /store/gazduire-web sarea cu 45px mai la stanga, ca si cum antetul ar fi doua antete diferite. / / --- Sectiunile 1 si 2, nemodificate --------------------------- / .lista-pachet { list-style: none; margin: 0; padding: 0; } .lista-pachet li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3); padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); } .lista-pachet .semn { font-family: var(--font-display); font-weight: 700; line-height: 1.4; } .lista-pachet li.are .semn { color: var(--ok); } .lista-pachet li.nu-are .semn { color: var(--ink-4); } .lista-pachet .eticheta { color: var(--ink-2); } .lista-pachet li.nu-are .eticheta { color: var(--ink-4); } .lista-pachet .valoare { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .lista-pachet .creste { display: inline-block; margin-left: var(--sp-2); font-family: var(--font-body); font-size: var(--t-xs); font-weight: 500; color: var(--cyan-light); } .lista-pachet .deblocare { font-size: var(--t-xs); color: var(--cyan-light); white-space: nowrap; } .lista-pachet li.are .deblocare { color: var(--ink-4); } / --- Blocul de jos: pd-board din index.html -------------------- Valorile sunt copiate din #lab-404-pricing .pd-board / .pd-stat: Fira Code .74rem, buline de 9px, verde #34d399 cu glow si puls, contur gol pentru ce nu e disponibil. / .pd-legend { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-3); white-space: nowrap; margin-bottom: var(--sp-4); } .pd-legend span { display: inline-flex; align-items: center; gap: .3rem; } .pd-lg-on, .pd-lg-off { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .pd-lg-on { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .9); } .pd-lg-off { border: 1.5px solid rgba(148, 163, 184, .5); background: transparent; } .pd-board { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; } .pd-stat { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .74rem; line-height: 1.35; min-width: 0; } .pd-stat .pd-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; } .pd-stat.on .pd-dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .14), 0 0 10px rgba(52, 211, 153, .85); animation: pd-pulse 2.4s ease-in-out infinite; } .pd-stat.off .pd-dot { border: 1.5px solid rgba(148, 163, 184, .45); background: transparent; } .pd-stat .pd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-stat.on .pd-lbl { color: #d6dde8; } .pd-stat.off .pd-lbl { color: #5f6b7e; } @keyframes pd-pulse { 0%, 72%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .14), 0 0 10px rgba(52, 211, 153, .85); } 86% { box-shadow: 0 0 0 2px rgba(52, 211, 153, .04), 0 0 3px rgba(52, 211, 153, .3); } } / Aceleasi praguri ca in index.html: o coloana pe lățimi medii / @media (max-width: 1200px) and (min-width: 641px) { .pd-board { grid-template-columns: 1fr; } } @media (max-width: 420px) { .pd-board { grid-template-columns: 1fr; } } / Convenția proiectului: pulsul se opreste sub 992px si la prefers-reduced-motion / @media (prefers-reduced-motion: reduce), (max-width: 991px) { .pd-stat.on .pd-dot { animation: none; } } .varianta-bloc + .titlu-sectiune { margin-top: var(--sp-8); } / VARIANTA B - cu sidebar-ul WHMCS păstrat. Sunt exact cele trei panouri pe care le genereaza WHMCS pe pagina de produse (Categorii cu toate cele 8 grupuri, Acțiuni, Alege moneda), doar imbracate in paleta noastra. Nimic inventat: etichetele si linkurile sunt cele reale, cu slug-urile de produs. / .pagina { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } @media (max-width: 940px) { .pagina { grid-template-columns: 1fr; } } / Sidebar-ul se lipeste SUB bara de galerie, nu sub ea in sens de z-index: bara e sticky la top:0, deci daca sidebar-ul se lipeste la 1.5rem, capul panoului "CATEGORII" intra dedesubtul barei si se taie. --bara-h e masurat in JS, ca bara isi schimba inaltimea cand se rupe pe mai multe rânduri. In WHMCS bara nu exista, iar variabila rămâne 0. / .sidebar-whmcs { position: sticky; top: calc(var(--bara-h, 0px) + var(--sp-4)); display: grid; gap: var(--sp-4); } @media (max-width: 940px) { .sidebar-whmcs { position: static; } } .panou { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; } .panou-titlu { margin: 0; padding: var(--sp-4) var(--sp-4); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; } .panou-lista { display: grid; } .panou-lista a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: .6rem var(--sp-4); border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); color: var(--ink-3); transition: color .18s var(--ease-out), background-color .18s var(--ease-out); } .panou-lista a:last-child { border-bottom: 0; } .panou-lista a:hover { / Bleu, ca elementul curent, doar mai stins: bara laterala e carcasa comuna a site-ului, iar bleul e culoarea ei. Cu alb, hoverul arata ca o umbra si nu se lega de nimic din pagina. / background: rgba(6, 182, 212, .08); color: var(--cyan-pale); } / Grupul curent: bara de accent la stânga se face cu un pseudo-element lipit, nu cu border-left colorat pe link. BLEU FIX pe toate paginile, nu nuanta paginii. Am incercat si varianta cu gradient din culoarea gamei - violet la găzduire, magenta la e-mail, cupru la VPS - si aratata pe toate paginile a fost respinsa: meniul isi schimba culoarea de la o pagina la alta si nu se mai citea ca acelasi meniu. Deci bara laterala rămâne carcasa: acelasi bleu peste tot. Nuanta gamei se vede in fundal si in conținut, nu in navigație. / .panou-lista a[aria-current="page"] { position: relative; background: rgba(6, 182, 212, .1); color: var(--cyan-pale); font-weight: 500; } .panou-lista a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan); } / Selectorul de monedă, ca in WHMCS / .panou-corp { padding: var(--sp-4); } .panou-corp select { width: 100%; appearance: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font: inherit; font-size: var(--t-sm); padding: .4rem 2rem .4rem .6rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; } / Cu sidebar rămâne mai putina lățime, deci coloana de decizie se strânge si cele doua coloane se stivuiesc mai devreme. / @media (max-width: 1400px) { .pachet { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } } @media (max-width: 1150px) { .pachet { grid-template-columns: 1fr; } .coloana-dreapta { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--sp-8); margin-top: var(--sp-8); } .coloana-stanga { padding-right: 0; } } / ===================================================================== VPS FUSION — diferențele fata de restul paginilor --------------------------------------------------------------------- Toate valorile de aici sunt MASURATE pe mockup-ul aprobat (WHMCS-tests/vps-designs/v1-cursor-marime.html), nu alese acum: cursorul in cupru in loc de cyan, stațiile pe fontul de brand la 15,2px in loc de mono la 12px, caseta cu fundal si raza in loc de o simpla linie de sus, barele de 8px in loc de 6. Fara ele pagina arata "cam la fel"; cu ele arata la fel. ===================================================================== / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) { / Nuanta gamei. Restul valorilor de mai jos se calculeaza din ea, deci daca se schimba culoarea paginii se schimba si cursorul si stațiile. / --sec-h: 15; / Verdele creșterii, folosit de "(recomandat)" si de "↑ de la". Nu e --ok (#22c55e), care e mai saturat si trage spre semafor; asta e verdele menta din mockup, care sta liniștit langa cupru. / --cresc: #34d399; } / --- Cursorul: cupru, nu cyan ---------------------------------------- / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pista::after { background: linear-gradient(90deg, hsl(var(--sec-h) 85% 52%), hsl(calc(var(--sec-h) + 30) 80% 55%)); box-shadow: 0 0 16px hsl(var(--sec-h) 85% 50% / .40); } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pista input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 1px hsl(var(--sec-h) 85% 55%), 0 0 22px hsl(var(--sec-h) 85% 50% / .55); } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pista input[type="range"]::-moz-range-thumb { box-shadow: 0 0 0 1px hsl(var(--sec-h) 85% 55%), 0 0 22px hsl(var(--sec-h) 85% 50% / .55); } / --- Stațiile: mai mari si pe fontul de brand ------------------------ / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie { font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink-4); transition: color .25s var(--ease-out), transform .25s var(--ease-out); } / Fara lumina albastra in spatele textului. Tema pune text-shadow cyan pe etichetele atinse (12px) si pe cea curenta (16px), plus un box-shadow cyan pe liniuța de sub ele - trei surse de albastru pe o pagina cupru, si toate trei se vedeau ca o pata in spatele cifrelor. Mockup-ul nu are nici una. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie.atins { color: var(--ink-2); text-shadow: none; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie.atins::before { background: hsl(var(--sec-h) 85% 55%); box-shadow: none; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie.curent { color: hsl(var(--sec-h) 85% 72%); transform: translateX(-50%) scale(1.08); text-shadow: none; } / Liniuța treptei alese rămâne vizibila si mai lunga, ca in mockup; tema o ascunde. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie.curent::before { height: 16px; opacity: 1; } / Locul etichetelor de sub cursor se face din padding-ul pistei, nu din inalțimea .statii: .statii e poziționat absolut (si el, si fiecare eticheta), deci nu ocupa nimic in asezare - i-am dat 54px de inalțime, ca in mockup, si etichetele au trecut 51px peste caseta. Padding-ul e singurul care ține loc. 88px = eticheta pe doua rânduri a treptei recomandate (~71px sub pista) plus 17px de aer, cat are mockup-ul. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pista { padding-bottom: 88px; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie .recomandat, .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .statie.curent .recomandat { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; margin-top: .15rem; / Verde, nu albastrul temei: pe o pagina cupru, cyanul e singura urma de albastru ramasa si sare in ochi ca greșeala de culoare. Verdele e oricum culoarea creșterii pe pagina asta - acelasi cu "↑ de la" de pe rândurile de resurse. / color: var(--cresc); text-shadow: none; } / "↑ de la 2" de pe rândurile care cresc: aceeasi logica, acelasi verde. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet .creste { color: var(--cresc); } / --- Ce e in caseta, si ce nu mai e --------------------------------- Mockup-ul are in caseta doar patru lucruri: numele, propoziția de sub el, prețul si butonul in stânga; rândurile cu bare in dreapta. Pagina live adăuga peste ele eticheta de grup, un divider si un titlu de secțiune - trei elemente care spun ceva ce se vede deja: pe ce pagina ești. / / Eticheta "Servere VPS Fusion" de sub numele planului: pe pagina gamei VPS, sub un titlu care spune "VPS-uri rapide...", intr-o categorie marcata in stânga. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .plan-nume .eticheta-grup { display: none; } / Si linia de sub nume. Caseta are deja contur, deci mai desparte ceva din interiorul ei de restul interiorului - doua chenare pentru un singur conținut. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .plan-nume { padding-bottom: 0; border-bottom: 0; margin-bottom: var(--sp-2); } / Propoziția de sub nume: mica si stinsa, ca numele sa rămâna singurul lucru mare din caseta. La 20px si in ink-2 concura cu el. Rezervarea de trei rânduri ține prețul si butonul pe loc cand se trage cursorul intre planuri cu descrieri de lungimi diferite. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .potrivire { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); margin: 0 0 var(--sp-6); / Trei rânduri rezervate (3 × 1,6em), nu doua: subtitlurile din admin au intre 75 si 103 de caractere, iar pe un ecran de laptop cele lungi trec pe al treilea rând, in timp ce cele scurte rămân pe doua. Masurat la 1100px: prețul si butonul săreau 22px intre Fusion-2 si Fusion-3, la fiecare tragere de cursor. Rezervarea le ține pe loc. / min-height: 4.8em; / Fara plafonul de 68ch pus pe toate paragrafele: la 14px iese 265px, adica mai ingust decat coloana (365px), si propoziția se rupea cu un cuvant mai devreme decat in mockup. Plafonul are rost la text curgator, nu intr-o coloana care il limitează deja. / max-width: none; } / Ritmul rândurilor din caseta: 1,6 in loc de 1,65 al temei. Diferenta e de un pixel pe rând, dar caseta are vreo douăzeci de rânduri de text, si acolo se aduna. O declarație pe caseta ajunge la toate: etichetele, valorile, "de la", nota - niciuna nu isi declara propriul line-height. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pachet { line-height: 1.6; } / Restul textelor care aveau alt ritm decat in mockup. Sunt patru locuri, si nu se pot lua toate cu o declarație pe pagina: fiecare isi declara propriul line-height. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .eticheta-cursor { line-height: 1.6; font-weight: 400; / 24px pana la cifra mare, nu 16 cat au paragrafele in general. / margin-bottom: var(--sp-6); } / Cifra mare: 0,9 taie spațiul de sub cifra, ca ea sa stea pe aceeasi linie cu unitatea. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .numar-mare output { line-height: .9; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .numar-mare .unitate { line-height: 1.6; } / Numele planului: 1,05, cat are titlul din mockup. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .plan-nume h2 { line-height: 1.05; } .toate .titlu-sectiune { line-height: 1.6; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .bloc-pret { margin-bottom: var(--sp-6); } / --- Butonul: pe lățimea textului, nu pe toata coloana --------------- Un buton de 376px pentru trei cuvinte arata ca o bara, nu ca un buton, si isi pierde forma cand caseta se lățește. inline-grid face grupul exact cat butonul, si atunci "Anulare oricând" se centreaza PE buton, nu pe coloana - motivul pentru care inainte arata trântit sub el. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .actiuni { display: inline-grid; justify-items: center; gap: var(--sp-3); / Coloana din stânga e flex si centreaza pe orizontala; cat timp butonul era lat cat toata coloana nu se vedea, dar acum ar sta centrat, mai la dreapta decat titlul. / align-self: start; } / Aici erau valorile din mockupul VPS: 14px cu aer de 12,8/25,6 si colturi de 10px, in loc de 16px cu 11,2/19,2 si 12px cat au celelalte carduri. Au plecat. Motivul: un card de pret e acelasi lucru pe orice pagina din magazin, iar butonul lui era de doua marimi, dupa familia produsului - la gazduire, mail si Nextcloud unul, la VPS si n8n altul. Marimea unui buton spune ce fel de actiune e, nu ce produs se vinde, deci cand acelasi rol are doua marimi, una e gresita. Ce ramane e ce tine de asezare, nu de imbracaminte: butonul e cat textul lui, fiindca ".actiuni" e un inline-grid centrat - lat cat coloana, ar fi tras dupa el si randul "Anulare oricand" de sub el. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .actiuni .btn-comanda { width: auto; max-width: 100%; margin-bottom: 0; } / Rândurile: fara bifa (o are fiecare oricum, si sub ea o bara) si fara linie despartitoare - linia cadea imediat sub bara si se citeau ca doua bare, una plina si una goala. Aerul dintre rânduri ține locul liniei. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet { display: grid; row-gap: var(--sp-4); } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet li { / Eticheta pastreaza minimum 9rem. Cu `1fr auto`, valoarea isi ia cat vrea si eticheta primeste ce rămâne: dupa ce valoarea a devenit "32 vCPU · până la 3,8 GHz ↑ de la 28" (290px), la 1100px eticheta rămânea cu 20px si "Nuclee AMD EPYC 9454P" se rupea pe sase rânduri. Acum se rupe valoarea, care are unde. / grid-template-columns: minmax(9rem, 1fr) minmax(0, auto); / 16px in ambele direcții. In mockup gapul declarat e 8px, dar golul VIZIBIL de sub text iese 15: rândul e aliniat pe linia de baza, iar Inter si Fira Code au metrici diferite, deci pista de grid rezerva ~7px in plus sub text. Aici, cu eticheta care e inline-block, aceeasi aliniere nu rezerva nimic - deci pun distanța direct. Rezultatul: 16px deasupra barei si 16 sub ea, ca in mockup (15/16). / gap: var(--sp-4); padding: 0; border-bottom: 0; } / Valorile pe fontul mono, ca in mockup: 14px/400 in loc de 16px/600 din tema. Cifrele stau una sub alta pe patru rânduri si se compara pe verticala, iar mono le tine pe aceeasi lățime. Tot din motivul asta si "↑ de la ..." e mono. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet .valoare { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 400; / Voie sa se rupa. Tema pune `nowrap`, ceea ce merge cat timp valoarea e "8GB"; de cand rândul de nuclee spune "32 vCPU · până la 3,8 GHz ↑ de la 28" (290px), la 1100px ieșea 124px in afara casetei, peste coloana din dreapta. Se rupe intre valoare si "↑ de la ...", care isi pastreaza propriul nowrap. / white-space: normal; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet .creste { font-family: var(--font-mono); font-weight: 400; } / --- "↑ de la ..." pe acelasi rând cu valoarea ----------------------- Pe Titan X2 si X3 creșterea cadea pe rândul de dedesubt: valoarea "28 vCPU · până la 3,8 GHz" ia 210px, creșterea 72, deci impreuna 290 - iar coloana din dreapta le da atat abia de la 1265px in sus, cat timp eticheta isi ține 9rem. Masurat, ca sa nu ghicesc: eticheta "Nuclee AMD EPYC 9454P" are 173px pe un rând si oricum se rupe in doua la lățimile astea. Deci ii las minimul la 5rem (80px) si dau restul valorii. Socoteala la cea mai strânsa lățime la care caseta e pe doua coloane (1151px): coloana din dreapta 403px = 80 eticheta + 16 gap + 290 valoare, cu 17px in plus. Sub 1150px caseta trece pe o coloana, deci coloana din dreapta se lățește la toata caseta si intra oricum. Doar de la 641px in sus: pe telefon lățimea disponibila scade sub 290px, iar `nowrap` ar scoate valoarea in afara casetei - exact defectul reparat mai sus, la .valoare. Acolo, sub 641px, rămâne comportamentul de acum: creșterea trece pe rândul urmator. / @media (min-width: 641px) { .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet li { grid-template-columns: minmax(5rem, 1fr) minmax(0, auto); } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet .valoare { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet .creste { margin-left: 0; flex: 0 0 auto; } } / Prețul: 2,3rem fix, ca in mockup. Pe live venea din clamp si ajungea la 41px, adica mai mare decat numele planului de deasupra lui. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .bloc-pret .val { font-size: 2.3rem; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .bloc-pret .per { color: var(--ink-4); } / --- Distanțele ------------------------------------------------------ Sub cursor nu mai e nevoie de margine: rezervarea .statii (54px) plus padding-ul de jos al pistei (32px) dau exact golul din mockup. Aici fusese o margine de 48px, pusa cand .statii avea 32px si eticheta pe doua rânduri ieșea peste caseta - un plasture peste o rezervare prea mica. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .cursor-zona { margin-bottom: 0; } / Cele doua coloane: 1 la 1,15, despartite de 48px de gap adevarat. Tema le face `minmax(0, 400px) minmax(0, 1fr)` si pune distanța din padding-uri pe fiecare coloana - asa, la 1280px, coloana din stânga rămâne 340px si conținutul ei 316, in loc de 365. Se vedea in descrierea planului, care se rupea cu un cuvant mai devreme decat in mockup. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pachet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: calc(var(--sp-8) + var(--sp-4)); } / Coloana din stânga e flex cu 32px intre elemente, iar peste ei se adunau si marginile proprii: 12+8+32 = 52px sub nume, 24+32 = 56 sub descriere si sub preț. In mockup sunt 8, 24 si 24, si vin numai din margini. Deci scot gapul si las marginile. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .coloana-stanga { gap: 0; } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .plan-nume h2 { margin-bottom: 0; } / Padding-urile ies: distanța o face gapul de mai sus. Cat timp erau amandoua, coloanele pierdeau 48px din lățime pe langa gap. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .coloana-stanga { padding-right: 0; } / Lista de resurse se centreaza pe verticala fata de coloana din stânga. Inalțimea casetei o da coloana mai inalta - la Fusion cea din stânga, cu preț si buton - iar lista, lipita sus, lasa tot golul jos. Centrata, golul se imparte in doua si caseta arata echilibrata. Conteaza mai ales la Titan, unde cresc doua resurse in loc de patru, deci lista e jumatate din inalțimea coloanei din stânga. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .coloana-dreapta { align-self: center; } / Si linia verticala dintre coloane iese: caseta are contur, deci al doilea chenar inauntru taia un singur conținut in doua. Cele 48px de aer despart destul. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .coloana-dreapta { padding-left: 0; border-left: 0; } / --- Tabloul de facilitati, sub caseta ------------------------------- Aici ajunge doar la VPS (vezi products.tpl). Pe toata lățimea incap trei coloane, deci nici o propoziție nu se mai taie - in coloana din dreapta a casetei aveau 206px si se tăiau doua din sase. / .toate:empty { display: none; } .toate { / Fara linie deasupra: caseta de sus are deja contur, deci o a doua linie sub ea nu desparte nimic - doar repeta marginea casetei. Despartirea o face aerul. 64px, nu 96: cei 96 erau 64 de margine plus 32 de padding, adica distanța de deasupra unei linii plus cea de dedesubtul ei. Fara linie, o singura distanța ajunge - si e aceeasi cu marginea din mockup. / margin-top: calc(var(--sp-8) 2); } .toate .pd-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-8); } /* Bifele de jos, cu textul ca in restul paginii: Inter 14px in loc de mono 11,8px. Mono e pentru cifre care se compara pe verticala; aici sunt propoziții, iar la 11,8px erau cel mai mic text din pagina, desi spun ce primești la orice plan. Bulinele rămân - arata mai bine decat bifele. / .toate .pd-stat { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: var(--sp-3); font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.6; } .toate .pd-stat .pd-lbl { / Fara tăiere: pe trei coloane de 278px incape orice propoziție din lista. / overflow: visible; white-space: normal; text-overflow: clip; color: var(--ink-2); } / Bulina sta pe prima linie a textului, nu pe mijlocul rândului. / .toate .pd-stat .pd-dot { margin-top: .45rem; } @media (max-width: 860px) { .toate .pd-board { grid-template-columns: 1fr; } } / --- Caseta: panou cu fundal si raza, nu doar o linie ---------------- / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .pachet { background: rgba(11, 17, 30, .72); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: var(--sp-8); } / --- Barele si semnele de creștere ---------------------------------- / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .lista-pachet .rand-umple { background: linear-gradient(90deg, hsl(var(--sec-h) 85% 52%), hsl(calc(var(--sec-h) + 35) 80% 58%)); } / --- Cifra mare si unitatea, la mărimile din mockup ------------------ / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .numar-mare output { font-size: clamp(3rem, 1.8rem + 5vw, 5rem); } .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .numar-mare .unitate { / 18px, nu var(--t-lg) care e 20px: pe unitate stau trei valori una langa alta ("nuclee · 8GB RAM · 160GB NVMe"), iar la 20px rândul se rupe in doua pe ecrane de laptop. Intre --t-base si --t-lg nu exista treapta, de aici cifra scrisa direct. / font-size: 1.125rem; max-width: none; } / Numele planului: 41,6px, ca titlul paginii. Pe live era 48,8px si ieșea mai mare decat titlul de deasupra lui, ceea ce inversa ierarhia. / .lab404-pachete:is([data-familie="vps"], [data-familie="n8n"]) .plan-nume h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem); } / ===================================================================== STOCARE CLOUD — discul in loc de cursor --------------------------------------------------------------------- Gama are patru trepte cu nume scurte (1TB, 5TB, 10TB, 20TB) si o singura resursa care creste. Pe asa ceva, pastilele se aleg mai bine decat cursorul: apesi "10TB", nu tragi pana nimerești a treia treapta. Cursorul rămâne insa in marcaj, ascuns: el e sursa de adevar a paginii, iar pastilele ii scriu valoarea (vezi deseneazaTrepte() din js/lab404-pachete.js). Cifra mare a temei se ascunde si ea: o spune inelul, in mijloc. Nuanta nu se declara nicaieri: violetul e ce pune tema implicit oricarei game care nu-si cere altceva, deci Cloud-ul il moștenește. ===================================================================== / .lab404-pachete[data-familie="cloud"] .cursor-zona, .lab404-pachete[data-familie="cloud"] .numar-mare { display: none; } .lab404-pachete[data-familie="cloud"] .zona-disc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin: 0 0 var(--sp-8); } @media (max-width: 720px) { .lab404-pachete[data-familie="cloud"] .zona-disc { grid-template-columns: 1fr; justify-items: center; text-align: center; } } .lab404-pachete[data-familie="cloud"] .disc { position: relative; width: 300px; height: 300px; } .lab404-pachete[data-familie="cloud"] .disc svg { width: 100%; height: 100%; transform: rotate(-90deg); } .lab404-pachete[data-familie="cloud"] .disc-fund { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 12; } .lab404-pachete[data-familie="cloud"] .disc-arc { fill: none; stroke: url(#discGrad); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease-out); filter: drop-shadow(0 0 14px hsl(var(--sec-h) 85% 55% / .45)); } .lab404-pachete[data-familie="cloud"] .disc-mijloc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .lab404-pachete[data-familie="cloud"] .disc-mijloc b { font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); } .lab404-pachete[data-familie="cloud"] .disc-mijloc span { display: block; margin-top: .5rem; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); } / Doua clase in selector, nu una: tema pune `margin: 0` pe paragrafele din pagina cu un selector clasa+element, iar `.disc-nota` singur ar pierde in tacere - margin-ul ar iesi 0 si textul s-ar lipi de pastile. / .lab404-pachete[data-familie="cloud"] .disc-nota { margin: 0 0 var(--sp-6); font-size: var(--t-base); line-height: 1.6; color: var(--ink-2); } / --- Pastilele ------------------------------------------------------- Sunt singurul control al paginii, nu o scurtatura pe langa cursor, deci trebuie sa arate ca butoane: suprafata proprie si o stare aleasa care nu se citeste din doua nuante de gri. Cea apasata primeste gradientul gamei si text inchis pe el, ca butonul de comanda. Gradientul e mai deschis decat al butonului (62-72%, nu 55-68%): pe text inchis, varianta butonului da 3,9:1 la capatul inchis, sub pragul de 4,5. Asa iese 4,8:1 acolo si 6,9:1 la celalalt capat. Alb pe violet ar fi mers doar la un capat (4,8) si ar fi picat la celalalt (3,2). Si nu are chenar: capatul deschis al gradientului desena, pe fundalul inchis, o dunga palida pe muchie care se citea ca un contur alb. Cei 2px pierduti ii primeste inapoi din padding, ca sa rămâna de aceeasi marime cu celelalte. / .lab404-pachete[data-familie="cloud"] .trepte { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .lab404-pachete[data-familie="cloud"] .trepte button { min-width: 5.5rem; padding: .7rem 1.25rem; font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1; cursor: pointer; color: var(--ink-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background-color .2s var(--ease-out), transform .2s var(--ease-out); } .lab404-pachete[data-familie="cloud"] .trepte button:hover { border-color: hsl(var(--sec-h) 70% 60% / .55); background: rgba(255, 255, 255, .07); color: var(--ink); transform: translateY(-1px); } .lab404-pachete[data-familie="cloud"] .trepte button:focus-visible { outline: 2px solid hsl(var(--sec-h) 85% 65%); outline-offset: 2px; } .lab404-pachete[data-familie="cloud"] .trepte button[aria-pressed="true"] { border: 0; padding: calc(.7rem + 1px) calc(1.25rem + 1px); background: linear-gradient(135deg, hsl(var(--sec-h) 85% 62%), hsl(var(--sec-h) 88% 72%)); color: #0b1220; font-weight: 600; box-shadow: 0 10px 24px -12px hsl(var(--sec-h) 85% 60% / .9); transform: none; } / --- Fara randurile stinse ------------------------------------------- La Cloud, "facilitatile care difera" nu sunt functii, sunt recomandari de uz ("Potrivit pentru fisiere personale", "Recomandat pentru arhivare business"). Fiecare plan le are pe ale lui, deci lista de diferente ajungea sa spuna, pe planul de 1TB, ca toate cele 20 de recomandari ale celorlalte trei sunt indisponibile - ceea ce nu e nici adevarat, nici folositor: nu e o facilitate lipsa, e o alta descriere de uz. Rămân doar rândurile cu bifa. Legenda "inclus / nu e disponibil" iese odata cu ele: fara buline stinse n-are ce explica. / .lab404-pachete[data-familie="cloud"] .lista-pachet li.nu-are, .lab404-pachete[data-familie="cloud"] .pd-stat.off, .lab404-pachete[data-familie="cloud"] .pd-legend { display: none; } / Daca vreo secțiune rămâne complet goala dupa ce se ascund rândurile stinse, ii dispare si titlul: un cap de lista peste nimic arata a text care nu s-a incarcat. */ .lab404-pachete[data-familie="cloud"] .varianta-bloc:not(:has(.lista-pachet li:not(.nu-are))), .lab404-pachete[data-familie="cloud"] .titlu-sectiune:has(+ .varianta-bloc:not(:has(.lista-pachet li:not(.nu-are)))) { display: none; }