.elementor-20780 .elementor-element.elementor-element-35bd90e{--display:flex;--background-transition:0.3s;--margin-top:-41px;--margin-bottom:-41px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS for text-editor, class: .elementor-element-d235368 *//* ========================================================================== Componentele paginii „industrie-productie" Numai ale ei: niciun alt landing page nu le folosește. Stau aici, lângă pagina.html, nu în css-comun.css — acolo se adunaseră peste 300 de reguli și nu se mai găsea nimic. În css-comun.css rămâne ce e chiar comun: tokenii, tipografia, butoanele, hero-ul, grila de produse, banda de beneficii. Build-ul le adaugă DUPĂ cele comune, deci pot rescrie o regulă comună fără !important. Se pune aici o componentă nouă, nu în css-comun.css, dacă nu e limpede că o vor folosi și alte pagini. ========================================================================== */ /* ---------- industrii deservite, cartonașe cu poză ---------- A înlocuit lista cu buline din .kmr__covers. Motivul e că lista aia spune opt lucruri și nu arată niciunul: „metalurgie", „industria farmaceutică" și „hale de producție" sunt medii complet diferite, iar pe pagină arătau identic — opt rânduri de text într-o cutie albă. Cine caută echipament pentru o turnătorie nu se recunoaște într-un rând de listă, se recunoaște într-o hală care seamănă cu a lui. Forma vine din blocul „Buy Back / Consiliere / Post Vânzare" de pe komarom.ro, pe care clientul l-a arătat ca model: poză sus, panou bleumarin dedesubt, text alb centrat. Două diferențe, amândouă intenționate: — fără cercul cu iconiță de pe cusătură. Iconițele au fost respinse de trei ori pe paginile astea și tot din același motiv: opt simboluri desenate pentru opt ramuri industriale ies mici și se confundă între ele. Poza spune deja ce spune. — fără paragraf sub titlu. Blocul de pe site are câte un text explicativ la fiecare card; documentul clientului dă pentru industrii DOAR numele, atât (par. 287–294). Un paragraf scris de noi ar fi text inventat pe o pagină în care nu s-a inventat nicio frază. Deci rămâne numele. Dunga verde de deasupra numelui ține locul cercului: desparte poza de panou și leagă cartonașul de restul paginii. */ .kmr__ind { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:520px) { .kmr__ind { grid-template-columns:repeat(2,1fr); } } @media (min-width:940px) { .kmr__ind { grid-template-columns:repeat(4,1fr); } } .kmr__ind li { display:flex; flex-direction:column; overflow:hidden; background:var(--blue-dark); border-radius:var(--rot); transition:transform .25s, box-shadow .25s; } .kmr__ind li:hover { transform:translateY(-3px); box-shadow:0 18px 38px -22px rgba(6,21,48,.62); } /* Poza își păstrează raportul, deci toate cele opt cartonașe au aceeași înălțime de imagine indiferent ce fișier se pune în ele. Mărirea la hover se face pe poză, nu pe cartonaș: cartonașul se ridică, poza se apropie. */ /* height:auto e obligatoriu, nu decor. Build-ul pune pe tag atributele width="800" height="600", care ajung reguli de stil — iar o înălțime definită anulează aspect-ratio. Fără el, cartonașul ieșea de 666px: 600 de la atribut, plus panoul. Se măsoară: node unelte/masoara.js industrie-productie ".kmr__ind li". */ .kmr__ind img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; } .kmr__ind li:hover img { transform:scale(1.06); } /* min-height de două rânduri: „fabrici" are un cuvânt, „ateliere și centre tehnice" are trei și trece pe două rânduri. Fără el, panourile bleumarin ar ieși de înălțimi diferite pe același rând și s-ar vedea ca o grilă strâmbă. */ /* Litera mare de la început e pusă din CSS, nu scrisă în marcaj. În docx industriile sunt cu literă mică — „fabrici", „hale de producție" — și așa rămân și în pagina.html, ca sursa să se poată compara cu documentul fără să pară că am rescris ceva. Pe ecran se vede cu majusculă, cum a cerut clientul. De aia eticheta e `display:block` cu `align-content:center`, nu flex: ::first-letter nu se aplică pe containere flex. Într-un browser vechi, care nu știe align-content pe bloc, textul urcă în capul etichetei — se citește la fel, doar nu e centrat pe verticală. text-transform:capitalize NU merge aici: ar face „Hale De Producție". */ .kmr__ind span { display:block; align-content:center; text-align:center; flex:1; min-height:66px; padding:15px 16px; border-top:3px solid var(--green); font-size:16px; font-weight:700; line-height:1.35; color:var(--white); } .kmr__ind span::first-letter { text-transform:uppercase; } @media (prefers-reduced-motion:reduce) { .kmr__ind li:hover { transform:none; } .kmr__ind li:hover img { transform:none; } } /* ---------- fișa de analiză: cap de listă + parametri, într-un card centrat ---------- A treia formă a zonei „Nu toate aplicațiile industriale…", și primele două au căzut amândouă din același motiv: cele nouă criterii sunt scurte — „cantitatea", „suprafața" — iar orice grilă le dă cutii de lățime fixă, adică de trei ori mai late decât textul din ele. 1. cartonașele numerotate de pe Municipalități, patru pe rând: 4+4+1, al nouălea rămânea singur pe ultimul rând; 2. matricea de trei pe trei, cu fire de 1px: rândurile s-au umplut, dar în fiecare celulă textul stătea lipit de colțul din stânga-sus și restul celulei rămânea gol. Nimic nu era centrat cu nimic. Concluzia, a doua oară: pentru fraze de două-trei cuvinte nu se desenează cutii, se lasă fiecare cutie să fie exact cât textul ei. Deci pastile, așezate în șir care se rupe singur și se centrează — nu mai există „celulă goală", pentru că nu mai există celulă. Cele nouă stau într-un card alb, ca să se citească drept UN obiect, fișa de analiză, nu nouă etichete împrăștiate pe fundal. Pastilele se poartă ca acelea din „Aplicații" de pe Sănătate & Educație, aprobate: nu duc nicăieri, dar răspund la hover — fundal alb, chenar verde, ridicare de 2px. Diferența e culoarea de pornire: acolo stau pe fundal albastru-pal și sunt albe, aici stau pe card alb, deci pornesc din albastru-pal. */ .kmr__fisa { width:100%; max-width:960px; margin:0 auto; background:var(--white); border:1px solid var(--line); border-radius:var(--rot-mare); box-shadow:0 22px 46px -34px rgba(6,21,48,.42); padding:38px 40px 42px; display:flex; flex-direction:column; align-items:center; gap:26px; } @media (max-width:700px) { .kmr__fisa { padding:28px 22px 30px; gap:20px; } } .kmr__parametri { counter-reset:par; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } /* align-items:baseline, nu center. Cu `center` cele două cutii — cifra și textul — au mijloacele exact la aceeași înălțime, adică sunt centrate corect ca dreptunghiuri, și totuși cifra se vedea urcată cu vreo doi pixeli. Motivul e că înălțimile lor de rând sunt diferite: cifra are line-height 1, textul 1,3, deci literele cad altfel în cutia lor. Ochiul nu compară cutii, compară linia pe care stau caracterele. Cu `baseline`, cifra și textul stau pe aceeași linie de scris și se citesc aliniate. S-a măsurat: cu `center`, baseline-ul cifrei era la 26,2px și al textului la 27,7px. */ .kmr__parametri li { counter-increment:par; display:inline-flex; align-items:baseline; gap:10px; padding:11px 20px 11px 16px; background:var(--blue-tint); border:1px solid var(--blue-pale); border-radius:var(--pastila); font-size:15.5px; font-weight:600; line-height:1.3; color:var(--blue-dark); cursor:default; transition:background-color .18s, border-color .18s, transform .18s, box-shadow .18s; } /* Cifra rămâne pentru că arată câte puncte are analiza — nouă — și asta e chiar argumentul secțiunii. Mică și verde, în fața textului: se numără, nu se citește. */ .kmr__parametri li::before { content:counter(par,decimal-leading-zero); flex:none; font:800 11.5px/1 "DM Sans",Arial,sans-serif; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--green); } /* Litera mare de la început vine din CSS, ca la cartonașele de industrii: în pagina.html criteriile rămân cu literă mică, exact cum sunt în docx (par. 310–318). De aia textul are un în jur — ::first-letter cere un container de tip bloc, iar `li` e inline-flex. Ca element de flex, span-ul e oricum blocificat; `display:block` e scris pentru claritate. Fără span, ::first-letter ar fi prins cifra din ::before, adică zeroul din „01". */ .kmr__parametri li > span { display:block; } .kmr__parametri li > span::first-letter { text-transform:uppercase; } .kmr__parametri li:hover { background:var(--white); border-color:var(--green); transform:translateY(-2px); box-shadow:0 8px 18px -12px rgba(19,66,133,.5); } @media (prefers-reduced-motion:reduce) { .kmr__parametri li:hover { transform:none; } } /* Pe telefon pastilele lungi ocupă oricum tot rândul; aliniate la stânga se citesc mai bine decât centrate una câte una, ceea ce ar face un zigzag. */ @media (max-width:520px) { .kmr__parametri { justify-content:flex-start; gap:8px; } .kmr__parametri li { font-size:14.5px; padding:9px 16px 9px 13px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-35bd90e *//* ========================================================================== Komarom — CSS pentru landing pages ========================================================================== FIȘIERUL ĂSTA NU SE PUNE NICĂIERI PE SITE. E sursa componentelor. Build-ul îl copiază în fiecare pagină — gata//stil.css și, mai important, într-un bloc de stil la începutul primului widget HTML al paginii. Așa fiecare pagină publicată își poartă stilul în ea și nu poate fi stricată de o modificare făcută pentru alta. În Woodmart → Custom CSS nu mai stă nimic; dacă a stat vreodată, se scoate. Reguli numai pentru o pagină: pagini//stil.css. Vin după astea, deci le rescriu. Totul e scopat sub .kmr, deci nu se bate cu tema. Când se adaugă o pagină nouă cu componente noi, se adaugă aici, nu se rescrie. Sistemul de design e citit din CSS-ul live al komarom.ro, nu inventat. ========================================================================== */ .kmr { --blue:#134285; --blue-dark:#092143; --blue-deep:#061530; --blue-soft:#4277BA; --blue-pale:#D8E4F2; --blue-tint:#EAF1F9; --blue-linie:#B4CBE6; /* albastrul benzii de beneficii și chenarul cardurilor ei, luate din secțiunea „Certificări și succese" de pe komarom.ro/servicii/ — vezi unelte/design3.js */ --blue-band:#3160B8; --band-linie:#C7CADC; --green:#5EC95E; --green-dark:#43AE43; --ink:#222222; --muted:#5C6774; --line:#E2E7EE; --wash:#F4F7FA; --white:#FFFFFF; --wrap:1222px; --pad:15px; /* Rotunjirea. A stat o vreme în trei trepte — 16 / 10 / 22 — dar pe pagină ieșeau trei colțuri diferite unul lângă altul: criteriile la 16, casetele la 22, cardurile de beneficii la 6, cât are site-ul. Acum e una singură, 6px, cea de pe komarom.ro. Numele rămân toate trei, ca să nu fie de umblat prin fișier: dacă vrem iar trepte, se schimbă doar valorile de aici. */ --rot:6px; /* carduri, plăci, panouri, poze */ --rot-mic:6px; /* lucruri mici: cutia pozei de produs, chenare */ --rot-mare:6px; /* suprafețe mari: casetele, blocul de întrebări */ --pastila:999px; /* butoane și chipuri rămân pastile — altfel n-ar mai fi butoane */ font-family:"DM Sans",Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; } .kmr *,.kmr *::before,.kmr *::after { box-sizing:border-box; } /* Marginile pe verticală de pe elementele de listă vin de la temă, nu de la noi, și strică grilele. S-a văzut pe site, nu în previzualizare: lista din „În portofoliul nostru găsiți" are gap:1px, cât să iasă o linie subțire între rânduri — dar Woodmart pune margine pe li, iar marginea se adună peste gap. În loc de linii de 1px ieșeau benzi groase, ca niște dungi de tabel. Previzualizarea nu prinde asta, pentru că acolo nu există CSS-ul temei. Are !important pentru că regulile temei sunt mai specifice decât „.kmr ul li" — singurul loc din fișier unde nu câștigăm cu .elementor-20780 .elementor-element.elementor-element-35bd90eul. NUMAI sus și jos, dinadins. Prima formă a acestei reguli era `margin:0 !important` și a stricat panglica de pași de la Municipalități: plăcile se îmbucă printr-o margine NEGATIVĂ la dreapta, iar shorthandul cu !important a omorât-o. Săgețile s-au despărțit și între ele a rămas o pană albă cât vârful. Se măsura: cele șase plăci însumau exact lățimea containerului, semn că nu se mai suprapun deloc. Un reset care folosește !important trebuie să atingă exact proprietatea stricată, nimic mai mult — altfel repară un lucru și strică altul, tăcut. */ .kmr ul li,.kmr ol li { margin-top:0 !important; margin-bottom:0 !important; } .kmr__in { max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } .kmr__sec { padding:82px 0; } .kmr__sec--wash { background:var(--wash); } .kmr__sec--tint { background:var(--blue-tint); } .kmr__sec--tight { padding:58px 0; } /* secțiuni care se termină sau încep lângă un widget Shortcode: fără ele, paddingul celor două secțiuni se adună și rămâne o gaură mare în jurul gridului de produse */ .kmr__sec--taiat-jos { padding-bottom:30px; } .kmr__sec--taiat-sus { padding-top:30px; } .kmr [id] { scroll-margin-top:90px; } .kmr h1,.kmr h2,.kmr h3,.kmr h4 { margin:0; font-weight:700; color:var(--ink); text-wrap:balance; } .kmr h1 { font-size:clamp(32px,4.6vw,50px); line-height:1.03; letter-spacing:-.018em; } .kmr h2 { font-size:clamp(26px,3.5vw,36px); line-height:1.18; letter-spacing:-.014em; } /* Titlurile care ocupă singure un rând întreg stau pe centru — pe stânga, cu tot spațiul gol în dreapta, arătau ca și cum ar fi rămas neterminate. Cele dintr-o coloană (secțiunea editorială, panoul) rămân pe stânga, unde începe și textul de sub ele. */ /* ATENȚIE la specificitate: regula de mai sus, .kmr h2, are 0-1-1, iar o singură clasă are 0-1-0 — deci margin:0 de acolo bătea margin:auto de aici și titlul rămânea lipit de stânga, cu textul centrat degeaba în interiorul cutiei. De aia .elementor-20780 .elementor-element.elementor-element-35bd90eul e dublu. */ .kmr .kmr__h2-centru { text-align:center; max-width:30ch; margin-left:auto; margin-right:auto; } @media (max-width:600px) { .kmr .kmr__h2-centru { text-align:left; margin-left:0; max-width:none; } } .kmr h3 { font-size:18px; line-height:1.35; font-weight:800; } .kmr p { margin:0; } .kmr__body { max-width:70ch; color:var(--muted); } .kmr__eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft); } .kmr__eyebrow::before { content:""; width:22px; height:2px; background:var(--green); } /* ---------- butoane ---------- */ .kmr__btns { display:flex; flex-wrap:wrap; gap:12px; } .kmr__btn { display:inline-flex; align-items:center; justify-content:center; font:600 14px/1 "DM Sans",Arial,sans-serif; text-transform:uppercase; text-decoration:none; padding:17px 35px; border-radius:var(--pastila); border:2px solid transparent; cursor:pointer; transition:background-color .18s,color .18s,border-color .18s,transform .18s; } .kmr__btn--primary { background:var(--green); color:var(--white); } .kmr__btn--primary:hover { background:var(--green-dark); transform:translateY(-2px); } .kmr__btn--ghost { background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); } .kmr__btn--ghost:hover { background:var(--white); color:var(--blue); border-color:var(--white); } .kmr__btn--blue { background:var(--blue); color:var(--white); } .kmr__btn--blue:hover { background:var(--blue-dark); transform:translateY(-2px); } .kmr__btn:focus-visible { outline:3px solid var(--green); outline-offset:3px; } /* Culoarea textului, apărată de temă. Woodmart colorează `a:hover`, iar `a:hover` are 0-1-1 și bate o singură clasă, 0-1-0 — deci pe site textul butonului verde devenea albastru la trecerea cu mouse-ul. În previzualizare nu se vedea, pentru că acolo nu există CSS-ul temei; e a doua oară când tema ne ia o regulă (prima au fost marginile pe li). Culoarea e repetată pe toate stările, cu .elementor-20780 .elementor-element.elementor-element-35bd90eul dublat și cu tagul `a` în el — 0-3-1, cât să nu mai poată fi luată de nimeni. */ .kmr a.kmr__btn, .kmr a.kmr__btn:hover, .kmr a.kmr__btn:focus, .kmr a.kmr__btn:active, .kmr a.kmr__btn:visited { text-decoration:none; } .kmr a.kmr__btn--primary, .kmr a.kmr__btn--primary:hover, .kmr a.kmr__btn--primary:focus, .kmr a.kmr__btn--primary:active, .kmr a.kmr__btn--primary:visited { color:var(--white); } .kmr a.kmr__btn--blue, .kmr a.kmr__btn--blue:hover, .kmr a.kmr__btn--blue:focus, .kmr a.kmr__btn--blue:active, .kmr a.kmr__btn--blue:visited { color:var(--white); } /* Fantoma e singura care schimbă culoarea dinadins: la hover fundalul devine alb, deci textul trebuie să treacă pe albastru, altfel ar fi alb pe alb. */ .kmr a.kmr__btn--ghost, .kmr a.kmr__btn--ghost:focus, .kmr a.kmr__btn--ghost:active, .kmr a.kmr__btn--ghost:visited { color:var(--white); } .kmr a.kmr__btn--ghost:hover { color:var(--blue); } /* ---------- HERO pe două coloane ---------- */ .kmr__hero { position:relative; background:var(--blue-dark); overflow:hidden; } .kmr__hero::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 82% 18%, rgba(66,119,186,.42), transparent 62%), linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-deep) 100%); } .kmr__hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(94,201,94,.55), transparent); } .kmr__hero-in { position:relative; max-width:var(--wrap); margin:0 auto; padding:74px var(--pad) 84px; display:grid; grid-template-columns:1fr; gap:44px; align-items:center; } @media (min-width:960px) { .kmr__hero-in { grid-template-columns:1.06fr .94fr; gap:64px; padding-top:88px; padding-bottom:96px; } } .kmr__hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:20px; } .kmr__hero h1 { color:var(--white); } /* „curățenie urbană" e miezul paginii — o scoatem în verde, fără să atingem textul */ .kmr__hero h1 .kmr__cheie { color:var(--green); } .kmr__hero-lead { color:rgba(255,255,255,.82); font-size:18px; line-height:1.62; max-width:54ch; } .kmr__crumbs { font-size:13.5px; color:rgba(255,255,255,.6); } .kmr__crumbs a { color:rgba(255,255,255,.6); text-decoration:none; } .kmr__crumbs a:hover { color:var(--white); } .kmr__signals { display:flex; flex-wrap:wrap; gap:9px 22px; margin:2px 0 0; padding:0; font-size:14px; color:rgba(255,255,255,.78); } .kmr__signals li { list-style:none; display:flex; align-items:center; gap:8px; } .kmr__signals svg { width:15px; height:15px; flex:none; } .kmr__hero-media { position:relative; } .kmr__hero-media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rot); } /* Cartonașul cu cifra stă peste colțul din stânga-jos al pozei. Iese mult în afara imaginii, pe fundalul închis al hero-ului: la -14px acoperea utilajul din poza reală. Dacă se schimbă poza, se verifică din nou ce ascunde. */ .kmr__hero-card { position:absolute; left:-44px; bottom:-30px; background:var(--white); border-radius:var(--rot-mic); padding:18px 22px; box-shadow:0 18px 44px -18px rgba(6,21,48,.62); display:flex; flex-direction:column; gap:2px; max-width:206px; border-bottom:3px solid var(--green); } @media (min-width:960px) and (max-width:1100px) { .kmr__hero-card { left:-24px; } } @media (max-width:959px) { .kmr__hero-card { position:static; margin-top:16px; max-width:none; } } .kmr__hero-card strong { font-size:34px; font-weight:800; line-height:1; color:var(--blue); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .kmr__hero-card span { font-size:13.5px; color:var(--muted); line-height:1.4; } /* ---------- ancore ---------- */ .kmr__jump { background:var(--white); border-bottom:1px solid var(--line); } .kmr__jump ul { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); list-style:none; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; } .kmr__jump ul::-webkit-scrollbar { display:none; } .kmr__jump a { display:block; padding:18px 16px; white-space:nowrap; text-decoration:none; font:700 13px/1 "DM Sans",Arial,sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--blue); border-bottom:3px solid transparent; transition:border-color .16s,color .16s; } .kmr__jump a:hover { border-bottom-color:var(--green); } .kmr__jump a:focus-visible { outline:3px solid var(--green); outline-offset:-3px; } /* ---------- bandă de cifre ---------- */ .kmr__stats { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rot); overflow:hidden; } @media (min-width:700px) { .kmr__stats { grid-template-columns:repeat(3,1fr); } } .kmr__stat { background:var(--white); padding:28px 26px; display:flex; flex-direction:column; gap:5px; } .kmr__stat b { font-size:clamp(34px,4.4vw,44px); font-weight:800; line-height:1; color:var(--blue); letter-spacing:-.025em; font-variant-numeric:tabular-nums; } .kmr__stat span { font-size:15px; color:var(--muted); max-width:34ch; } /* ---------- intro ---------- */ .kmr__intro { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; } .kmr__intro::before { content:""; width:56px; height:3px; background:var(--green); } .kmr__intro p { font-size:clamp(18px,2.1vw,22px); line-height:1.55; font-weight:500; color:var(--blue-soft); max-width:60ch; text-wrap:pretty; } /* ---------- bento ---------- */ .kmr__bento { display:grid; grid-template-columns:1fr; gap:14px; } @media (min-width:900px) { .kmr__bento { grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(0,auto); } } .kmr__cell { background:var(--white); border:1px solid var(--line); border-radius:var(--rot); padding:28px 26px; display:flex; flex-direction:column; gap:11px; transition:border-color .2s,transform .2s,box-shadow .2s; } .kmr__cell:hover { border-color:var(--blue-pale); transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(19,66,133,.5); } /* Celula de lista din bento („Aplicații"). Înălțimea rândului o dă imaginea care ține două rânduri, deci conținutul e mai scurt decât celula — centrat pe verticală, nu mai rămâne un gol sub chipuri. Folosită doar de Sănătate & Educație. */ .kmr__cell--lead { background:var(--blue-tint); border-color:transparent; justify-content:center; } .kmr__cell--lead:hover { transform:none; box-shadow:none; border-color:transparent; } .kmr__cell--media { padding:0; overflow:hidden; border-radius:var(--rot); } .kmr__cell--media img { display:block; width:100%; height:100%; min-height:220px; object-fit:cover; } /* Șase celule: poza + un panou lat + patru carduri. Poza ține TOATE rândurile, deci nu rămâne nimic sub ea — cardurile stau toate în coloana de lângă, două câte două. Prima formă lăsa ultimele două carduri să treacă pe un rând propriu, sub poză, și zona se citea ca două bucăți lipite, nu ca una singură. --a: panoul sus-stânga, poza în dreapta. --b: poza în stânga, panoul sus-dreapta. */ @media (min-width:900px) { .kmr__bento--a .kmr__cell:nth-child(1) { grid-column:span 4; } .kmr__bento--a .kmr__cell:nth-child(2) { grid-column:span 2; grid-row:span 3; } .kmr__bento--a .kmr__cell:nth-child(n+3) { grid-column:span 2; } .kmr__bento--b .kmr__cell:nth-child(1) { grid-column:span 2; grid-row:span 3; } .kmr__bento--b .kmr__cell:nth-child(2) { grid-column:span 4; } .kmr__bento--b .kmr__cell:nth-child(n+3) { grid-column:span 2; } } /* Iconițele cardurilor, ca cele din banda albastră: mari, verzi, fără cerc. Erau 22px într-un cerc de 44px, cu contur în două culori — la mărimea aia detaliile se împâcleau, iar cercul palid le mai și mânca din spațiu. Acum au 40px și o singură culoare, deci se citesc de la aceeași distanță ca cele de pe banda albastră. `color` de aici hrănește `currentColor` din desene; cele vechi, cu culori scrise în path, rămân cum sunt până se refac. */ .kmr__ico { display:block; line-height:0; flex:none; color:var(--green); } .kmr__ico svg { width:40px; height:40px; } /* Varianta fără iconițe. Aceeași concluzie ca la .kmr__gama, ajunsă a doua oară: patru pictograme de 40px pentru „mașină de spălat-aspirat", „aspirator", „cărucior" și „echipament compact" ies mici și se confundă între ele — un utilaj se recunoaște din nume sau din poză, nu dintr-un desen. Rămâne numele, cu dunga verde pe muchie cât să dea ritm cardurilor. Imaginea și celula de listă nu primesc dungă: nu sunt tipuri de echipament. Municipalități rămâne pe varianta cu iconițe, e aprobată. */ /* Casetele din aceste bento-uri sunt mai strânse decât cele obișnuite: aici stau toate în coloana de lângă poză, deci fiecare rând economisit înseamnă o poză mai bine proporționată. 28/26 → 22/24, plus rânduri de text mai apropiate. */ /* :not(--media) — altfel poza intră și ea într-o casetă cu ramă albă în jur. Regula asta are 0-2-0, iar `.kmr__cell--media { padding:0 }` are 0-1-0, deci o bate. Poza rămâne lipită de marginile celulei, cu colțurile rotunjite, atât. */ .kmr__bento--dunga .kmr__cell:not(.kmr__cell--media) { padding:22px 24px; gap:9px; } .kmr__bento--dunga .kmr__cell p { font-size:14.5px; line-height:1.5; } .kmr__bento--dunga .kmr__cell h3 { font-size:17px; } /* Caseta „Aplicații" e cea mai înaltă din coloană, deci de la ea se câștigă cel mai mult: cap de listă mai mic, dungă mai apropiată de text, chipuri mai strânse. */ .kmr__bento--dunga .kmr__cell--lead { padding:20px 24px; } .kmr__bento--dunga .kmr__cell--lead .kmr__lista-titlu { padding-bottom:8px; margin-bottom:0; } .kmr .kmr__bento--dunga .kmr__cell--lead p.kmr__lista-titlu { font-size:18px; } .kmr__bento--dunga .kmr__apps { gap:6px; margin-top:2px; } .kmr__bento--dunga .kmr__apps li { font-size:13px; padding:5px 12px; } .kmr__bento--dunga .kmr__cell:not(.kmr__cell--media):not(.kmr__cell--lead) { border-left:3px solid var(--green); /* Fără iconiță, textul rămânea lipit de marginea de sus și sub el se casca un gol — înălțimea rândului o dă imaginea care ține două rânduri, nu textul. Centrat pe verticală, ca în cartonașele .kmr__gama. */ justify-content:center; } .kmr__cell h3 { color:var(--blue); } .kmr__cell p { font-size:15px; line-height:1.55; color:var(--muted); } .kmr__apps { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:4px 0 0; list-style:none; } .kmr__apps li { font-size:13.5px; font-weight:600; color:var(--blue); background:var(--white); border:1px solid var(--blue-pale); border-radius:var(--pastila); padding:6px 14px; cursor:default; transition:border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s; } /* Chipurile nu duc nicăieri — nu sunt linkuri și nu trebuie să pară. Dar sunt lista pe care vizitatorul se caută pe sine („sunt eu un laborator?"), deci merită să răspundă când treci peste ele. Ridicare de 2px și chenar verde: destul cât să simtă că le-a atins, prea puțin cât să creadă că se poate da clic. */ .kmr__apps li:hover { border-color:var(--green); color:var(--blue-dark); transform:translateY(-2px); box-shadow:0 8px 18px -12px rgba(19,66,133,.5); } @media (prefers-reduced-motion:reduce) { .kmr__apps li:hover { transform:none; } } /* ---------- slot produse + CTA de mijloc ---------- */ .kmr__slot { border:2px dashed var(--blue-soft); border-radius:var(--rot); background:var(--white); padding:46px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; } .kmr__slot code { font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:14px; color:var(--blue); background:var(--wash); border:1px solid var(--line); border-radius:4px; padding:6px 12px; } .kmr__slot span { font-size:14px; color:var(--muted); } .kmr__midcta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; background:var(--white); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:var(--rot); padding:26px 30px; } .kmr__midcta p { font-size:17px; font-weight:600; color:var(--ink); max-width:52ch; } .kmr__midcta small { display:block; font-size:14.5px; font-weight:400; color:var(--muted); margin-top:4px; } /* ---------- marquee branduri ---------- */ .kmr__marquee { position:relative; overflow:hidden; padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .kmr__track { display:flex; width:max-content; gap:54px; animation:kmr-slide 34s linear infinite; } .kmr__marquee:hover .kmr__track { animation-play-state:paused; } .kmr__track span { font-size:20px; font-weight:700; color:var(--blue); opacity:.5; white-space:nowrap; letter-spacing:.01em; } @keyframes kmr-slide { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* ---------- banda de branduri, a noastră ---------- Aceleași sigle ca în blocul Woodmart 20506, din aceeași bibliotecă media, dar desenate de noi. Câștigul: controlăm mărimea, spațierea și rotunjirea, iar pagina rămâne UN SINGUR widget HTML în Elementor — fără widget Scurtcod între bucăți. Siglele vin în două seturi identice; al doilea e doar ca bucla să nu aibă cusătură. NU scrie numărul blocului în forma lui de scurtcod, nici măcar într-un comentariu. De când stilul intră în widget, WordPress îi execută scurtcodurile ORIUNDE în conținut — inclusiv în comentarii și înăuntrul blocului de stil. Menționat aici cu paranteze drepte, blocul 20506 chiar se executa: îți injecta siglele în mijlocul CSS-ului, închidea stilul mai devreme și restul fișierului ajungea text pe pagină. */ .kmr__branduri { background:var(--white); border:1px solid var(--line); border-radius:var(--rot-mare); padding:34px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .kmr__branduri-sir { display:flex; width:max-content; align-items:center; gap:88px; padding:0 44px; animation:kmr-branduri 52s linear infinite; } .kmr__branduri:hover .kmr__branduri-sir { animation-play-state:paused; } /* siglele rămân colorate: pe o pagină de distribuitor, brandul recunoscut e jumătate din argument. Opacitatea puțin sub 1 le ține pe același plan. */ .kmr__branduri img { height:104px; width:auto; flex:none; object-fit:contain; opacity:.88; transition:opacity .25s, transform .25s; } .kmr__branduri img:hover { opacity:1; transform:scale(1.06); } @keyframes kmr-branduri { from { transform:translateX(0); } to { transform:translateX(-50%); } } @media (max-width:700px) { .kmr__branduri img { height:70px; } .kmr__branduri-sir { gap:52px; } } /* fără animație: siglele se așază pe rânduri, nu rulează */ @media (prefers-reduced-motion:reduce) { .kmr__branduri { -webkit-mask-image:none; mask-image:none; padding:24px; } .kmr__branduri-sir { animation:none; width:auto; flex-wrap:wrap; justify-content:center; gap:44px; padding:0; } .kmr__branduri img[aria-hidden="true"] { display:none; } } /* ---------- beneficii, banda albastră ---------- Refăcută după secțiunea „Certificări și succese" de pe komarom.ro/servicii/, pe care clientul a arătat-o ca model. Valorile sunt citite din pagina live cu unelte/design3.js, nu potrivite din ochi: fundal #3160B8, carduri transparente cu chenar #C7CADC de 1px și colț de 6px, padding 32px, distanță 20px, titlu 22px/700, text 16px/1.6, iconiță verde de 42px. A treia formă a zonei: linii subțiri pe cinci coloane → carduri albe-translucide → acum chenar deschis pe albastru mai luminos, ca pe site. Diferența față de site e că acolo cardurile au 3 coloane egale; aici sunt cinci beneficii, deci grila e de șase coloane — trei sus, două late jos — ca să nu rămână un gol în rândul al doilea. */ .kmr__band { background:var(--blue-band); position:relative; overflow:hidden; } .kmr__band .kmr__in { padding-top:74px; padding-bottom:74px; position:relative; z-index:1; } .kmr__band h2 { color:var(--white); } /* Punctele din fundal. Pe site sunt un PNG de 1920px (our-services-bg-img.png); aici sunt desenate în CSS, ca previzualizarea trimisă clientului să rămână autonomă și ca banda să arate la fel la orice lățime. Se sting spre mijloc, unde stă textul. */ .kmr__band::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.20) 1.6px, transparent 1.7px); background-size:17px 17px; -webkit-mask-image:linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000 100%); mask-image:linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000 100%); } .kmr__bens { display:grid; grid-template-columns:1fr; gap:20px; } @media (min-width:620px) { .kmr__bens { grid-template-columns:repeat(2,1fr); } } @media (min-width:1040px) { .kmr__bens { grid-template-columns:repeat(6,1fr); } } @media (min-width:1040px) { .kmr__ben:nth-child(-n+3) { grid-column:span 2; } .kmr__ben:nth-child(n+4) { grid-column:span 3; } } /* Varianta cu număr par de carduri — trei pe rând, toate egale, ca pe komarom.ro. Grila de șase de mai sus e făcută pentru cinci beneficii (trei sus, două late jos); la șase ar lăsa ultimul card singur pe al treilea rând. */ @media (min-width:1040px) { .kmr__bens--3 { grid-template-columns:repeat(3,1fr); } .kmr__bens--3 .kmr__ben:nth-child(-n+3), .kmr__bens--3 .kmr__ben:nth-child(n+4) { grid-column:auto; } } .kmr__ben { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:32px; border:1px solid var(--band-linie); border-radius:var(--rot); transition:box-shadow .3s, border-color .3s, transform .4s; } /* Umbra și degradeul de la hover sunt tot de pe site: linear-gradient(60deg,#61CE70, #134285) la 46% opacitate, plus 0 0 60px rgba(19,66,133,.24). Degradeul stă pe un strat separat ca să se poată aprinde treptat — pe fundal nu s-ar putea anima. */ .kmr__ben::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(60deg, #61CE70 0%, var(--blue) 100%); transition:opacity .3s; } .kmr__ben:hover { border-color:transparent; box-shadow:0 0 60px 0 rgba(19,66,133,.24); } .kmr__ben:hover::before { opacity:.46; } .kmr__ben-ico { color:var(--green); line-height:0; } .kmr__ben-ico svg { width:42px; height:42px; } .kmr__ben h3 { font-size:22px; font-weight:700; line-height:1.4; color:var(--white); letter-spacing:-.01em; } .kmr__ben p { font-size:16px; line-height:1.6; color:var(--white); } /* ---------- criteriile de alegere, cartonașe numerotate ---------- A înlocuit panoul în două coloane cu săgeată la mijloc. Acolo, cele opt criterii stăteau pe două coloane într-o jumătate de pagină: „tipul zonelor care trebuie curățate" și „necesitatea unei soluții electrice" se rupeau pe două rânduri, iar rândurile ieșeau inegale, cu goluri între ele. Se citea ca un tabel prost aliniat. Acum ocupă toată lățimea, în cutii egale de patru pe rând. Numerele nu sunt o ordine de prioritate — sunt un inventar: se vede dintr-o privire că analiza are opt puncte, ceea ce e chiar argumentul secțiunii. */ /* Selector dublu, din același motiv ca la .kmr__h2-centru: regula .kmr p de mai sus are 0-1-1 și pune margin:0, iar o singură clasă are 0-1-0 — deci margin:auto nu se aplica deloc. Cutia rămânea lipită de stânga, cu textul centrat degeaba în interiorul ei, ceea ce arată aproape corect și nu e. Se măsoară, nu se verifică din ochi. */ /* Liniuta din „SĂNĂTATE — spitale, clinici și centre medicale". La marimea titlului, linia de em iese cat un cuvant si taie fraza in doua. Ramane, pentru ca e in docx, dar la jumatate din corp si in albastru deschis: separa, nu striga. */ .kmr .kmr__liniuta { font-size:.5em; font-weight:500; color:var(--blue-soft); vertical-align:middle; margin:0 .1em; } .kmr .kmr__lead-centru { max-width:62ch; margin:0 auto; text-align:center; color:var(--muted); font-size:17px; } @media (max-width:600px) { .kmr .kmr__lead-centru { text-align:left; margin-left:0; } } /* ---------- capul unei liste ---------- Rândurile care anunță o listă — „Soluțiile IPC sunt potrivite pentru:", „În portofoliul nostru găsiți:" — nu sunt paragrafe, sunt capul listei de sub ele. Ca paragraf obișnuit, gri și mic, treceau neobservate exact lângă lucrul pe care îl introduc. Sunt mai mari, albastre, cu o dungă verde dedesubt. `width:fit-content` face dunga lată exact cât textul, nu cât coloana — și merge la fel și într-o coloană îngustă, și centrat, fără două seturi de reguli. Selectorul e dublu pentru că `.kmr__duo-copy p` are 0-1-1 și ar bate o clasă simplă. */ .kmr .kmr__lista-titlu { font-weight:700; color:var(--blue); padding-bottom:12px; border-bottom:2px solid var(--green); width:fit-content; margin-bottom:4px; max-width:100%; } /* Mărimea vine din tag, nu din clasă. Ca

e un rând care anunță o listă dintr-o coloană; ca

e chiar titlul secțiunii și ia mărimea de titlu de la .kmr h2, păstrând albastrul și dunga verde. Regula de 20px e legată de `p` dinadins — altfel ar fi bătut mărimea titlului, fiind mai specifică. */ .kmr p.kmr__lista-titlu { font-size:20px; line-height:1.35; } .kmr .kmr__lista-titlu--centru { margin-left:auto; margin-right:auto; text-align:center; } @media (max-width:600px) { .kmr .kmr__lista-titlu { font-size:18px; } .kmr .kmr__lista-titlu--centru { margin-left:0; text-align:left; } } .kmr__criterii { counter-reset:crt; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px; } @media (min-width:560px) { .kmr__criterii { grid-template-columns:repeat(2,1fr); } } @media (min-width:940px) { .kmr__criterii { grid-template-columns:repeat(4,1fr); } } .kmr__criterii li { counter-increment:crt; display:flex; flex-direction:column; gap:10px; padding:24px 22px 22px; background:var(--white); border:1px solid var(--line); border-radius:var(--rot); font-size:16px; line-height:1.45; font-weight:600; color:var(--ink); transition:border-color .2s, box-shadow .2s, transform .2s; } .kmr__criterii li::before { content:counter(crt,decimal-leading-zero); font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--green); /* linia verde de sub cifră ține locul unei iconițe: dă cutiei un cap vizual fără să inventeze un simbol pentru fiecare criteriu */ padding-bottom:9px; border-bottom:2px solid var(--green); align-self:flex-start; } .kmr__criterii li:hover { border-color:var(--blue-linie); transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(19,66,133,.45); } .kmr__svc { list-style:none; margin:2px 0 0; padding:0; display:grid; gap:1px; background:var(--blue-pale); border:1px solid var(--blue-pale); border-radius:var(--rot-mic); overflow:hidden; } /* Dunga verde stătea în poziție absolută, la left:4px și top:19px. Două lucruri greșite: 4px de margine nu e aer, e o scăpare — și un top fix nu se centrează pe nimic. Nimerea aproximativ mijlocul unui rând de o linie și ieșea complet din ax la rândurile care treceau pe două. Acum rândul e flex, deci dunga se centrează singură pe text, oricâte rânduri are. */ .kmr__svc li { background:var(--blue-tint); display:flex; align-items:center; gap:14px; padding:14px 22px; font-size:15.5px; font-weight:600; line-height:1.45; color:var(--blue); } /* Semnul din fața fiecărui rând: frunzele din siglă. Nu desenate după ea — DECUPATE din ea, cu unelte/decupeaza-sigla.js. Prima încercare a fost un SVG desenat de mână după siglă și nu semăna deloc: două frunze la 22px se citeau ca o liniuță oblică. Se reface cu: node unelte/decupeaza-sigla.js landing-pages/imagini-sigla/komarom-logo.webp 800 195 974 355 66 landing-pages/imagini-sigla/frunze-sigla.png Din sigla de 974×519, dreptunghiul 800,195–974,355 e colțul cu frunzele. Unealta păstrează numai pixelii verzi, restul devine transparent, apoi taie pe conținut. 66px în fișier, 22px pe pagină — de trei ori, ca să fie curat pe ecrane retina. E singurul loc unde împrumutăm un element din siglă: e o listă de „ce oferim", iar frunza leagă lista de brand mai bine decât o linie. */ .kmr__svc li::before { content:""; flex:none; width:22px; height:22px; background:url("data:image/png;base64,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") center/22px no-repeat; } /* ---------- gama de echipamente, cartonașe cu iconiță ---------- Prima formă era lista cu linii subțiri (.kmr__svc) pusă pe trei coloane. Nu a mers: rândurile unui grid cu linii au înălțimea celui mai înalt element, iar „monodiscuri pentru spălare, decapare și lustruire" trece pe două rânduri — deci vecinii lui rămâneau cu o jumătate de casetă goală sub text. Se citea ca un tabel cu găuri. Aici fiecare intrare e un cartonaș, iar textul stă centrat pe verticală în el: cartonașele dintr-un rând se întind la aceeași înălțime și nu mai rămâne niciun gol. A doua încercare a avut și câte o iconiță pentru fiecare tip de utilaj. Au picat: nouă simboluri desenate pentru lucruri care seamănă între ele — mașină de spălat, mașină de măturat, aspirator — ies mici, se confundă între ele și arată desenate în grabă. Un utilaj nu se recunoaște dintr-o pictogramă de 32px; se recunoaște din poză sau din nume. Deci rămâne numele, cu o dungă verde pe muchia din stânga cât să dea ritm rândurilor. */ /* grid-auto-rows:1fr — altfel fiecare RÂND al grilei își ia înălțimea din cel mai înalt cartonaș al lui, iar rândurile ies diferite între ele: primul de 78px, al doilea și al treilea de 88, pentru că acolo două texte trec pe două rânduri. În cartonașe se vedea ca o grilă strâmbă. Cu 1fr, toate rândurile primesc înălțimea celui mai înalt, deci toate cele nouă cutii sunt identice. Textul e centrat, pe ambele axe. */ .kmr__gama { list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:1fr; grid-auto-rows:1fr; } @media (min-width:560px) { .kmr__gama { grid-template-columns:1fr 1fr; } } @media (min-width:960px) { .kmr__gama { grid-template-columns:repeat(3,1fr); } } .kmr__gama li { display:flex; align-items:center; justify-content:center; text-align:center; min-height:78px; padding:18px 24px; background:var(--white); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--rot); font-size:16.5px; font-weight:600; line-height:1.45; color:var(--blue-dark); transition:border-color .2s, box-shadow .2s, transform .2s; } .kmr__gama li:hover { border-top-color:var(--blue-linie); border-right-color:var(--blue-linie); border-bottom-color:var(--blue-linie); transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(19,66,133,.45); } .kmr__pull { margin-top:8px; font-size:17px; line-height:1.5; font-weight:500; color:var(--blue); } .kmr__pull b { display:block; font-weight:700; } /* ---------- CTA final ---------- */ .kmr__cta { background:var(--blue-deep); color:var(--white); position:relative; overflow:hidden; } .kmr__cta::before { content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 50% 0%, rgba(66,119,186,.34), transparent 60%); } .kmr__cta .kmr__in { position:relative; padding-top:76px; padding-bottom:76px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; } .kmr__cta h2 { color:var(--white); max-width:26ch; } .kmr__cta p { color:rgba(255,255,255,.82); max-width:60ch; font-size:17px; } /* ---------- utilitare ---------- */ .kmr__stack { display:flex; flex-direction:column; } .kmr__stack--8{gap:8px} .kmr__stack--14{gap:14px} .kmr__stack--20{gap:20px} .kmr__stack--28{gap:28px} .kmr__stack--40{gap:40px} /* ---------- apariție la scroll ---------- ATENȚIE: conținutul e VIZIBIL implicit. Ascunderea se activează doar prin clasa .kmr--anim, pe care o pune scriptul paginii. Dacă scriptul lipsește sau e eliminat de Elementor, pagina rămâne vizibilă — doar fără animație. Nu inversa regula asta. */ .kmr__rise { transition:opacity .6s ease, transform .6s ease, filter .6s ease; } .kmr--anim .kmr__rise { opacity:0; transform:translateY(18px); filter:blur(6px); } .kmr--anim .kmr__rise.is-in { opacity:1; transform:none; filter:none; } @media (prefers-reduced-motion:reduce) { .kmr *, .kmr *::before, .kmr *::after { transition:none !important; animation:none !important; } .kmr--anim .kmr__rise { opacity:1; transform:none; filter:none; } .kmr__track { animation:none; } } @media (max-width:700px) { .kmr__sec { padding:54px 0; } .kmr__btn { padding:15px 28px; } .kmr__faq summary { padding:20px 46px 20px 18px; font-size:16.5px; } .kmr__faq summary::after { right:16px; top:23px; } .kmr__faq-a { padding:0 18px 22px 18px; } } /* ================================================================ ADĂUGAT PENTRU MUNICIPALITĂȚI & SPAȚII PUBLICE — 20 august 2026 Componente noi, cerute de structura acestui text (proces, întrebări frecvente). Se adaugă la CSS-ul comun, nu îl înlocuiesc. Paginile deja publicate nu sunt afectate. ================================================================ */ /* ---------- secțiune editorială pe două coloane, cu imagine ---------- */ .kmr__duo { display:grid; grid-template-columns:1fr; gap:32px; align-items:start; } @media (min-width:900px) { .kmr__duo { grid-template-columns:1.04fr .96fr; gap:58px; } } .kmr__duo-copy { display:flex; flex-direction:column; gap:16px; } .kmr__duo-copy p { color:var(--muted); font-size:16.5px; line-height:1.65; max-width:62ch; } .kmr__duo-copy p.kmr__duo-first { font-size:18px; color:var(--ink); font-weight:500; } /* Două blocuri titlu+paragraf în aceeași coloană („Cum alegem" și „De ce Komarom", unite la cererea clientului). Cu gap-ul obișnuit de 16px, al doilea titlu stătea lipit de paragraful de deasupra și cele două se citeau ca unul singur. Linia subțire le desparte fără să mai adauge încă o secțiune. */ .kmr__duo-copy--doua > h2 + p { margin-bottom:6px; } .kmr__duo-copy--doua > p + h2 { margin-top:14px; padding-top:30px; border-top:1px solid var(--line); } /* Rotunjirea și tăierea stau pe container, nu pe poză: așa dunga verde de jos e tăiată de aceleași colțuri. Cu raza pusă pe poză, dunga ieșea cu capetele drepte în afara ei. */ .kmr__duo-media { position:relative; border-radius:var(--rot); overflow:hidden; } .kmr__duo-media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; } /* bara verde urmează colțurile pozei — altfel colțurile ei drepte ies în afară */ .kmr__duo-media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--green); } /* ---------- bento cu 5 celule: 1 imagine înaltă + 4 carduri ---------- */ @media (min-width:900px) { .kmr__bento--c .kmr__cell:nth-child(1) { grid-column:span 2; grid-row:span 2; } .kmr__bento--c .kmr__cell:nth-child(n+2) { grid-column:span 2; } } /* ---------- bento cu 7 celule: 1 imagine înaltă + 6 carduri ---------- Pentru Industrie & Producție: textul dă șase materiale de gestionat (praf, șpan, uleiuri, pardoseli, deșeuri, ATEX), nu patru ca pe celelalte pagini sectoriale. Poza ține toate cele trei rânduri, iar cardurile stau lângă ea, două câte două: imagine + 2+2 / imagine + 2+2 / imagine + 2+2. Nimic nu trece sub poză. */ @media (min-width:900px) { .kmr__bento--d .kmr__cell:nth-child(1) { grid-column:span 2; grid-row:span 3; } .kmr__bento--d .kmr__cell:nth-child(n+2) { grid-column:span 2; } } /* ---------- pașii, ca panglică de săgeți ---------- A patra încercare, și prima care pornește de la text, nu de la formă. În document (par. 161) pașii nu sunt o listă, ci un lanț scris chiar cu săgeți: „Analiză → Recomandare → Demonstrație → Livrare → Instruire → Service". Săgeata e informația. Cele trei încercări de dinainte au pierdut-o toate: 1. căsuțe albe cu cifre mici → se citea ca un tabel 2. cercuri legate cu o linie → linia părea decor, cercurile prea mici 3. plăci pline, navy, cu cifra mare → șase insule egale; cifra ocupa tot locul, cuvântul — singura informație pe care o avem de la client — rămânea mărunt, jos de tot Acum plăcile se îmbucă una în alta: fiecare se termină într-un vârf care intră în scobitura următoarei. Nu mai e nevoie de nicio explicație ca să se vadă că e un parcurs, iar între ele rămâne un fir subțire de fundal, cât să se distingă. Cuvântul e mare și alb, cifra e mică și liniștită deasupra: numărul spune doar al câtelea e pasul, cuvântul spune ce se întâmplă. */ .kmr__steps { --varf:26px; /* adâncimea vârfului și a scobiturii — trebuie să fie egale */ --gol:5px; /* firul de fundal dintre plăci */ list-style:none; margin:0; padding:0; counter-reset:kmr-step; display:flex; flex-direction:column; gap:9px; } .kmr__steps li { counter-increment:kmr-step; position:relative; display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--rot); background:var(--blue-dark); color:var(--white); transition:background-color .2s; } .kmr__steps li::before { content:"0" counter(kmr-step); font:800 13px/1 "DM Sans",Arial,sans-serif; letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--green); flex:none; min-width:22px; } /* pe telefon lanțul e vertical, deci firul care leagă plăcile e vertical */ .kmr__steps li:not(:last-child)::after { content:""; position:absolute; left:31px; bottom:-9px; width:2px; height:9px; background:var(--blue-linie); } .kmr__steps b { font-size:17px; font-weight:700; line-height:1.25; color:var(--white); } .kmr__steps li:hover { background:var(--blue); } /* ultimul pas — service — nu e un capăt, ci ceva continuu: placă verde */ .kmr__steps li:last-child { background:var(--green-dark); } .kmr__steps li:last-child::before { color:var(--white); } .kmr__steps li:last-child:hover { background:var(--green); } @media (min-width:1040px) { .kmr__steps { flex-direction:row; gap:0; } .kmr__steps li { flex:1; min-width:0; height:96px; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; border-radius:0; padding:0 var(--varf) 0 calc(var(--varf) + 22px); margin-right:calc(-1 * (var(--varf) - var(--gol))); clip-path:polygon(0 0, calc(100% - var(--varf)) 0, 100% 50%, calc(100% - var(--varf)) 100%, 0 100%, var(--varf) 50%); } /* Prima placă n-are ce să îmbuce în stânga, ultima n-are unde să arate în dreapta. Tot ele duc și rotunjirea: panglica e o singură formă, deci se rotunjesc doar cele două capete — stânga la prima, dreapta la ultima. Îmbucările dintre ele rămân ascuțite, altfel vârfurile n-ar mai intra în scobituri. Rotunjirea trece prin clip-path: fundalul e rotunjit întâi, poligonul taie după. */ .kmr__steps li:first-child { padding-left:26px; border-radius:var(--rot) 0 0 var(--rot); clip-path:polygon(0 0, calc(100% - var(--varf)) 0, 100% 50%, calc(100% - var(--varf)) 100%, 0 100%); } .kmr__steps li:last-child { margin-right:0; border-radius:0 var(--rot) var(--rot) 0; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--varf) 50%); } .kmr__steps li::after { display:none; } .kmr__steps b { font-size:17px; } } /* Fără ridicare la hover: plăcile sunt îmbucate, iar una ridicată ar rupe lanțul și ar lăsa o crăpătură albă la mijloc. Se schimbă doar culoarea. */ /* ---------- întrebări frecvente ---------- */ .kmr__faq { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rot-mare); overflow:hidden; } .kmr__faq details { background:var(--white); } .kmr__faq summary { list-style:none; cursor:pointer; display:block; position:relative; padding:24px 58px 24px 28px; font-size:17px; font-weight:700; line-height:1.4; color:var(--blue); transition:color .16s; } .kmr__faq summary::-webkit-details-marker { display:none; } .kmr__faq summary:hover { color:var(--blue-dark); } .kmr__faq summary:focus-visible { outline:3px solid var(--green); outline-offset:-3px; } .kmr__faq summary::after { content:""; position:absolute; right:26px; top:26px; width:18px; height:18px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 2.5v13M2.5 9h13' stroke='%235EC95E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; transition:transform .22s ease; } .kmr__faq details[open] summary::after { transform:rotate(135deg); } .kmr__faq-a { padding:0 58px 26px 28px; } .kmr__faq-a p { color:var(--muted); font-size:15.5px; line-height:1.65; max-width:76ch; } /* ---------- grila de produse ---------- Înlocuiește caruselul Woodmart, care ieșea pe toată lățimea ferestrei, în afara containerului paginii. Pozele de produs au proporții foarte diferite pe site, de aceea cutia are raport fix și `object-fit:contain` — se încadrează, nu se taie. */ .kmr__prods { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } @media (min-width:700px) { .kmr__prods { grid-template-columns:repeat(3,1fr); } } @media (min-width:1000px) { .kmr__prods { grid-template-columns:repeat(4,1fr); } } .kmr__prod { display:flex; flex-direction:column; gap:6px; text-decoration:none; text-align:center; background:var(--white); border:1px solid var(--line); border-radius:var(--rot); padding:14px 16px 18px; transition:border-color .2s, transform .2s, box-shadow .2s; } .kmr__prod:hover { border-color:var(--blue-pale); transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(19,66,133,.5); } .kmr__prod:focus-visible { outline:3px solid var(--green); outline-offset:2px; } /* Cutia pozei: pătrată și cu poza încadrată întreagă înăuntru. Înainte era `display:grid; place-items:center` cu poza pe `max-width/max-height:100%`. Nu ținea: procentele alea se raportează la înălțimea zonei de grilă, care aici vine din `aspect-ratio` și nu e definită la momentul măsurării — deci pozele mai înalte ieșeau din cutie și `overflow:hidden` le reteza. Se vedea la monodisc și la sistemul cu apă pură, ambele înalte și subțiri: li se tăia mânerul. Acum poza umple cutia (`width/height:100%`) și se încadrează cu `object-fit:contain` — deci se vede întreagă, oricât de înaltă sau lată ar fi, iar cutiile rămân toate identice. Raportul e 1:1, nu 4:3: pozele de pe site sunt amestecate, dar utilajele înalte pierdeau cel mai mult pe o cutie lată. Paddingul ține produsul dezlipit de chenar. */ .kmr__prod-img { display:block; background:var(--white); margin-bottom:8px; border-radius:var(--rot-mic); aspect-ratio:1/1; overflow:hidden; padding:10px; } .kmr__prod-img img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; } /* min-height de doua randuri: numele produselor raman aliniate intre carduri, chiar daca denumirea categoriei se rupe pe doua randuri la unele */ .kmr__prod-cat { font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-soft); line-height:1.3; min-height:2.6em; } /* Spațiul de deasupra butonului stă aici, nu pe buton: butonul are `margin-top:auto` ca să cadă la baza cardului, iar un al doilea margin-top l-ar anula. Așa cardul cel mai înalt — cel fără spațiu de prisos — tot are aer între nume și buton. */ .kmr__prod-nume { font-size:16px; font-weight:700; line-height:1.3; color:var(--ink); margin-bottom:8px; } /* „Vezi detalii" — cerut de client, pe amândouă paginile cu grilă. Verde, ca butoanele obișnuite: verdele e culoarea de acțiune a site-ului, iar un buton albastru într-o pagină în care tot ce se apasă e verde ar cere să fie învățat din nou. La hover trece pe verdele închis, exact ca .kmr__btn--primary. `margin-top:auto` îl împinge la baza cardului, deci butoanele stau pe aceeași linie în tot rândul, oricât de lungi sunt numele produselor deasupra. `align-self:center` îl ține lat cât textul, dar centrat în card. Nu e , e : cardul întreg e deja legătură. */ .kmr__prod-link { margin-top:auto; align-self:center; display:inline-flex; align-items:center; gap:7px; padding:10px 18px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--white); background:var(--green); border:1px solid var(--green); border-radius:var(--pastila); transition:background-color .2s, border-color .2s, color .2s; } .kmr__prod-link::after { content:"→"; transition:transform .2s; } .kmr__prod:hover .kmr__prod-link { background:var(--green-dark); border-color:var(--green-dark); color:var(--white); } .kmr__prod:hover .kmr__prod-link::after { transform:translateX(3px); } /* legături către categoriile din care vin produsele */ .kmr__cats { display:flex; flex-direction:column; gap:12px; } .kmr__cats ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .kmr__cats a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:14px; font-weight:600; color:var(--blue); background:var(--white); border:1px solid var(--blue-pale); border-radius:var(--pastila); padding:8px 16px; transition:border-color .18s, background-color .18s; } .kmr__cats a:hover { border-color:var(--blue); background:var(--blue-tint); } .kmr__cats a:focus-visible { outline:3px solid var(--green); outline-offset:2px; } .kmr__cats b { font-weight:800; color:var(--blue-soft); font-variant-numeric:tabular-nums; } /* ---------- lista de acoperire ---------- Cartonaș alb, cu chenar și o umbră moale, sub hero. A stat o vreme urcat peste marginea hero-ului, dar așa se citea ca și cum ar fi lipit de el. Acum are aer deasupra și se vede singur, din chenar și umbră. Eticheta era „Include", cuvântul din docx; singur, deasupra unei liste de opt, nu spunea ce e lista. Acum scrie „Soluții potrivite pentru". */ .kmr__covers { background:var(--white); border:1px solid var(--line); border-radius:var(--rot-mare); box-shadow:0 22px 46px -34px rgba(6,21,48,.42); padding:32px 36px; display:flex; flex-direction:column; gap:22px; } @media (max-width:700px) { .kmr__covers { padding:24px 22px; gap:18px; } } .kmr__acoperiri { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px 30px; } @media (min-width:520px) { .kmr__acoperiri { grid-template-columns:1fr 1fr; } } @media (min-width:1000px) { .kmr__acoperiri { grid-template-columns:repeat(4,1fr); } } .kmr__acoperiri li { display:flex; align-items:flex-start; gap:11px; font-size:15.5px; font-weight:600; line-height:1.35; color:var(--blue-dark); } .kmr__acoperiri li::before { content:""; flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--green); } /* ---------- „cum alegem": titlu + criterii, pe două coloane ---------- */ .kmr__alegem { display:grid; grid-template-columns:1fr; gap:26px; } @media (min-width:900px) { .kmr__alegem { grid-template-columns:.86fr 1.14fr; gap:56px; align-items:start; } } .kmr__lead { color:var(--muted); font-size:16.5px; line-height:1.65; } @media (min-width:900px) { .kmr__alegem .kmr__crit { padding-top:6px; } } /* Lista de criterii cu bifă, pe două coloane. A stat o vreme în blocul panoului, care nu mai există — pe Municipalități criteriile sunt acum cartonașe numerotate (.kmr__criterii). Regulile astea rămân pentru că Sănătate & Educație le folosește în continuare, într-o secțiune pe două coloane, unde forma compactă e potrivită. */ .kmr__crit { list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:11px 22px; } @media (min-width:520px) { .kmr__crit { grid-template-columns:1fr 1fr; } } .kmr__crit li { display:flex; align-items:flex-start; gap:10px; font-size:15.5px; line-height:1.45; color:var(--ink); } .kmr__crit li::before { content:""; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%; background:var(--blue-tint) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.3 6.7 11l5.3-6' stroke='%23134285' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } /* ---------- „de ce Komarom": titlu centrat + două casete ---------- Era un bloc de text curgător, centrat. Al doilea paragraf ieșea mai mic și gri, deci se citea ca o notă de subsol — deși spune tocmai partea care contează după vânzare: demonstrații, livrare, punere în funcțiune, instruire, service, mentenanță, piese. Cele două paragrafe din docx (163 și 164) răspund la lucruri diferite — ce livrăm și ce se întâmplă după — așa că fiecare are caseta lui, la fel de vizibilă. Textul e neatins; s-a schimbat doar cutia în care stă. Casetele sunt pe fundal albastru-pal, nu albe, pentru că secțiunea e pe alb și niște casete albe n-ar avea niciun contur. */ .kmr__dece { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; } .kmr__dece::before { content:""; width:56px; height:3px; background:var(--green); } .kmr__dece h2 { max-width:24ch; } .kmr__casete { width:100%; margin-top:6px; display:grid; grid-template-columns:1fr; gap:16px; text-align:left; } @media (min-width:900px) { .kmr__casete { grid-template-columns:1fr 1fr; gap:20px; } } .kmr__caseta { display:flex; flex-direction:column; gap:15px; padding:32px 30px; background:var(--blue-tint); border:1px solid var(--blue-pale); border-radius:var(--rot-mare); transition:border-color .2s, box-shadow .2s, transform .2s; } @media (max-width:600px) { .kmr__caseta { padding:26px 22px; } } .kmr__caseta:hover { border-color:var(--blue-linie); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(19,66,133,.45); } /* O singură casetă ține tot rândul. Altfel stă în prima coloană a grilei de două și lasă lângă ea o jumătate de pagină goală — se vede imediat ce e o cutie rămasă singură, nu o decizie. Fiind lată, iconița trece lângă text, nu deasupra. */ .kmr__casete > .kmr__caseta:only-child { grid-column:1 / -1; } /* Iconița se centrează pe verticală față de textul de lângă ea. Era pusă sus, cu un margin-top de 2px — dar iconița are 38px, iar un rând de text are ~27px: așa, mijlocul ei cădea între primul și al doilea rând, deci nu era aliniată nici cu primul rând, nici cu blocul. Se vedea ca și cum ar fi scăpat acolo. */ @media (min-width:700px) { .kmr__casete > .kmr__caseta:only-child { flex-direction:row; align-items:center; gap:22px; } .kmr__casete > .kmr__caseta:only-child .kmr__caseta-ico { flex:none; } } .kmr__caseta-ico { color:var(--green); line-height:0; } .kmr__caseta-ico svg { width:38px; height:38px; } /* .elementor-20780 .elementor-element.elementor-element-35bd90e dublu: .kmr p are 0-1-1 și ar bate o singură clasă — vezi nota de la titluri */ .kmr .kmr__caseta p { max-width:none; font-size:17px; line-height:1.6; color:var(--ink); text-wrap:pretty; }/* End custom CSS */