.elementor-20800 .elementor-element.elementor-element-084fb4f{--display:flex;--background-transition:0.3s;--margin-top:-41px;--margin-bottom:-41px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS for container, class: .elementor-element-084fb4f *//* ========================================================================== 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-20800 .elementor-element.elementor-element-084fb4ful. 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--tight { padding:58px 0; } .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-20800 .elementor-element.elementor-element-084fb4ful 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__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: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-20800 .elementor-element.elementor-element-084fb4ful 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); } /* ---------- 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__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); } /* ---------- 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; } /* ---------- 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); } .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__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); } /* ---------- 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--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; } } @media (max-width:700px) { .kmr__sec { padding:54px 0; } .kmr__btn { padding:15px 28px; } } /* ================================================================ 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; } /* 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); } /* ---------- 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); } /* ---------- 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); } .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-20800 .elementor-element.elementor-element-084fb4f 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; } /* ========================================================================== Reguli numai pentru pagina „du-puy" Din pagini/du-puy/stil.css. Vin după cele comune, deci le pot rescrie. ========================================================================== */ /* ========================================================================== Componentele paginii „du-puy" Numai ale ei. Build-ul le adaugă DUPĂ cele comune, deci pot rescrie o regulă comună fără !important. O componentă nouă se scrie aici, nu în css-comun.css, dacă nu e limpede că o vor folosi și alte pagini. Pagina e construită pe șablonul de furnizor al IPC-ului, deci n-are componente proprii. Cele două reguli de mai jos sunt potriviri pentru textul ĂSTA, nu componente: numele brandului are cratimă, iar lista de portofoliu are un rând în plus față de IPC. ========================================================================== */ /* ---------- numele brandului nu se rupe ---------- „DU-PUY" are cratimă, iar cratima e o ocazie de rupere pentru orice browser. În titlul „Gama de echipamente DU-PUY comercializată de Komarom", care are max-width:30ch și stă centrat, cădea exact acolo: primul rând se termina cu „DU-", al doilea începea cu „PUY". Numele unui brand nu se taie în două. Nu e o suprascriere: nicio regulă comună nu spune nimic despre ruperea rândurilor aici. E o clasă pusă pe numele brandului, în titluri. Se verifică: node unelte/masoara.js du-puy ".kmr__gama li" nu ajută, se măsoară cu rangeurile — vezi nota din pagina.json. */ .kmr__nobr { white-space:nowrap; } /* ---------- poza de portofoliu, pe toată înălțimea rândului ---------- Lista „În portofoliul nostru găsiți" are OPT rânduri (par. 443–450), unul mai mult decât la IPC. Coloana din stânga iese de 476px; poza, la raportul ei de 4:3 într-o coloană de 544px, are 408. Rămâneau 68px de alb sub poză, lângă ultimele două rânduri de listă — se citea ca o poză scăpată prea sus, nu ca două coloane. Poza se întinde pe toată înălțimea rândului și se încadrează cu object-fit, deci pierde puțin din laturi, nu se deformează. `aspect-ratio:auto` e scris explicit: cu lățime și înălțime amândouă definite, raportul din regula comună n-ar mai avea ce face, dar așa se vede din citit că e intenționat. Numai de la 900px în sus. Sub asta cele două coloane se așază una sub alta, iar o poză întinsă pe înălțimea unui rând care nu mai există n-are sens. Se măsoară: node unelte/masoara.js du-puy ".kmr__duo > *" */ @media (min-width:900px) { .kmr__duo { align-items:stretch; } .kmr__duo-media img { height:100%; aspect-ratio:auto; object-fit:cover; } }/* End custom CSS */