Это блок собственного кода. Перейдите в режим Предпросмотра или опубликуйте страницу, чтобы проверить работу кода.
Нажмите дважды, чтобы изменить
<!-- ============================================================
RENEW · Блок «Светофор летних процедур»
Самодостаточный сниппет: вставить целиком в HTML-виджет.
Все классы с префиксом rnw- — не конфликтуют со стилями конструктора.
============================================================ -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
.rnw-svet{
--rnw-card:#FFFFFF;
--rnw-ink:#2A1810;
--rnw-ink-soft:#6E5748;
--rnw-ink-mute:#9A8677;
--rnw-line:rgba(42,24,16,.06);
--rnw-red:#D64C3C;
--rnw-yellow:#E39A16;
--rnw-green:#4E9B63;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
max-width:1120px;
margin:0 auto;
padding:8px;
box-sizing:border-box;
}
.rnw-svet *{box-sizing:border-box}
.rnw-lane{
background:var(--rnw-card);
border:1px solid var(--rnw-line);
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px -18px rgba(154,64,20,.42);
display:flex;
flex-direction:column;
}
.rnw-lane__top{
display:flex;
align-items:center;
gap:14px;
padding:22px 24px;
color:#fff;
}
.rnw-lane--red .rnw-lane__top{background:linear-gradient(135deg,#E05A49,var(--rnw-red))}
.rnw-lane--yellow .rnw-lane__top{background:linear-gradient(135deg,#EDB13A,var(--rnw-yellow))}
.rnw-lane--green .rnw-lane__top{background:linear-gradient(135deg,#5CB374,var(--rnw-green))}
.rnw-bulb{
width:26px;
height:26px;
border-radius:50%;
background:#fff;
flex:none;
position:relative;
}
.rnw-bulb::after{
content:"";
position:absolute;
inset:5px;
border-radius:50%;
}
.rnw-lane--red .rnw-bulb::after{background:var(--rnw-red)}
.rnw-lane--yellow .rnw-bulb::after{background:var(--rnw-yellow)}
.rnw-lane--green .rnw-bulb::after{background:var(--rnw-green)}
.rnw-lane__top h3{
margin:0;
font-family:inherit;
font-size:17px;
font-weight:700;
line-height:1.2;
color:#fff;
}
.rnw-lane__top small{
display:block;
margin-top:2px;
font-size:13px;
font-weight:500;
opacity:.9;
color:#fff;
}
.rnw-lane ul{
list-style:none;
margin:0;
padding:20px 24px 26px;
display:flex;
flex-direction:column;
gap:10px;
}
.rnw-lane li{
position:relative;
margin:0;
padding-left:18px;
font-size:15px;
font-weight:400;
line-height:1.45;
color:var(--rnw-ink-soft);
}
.rnw-lane li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:6px;
height:6px;
border-radius:50%;
background:var(--rnw-ink-mute);
}
@media (max-width:480px){
.rnw-svet{grid-template-columns:1fr;gap:14px}
}
</style>
<div class="rnw-svet">
<div class="rnw-lane rnw-lane--red">
<div class="rnw-lane__top">
<span class="rnw-bulb" aria-hidden="true"></span>
<div>
<h3>Не планируем летом</h3>
<small>Высокий риск осложнений</small>
</div>
</div>
<ul>
<li>Срединные и глубокие пилинги, TCA высокой концентрации, феноловый пилинг</li>
<li>Агрессивные ретиноевые пилинги «до корки»</li>
<li>CO₂ / Er шлифовка, аблятивные лазеры</li>
<li>IPL / BBL по пигментации на фоне загара</li>
<li>Глубокая микродермабразия, травматичная дермабразия</li>
</ul>
</div>
<div class="rnw-lane rnw-lane--yellow">
<div class="rnw-lane__top">
<span class="rnw-bulb" aria-hidden="true"></span>
<div>
<h3>При строгом отборе</h3>
<small>Только по показаниям</small>
</div>
</div>
<ul>
<li>Поверхностные кислотные пилинги, салициловый пилинг</li>
<li>Микронидлинг и RF-микронидлинг</li>
<li>Неаблятивные и сосудистые лазеры</li>
<li>Мезотерапия, биоревитализация, полинуклеотиды, PRP</li>
<li>HIFU / SMAS, RF-лифтинг, атравматическая чистка</li>
</ul>
</div>
<div class="rnw-lane rnw-lane--green">
<div class="rnw-lane__top">
<span class="rnw-bulb" aria-hidden="true"></span>
<div>
<h3>Всесезонные</h3>
<small>Работаем спокойно</small>
</div>
</div>
<ul>
<li>Биоэнзимная терапия и карбокситерапия</li>
<li>Антиоксидантные и себорегулирующие уходы без пересушивания</li>
<li>LED-терапия, лимфодренажные техники</li>
<li>Мягкие аппаратные уходы: микротоки, электропорация, фонофорез</li>
<li>Гидропилинг, кислородная мезотерапия</li>
</ul>
</div>
</div>
