/* telefon.v1.css: carcasa paginilor de serviciu pe telefon (LUC-07, 17 septembrie 2026, STOP-10 runda 4). Andy, 14:12: „pe telefon sunt varza taote paginile noi”. Auditul pe live, 81 de pagini la 375 pe 812 cu derulare reala (_LOGS/ivory-studio-log.md, 16:15-16:34): bordul fix peste „Vezi variantele” pe 76, logoul fix peste text pe 81, cardurile de tabel cu titlul pe 72-132 px pe 81, H1 rupt in mijlocul cuvantului pe 17. Poarta: porti/gate_telefon.py. Se incarca ULTIMUL in , dupa CSS-ul propriu al pilonului inline si dupa CSS-ul meniului: pe telefon regulile de aici trebuie sa bata acel CSS inline (care declara si el .erou h1 si .pagina in @media 1000px), fara sa urce specificitatea. Pe desktop nu schimba nimic: totul sta sub @media. Cand motor.v2.css se publica (LUC-06), fisierul se varsa in el. Versiunea sta in nume: /servicii/assets/* se serveste imutabil un an. */ @media(max-width:1000px){ /* R1 bordul (MOTOR / STARE / ORA BORD) e decor de desktop; pe telefon statea fix peste actiunea din primul ecran */ html.js .bord{display:none} /* R2 antetul: scriptul nav-autohide-js din sablon il ascunde la derulare in jos (.nav-hidden, din CSS-ul meniului) si il readuce la derulare in sus; cand revine peste continut, logoul si meniul stau pe banda asta, nu peste text */ .nv.nv--banda{background:linear-gradient(180deg,rgba(4,6,12,.97) 0%,rgba(4,6,12,.95) 88%,rgba(4,6,12,0) 100%)} } @media(max-width:480px){ /* R5 magistrala mai subtire si marginile stranse: la 375 luau 88 px din latime (66 stanga, 22 dreapta) */ :root{--mag-w:22px;--mag-x:8px} .pagina{padding-left:calc(var(--mag-x) + var(--mag-w) + 14px);padding-right:18px} /* R4 titlul: fara_orfan leaga ultimele doua cuvinte cu spatiu neseparabil („brand cinematic”, „identitate vizuala”); perechea masura pana la 273 px, pe o coloana de 210 px (64 px erau scosi din TOATE randurile titlului pentru insigna), si overflow-wrap o rupea in mijlocul cuvantului. Locul insignei se rezerva doar pe primul rand, cu un flotant de 16 px: insigna sta la top:0 al eroului si se termina la 14 px sub inceputul titlului. Marimea literei ramane a pilonului: o marime comuna aici a rupt titlurile pilonilor cu litera mai mica (automatizari, digital marketing). Prima varianta, insigna urcata pe randul etichetei, a rupt eticheta lunga pe doua randuri si a coborat pretul sub primul ecran. */ .erou--n3 h1{padding-right:0} .erou--n3 h1::before{content:"";float:right;width:48px;height:16px} .insigna-masina{width:40px} .insigna-masina svg{width:40px} /* R3 cardurile de tabel: pretul trece sub titlu (titlul avea 72-132 px langa pret, pe patru randuri), eticheta sta deasupra valorii (pe coloana de 38% „Cat de greu e de produs” iesea pe trei randuri) */ .tabel[data-mod="carduri"] tbody tr{grid-template-columns:minmax(0,1fr);gap:4px 0} .tabel[data-mod="carduri"] tbody th[scope="row"]{grid-column:1;grid-row:1;padding-right:30px} .tabel[data-mod="carduri"] tbody td.tabel__pret{grid-column:1;grid-row:2;text-align:left;padding:2px 0 4px} .tabel[data-mod="carduri"] tbody td.tabel__pret b i{display:inline;margin:0 0 0 6px} .tabel[data-mod="carduri"] tbody td:not(.tabel__pret):not(.tabel__sageata){grid-template-columns:minmax(0,1fr);gap:3px} }