W HTML:
Edytor Froala w panelu Shopera USUWA puste elementy inline przy zapisie —
uznaje je za smieci po formatowaniu. Zmierzone na zywo 02.09.2026: wszystkie
20 elementow ikon zniknelo, a zostal z samym
w srodku. Kolka .mm-ico-circle tez zostaly skasowane.
Pseudo-elementu Froala usunac nie moze, bo nie istnieje w HTML.
Dzieki temu ikony wracaja po samym wgraniu CSS — bez wklejania stron od nowa.
PRZYPISANIE PRZEZ :nth-child, nie przez klase:
klasa rozrozniajaca (mm-ico--zn-haft) siedziala na usunietym elemencie,
wiec jedyne, co zostalo, to kolejnosc. Jest stala we wszystkich szesciu
landingach, bo generuje ja jeden szablon.
UWAGA: zmiana kolejnosci kafelkow w HTML przestawi ikony.
========================================================================== */
/* ---------- pasek faktow ----------
Te ikony sa DWUKOLOROWE, wiec ida tlem graficznym, nie maska. */
.resetcss.fr-view .mm-fact::before{
content:"";grid-column:1;grid-row:1;
width:52px;height:52px;
background-repeat:no-repeat;background-position:left center;background-size:contain;
}
.resetcss.fr-view .mm-facts .mm-fact:nth-child(1)::before{background-image:url("../images/user/mm__polska.svg");}
.resetcss.fr-view .mm-facts .mm-fact:nth-child(2)::before{background-image:url("../images/user/mm__technologie.svg");}
.resetcss.fr-view .mm-facts .mm-fact:nth-child(3)::before{background-image:url("../images/user/mm__probka.svg");}
.resetcss.fr-view .mm-facts .mm-fact:nth-child(4)::before{background-image:url("../images/user/mm__ps.svg");}
@media (max-width:800px){
.resetcss.fr-view .mm-fact::before{width:48px;height:48px;}
}
/* Froala usunal takze wokol opisu w pasku faktow, wiec tekst zostal
goly w .mm-fact-body i stracil styl. Styl opisu przeniesiony do reguly
.mm-fact-body w linii 579, zeby nie dublowac selektora. */
/* ---------- sekcja 8, modul lewy: technologie znakowania ---------- */
.resetcss.fr-view .mm-tech-item::before{
content:"";
background-color:var(--mm-green-dark);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
grid-column:1;grid-row:1 / 3;
width:38px;height:38px;margin-top:1px;
-webkit-mask-size:contain;mask-size:contain;
}
.resetcss.fr-view .mm-tech-grid .mm-tech-item:nth-child(1)::before{-webkit-mask-image:url("../images/user/mm__zn-haft.svg");mask-image:url("../images/user/mm__zn-haft.svg");}
.resetcss.fr-view .mm-tech-grid .mm-tech-item:nth-child(2)::before{-webkit-mask-image:url("../images/user/mm__zn-dtf.svg");mask-image:url("../images/user/mm__zn-dtf.svg");}
.resetcss.fr-view .mm-tech-grid .mm-tech-item:nth-child(3)::before{-webkit-mask-image:url("../images/user/mm__zn-sublimacja.svg");mask-image:url("../images/user/mm__zn-sublimacja.svg");}
.resetcss.fr-view .mm-tech-grid .mm-tech-item:nth-child(4)::before{-webkit-mask-image:url("../images/user/mm__zn-grawer.svg");mask-image:url("../images/user/mm__zn-grawer.svg");}
/* ---------- sekcja 8, modul prawy: kolo + ikona ----------
Jeden element nie moze byc jednoczesnie kolem i maska, bo maska przycina
wlasne tlo. Dlatego ::before rysuje kolo, a ::after ikone — oba wstawione
jawnie w te sama komorke siatki, wiec sie nakladaja. */
.resetcss.fr-view .mm-brand-item::before{
content:"";grid-column:1;grid-row:1 / 3;
width:60px;height:60px;border-radius:50%;
background:var(--mm-tint-soft);
}
.resetcss.fr-view .mm-brand-item::after{
content:"";
background-color:var(--mm-green-dark);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
grid-column:1;grid-row:1 / 3;
width:60px;height:60px;
-webkit-mask-size:36px 36px;mask-size:36px 36px;
}
.resetcss.fr-view .mm-brand-grid .mm-brand-item:nth-child(1)::after{-webkit-mask-image:url("../images/user/mm__ps-kolor.svg");mask-image:url("../images/user/mm__ps-kolor.svg");}
.resetcss.fr-view .mm-brand-grid .mm-brand-item:nth-child(2)::after{-webkit-mask-image:url("../images/user/mm__ps-miejsce.svg");mask-image:url("../images/user/mm__ps-miejsce.svg");}
.resetcss.fr-view .mm-brand-grid .mm-brand-item:nth-child(3)::after{-webkit-mask-image:url("../images/user/mm__ps-metka.svg");mask-image:url("../images/user/mm__ps-metka.svg");}
.resetcss.fr-view .mm-brand-grid .mm-brand-item:nth-child(4)::after{-webkit-mask-image:url("../images/user/mm__ps-opakowanie.svg");mask-image:url("../images/user/mm__ps-opakowanie.svg");}
/* ---------- sekcja 10: sciezka procesu ---------- */
.resetcss.fr-view .mm-proc-head::before{
content:"";
background-color:var(--mm-green-dark);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
display:block;width:56px;height:56px;
-webkit-mask-size:contain;mask-size:contain;
}
.resetcss.fr-view .mm-proc .mm-proc-step:nth-child(1) .mm-proc-head::before{-webkit-mask-image:url("../images/user/mm__proc-1-mowisz.svg");mask-image:url("../images/user/mm__proc-1-mowisz.svg");}
.resetcss.fr-view .mm-proc .mm-proc-step:nth-child(2) .mm-proc-head::before{-webkit-mask-image:url("../images/user/mm__proc-2-dobieramy.svg");mask-image:url("../images/user/mm__proc-2-dobieramy.svg");}
.resetcss.fr-view .mm-proc .mm-proc-step:nth-child(3) .mm-proc-head::before{-webkit-mask-image:url("../images/user/mm__proc-3-ustalamy.svg");mask-image:url("../images/user/mm__proc-3-ustalamy.svg");}
.resetcss.fr-view .mm-proc .mm-proc-step:nth-child(4) .mm-proc-head::before{-webkit-mask-image:url("../images/user/mm__proc-4-projekt.svg");mask-image:url("../images/user/mm__proc-4-projekt.svg");}
.resetcss.fr-view .mm-proc .mm-proc-step:nth-child(5) .mm-proc-head::before{-webkit-mask-image:url("../images/user/mm__proc-5-produkcja.svg");mask-image:url("../images/user/mm__proc-5-produkcja.svg");}
.resetcss.fr-view .mm-proc .mm-proc-step:nth-child(6) .mm-proc-head::before{-webkit-mask-image:url("../images/user/mm__proc-6-dostawa.svg");mask-image:url("../images/user/mm__proc-6-dostawa.svg");}
/* ---------- kolejna partia: kolo + ikona, jak w module prawym ---------- */
.resetcss.fr-view .mm-proc-again::before{
content:"";grid-column:1;grid-row:1;
width:56px;height:56px;border-radius:50%;
background:var(--mm-tint-soft);
}
.resetcss.fr-view .mm-proc-again::after{
content:"";
background-color:var(--mm-green-dark);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
grid-column:1;grid-row:1;
width:56px;height:56px;
-webkit-mask-size:34px 34px;mask-size:34px 34px;
-webkit-mask-image:url("../images/user/mm__proc-7-partia.svg");mask-image:url("../images/user/mm__proc-7-partia.svg");
}
@media (max-width:520px){
.resetcss.fr-view .mm-proc-again::before,
.resetcss.fr-view .mm-proc-again::after{grid-row:1;grid-column:1;}
}