obisnuit — valoarea efectiva fiind intersectia pe tot lantul de stramosi, `none` de aici tine chiar daca degetul aterizeaza pe un cerc din SVG. Pretul: peste plansa, pagina nu se mai deruleaza cu degetul. Pe un ecran de editare asta e si comportamentul asteptat, iar plansa ocupa ~250px inaltime pe telefon, deci ramane destul loc de derulat in jurul ei. Pe mouse, `touch-action` nu are niciun efect. */ #editor-svg-wrap { touch-action: none; } /* Plasa a doua pentru selectia de text pe plansa (26 sept. 2026) — vezi nota de la `mousedown` in `renderEditorSvg`: o tragere pe desen pornea in Safari o selectie, iar selectia derula pagina la marginea ferestrei. */ #editor-svg-wrap { -webkit-user-select: none; user-select: none; } #editor-svg-wrap svg { -webkit-user-drag: none; } /* ...DAR NUMAI CAT TIMP CHIAR SE EDITEAZA (21 sept. 2026) ──────────────── Cerere user, cu poza pe care a incercuit desenul: „daca userul vrea sa faca scroll si apasa exact in zona aia, pagina nu face scroll. As vrea sa faca scroll si daca apasa acolo, dar sa nu poata sa miste aspersoarele." Cat uneltele sunt stranse, plansa e o poza: degetul e al paginii, si atunci `touch-action` trebuie sa fie tot ce era si inainte de editor — `auto`. Clasa o pune `_incuieSauDescuiePlansa()`, din vreme: `touch-action` se citeste in clipa ATINGERII, deci pusa din `pointerdown` ar veni prea tarziu. Selectorul are si id, si clasa, deci bate regula de deasupra fara `!important` — care oricum n-ar avea ce cauta in afara unui @media (vezi test_mobil.py). */ #editor-svg-wrap.plansa-doar-de-privit { touch-action: auto; } /* EDITORUL DE PLAN INCAPE PE TELEFON SI PE TABLETA (19 sept. 2026) ──────── Doua cereri ale userului, cu poza, care se rezolva in acelasi loc: „Butoanele nu sunt incadrate cum trebuie iar desenul este iesit din pagina" (telefon), si „Pentru varianta mobila si tableta, fa ca tile-ul verd sa aiba aceeasi latime ca cel de sub el". Toate cutiile editorului au latimi MINIME fixe, scrise inline in HTML: #editor-svg-wrap min-width: 380px (plansa) #editor-heatmap-wrap min-width: 380px #editor-panel min-width: 300px (panoul alb cu butoane) coloana CTA din el min-width: 260px #editor-du-badge min-width: 200px, max-width: 320px #editor-panel-content min-width: 200px Pe un telefon nu incap. MASURAT la 390px: plansa iesea 15px din ecran, iar panoul alb cu butoane iesea ~18px din cardul portocaliu — exact ce se vede in poza. Pragurile unde se strica, calculate din latimile de mai sus: plansa sub 412px, panoul sub 394px. DE CE PANA LA 1024 SI NU PANA LA 720, cum era la inceput. Sub 720 punem cutiile pe coloana si atunci insigna verde si panoul de sub ea au aceeasi latime, cum a cerut userul. Intre 721 si 1024 insa ele stau ALATURI, si atunci nu exista „cel de sub el": MASURAT, insigna ramane la minimul ei de 200px langa un panou de 425px (721), 472px (768), 428px (1024). Ca sa fie asa cum a cerut si pe tableta, coloana urca la 1024 — acelasi prag pe care il foloseste si decuparea planurilor pentru „telefon si tableta". Peste 1024 nu se schimba nimic; verificat cu amprenta geometrica la 1025, 1280, 1440 si 1728px: zero diferente. Inline-ul se bate doar cu !important. */ @media (max-width: 1024px) { /* `#editor-canvas-frame` NU e scris in HTML: il face `_floatEditorZoom` in JS, ca rama peste care sta pastila de zoom, si ii pune tot `min-width:380px` inline. Lipsea din lista, si de aceea MASURAT la 390px plansa iesea in continuare 40px din cardul portocaliu, desi invelisul din ea se putea stramta. Cutia de afara comanda, deci trebuie si ea in lista. */ #editor-canvas-frame, #editor-svg-wrap, #editor-heatmap-wrap, #editor-panel, #editor-panel > div, #editor-du-badge, #editor-panel-content { min-width: 0 !important; } /* ...DAR ATUNCI CASETA DE REGLAJE SE POATE STRIVI DE TOT (20 sept. 2026). Odata ce minimul de 200px a cazut, caseta alba cu duza, raza si „Sterge" imparte randul cu coloana de butoane si primeste doar ce ramane. MASURAT, cu un aspersor selectat: 390px: coloana de butoane 278px -> caseta trece pe randul ei, 278px ✓ 601px: coloana 437px -> casetei ii raman 40px, iar lista de duze (200px, latime fixa) IESE 171px din ea 768px: coloana 437px -> 207px, duza iese 4px 1025px si peste: caseta are randul ei, 403-614px ✓ Adica se strica exact in banda dintre telefon si tableta lata, unde mai e loc pe rand, dar nu destul. Nu punem minimul inapoi — el e cel care scotea panoul din card la 390px. Ii dam casetei RANDUL EI: `flex-basis:100%` intr-un flex care se rupe o pune singura pe linie, la toata latimea. La 390px era deja asa, deci acolo nu se schimba nimic; peste 1024 regula nici nu exista. */ #editor-panel-content { flex-basis: 100% !important; } /* Odata ce se pot stramta, cutiile se inghesuie una langa alta: insigna DU ajunge un turn ingust in care „EXCELLENT" nu mai incape in pastila lui, iar „What does DU mean?" se rupe pe patru randuri — vezi poza userului. Pe un telefon n-au de ce sa stea alaturi. Punem pe coloana cele DOUA randuri flex ale cardului (antetul cu titlu+indemn, si randul insigna+zoom+butoane), deci fiecare cutie ia toata latimea, in ordinea din pagina. Randurile sunt scrise inline in HTML si n-au id, dar sunt singurii copii directi ai cardului — de aceea selectorul merge pe copii, nu pe id-uri. */ #editor-card-header, #editor-controls-card > div { flex-direction: column !important; align-items: stretch !important; } /* Pastila de zoom ramane ingusta si centrata — n-are de ce sa se intinda. */ #editor-controls-card > div > div:has(#editor-zoom-in) { align-self: center !important; } /* Plafonul de 320px scris inline ar opri insigna inainte de marginea cardului de sub ea — chiar diferenta din poza (320 fata de 344 la 430px). Cat timp stau alaturi plafonul nu se atinge niciodata, deci scoaterea lui conteaza doar acolo unde sunt una sub alta. */ #editor-du-badge { max-width: none !important; } } /* PLANURILE NU MAI STAU INTR-O CUTIE GOALA (19 sept. 2026) ───────────────── Cerere user, cu poze de pe telefon: „sunt foarte multi spatii albe sus si jos. Te rog sa le faci sa dispara in varianta mobila si de tableta". Serverul trimite planurile ca SVG cu latimea SI inaltimea scrise in atribute: 700x700 planul cotat, 900x720 cel de irigatii. Regula de mai sus, din pragul de 720px, le pune `max-width:100%` — dar aceea ingusteaza doar CUTIA. Inaltimea ramane cea din atribut, iar desenul se centreaza in ea. MASURAT la 390px: cutia iese 316 x 700, desenul incape in 316 x 316, deci 384 de pixeli erau alb curat, adaugat de cutie peste albul din desen. `height: auto` lasa inaltimea sa urmeze latimea, si albul acela dispare. Intre 721 si 1024px nu se aplica deloc `max-width`, deci planul de 700px IESEA din cardul lui: masurat, 201px in afara la 861px latime si 38px la 1024. Pragul de aici e 1024, ca sa prinda si tabletele, si repara si asta. Peste 1024px nu se schimba nimic — acolo cardul e oricum mai lat de 700. Selectorul cere `width` SI `height` in atribute, adica exact semnatura planurilor venite de la server. Plansele pe care se deseneaza (#draw-svg, #poly-svg) nu au niciodata aceste atribute — isi iau marimea din stil, si `height:auto` le-ar strica. Testul din tests/test_mobil.py pazeste asta. */ @media (max-width: 1024px) { svg[width][height] { max-width: 100%; height: auto; } } /* ── Planșa de desen (creată de initDrawCanvas) ─────────────────────────── */ /* Caroiaj de hârtie milimetrică pe TOATĂ planșa. Înainte, acest strat era un simplu background:#ffffff, care acoperea complet caroiajul lui #preview: se vedeau doar benzile de deasupra și dedesubtul planșei — de unde senzația de "caroiat doar un pic sus și un pic jos". Caroiajul stă pe acest div, nu în #draw-svg, pentru că redrawDrawSvg() rescrie svg.innerHTML la fiecare vârf adăugat și l-ar șterge. Două frecvențe: linii fine la 10px + linii de reper la 50px, ca pe hârtia milimetrică, ca să poți estima distanțele în timp ce desenezi. */ .nat-draw-canvas { background-color: #ffffff; background-image: linear-gradient(to right, rgba(45, 90, 52, 0.26) 1px, transparent 1px), linear-gradient(to bottom, rgba(45, 90, 52, 0.26) 1px, transparent 1px), linear-gradient(to right, rgba(45, 90, 52, 0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(45, 90, 52, 0.10) 1px, transparent 1px); /* Procente, nu pixeli: planșa se micșorează pe ecrane înguste, iar în pixeli celulele s-ar desincroniza de coordonatele SVG. 800/50 = 16 celule mari pe orizontală → 6.25%; 470/50 = 9.4 → 10.6383%. Idem pentru cele fine de 10u. Astfel o celulă mare = mereu 50 de unități de desen, la orice scalare. */ background-size: 6.25% 10.6383%, 6.25% 10.6383%, 1.25% 2.12766%, 1.25% 2.12766%; /* Ancorat în stânga-sus, ca să se alinieze cu originea viewBox-ului SVG suprapus (0 0 800 470) și cu vârfurile desenate. */ background-position: 0 0; border: 1px solid #bdc7bc; } /* ── Randul hero ────────────────────────────────────────────────────────── A tinut candva hero-ul si intrebarea „cate parcele?" una langa alta. Intrebarea a fost mutata in panoul din stanga (#nat-onboard-slot-left), deci randul are acum un singur card si hero-ul ocupa toata latimea. */ .nat-hero-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; } .nat-hero-row > .nat-hero { flex: 1 1 460px; min-width: 0; } /* ── Onboarding „câte parcele?" — săgețile spinner-ului mereu vizibile ──── WebKit ascunde săgețile input[type=number] până la hover/focus; userul le vrea vizibile de la început (aug 2026). Firefox le arată nativ oricum. */ #de-pc-input::-webkit-inner-spin-button { opacity: 1; height: 30px; cursor: pointer; } /* ── „Log in", ca buton (26 sept. 2026) ────────────────────────────────── Era un link verde mic. De când intrarea nu mai cere cont, e singurul drum spre cont până la plată, deci trebuie să se vadă. Contur verde, pastilă, plin la trecerea mouse-ului; 42 px înălţime, cât să-l prindă şi degetul. */ .auth-login-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 22px; margin: 0; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; color: #1e6626; background: #fff; border: 1.5px solid #1e6626; border-radius: 999px; cursor: pointer; white-space: nowrap; width: auto; transition: background .15s ease, color .15s ease; } .auth-login-btn:hover { background: #1e6626; color: #fff; } .auth-login-btn:focus-visible { outline: 2px solid #1e6626; outline-offset: 2px; } /* ── Bara de cont, pe telefon (19 sept. 2026) ──────────────────────────── `#auth-chip` (email + pastila cu parcelele ramase + „Proiectele mele") se construieste din JS cu stil inline: `display:flex; ...; flex-shrink:0`. Nu se rupea si nu se ingusta, deci la 390 px corpul paginii ajungea la 490 px, iar linkul catre proiecte iesea din ecran — pe telefon nu se putea atinge deloc. DE CE `!important`: stilul e INLINE, iar inline bate orice foaie de stil. E singurul loc unde `!important` e folosirea corecta, nu o scurtatura. DE CE INTR-UN @media: ca desktopul sa ramana literalmente neatins — peste 720 px regula asta nici nu exista. Masurat inainte de a o scrie: 989 de elemente comparate la 768, 1024, 1280, 1440 si 1728 px, cu si fara ea — zero diferente. La 390 px: corpul 490 -> 390, linkul redevine vizibil. Daca cineva muta vreodata regulile astea in afara blocului @media, `tests/test_mobil.py` pica. */ @media (max-width: 720px) { #auth-chip { flex-wrap: wrap !important; flex-shrink: 1 !important; min-width: 0 !important; } #auth-chip > * { min-width: 0; } /* Linkurile din subsol aveau 16 px inaltime — masurat. Degetul cere 44x44 (Apple si Google zic la fel). Le crestem ZONA de atins, nu scrisul: `padding-block` plus `inline-block`, ca sa primeasca inaltime. Textul ramane de aceeasi marime si in acelasi loc. `margin:0 12px` din stilul inline ramane neatins — el da departarea pe orizontala si e deja destula. */ #app-footer a { display: inline-block !important; padding-block: 11px !important; } /* Safari pe iPhone APROPIE pagina cand atingi un camp scris sub 16 px — si nu o departeaza la loc dupa aceea. Numele proiectului e scris la 14 px (stil inline, de aici `!important`). ATENTIE: e singurul camp masurat pe ecranele de inceput. Ecranele de mai departe (editor, calculatie) n-au fost masurate — cer un proiect deschis. De aia regula e pe un id, nu pe `input` in general: o marire oarba ar putea revarsa campurile inguste de cote. */ #de-proj-name { font-size: 16px !important; } } /* LISTA ASPERSOARELOR, CARD CU CARD PE TELEFON (19 sept. 2026) ──────────── Cerere user, cu poza: „Aranjeaza un pic acest tabel sa se vada frumos in varianta de mobil". Dintre trei variante, user a ales: cate un card per aspersor pe telefon, tabelul neatins pe desktop. Tabelul are SAPTE coloane (#, Serie, Duza, Raza, Arc, Pozitie, Debit) si `width:100%` scris inline. MASURAT pe pagina vie, cu cei 6 aspersori din poza userului: 360px randuri de 115px, sectiunea 825px, si tabelul iese 32px lateral 390px randuri de 115px, sectiunea 825px <- poza userului 430px randuri de 73px, sectiunea 576px 540px randuri de 53px, sectiunea 451px 560px randuri de 32px, sectiunea 305px <- de aici incape pe un rand Adica tabelul are nevoie de ~510px ca sa puna un aspersor pe un singur rand; sub atat, „Rain Bird 1800-R-VAN" se rupe pe patru randuri si ultima coloana ramane in afara ecranului. Pragul e 600px: peste cei ~510 masurati pe romana, cu loc pentru etichetele mai lungi din germana („Einzeldurchfluss") si engleza. CARDUL ARE PATRU RANDURI, nu sapte. Prima incercare punea fiecare valoare pe randul ei: se citea bine, dar cardul ajungea la 253px si sectiunea la 1656px — de doua ori cat tabelul inghesuit de acum, adica omul derula mai mult decat inainte. Asa ca perechile mici stau doua cate doua, iar pozitia urca in antet, langa numar: Aspersorul 3 colt Serie Rain Bird 1800-R-VAN DUZA RAZA R-VAN18 5.1 m ARC DEBIT 85° 1.8 L/min Ordinea celulelor in HTML ramane cea a tabelului; asezarea se face din grila, cu `grid-area`, deci nu exista a doua randare a datelor. Etichetele vin din `data-et`, scris pe fiecare celula in JS cu aceleasi chei ca ``-urile, si le scoate foaia cu `content: attr(data-et)`. Stilurile celulelor sunt inline, deci se bat doar cu `!important`. */ @media (max-width: 600px) { .tabel-aspersoare { overflow-x: visible !important; } .tabel-aspersoare table, .tabel-aspersoare tbody, .tabel-aspersoare tr, .tabel-aspersoare td { display: block; } .tabel-aspersoare thead { display: none; } /* Un aspersor = un card, cu doua coloane. */ .tabel-aspersoare tr.rand-aspersor { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #bdc7bc; border-radius: 10px; overflow: hidden; margin-bottom: 8px; background: #fff; } .tabel-aspersoare tr.rand-aspersor td { border: 0 !important; border-top: 1px solid #edf1ec !important; padding: 6px 10px !important; text-align: left !important; line-height: 1.35; min-width: 0; } .tabel-aspersoare tr.rand-aspersor td::before { content: attr(data-et); display: block; font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; color: #4a544a; font-weight: 700; } /* Randul 1 — antetul verde: numarul la stanga, pozitia la dreapta. */ .tabel-aspersoare tr.rand-aspersor td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } .tabel-aspersoare tr.rand-aspersor td:nth-child(6) { grid-area: 1 / 2 / 2 / 3; } .tabel-aspersoare tr.rand-aspersor td:nth-child(1), .tabel-aspersoare tr.rand-aspersor td:nth-child(6) { border-top: 0 !important; background: #e4ede6; color: #0c4714 !important; font-size: 14px; font-weight: 800 !important; padding: 7px 10px !important; display: flex; align-items: baseline; gap: 6px; } .tabel-aspersoare tr.rand-aspersor td:nth-child(1)::before { display: inline; font-size: 14px; text-transform: none; letter-spacing: 0; color: #0c4714; font-weight: 800; } /* Pozitia („colt", „latura") se explica singura langa numar — eticheta ei ar fi fost doar zgomot in antet. */ .tabel-aspersoare tr.rand-aspersor td:nth-child(6) { justify-content: flex-end; text-align: right !important; font-weight: 700 !important; } .tabel-aspersoare tr.rand-aspersor td:nth-child(6)::before { content: none; } /* Randul 2 — seria, pe toata latimea: e cel mai lung text din card. */ .tabel-aspersoare tr.rand-aspersor td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; } /* Randurile 3 si 4 — patru marimi mici, doua cate doua. */ .tabel-aspersoare tr.rand-aspersor td:nth-child(3) { grid-area: 3 / 1 / 4 / 2; } .tabel-aspersoare tr.rand-aspersor td:nth-child(4) { grid-area: 3 / 2 / 4 / 3; } .tabel-aspersoare tr.rand-aspersor td:nth-child(5) { grid-area: 4 / 1 / 5 / 2; } .tabel-aspersoare tr.rand-aspersor td:nth-child(7) { grid-area: 4 / 2 / 5 / 3; } /* Linie subtire intre cele doua coloane, doar la perechile mici. */ .tabel-aspersoare tr.rand-aspersor td:nth-child(4), .tabel-aspersoare tr.rand-aspersor td:nth-child(7) { border-left: 1px solid #edf1ec !important; } /* Totalul: eticheta si valoarea pe acelasi rand. In poza userului valoarea ramanea in afara ecranului — randul scria „TOTAL 6 sprinklers, total flow:" si atat. */ .tabel-aspersoare tr.rand-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 10px 12px; border: 1px solid #9dc4a0; border-radius: 10px; } .tabel-aspersoare tr.rand-total td { border: 0 !important; padding: 0 !important; text-align: left !important; } .tabel-aspersoare tr.rand-total td + td { text-align: right !important; white-space: nowrap; } } /* OFERTA, CARD CU CARD PE TELEFON (20 sept. 2026) ───────────────────────── Cerere user, cu poza: „aranjeaza acest tabel in oferta optimizat pentru mobil". In poza, coloana Subtotal e TAIATA la marginea cardului: se vede „A$28.5" in loc de „A$28.56", iar capul de tabel scrie „SUBTOT". DE CE SE TAIE. Tabelul are `table-layout:fixed` si latimi fixe pe colgroup (52 / 14 / 17 / 17%) — puse intentionat, ca cele zece blocuri de categorie sa aiba coloanele la acelasi x si ochiul sa le poata urmari de sus in jos. Cu 17% insa, coloana de sume e mai ingusta decat numarul din ea, iar invelisul are `overflow:hidden` (pentru colturile rotunjite), deci diferenta nu se revarsa: se taie. MASURAT pe pagina vie, coloana Subtotal / cat ii trebuie lui „A$85.68": 360px 53 / 76 toate cele 6 randuri taiate 390px 58 / 76 toate taiate <- poza userului 430px 65 / 76 toate taiate 540px 83 / 83 niciunul 601px 94 / 94 niciunul Deci pana pe la ~500px numarul nu are unde sa incapa, oricat l-am inghesui. DUPA: sub 600px randul devine card — numele componentei (cu pastila „vezi produsul") pe toata latimea, iar dedesubt cele trei numere unul langa altul, fiecare cu eticheta lui deasupra. Nimic nu se mai taie. Pragul e acelasi 600px ca la lista de aspersoare, si din acelasi motiv: peste cat ii trebuie tabelului, cu loc pentru etichetele mai lungi din germana. Etichetele vin din variabilele `--et-*`, puse pe invelis de `calcCategoryBlock` cu aceleasi chei ca ``-urile. Stilurile celulelor sunt inline, deci se bat doar cu `!important`. */ @media (max-width: 600px) { .bloc-deviz table, .bloc-deviz tbody, .bloc-deviz tr, .bloc-deviz td { display: block; } .bloc-deviz thead, .bloc-deviz colgroup { display: none; } /* O componenta = un card: numele sus, cele trei numere dedesubt. */ .bloc-deviz tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; padding: 9px 12px 10px; border-bottom: 1px solid #d4d9d3; } .bloc-deviz tbody tr:last-child { border-bottom: 0; } .bloc-deviz tbody td { border: 0 !important; padding: 0 !important; text-align: left !important; line-height: 1.35; min-width: 0; } /* Numele componentei, pe toata latimea — e cel mai lung text din card. */ .bloc-deviz tbody td:nth-child(1) { grid-column: 1 / -1; margin-bottom: 5px; } /* Cele trei numere, fiecare cu eticheta lui deasupra. */ .bloc-deviz tbody td:nth-child(2)::before { content: var(--et-cant, "Cantitate"); } .bloc-deviz tbody td:nth-child(3)::before { content: var(--et-pret, "Preț/unitate"); } .bloc-deviz tbody td:nth-child(4)::before { content: var(--et-sub, "Subtotal"); } .bloc-deviz tbody td:nth-child(2)::before, .bloc-deviz tbody td:nth-child(3)::before, .bloc-deviz tbody td:nth-child(4)::before { display: block; font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; color: #4a544a; font-weight: 700; } /* Randurile care nu sunt componente — „Vezi alternative", subtotaluri pe categorie — au o singura celula pe tot randul; le lasam intregi. */ .bloc-deviz tbody td[colspan] { grid-column: 1 / -1; margin: 0; } .bloc-deviz tbody td[colspan]::before { content: none; } } /* PASUL 6 — REZUMATUL DE ASPERSOARE, CARD CU CARD PE TELEFON (20 sept. 2026) Gasit cautand altceva, si e mai rau decat la deviz: aici tabelele au SASE si CINCI coloane, si nu se taie doar o cifra — iese tot tabelul din ecran. MASURAT, tabelul de corpuri / cutia lui: 390px 438 / 340 iese 86px in afara ecranului 430px 438 / 380 iese 46px 768px 692 / 718 incape Iar pagina NU deruleaza lateral (`scrollWidth == innerWidth`), deci acei 86px nu se pot ajunge in niciun fel: coloana „Duze" si o parte din Subtotal sunt pur si simplu inaccesibile pe telefon. Acelasi tratament ca la deviz, cu aceleasi trei etichete. Structura cardului: 1804 Corp 10 cm CANTITATE PRET/UNITATE SUBTOTAL 6 buc 4,76 RON 28,56 RON Duze separate (vezi mai jos) Ultimul rand exista doar la corpuri (a sasea celula); la duze nu e. */ @media (max-width: 600px) { .tabel-sumar table, .tabel-sumar tbody, .tabel-sumar tr, .tabel-sumar td { display: block; } .tabel-sumar thead { display: none; } .tabel-sumar tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; padding: 9px 10px 10px; margin-bottom: 8px; background: #fff; border: 1px solid #dceedc; border-radius: 10px; } .tabel-sumar tbody td { border: 0 !important; padding: 0 !important; text-align: left !important; line-height: 1.35; min-width: 0; } /* Randul 1 — codul produsului la stanga, tipul (sau seria) la dreapta. */ .tabel-sumar tbody td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } .tabel-sumar tbody td:nth-child(2) { grid-area: 1 / 2 / 2 / 4; text-align: right !important; } /* Randul 2 — cele trei numere, fiecare cu eticheta lui deasupra. */ .tabel-sumar tbody td:nth-child(3) { grid-area: 2 / 1 / 3 / 2; } .tabel-sumar tbody td:nth-child(4) { grid-area: 2 / 2 / 3 / 3; } .tabel-sumar tbody td:nth-child(5) { grid-area: 2 / 3 / 3 / 4; } .tabel-sumar tbody td:nth-child(3)::before { content: var(--et-cant, "Cantitate"); } .tabel-sumar tbody td:nth-child(4)::before { content: var(--et-pret, "Preț/unitate"); } .tabel-sumar tbody td:nth-child(5)::before { content: var(--et-sub, "Subtotal"); } .tabel-sumar tbody td:nth-child(3)::before, .tabel-sumar tbody td:nth-child(4)::before, .tabel-sumar tbody td:nth-child(5)::before { display: block; font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; color: #4a544a; font-weight: 700; } /* Randul 3 — starea duzelor; exista doar la tabelul de corpuri. */ .tabel-sumar tbody td:nth-child(6) { grid-area: 3 / 1 / 4 / 4; margin-top: 4px; } /* TOTALURILE si duzele gratuite au o celula cu `colspan`, iar `colspan` NU muta `nth-child`: acolo cantitatea e a doua celula, nu a treia. Daca le-am lasa in grila de sus, numerele ar cadea pe pozitii gresite si ar primi etichete care nu sunt ale lor. Le punem pe un rand simplu. */ .tabel-sumar tbody tr:has(td[colspan]) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .tabel-sumar tbody tr:has(td[colspan]) td { text-align: left !important; } .tabel-sumar tbody tr:has(td[colspan]) td::before { content: none; } .tabel-sumar tbody tr:has(td[colspan]) td:empty { display: none; } } /* „AM RELUAT CIORNA" — BANNERUL NU MAI E UN BULGARE PE TELEFON (20 sept. 2026) Cerere user, cu poza: „cand revin la un proiect din draft, apare acel pop-up in partea de sus care arata foarte rau". CAUZA, si e o capcana veche de CSS: bannerul e `position:fixed` cu `left:50%` si fara latime. Pentru un element fixat la 50%, latimea disponibila NU e tot ecranul, ci ce ramane la dreapta acelui 50% — adica jumatate. Textul se inghesuie in acea jumatate si creste in inaltime. MASURAT, cutia bannerului: 360px 180 x 188 ~9 randuri 390px 195 x 168 ~8 randuri <- poza userului 430px 215 x 147 ~7 randuri 601px 301 x 82 ~4 randuri 768px 384 x 62 ~3 randuri 1440px 589 x 40 ~2 randuri Nu iesea din ecran; se facea turn. De aceea arata ca un bulgare rotunjit peste butoanele de marca. Il prindem de amandoua marginile (`left` SI `right`), cu `transform:none`, deci foloseste toata latimea. Colt mai mic, fiindca o bara lata cu `border-radius:999px` arata ca o pastila umflata. ✕-ul urca in colt si primeste carne sub deget: masurat, era 11x21px, sub orice prag de atins. Pragul e 1024: si pe tableta bannerul statea pe 3-4 randuri intr-o jumatate de ecran. Peste 1024 nu se schimba nimic. */ @media (max-width: 1024px) { #resume-banner { left: 12px !important; right: 12px !important; transform: none !important; border-radius: 14px !important; padding: 10px 38px 10px 14px !important; flex-wrap: wrap !important; gap: 6px 12px !important; align-items: baseline !important; line-height: 1.4; } /* Textul pe randul lui; linkul de dedesubt, la stanga. */ #resume-banner > span:first-child { flex: 1 1 100%; } /* ── TEXTELE PE RANDURI INTREGI (22 sept. 2026) ────────────────────────── Cerere user, cu poza de pe iPhone: „refa aranjamentul textelor din acea notificare de sus, si scrie Start another project mai mare un pic si incepe cu litera S mare". Ce se vedea inainte, MASURAT la 390px: numele proiectului si faza curgeau intr-o singura propozitie, iar ruptura cadea CHIAR IN MIJLOCUL fazei — „↩ Draft resumed Project 21 Sep temp — continuing at the" pe primul rand, „irrigation plan" singur pe al doilea. Al doilea rand se citea ca un ciot. Acum: rand 1 = ce s-a reluat, rand 2 = unde continua, rand 3 = actiunea. */ #resume-banner .resume-liniuta { display: none; } #resume-banner > span:first-child > i { display: block; font-size: 12.5px; opacity: 0.85; margin-top: 2px; } /* Linkul e singura ACTIUNE din caseta si statea la aceeasi marime cu restul textului, cu initiala mica. Creste putin si primeste aer deasupra. */ #resume-banner > a { font-size: 14.5px; margin-top: 4px; line-height: 1.3; } /* ✕ in colt, cu o zona de atins cumsecade. */ #resume-banner > span:last-child { position: absolute !important; top: 4px; right: 6px; padding: 7px 9px; font-size: 15px; line-height: 1; opacity: 0.75 !important; } } /* FONTURILE DE SUB PLAN, PE TELEFON (20 sept. 2026) ─────────────────────── Cerere user: „as vrea sa pastram o anumita marime a fonturilor. In partea de jos a ecranului mi se par prea mari". MASURAT la 390px, distributia marimilor din pagina: textul de baza e 15px, iar restul interfetei sta intre 11 si 15px. Singurele exceptii de jos sunt antetul cardului de editare — TITLUL si INDEMNUL, amandoua la 19px, scrise inline in HTML — si caseta verde de acoperire, la 16px. Pe un ecran de 390px, 19px inseamna un indemn rupt pe cinci randuri; pe desktop, unde textul are loc, cele 19px sunt la locul lor. User a ales, dintre trei variante: titlu 17, indemn 15, caseta verde 15 — deci tot ce e sub plan se aliniaza la textul de baza al paginii, iar titlul ramane putin mai mare, cat sa se vada ca e titlu. Pragul e 720: de acolo in sus textul are loc si nu se mai rupe. Inline-ul se bate doar cu !important. */ @media (max-width: 720px) { /* Un singur titlu de cand „✅ Planul tău e gata" a fost scos (21.09.2026): spunea acelasi lucru ca primul rand al indemnului de sub el. */ #editor-title-tune { font-size: 17px !important; } #editor-hint-tune, #editor-hint-ok { font-size: 15px !important; } #irr-coverage-badge { font-size: 15px !important; } } /* ── BUTONUL DE FINAL PE ECRANE FOARTE INGUSTE (20.09.2026) ───────────────── Textul butonului e taiat in JS la linia de pauza, ca sa stea pe DOUA randuri la orice latime (cerere user). La 320px insa randul al doilea nu mai incape si se rupe el insusi — trei randuri in loc de doua, pe engleza si pe germana. MASURAT la 320px: butonul are 234px, adica 194px de text la padding 20px, iar „— sieh dir die Kalkulation an →" cere ~224px la 15px. Cu 13px si padding lateral 10px raman 214px de loc pentru ~194px de text — incape. Pragul e 359, si e MASURAT, nu ales din ochi: germana („— sieh dir die Kalkulation an →", cel mai lung rand al doilea din cele trei limbi) incape la 15px abia de la 360px in sus. La 341px, cu pragul pus intai la 340, sageata cadea singura pe al treilea rand. Marimea vine din `style=` scris in HTML, deci se bate doar cu !important. */ @media (max-width: 359px) { #btn-calc-price-parcel, #btn-drip-add-to-calc { font-size: 13px !important; padding-left: 10px !important; padding-right: 10px !important; } } /* ── ECRANUL NU MAI SARE CAND INTRI INTR-O CASETA (20.09.2026) ───────────── Cerere user, cu trei poze de pe telefon: „cand introduc dimensiunile pe mobil ecranul se misca la stanga sau la dreapta in functie de care dimensiuni le introduci. As vrea ca ecranul sa ramana tot timpul asa cum arata initial, fara sa se miste deloc." CAUZA, masurata: NU e o pagina prea lata — la 320, 390, 430 si 768px `scrollWidth` e egal cu `clientWidth`, deci nimic nu iese lateral. E Safari pe iPhone: cand intri intr-un camp al carui text e sub 16px, MARESTE singur pagina ca sa poti citi ce scrii. Marita, pagina nu mai incape in ecran, iar browserul o trage la stanga sau la dreapta cat sa tina campul atins la vedere — exact saltul din poze. Casetele de cota erau la 13px. Asa se si vede in poze: textul din ele e vizibil mai mare decat in poza facuta inainte de a atinge vreun camp. LEACUL, cel obisnuit: 16px. Safari nu mareste nimic de la 16px in sus. Pragul e al lui, nu ales de noi — de aceea nici nu-l coboram la 15. NU folosim `maximum-scale=1` in ``, desi ar opri si el marirea: aceea ia omului si dreptul de a mari pagina cu doua degete, iar cine vede greu ramane fara ea. `pointer: coarse` = ecranele pe care se scrie cu degetul. Pe desktop nu se schimba nimic; pe telefon si tableta, textul din casete e putin mai mare — ceea ce oricum se citeste mai bine. Masurat dupa: 0 campuri sub 16px, si pagina continua sa incapa la 320, 390, 430 si 768px. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px !important; } } /* ── PLANUL NU MAI E DESENAT DE DOUA ORI PE TELEFON (20 sept. 2026) ──────── Cat timp editorul e deschis, plansa lui arata acelasi plan, viu si complet. Cea de deasupra (#irr-preview) se improspateaza abia cand se intoarce serverul, deci pe telefon omul vedea acelasi aspersor in doua locuri deodata. Pe ecranele pe care se apasa cu degetul o ascundem; pe desktop, unde cele doua se citesc bine impreuna, ramane neatinsa. Clasa de pe e pusa de `_urmaresteEditorulDeschis` din index.html. EXCEPTIA (26 sept. 2026): cat timp planul NU e deblocat (`de-pay-locked`), editorul e ascuns de poarta de plata — iar ascunzand si plansa de sus, pe telefon nu se mai vedea NICIUN plan, doar „Your plan is ready". Atunci plansa de sus e singura, deci ramane. */ @media (pointer: coarse) { body.editor-deschis:not(.de-pay-locked) #irr-preview { display: none !important; } } /* ── CELE DOUA BUTOANE DE LA FINAL, LA FEL DE MARI PE TELEFON (21 sept. 2026) Cerere user, cu poza: „aceste 2 butoane vreau sa aiba aceeasi dimensiune in varianta de mobil, si anume dimensiunea celui de Tell us what you think". MASURAT la 360, 390 si 820 px — identic peste tot: „Email me the PDF" 208x50 px pad 14/28 font 15px/700 chenar 1px auriu „Tell us what you think" 200x40 px pad 11/20 font 14px/600 fara chenar Adica cu 8 px mai lat si 10 px mai inalt. Trei lucruri il fac mai mare: umplutura, marimea literei si chenarul auriu, care adauga 2 px pe fiecare latura. Ii dam butonului de PDF exact masurile celuilalt. Latimea ramane data de text — sunt doua texte diferite, iar o latime fixa s-ar rupe la prima traducere mai lunga. Ce se potriveste exact e INALTIMEA, iar umplutura si litera fac cele doua butoane sa arate ca acelasi buton. `!important` nu e de prisos: masurile vin din `style=` scris pe buton, si inline-ul se bate doar asa. Totul sub `(pointer: coarse)`, deci desktopul, unde nu s-a plans nimeni, ramane neatins. */ @media (pointer: coarse) { #btn-calc-send-pdf { padding: 11px 20px !important; font-size: 14px !important; font-weight: 600 !important; border: none !important; } } /* ── BUTOANELE TUTORIALULUI, CAT SA LE NIMERESTI CU DEGETUL (21 sept. 2026) Erau 34x34 px, scrise inline. Pe un ecran de 390 px stau trei langa un cursor de derulare, iar 34 px e sub minimul pe care Apple si Google il cer pentru o tinta atinsa cu degetul (44 px). Le ducem la 44x44 pe ecranele cu deget; pe desktop, unde se apasa cu mouse-ul, raman cum erau. MASURAT dupa: la 390 px bara incape pe un rand, fara sa impinga cursorul de derulare pe alt rand. */ @media (pointer: coarse) { /* `#demo-pause` a disparut pe 21 sept. 2026 odata cu bara. `#demo-play` are acum 64px scrisi in `_demoAratStart` (e butonul cel mare din pop-up), deci nu mai are nevoie sa fie urcat la 44 — doar `#demo-close` ramane in regula de marime. `touch-action` le trebuie insa la amandoua, si mai ales lui `#demo-close`: el se apasa CAT filmul ruleaza. */ #demo-close { width: 44px !important; height: 44px !important; font-size: 18px !important; /* `manipulation` = „aici nu se face zoom din doua atingeri si nu se asteapta o a doua atingere". Fara el, browserul mai sta putin dupa ce ridici degetul, sa vada daca nu cumva urmeaza dubla atingere — si in rastimpul ala apasarea poate fi reinterpretata ca derulare, iar clicul nu se mai naste. Pe mouse, `touch-action` n-are niciun efect. */ touch-action: manipulation; } #demo-play { touch-action: manipulation; } /* Bara de control a disparut pe 21 sept. 2026 (vezi `_demoAratStart`), asa ca regulile care o țineau in ecran — `max-width: calc(100vw - 32px)` si ruperea pe doua linii a randului de comenzi — n-au mai avut ce imbraca. Filmul are acum un strat al lui, cat tot ecranul, deci intrebarea „incape bara?" nici nu se mai pune. */ } /* ── ANTETUL NU MAI STA LIPIT SUS PE TELEFON SI TABLETA (21 sept. 2026) ──── Cerere user, cu poza de pe iPad si bara de sus incercuita: „nu vreau sa fie tot timpul afisata partea de sus oriunde navighez pe pagina." Antetul are `position: sticky; top: 0`. MASURAT azi, deruland 600 px cu el pornit de la 0: telefon 390 px : ajunge la -517 — NU se lipeste deja, fiindca acolo `body` are `overflow: hidden auto`, iar un sticky se lipeste de cutia care deruleaza, nu de ecran tableta 820 px : ramane la 0 — se lipeste desktop : ramane la 0 — se lipeste Adica telefonul se purta deja asa cum cere el, din intamplare, iar tableta nu. Il facem static pe toate ecranele cu deget: pe tableta antetul are 76 px dintr-un ecran de 1001, si acolo omul deruleaza ca sa vada plansa, nu ca sa aiba mereu „Log out" sub ochi. Pe desktop, unde bara de sus e o unealta care se cauta cu mouse-ul si costa 76 px dintr-un ecran lat, ramane lipita. */ @media (pointer: coarse) { header { position: static !important; } } /* ── O SINGURA CUTIE IN LOC DE DOUA (21 sept. 2026) ───────────────────────── Cerere user, cu poza de pe iPhone in care incercuise impreuna insigna verde („Aspersoarele stropesc 100% din parcela ta — perfect!") si cardul auriu („Planul tau e gata"): „vreau sa unim acele 2 tile-uri in unul singur (si pe varianta mobila si pe cea desktop), care sa spuna tot ce trebuie acolo, butoanele sa fie aranjate logic si frumos". Mutarea o face JS-ul (`_asazaInsignaInCard`), fiindca pe desktop plansa statea chiar intre cele doua cutii. Aici raman doar hainele: odata intrata in card, insigna nu mai are voie sa arate ca o cutie de sine statatoare. Chenarul subtiat il pune tot JS-ul, la asezare: e o hotarare de LOC, nu de ecran, iar din CSS ar fi cerut `!important` pe un selector care ajunge si pe desktop. Aici ramane doar ce se poate spune curat. */ /* DU-ul scris de doua ori in aceeasi cutie. Odata insigna intrata in card, pastila „Uniformitate (DU): 94%" din capatul propozitiei ajunge la 40px deasupra insignei MARI de uniformitate, care spune acelasi numar, cu eticheta („EXCELENT") si cu „Ce inseamna DU?" sub el. O stingem — dar doar INAUNTRUL cardului: cand insigna sta singura sus, pastila e singurul loc in care scrie DU-ul, si ramane. Punctul despartitor e cuprins in acelasi , altfel ar fi ramas un „ · " atarnat dupa „perfect!". */ #editor-coverage-row .du-chip { display: none; } /* ── BUTOANELE, ASEZATE PE TELEFON (21 sept. 2026) ────────────────────────── MASURAT inainte, la 390px, in cardul de 340px: Tutorial 179px centrat, apoi „Adauga aspersor" 140 + „Inapoi" 82 pe un rand, iar „Revino la planul initial" 205 pe randul urmator, fiecare centrat pe cont propriu — trei randuri cu trei latimi si trei centre diferite. Userul a ales, dintre doua asezari, fluxul firesc: intai inveti, apoi modifici, la final revii. Il pastram, si le punem pe toate patru pe toata latimea, unul sub altul: [ 🎬 Tutorial (15 sec) ] [ ➕ Adauga aspersor ] [ ↶ Inapoi ] [ ↻ Revino la planul initial ] DE CE FIECARE PE RANDUL LUI, si nu doua cate doua. Am incercat intai „Inapoi" si „Revino" pe jumatati, si pe romana arata bine. Pe GERMANA nu: MASURAT la 390px, eticheta „Ursprunglichen Plan wiederherstellen" intr-o jumatate de 135px urca butonul la 109px inaltime si rupea ultimul cuvant, lasand un „n" singur pe randul de jos — doua cercuri in loc de doua butoane. Iar la 320px perechea cerea 244px intr-un panou de 208, si surplusul impingea insigna DU cu 36px in afara cardului, fara ca pe romana sau pe engleza sa se vada ceva. Pe toata latimea, aceeasi asezare tine in toate trei limbile, tintele sunt mai mari sub deget si nu mai exista o latime la care ceva sa se rupa. Doar `(pointer: coarse)` — pe desktop cele trei incap pe un rand si nu s-a plans nimeni. Inline-ul scris pe butoane se bate doar cu !important. */ @media (pointer: coarse) { /* `flex-basis: 100%` a fost scos pe 21 sept. 2026: coloana era copil de flex in panou si avea nevoie de el. De cand sta in tile-ul uneltelor, e un flex de nivel de BLOC (`display:flex` scris inline, nu `inline-flex`), deci ia singura toata latimea — si pe telefon, si pe desktop, unde Tutorialul isi pastreaza `align-self: center` si ramane cat textul lui. */ #editor-btn-col { gap: 10px !important; } /* `align-self:center` e scris inline pe buton si l-ar tine cat textul. */ #btn-editor-demo { align-self: stretch !important; } #editor-btn-row { flex-direction: column !important; gap: 8px !important; /* `align-items:center` e scris inline pe rand si ar lasa fiecare buton cat textul lui — trei latimi diferite, centrate una sub alta, adica exact ce se vedea in poza userului. */ align-items: stretch !important; } /* Plafonul de 100% scris inline se masoara fata de rand; scos, butonul umple exact cat ceilalti. */ #editor-reset { max-width: none !important; } /* Sfatul „mai bine de pe calculator" — vezi nota din index.html. */ #editor-nota-telefon { display: block !important; } } /* ── DESKTOP: SFATUL SI RANDUL UNELTELOR (24 sept. 2026) ──────────────────── Vezi `_unelteDesktopSync` in index.html. Sloturile sunt stinse peste tot, si se aprind doar pe desktop (mouse + minim 1025px). Pe telefon si pe tableta nimic de aici nu se aplica: randul e un bloc simplu in jurul coloanei de butoane, deci asezarea de acolo ramane bit cu bit aceeasi. Sfatul de desktop are pragul lui, doar `(pointer: fine)`: e perechea exacta a celui de telefon (`pointer: coarse`), deci pe orice ecran apare unul, niciodata amandoua. */ #editor-unelte-stanga, #editor-unelte-dreapta { display: none; } @media (pointer: fine) { #editor-nota-desktop { display: block !important; } } @media (pointer: fine) and (min-width: 1025px) { /* Trei coloane: DU | butoanele | reglajele, in proportie 1 : 1.15 : 1.25. MASURAT: cu mijlocul `auto`, butoanele cereau tot randul si DU-ul ramanea la minimul lui de 190px, cu „EXCELLENT" taiat. Inaltimea randului o tine fantoma din dreapta (`_unelteFantomaSync`): aceeasi cu nimic selectat si cu orice aspersor, deci plansa de dedesubt nu sare sub mouse. PUTINE `!important`, si numai unde inline-ul nu se poate bate altfel (banda DU isi poarta inaltimea de 54px si `nowrap`-ul in `cssText`). Distanta de 12px de sub bara o da coloana de butoane, cu `margin-top` scris inline; celor doua sloturi le dam aceeasi margine, in loc sa i-o luam ei. */ #editor-unelte-rand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.25fr); gap: 16px; align-items: stretch; } #editor-unelte-rand > #editor-btn-col { justify-content: center; } #editor-unelte-stanga { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin-top: 12px; } /* Reglajele, indemnul si fantoma stau in ACEEASI celula (1/1): celula e cat cel mai inalt dintre ei, iar cel mai inalt e mereu fantoma. */ #editor-unelte-dreapta { display: grid; min-width: 0; margin-top: 12px; } #editor-unelte-dreapta > * { grid-area: 1 / 1; min-width: 0; } /* Aceeasi cutie ca `#editor-panel-content` (padding, chenar si litera sunt scrise inline acolo) — altfel fantoma n-ar mai masura cat reglajele. */ #editor-unelte-fantoma { visibility: hidden; pointer-events: none; display: flex; align-items: center; padding: 6px 10px; border: 1px dashed transparent; font-size: 12px; } #editor-unelte-dreapta #editor-panel-content { display: flex; align-items: center; } /* DU-ul, mare: inaltimea fixa de 54px e pentru banda de sub plansa (acolo nu are voie sa se schimbe). Aici umple coloana — randul are oricum inaltimea tinuta de fantoma. Culorile raman cele puse din JS. */ #editor-unelte-stanga #editor-du-oglinda { height: auto !important; flex: 1 1 auto; margin-top: 0 !important; } /* Cifra mare, eticheta pe randul ei (spanurile din `_actualizeazaOglindaDu`). `nowrap` e scris inline pentru banda de 54px; aici randul 2 are voie sa se rupa, coloana e ingusta. */ #editor-unelte-stanga #editor-du-oglinda-val { white-space: normal !important; text-align: center; } #editor-unelte-stanga #editor-du-oglinda-reper { white-space: normal !important; text-align: center; } #editor-unelte-stanga .du-og-nr { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; } #editor-unelte-stanga .du-og-sep { display: none; } #editor-unelte-stanga .du-og-et { display: block; margin-top: 4px; font-size: 14px; letter-spacing: 0.6px; } #editor-unelte-indemn { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; border: 1px dashed #bdc7bc; border-radius: 10px; background: #fff; color: #626c62; font-size: 13px; line-height: 1.45; } } /* ── FILMUL ARE UN ECRAN AL LUI (21 sept. 2026) ───────────────────────────── Cerere user: „userul apasa play, pop-up-ul dispare si userul poate vedea pe tot ecranul tot ce tine de tutorial". MASURAT inainte, pe 390x750, cu filmul pornit: cardul lua 496px, bara de control 129px, iar din desen se vedeau 99px din 252. JS-ul (`_demoIntraInScena`) muta plansa intr-un strat fix peste pagina; aici ii spunem doar sa umple. `min-height:0` nu e de prisos: intr-un flex, un element nu coboara sub inaltimea continutului lui daca nu i se spune, iar svg-ul ar fi impins scena in jos in loc sa se stramteze in ea. */ body.de-demo-scena #editor-demo-scena-plansa > * { flex: 1; min-width: 0; min-height: 0; } body.de-demo-scena #editor-svg-wrap { flex: 1; min-height: 0; } /* Svg-ul e scris cu `width="100%"` si fara inaltime, deci o ia pe cea a continutului. In scena vrem sa umple, pastrand proportiile (`viewBox` + `preserveAspectRatio` implicit se ocupa de asta). */ body.de-demo-scena #editor-svg { width: 100%; height: 100%; max-height: none; } /* Cat tine filmul, pagina de sub strat nu se deruleaza. */ body.de-demo-scena { overflow: hidden; } /* ── CARDUL IL IMPINGE PE OM INAINTE (21 sept. 2026) ─────────────────────── Cerere user, cu poza de pe iPhone: „as vrea ca atunci cand userul ajunge in acest punct sa fie impulsionat sa treaca mai departe, nu neaparat sa apese pe tutorialul care clipeste acum." MASURAT atunci, pe 390x750, cu cardul adus sus dupa generare: Tutorialul era la marginea de jos SI singurul lucru animat din pagina, iar „Continue →" — pasul urmator — statea la 589 px SUB marginea de jos, dupa toata plansa. Aici sunt doar hainele. Sageata de la `

` o scoatem (si prin `list-style`, si prin pseudo-elementul webkit — Safari il foloseste pe al doilea) si punem una a noastra, care se intoarce cand se deschide. */ #editor-unelte > summary { list-style: none; } #editor-unelte > summary::-webkit-details-marker { display: none; } #editor-unelte > summary::after { content: "▾"; display: inline-block; /* spatiul dinaintea sagetii vine de aici, nu din `content`: un spatiu la inceput de `content` se pierde la asezarea randului si sageata se lipea de ultima litera (vazut in poza de la 1440px). */ margin-left: 7px; transition: transform 0.15s ease; } #editor-unelte[open] > summary::after { transform: rotate(180deg); } #editor-unelte > summary:hover { filter: brightness(0.97); } @media (pointer: coarse) { /* `flex-basis: 100%` pe `#editor-unelte` a fost scos pe 21 sept. 2026: de cand uneltele stau in tile-ul lor (`#editor-unelte-card`), invelisul nu mai e copil de flex, deci regula nu mai avea ce face. Latimea vine de la tile. */ /* `#editor-panel > div` cobora minimul cutiilor la 0; `

` nu e `div`, deci regula veche nu-l prinde. Fara asta, panoul se latea peste card. */ #editor-unelte, #editor-unelte > div { min-width: 0 !important; } /* Tinta de atins: un rand de 9px umplutura e sub minimul pentru un deget. */ #editor-unelte > summary { padding: 13px 12px !important; } } /* ── SUBSOLUL PE UN SINGUR RAND, PE TELEFON (21 sept. 2026) ──────────────── Cerere user, cu poza: „Se poate ca cele 4 texte din footer in varianta mobila sa incapa toate pe o singura linie?" MASURAT inainte, la 390px: cele patru („Terms of Service · Privacy policy · Refund policy · Pricing") cereau ~435px intr-un subsol cu 342px de loc — din care 96px erau doar marginile de 12px de o parte si de alta a fiecarui link, si 48px umplutura laterala a subsolului. „Pricing" cadea pe randul doi. Nu micsoram textul mult: 12px → 11px, plus marginile stranse si umplutura laterala injumatatita. Linkurile primesc `nowrap`, ca un nume de doua cuvinte sa nu se rupa in doua randuri. Randul al doilea (email + telefon) nu e atins: stau in `

`-ul lor, deci selectorul pe copiii DIRECTI ai subsolului nu-i prinde. */ @media (pointer: coarse) { #app-footer { padding-left: 8px !important; padding-right: 8px !important; font-size: 11px !important; } #app-footer > a { margin: 0 2px !important; white-space: nowrap !important; } } /* ── BUTOANELE DE ORIENTARE, IN ECRANUL TUTORIALULUI (21 sept. 2026) ─────── Cerere user: „ar fi bine sa punem si butoanele acelea orientative cu adauga sprinkler, Undo, reseteaza planul si sa se lumineze pe masura ce videoul face play". Ele sunt chiar butoanele din pagina, mutate aici pe durata filmului. In pagina stau pe coloana, pe ecranele cu deget (`#editor-btn-row` primeste `flex-direction: column !important` acolo) — dar in scena n-avem loc de trei randuri sub plansa, asa ca aici stau pe UN rand si se string la nevoie. REGULILE STAU IN BLOCUL DE DEGET si nu in afara lui, desi scena e aceeasi peste tot: ele nu au de luptat decat cu regulile de acolo (`#editor-btn-row` primeste `flex-direction: column !important` doar pe `(pointer: coarse)`). Pe desktop randul e oricum rand. Asa nu adaugam niciun `!important` in afara unui @media — chiar lucrul pe care il pazeste `test_mobil.py`. */ @media (pointer: coarse) { body.de-demo-scena #editor-demo-scena-butoane #editor-btn-row { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; } body.de-demo-scena #editor-demo-scena-butoane #editor-btn-row > button { flex: 0 1 auto !important; max-width: none !important; font-size: 12px !important; padding: 8px 10px !important; } } /* ── UN MODAL CARE NU INCAPE TREBUIE SA SE POATA DERULA (22 sept. 2026) ───── Gasit la auditul de design, masurat, nu banuit: caseta „Primeste PDF-ul proiectului pe email" are 747 px in romana, 723 in engleza si 786 in germana. Invelisul ei era `position:fixed; inset:0; align-items:center` FARA nicio derulare — deci pe un telefon cu 660 px utili (un iPhone obisnuit, cu bara de adresa deschisa) butoanele „Trimite-mi PDF-ul" si „Anuleaza" cadeau la 635..675 px: SUB marginea ecranului, de neatins. Omul isi scria emailul, bifa acordul obligatoriu si nu mai avea ce apasa. Pe 560 px (iPhone SE) se pierdeau si ~110 px din capul casetei. In germana nu incapea nici macar pe un ecran de 780 px. De ce nu e de ajuns `overflow-y:auto` singur: cu `align-items:center`, un copil mai INALT decat containerul se centreaza pe minus — capul lui iese in sus, iar derularea nu-l mai poate aduce inapoi (zona de dinainte de origine nu se deruleaza). Tiparul corect e perechea de mai jos: invelis: align-items:flex-start + copil: margin:auto Cand ramane loc, marginile automate inghit tot spatiul liber si caseta STA LA MIJLOC, exact ca pana acum. Cand nu mai ramane, spec-ul spune ca marginile automate devin zero, si atunci intra in vigoare `flex-start`: caseta se lipeste de sus, iar `overflow-y:auto` duce degetul pana la butoane. `overscroll-behavior: contain` opreste pagina de dedesubt sa se mai miste cand ajungi la capatul casetei — pe iOS altfel „scapa" in spate. Clasa e scrisa ca sa se poata pune pe ORICE modal care creste (mai sunt zece cu acelasi tipar): se adauga `modal-derulabil` si se scoate `align-items` din `style=`. Azi o poarta doar cel de email, singurul MASURAT ca nu incape. */ .modal-derulabil { align-items: flex-start; overflow-y: auto; padding: 20px 0; overscroll-behavior: contain; } .modal-derulabil > * { margin: auto; } /* ── TABELUL TIMPILOR DE UDARE, PE TELEFON: CATE UN CARD PER CIRCUIT ──────── (22 sept. 2026) Gasit la auditul de design, masurat pe toate cele trei limbi: tabelul cerea 391 px in romana, 398 in germana si 320 in engleza, iar cardul din care creste are latimea ecranului minus ~76 px. La 390 px iesea cu 77 / 84 / 6 px, la 320 px cu 147 / 154 / 76. Si NU se vedea nicaieri: pe ramura lui nu exista niciun parinte care sa deruleze pe orizontala, deci taietura o facea ``. Ce se pierdea era exact ultima coloana — „⏱ Runtime 10 mm" in romana, „⏱ Bewässerungszeit" in germana — adica CHIAR numarul pentru care omul a intrat in pas. Romana e cea mai lata pentru ca acolo sunt doua coloane de timp (5 mm si 10 mm), nu una. Puteam pune `overflow-x:auto` si sa dam din umeri: numarul ar fi ramas ascuns dupa o derulare laterala pe care nimeni n-o cauta intr-un card. Asa ca sub 520 px tabelul se desface: fiecare circuit devine un card, cu numele lui sus si cu `eticheta ——— valoare` pe randuri. Nu se pierde nicio cifra, si timpul de udare ajunge o banda verde pe toata latimea. `!important` e nevoie pentru ca fiecare `` isi poarta `text-align` si `background` in `style=`, iar marcajul bate orice clasa. Sta INTR-UN `@media (max-width: …)`, singurul loc unde `test_mobil.py` il lasa. 520 px, nu 480: la 390 px cardul are 314 px si tabelul 398, deci pragul real e pe la 474 px. Am lasat o palma de rezerva pentru o traducere mai lunga. `data-eticheta` vine din ACELEASI constante ca `` (vezi `renderHeatmapRuntime`), deci capul si eticheta nu pot spune lucruri diferite. */ @media (max-width: 520px) { .tabel-pe-carduri thead { display: none; } .tabel-pe-carduri, .tabel-pe-carduri tbody, .tabel-pe-carduri tr, .tabel-pe-carduri td { display: block !important; width: auto !important; } .tabel-pe-carduri tr { border: 1px solid #dceedc !important; border-radius: 8px; margin-bottom: 8px; overflow: hidden; } .tabel-pe-carduri tr:last-child { margin-bottom: 0; } .tabel-pe-carduri td { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right !important; } /* Eticheta imprumuta culoarea randului: pe cardul alb e verde inchis, pe randul de total (verde inchis) e alba. Un `color` fix ar fi fost necitibil pe unul dintre ele. */ .tabel-pe-carduri td::before { content: attr(data-eticheta); font-weight: 600; color: inherit; opacity: 0.85; text-align: left; flex: 1 1 auto; } /* Prima celula e numele circuitului — e capul cardului, nu o pereche. */ .tabel-pe-carduri td[data-eticheta=""]::before { content: none; } .tabel-pe-carduri tr:not(.rand-total) td[data-eticheta=""] { background: #eff5ef !important; text-align: left !important; font-size: 14px; border-bottom: 1px solid #dceedc; } } /* ── GALERIA DE CIRCUITE, SLIDE-URI PE TELEFON (23 sept. 2026) ──────────── Cerere Ciprian: „sa punem slide-uri si sa dai de la dreapta la stanga pe varianta mobila, si sub fiecare sa apara si datele". MASURAT la 390px, 17 circuite: galeria avea 1080px de carduri de 107×172 (planul fiecarui circuit, 107px latime), iar tabelul timpilor 3457px. Acum un slide are ~290px latime si datele lui sub desen; randurile tabelului se strang cat slide-urile se vad (`body.zpg-activa`, pus de `_zpgClasa`). PRAGUL e 520px, ACELASI ca la `.tabel-pe-carduri` de mai sus: pe tableta (768) grila de 3 coloane are carduri de ~220px, citibile, iar 17 slide-uri de 600px ar insemna 17 trageri pentru nimic. `tests/test_galerie_slideuri.py` leaga cele doua praguri. Pe desktop cele trei elemente noi stau ascunse si NIMIC din asezare nu se misca. */ .zpg-date, .zpg-nav, .zpg-arata { display: none; } @media (max-width: 520px) { /* `!important`: galeria isi poarta `display:grid` si coloanele in `style=` (scrise de `renderZonePipeGallery`), iar inline-ul se bate doar asa. Explicatia sta in bloc, ca sa nu para ca iese din el. */ #zone-pipe-gallery { display: flex !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; } #zone-pipe-gallery::-webkit-scrollbar { display: none; } #zone-pipe-gallery > .zpg-card { flex: 0 0 86%; min-width: 0; scroll-snap-align: center; } .zpg-date { display: block; margin-top: 8px; border-top: 1px solid #dceedc; font-size: 13px; cursor: default; } .zpg-date:empty { display: none; } .zpg-rand { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 4px; color: #1c1a16; } .zpg-rand > span { font-weight: 600; opacity: 0.85; text-align: left; } .zpg-rand > b { font-variant-numeric: tabular-nums; } .zpg-rand.zpg-timp { margin-top: 2px; padding: 8px; border-radius: 8px; background: #c3dcc7; color: #0c4714; font-weight: 700; font-size: 14px; } .zpg-rand.zpg-timp > span { opacity: 1; font-weight: 700; } .zpg-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; } /* 44px: tinta minima de atingere (Apple HIG), cea semnalata la audit. */ .zpg-sag { width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 999px; border: 1.5px solid #bdc7bc; background: #fff; color: #1e6626; font-size: 24px; line-height: 1; } .zpg-nr { min-width: 64px; text-align: center; font-weight: 700; color: #0c4714; font-variant-numeric: tabular-nums; } body.zpg-activa #hm-runtime-result tr[data-zona] { display: none !important; } body.zpg-activa .zpg-arata { display: block; width: 100%; margin: 8px 0 0; padding: 10px 12px; border: 1px dashed #9dc4a0; border-radius: 8px; background: #eff5ef; color: #1e6626; font-size: 13px; font-weight: 600; line-height: 1.45; text-align: center; } } /* ── Fereastra „✅ Proiect recuperat" (26 sept. 2026) ───────────────────── Deschiderea din email scria mesajul ÎN panoul de desen, peste schiţă, iar totalul venea într-un alert() de browser. Acum e o fereastră peste pagină, cu X şi OK; dedesubt rămâne desenul. Pe telefon cardul ia toată lăţimea minus 16 px de fiecare parte, iar butoanele se aşază unul sub altul. */ .rec-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(28, 26, 22, 0.55); } .rec-modal-card { position: relative; box-sizing: border-box; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px 20px; background: #f1f6f2; color: #0c4714; border: 2px solid #4f9159; border-radius: 14px; box-shadow: 0 18px 50px rgba(12, 71, 20, 0.28); font-size: 14px; line-height: 1.55; } .rec-modal-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 26px; font-weight: 400; line-height: 1; color: #0c4714; background: transparent; border: 0; border-radius: 999px; cursor: pointer; } .rec-modal-x:hover { background: rgba(30, 102, 38, 0.1); } .rec-modal-x:focus-visible { outline: 2px solid #1e6626; outline-offset: 1px; } .rec-modal-head { margin: 0 36px 6px 0; padding: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: #0c4714; text-wrap: balance; } .rec-modal-title { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; } .rec-modal-line { margin: 0 0 6px; overflow-wrap: anywhere; } .rec-modal-total { font-variant-numeric: tabular-nums; } .rec-modal-note { margin-top: 10px; } .rec-modal-login { margin: 12px 0 0; padding: 10px 12px; background: #fff; border: 1px solid #9dc4a0; border-radius: 10px; font-size: 13px; color: #24452a; } .rec-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; } .rec-modal-btn { width: auto; min-height: 44px; margin: 0; padding: 10px 26px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; color: #fff; background: #1e6626; border: 1.5px solid #1e6626; border-radius: 999px; cursor: pointer; } .rec-modal-btn:hover { background: #0c4714; border-color: #0c4714; } .rec-modal-btn:focus-visible { outline: 2px solid #1e6626; outline-offset: 2px; } .rec-modal-btn-2 { color: #1e6626; background: #fff; } .rec-modal-btn-2:hover { color: #fff; background: #1e6626; border-color: #1e6626; } @media (max-width: 480px) { .rec-modal-card { padding: 20px 18px 18px; } .rec-modal-actions { flex-direction: column-reverse; } .rec-modal-btn { width: 100%; } } /* ── Planul de picurare, previzualizarea GRATUITĂ (26 sept. 2026) ───────── SVG-ul vine de la server cu ambele variante ale subtitlului şi cu cotele de montaj (distanţa dintre rânduri şi dintre cârlige) marcate `dp-paid`. Cât timp planul nu e deblocat se vede doar varianta scurtă (`dp-free`); după plată, clasa `de-pay-locked` dispare şi revine totul. `dp-free` are în SVG atributul display="none", deci în PDF şi în descărcare nu apare niciodată. Fără `!important`: orice regulă CSS bate deja un atribut de prezentare. */ /* Aceeaşi clasă ascunde, din 4 oct. 2026, şi cotele laturilor de pe planul cu aspersoare (grupul `data-edge-dims` din irrigation_svg.py): înainte de plată omul vede planul fără nicio dimensiune. */ body.de-pay-locked #irr-preview .dp-paid { display: none; } body.de-pay-locked #irr-preview .dp-free { display: inline; } /* ── Fereastra de cont de la final: „Salvează-ţi proiectul" (30 sept. 2026) ─ Contul se cere abia la PDF, cu cod pe email (fără parolă) sau Google. Aceeaşi fereastră e şi „Log in" din bara de sus. Peste modalele obişnuite (100000), sub toast (100003). Pe telefon cardul ia lăţimea ecranului minus 16 px de fiecare parte; câmpurile au 16 px ca iOS să nu mărească pagina. */ .cf-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-start; justify-content: center; padding: 16px; box-sizing: border-box; overflow-y: auto; background: rgba(28, 26, 22, 0.6); } .cf-card { position: relative; box-sizing: border-box; width: 100%; max-width: 440px; margin: auto 0; padding: 26px 24px 20px; background: #fff; color: #24312a; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); font-size: 14px; line-height: 1.55; } .cf-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 26px; font-weight: 400; line-height: 1; color: #4a544a; background: transparent; border: 0; border-radius: 999px; cursor: pointer; } .cf-x:hover { background: rgba(30, 102, 38, 0.1); } .cf-x:focus-visible { outline: 2px solid #1e6626; outline-offset: 1px; } .cf-title { margin: 0 36px 8px 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #0c4714; text-wrap: balance; } .cf-intro { margin: 0 0 8px; } .cf-list { margin: 0 0 10px; padding-left: 20px; } .cf-list li { margin: 3px 0; } .cf-list li::marker { color: #1e6626; } .cf-note { margin: 0 0 14px; font-size: 12.5px; color: #626c62; } .cf-hint { margin: -2px 0 2px; font-size: 12px; line-height: 1.4; color: #626c62; } .cf-pas { display: flex; flex-direction: column; gap: 8px; } .cf-pas[hidden] { display: none; } .cf-label { display: block; margin: 4px 0 0; padding: 0; font-size: 13px; font-weight: 600; color: #26492d; } .cf-input { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 13px; font-family: inherit; font-size: 16px; border: 1.5px solid #dfddd2; border-radius: 12px; background: #fff; color: #24312a; } .cf-input:focus { outline: none; border-color: #1e6626; box-shadow: 0 0 0 3px rgba(30, 102, 38, 0.15); } .cf-code { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 24px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; } .cf-btn { width: 100%; min-height: 48px; margin: 4px 0 0; padding: 12px 16px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.25; color: #fff; background: #1e6626; border: 0; border-radius: 12px; cursor: pointer; } .cf-btn:hover { background: #0c4714; } .cf-btn:disabled { opacity: 0.6; cursor: wait; } .cf-btn:focus-visible { outline: 2px solid #1e6626; outline-offset: 2px; } .cf-or { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-size: 12px; color: #8a918a; } .cf-or span { flex: 1; height: 1px; background: #d4d9d3; } .cf-or[hidden], .cf-google[hidden] { display: none; } .cf-google { display: flex; justify-content: center; min-height: 44px; } .cf-sent { margin: 0 0 4px; font-size: 13.5px; } .cf-links { margin-top: 4px; text-align: center; font-size: 13px; color: #626c62; } .cf-links a { color: #1e6626; font-weight: 600; } .cf-done { margin: 0; font-size: 18px; font-weight: 700; color: #0c4714; } .cf-err { margin: 10px 0 0; font-size: 13px; color: #a52626; } .cf-err[hidden] { display: none; } .cf-legal { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: #7a837a; text-align: center; } .cf-legal a { color: #1e6626; font-weight: 600; } @media (max-width: 480px) { .cf-card { padding: 22px 18px 18px; } .cf-title { font-size: 18px; } } /* ── „Salvează planul pentru mai târziu" sub „Deblochează planul" (4 oct. 2026) Opţiune SECUNDARĂ: link discret, separat de CTA printr-o linie fină; nu concurează cu plata. Formularul se deschide la clic. Câmp 16px (iOS nu mai face zoom), buton ≥ 44px pe telefon. */ #de-pay-gate .de-later, #dim-later .de-later { margin: 16px auto 0; padding-top: 14px; max-width: 460px; border-top: 1px solid #cfe0d0; text-align: center; } #de-pay-gate .de-later-intro, #dim-later .de-later-intro { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #4a544a; } #de-pay-gate .de-later-link, #dim-later .de-later-link { display: inline-block; width: auto; margin: 0; padding: 6px 4px; min-height: 0; background: none; border: none; box-shadow: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: #1e6626; text-decoration: underline; text-underline-offset: 3px; } #de-pay-gate .de-later-link:hover, #dim-later .de-later-link:hover { color: #0c4714; background: none; } #de-pay-gate .de-later-link:focus-visible, #dim-later .de-later-link:focus-visible { outline: 2px solid #1e6626; outline-offset: 2px; border-radius: 6px; } #de-pay-gate .de-later-form, #dim-later .de-later-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; } #de-pay-gate .de-later-form[hidden], #dim-later .de-later-form[hidden] { display: none; } #de-pay-gate .de-later-label, #dim-later .de-later-label { margin: 0; padding: 0; font-size: 13px; font-weight: 600; color: #26492d; } #de-pay-gate .de-later-input, #dim-later .de-later-input { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px; font-family: inherit; font-size: 16px; color: #24312a; background: #fff; border: 1.5px solid #cfd8cf; border-radius: 10px; } #de-pay-gate .de-later-input:focus, #dim-later .de-later-input:focus { outline: none; border-color: #1e6626; box-shadow: 0 0 0 3px rgba(30, 102, 38, 0.15); } #de-pay-gate .de-later-consent, #dim-later .de-later-consent { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.45; color: #4a544a; font-weight: 400; } #de-pay-gate .de-later-consent input, #dim-later .de-later-consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; } #de-pay-gate .de-later-send, #dim-later .de-later-send { width: 100%; margin: 2px 0 0; min-height: 44px; padding: 10px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: #1e6626; background: #fff; border: 1.5px solid #1e6626; border-radius: 10px; } #de-pay-gate .de-later-send:hover:not(:disabled), #dim-later .de-later-send:hover:not(:disabled) { background: #eff8ef; } #de-pay-gate .de-later-send:disabled, #dim-later .de-later-send:disabled { opacity: 0.6; cursor: default; } #de-pay-gate .de-later-note, #dim-later .de-later-note { margin: 0; font-size: 12px; color: #6b746b; } #de-pay-gate .de-later-ok, #dim-later .de-later-ok { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #0c4714; } #de-pay-gate .de-later-err, #dim-later .de-later-err { margin: 8px 0 0; font-size: 13px; color: #a3261b; } #de-pay-gate .de-later-ok[hidden], #de-pay-gate .de-later-err[hidden], #dim-later .de-later-ok[hidden], #dim-later .de-later-err[hidden] { display: none; } /* Acelaşi „salvează pentru mai târziu", la cote (27.10.2026): aici e cardul alb al panoului, nu cel verde al plăţii — doar marginea de sus se schimbă. */ #dim-later.de-later { margin: 18px 0 0; max-width: 520px; text-align: left; border-top-color: #e6e3d8; } #dim-later[hidden] { display: none; } /* Oferta personală de 24h (11.10.2026) — în poartă („Your plan is ready") şi deasupra pachetelor. Auriul e cel al insignei „cea mai aleasă", ca oferta să se citească drept parte din acelaşi magazin, nu ca un banner străin; ceasul e pe verdele butonului de plată, cu cifre de lăţime fixă ca să nu tremure. */ .de-offer { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; text-align: center; background: #fff6df; border: 1.5px solid #c9963a; color: #5c4210; } .de-offer[hidden], .de-offer-price[hidden] { display: none; } .de-offer-h { font-size: 15px; font-weight: 700; line-height: 1.35; color: #4a3509; text-wrap: balance; } .de-offer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 7px; font-size: 12.5px; } .de-offer-clock { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; background: #0c4714; color: #fff; padding: 2px 10px; border-radius: 999px; } .de-offer-note { color: #6b5420; } #de-plan-modal .de-offer { max-width: 560px; margin: 0 auto 24px; } /* Pe card: până când ţine preţul de campanie şi preţul cu reducerea personală. */ .de-promo { margin: -4px 0 14px; padding: 8px 11px; border-radius: 10px; background: #fff6df; border: 1px solid #e4c98c; } .de-promo-until { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #8a5f12; } .de-promo-next { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; line-height: 1.3; color: #4a3509; } .de-promo-inv { background: rgba(255, 255, 255, .1); border-color: rgba(201, 150, 58, .75); } .de-promo-inv .de-promo-until { color: #ecd49d; } .de-promo-inv .de-promo-next { color: #fff; } .de-offer-price { margin: 0 0 12px; padding: 5px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #8a5f12; background: #fbf7ee; border: 1px dashed #c9963a; } .de-offer-price-inv { color: #fff; background: rgba(255, 255, 255, .12); } /* Acoperire + uniformitate înainte de plată (21 oct. 2026). Joasă: două cifre alăturate, nu încă o casetă înaltă între plan şi „Your plan is ready". */ .de-ps { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: 14px; padding: 10px 8px; border-radius: 14px; background: #f1f6f2; border: 1.5px solid #9dc4a0; text-align: center; } .de-ps[hidden] { display: none; } .de-ps-i { padding: 2px 10px; } .de-ps-i + .de-ps-i { border-left: 1px solid #cfe0d1; } .de-ps-k { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #4f6b52; } .de-ps-info { width: 17px; height: 17px; padding: 0; margin: 0; border-radius: 50%; border: 1.5px solid #6f8f72; background: transparent; color: #4f6b52; font: 700 11px/1 Georgia, serif; cursor: pointer; } .de-ps-info:hover, .de-ps-info:focus-visible { background: #0c4714; color: #fff; border-color: #0c4714; } .de-ps-v { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.1; color: #0c4714; font-variant-numeric: tabular-nums; } .de-ps-v small { font-size: 16px; font-weight: 700; opacity: .7; margin-left: -6px; } .de-ps-warn { color: #8a5f12; } .de-ps-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; color: #fff; } .de-ps-n { margin-top: 2px; font-size: 12.5px; color: #5d6b5e; } /* ── Plan blocat: „Materiale" ca îndemn la plată + butonul de pe telefon ──── (4 oct. 2026, cerere Ciprian). Rândul pulsează uşor, se poate apăsa şi duce la pachetele Paddle. Pulsul e o umbră care respiră, nu o mişcare — iar cu „reduce motion" rămâne doar conturul auriu. */ .nat-stat.nat-stat-cta { cursor: pointer; border-color: #d79628; background: #fdf6e7; animation: nat-cta-puls 2.2s ease-in-out infinite; } .nat-stat.nat-stat-cta span { color: #7a5310; font-weight: 600; } .nat-stat.nat-stat-cta b { color: #7a5310; } .nat-stat.nat-stat-cta b::after { content: " →"; font-weight: 700; } .nat-stat.nat-stat-cta:hover { background: #fbefd2; } .nat-stat.nat-stat-cta:focus-visible { outline: 2px solid #b8761a; outline-offset: 2px; } @keyframes nat-cta-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 150, 40, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(215, 150, 40, 0); } } @media (prefers-reduced-motion: reduce) { .nat-stat.nat-stat-cta { animation: none; } } .nat-unlock-mobile { display: none; } @media (max-width: 1024px) { body.de-pay-locked .nat-unlock-mobile { display: block; margin-top: var(--space-md, 1rem); text-align: center; } .nat-unlock-sub { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #4a544a; } .nat-unlock-btn { width: 100%; min-height: 48px; margin: 0; padding: 12px 16px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: #d79628; border: none; border-radius: 999px; box-shadow: 0 2px 6px rgba(160, 100, 10, 0.25); } .nat-unlock-btn:active { background: #c4861f; } .nat-unlock-btn:focus-visible { outline: 2px solid #7a5310; outline-offset: 2px; } } /* Telefon, plan blocat: „Your details" mutat între desen şi „Your plan is ready" (4 oct. 2026). Card de sine stătător, nu fâşie de bară laterală. */ .nat-result.nat-result-in-plan { margin: 14px 0 0; border: 1px solid var(--color-border, #d4d9d3); border-radius: 14px; overflow: hidden; background: #fff; } .nat-result.nat-result-in-plan .nat-result-body { padding: 12px 14px 4px; } .nat-result.nat-result-in-plan .nat-unlock-mobile { display: none !important; } /* Conţinutul de sub fereastra de progres e ascuns cât e ea deschisă (27.10.2026) — vezi comentariul de lângă `setAiProgressStep` în index.html. `visibility`, ca aşezarea paginii să rămână neschimbată. */ body.ai-busy main, body.ai-busy #app-footer { visibility: hidden; } /* ── Plan → plată (28.10.2026, cerere Ciprian, AU) ─────────────────────────── Bara fixă „Unlock" de jos, lista „Ce primeşti", rândul liniştit al pieselor şi pulsul folosit când arătăm unde să apeşi. Vezi _deStickyRefresh. */ /* 30.10.2026 (cerere Ciprian): bara mai înaltă şi scrisul mai mare, ca să iasă în evidenţă; conţinutul strâns la mijloc (max. 1000 px), nu împrăştiat la margini. Pe telefon: titlu + subtitlu scurt la stânga, butonul cu preţ la dreapta, plus zona de jos a iPhone-ului (safe-area). */ #de-sticky-unlock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; /* 30.10.2026: spaţii EGALE — margine stânga · texte · buton · margine dreapta (space-evenly); textele nu se mai întind, ca să nu mute golul într-o parte. */ display: none; align-items: center; justify-content: space-evenly; gap: 22px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: #0c4714; color: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22); border-top: 2px solid #e2b85c; } #de-sticky-unlock.on { display: flex; } #de-sticky-unlock .de-st-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; min-width: 0; flex: 0 1 auto; } #de-sticky-unlock .de-st-t { font-size: 19px; font-weight: 700; } #de-sticky-unlock .de-st-s { font-size: 15px; opacity: 0.9; } #de-sticky-unlock .de-st-o { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #f3d38c; font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } #de-sticky-unlock .de-st-o[hidden] { display: none; } #de-sticky-unlock #de-sticky-btn { margin: 0; width: auto; padding: 15px 30px; font-size: 18px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; border-radius: 999px; } #de-sticky-unlock .de-st-once { font-weight: 500; opacity: 0.85; } body.de-sticky-on { padding-bottom: 104px; } /* „▶ See it in 3D · what you get ↓" (1.11.2026): un buton mic chiar deasupra barei, care spune că pagina continuă (vezi _dePeekRefresh). Săgeata coboară uşor de trei ori, apoi stă. */ #de-sticky-unlock .de-peek { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -10px); margin: 0; width: auto; max-width: calc(100vw - 32px); padding: 9px 18px; border-radius: 999px; border: 1.5px solid #1e6626; background: #fff; color: #1e6626; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.25; width: max-content; text-align: center; box-shadow: 0 4px 16px rgba(12, 71, 20, 0.22); cursor: pointer; } #de-sticky-unlock .de-peek[hidden] { display: none; } #de-sticky-unlock .de-peek:focus-visible { outline: 3px solid #e2b85c; outline-offset: 2px; } #de-sticky-unlock .de-peek-s { display: inline-block; animation: de-peek-jos 1.1s ease-in-out 0.6s 3; } @keyframes de-peek-jos { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { #de-sticky-unlock .de-peek-s { animation: none; } } /* Telefon: două rânduri — textul sus, butonul pe toată lăţimea dedesubt. Pe un rând, în germană titlul se rupea („Dein Plan ist fertig" / „✔") şi bara ajungea tot cât două rânduri, dar strâmbă. Aşa încape în orice limbă. */ @media (max-width: 640px) { #de-sticky-unlock { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); } #de-sticky-unlock .de-st-txt { flex: 1 0 100%; gap: 1px; } #de-sticky-unlock .de-st-t { font-size: 16px; } #de-sticky-unlock .de-st-s { font-size: 13px; line-height: 1.3; } /* oferta pe rândul ei, centrată, între texte şi buton — lângă texte le strângea */ #de-sticky-unlock .de-st-o { padding: 3px 10px; font-size: 12.5px; margin: 0 auto; order: 1; } #de-sticky-unlock #de-sticky-btn { order: 2; } #de-sticky-unlock #de-sticky-btn { flex: 1 0 100%; padding: 13px 16px; font-size: 17px; } body.de-sticky-on { padding-bottom: 128px; } } /* „100 % bewässert · DU 94 % ausgezeichnet" (30.10.2026): doar în bara de jos. Înlocuieşte plăcuţa mare .de-ps. Textele din stânga barei: centrate. */ #de-sticky-unlock .de-st-n { font-size: 15px; font-weight: 700; color: #f3d38c; font-variant-numeric: tabular-nums; } #de-sticky-unlock .de-st-n[hidden] { display: none; } #de-sticky-unlock .de-st-txt { align-items: center; justify-content: center; text-align: center; align-self: center; } .nat-du-k { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 640px) { #de-sticky-unlock .de-st-n { font-size: 13.5px; } } /* „Plăteşti doar planul…" — în caseta „Ce primeşti" şi în fereastra cu pachete */ /* 1.11.2026: „We don't sell or deliver…" pe rând nou (\n în text). */ .de-noshop { white-space: pre-line; margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #fbf7ee; border: 1px solid #ecd9a8; font-size: 13px; line-height: 1.5; color: #5c4510; text-align: center; } .de-noshop.de-noshop-modal { max-width: 620px; margin: 10px auto 0; text-align: center; } .de-inside { text-align: left; margin: 0 auto 14px; max-width: 560px; background: #fff; border: 1px solid #cfe0d2; border-radius: 12px; padding: 12px 14px; } .de-inside .de-in-h { font-weight: 700; color: #0c4714; font-size: 14.5px; margin-bottom: 6px; } .de-inside ul { margin: 0 0 10px; padding: 0; list-style: none; } .de-inside li { position: relative; padding-left: 22px; font-size: 13.5px; color: #26492d; margin: 3px 0; } .de-inside li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #2f8a3f; font-weight: 800; } .de-in-parts { border-top: 1px dashed #cfe0d2; padding-top: 8px; } .de-in-ph { font-size: 12.5px; font-weight: 700; color: #4a544a; margin-bottom: 4px; } .de-in-blur { filter: blur(3.5px); user-select: none; pointer-events: none; } .de-in-row { display: flex; justify-content: space-between; font-size: 13px; color: #26492d; padding: 2px 0; } .nat-stat.nat-stat-cta.nat-quiet { animation: none; background: #fff; border-color: #e6e3d8; } .nat-stat.nat-stat-cta.nat-quiet span, .nat-stat.nat-stat-cta.nat-quiet b { color: inherit; font-weight: inherit; } .nat-stat.nat-stat-cta.nat-quiet b { font-weight: 700; } .nat-stat.nat-stat-cta.nat-quiet b::after { content: ""; } .de-pulse { animation: de-pulse 0.9s ease-in-out 3; } @keyframes de-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 150, 40, 0.0); transform: scale(1); } 50% { box-shadow: 0 0 0 8px rgba(215, 150, 40, 0.45); transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .de-pulse { animation: none; outline: 3px solid #d79628; } } /* Ghidurile de montaj (30.10.2026, AU): pastila de lângă piesă şi butonul bibliotecii. */ .guide-pill { display: inline-block; margin-left: 4px; padding: 1px 8px 2px; border-radius: 999px; background: #fbf5e6; border: 1px solid #ecd9a8; color: #8a5f12; font-size: 10.5px; font-weight: 600; text-decoration: none; white-space: nowrap; vertical-align: 1px; } .guide-pill:hover, .guide-pill:focus-visible { background: #f6e7c2; } .guides-btn { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #d79628; color: #8a5f12; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .guides-btn:hover, .guides-btn:focus-visible { background: #fbf5e6; } #btn-calc-guides { padding: 4px 12px; font-size: 12px; margin-left: 4px; vertical-align: middle; } /* X-ul ferestrei cu pachete (1.11.2026, cerere Ciprian): se poate închide oricând, nu doar cu „Cancel" de la capăt. Stă lipit sus cât se derulează. */ #de-plan-modal .de-plan-x-wrap { position: sticky; top: 10px; height: 0; z-index: 3; display: flex; justify-content: flex-end; } #de-plan-modal .de-plan-x { margin: -14px -10px 0 0; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid #c4cac3; background: #fff; color: #332f29; font: inherit; font-size: 28px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(28, 26, 22, 0.18); } #de-plan-modal .de-plan-x:hover { background: #f1f4f0; } #de-plan-modal .de-plan-x:focus-visible { outline: 3px solid #e2b85c; outline-offset: 2px; } /* „Plan only · we suggest shops, we don't sell parts" sub titlul ferestrei cu pachete (1.11.2026, cerere Ciprian) — acelaşi mesaj ca în bara verde. */ #de-plan-modal .de-plan-only { white-space: pre-line; display: inline-block; margin-top: 8px; padding: 5px 14px; line-height: 1.4; border-radius: 12px; background: #e2ece4; color: #26492d; font-size: 13px; font-weight: 600; }