Для того чтобы затемнить фон сайта за модальным окном, не затрагивая само модальное окно, одним из наиболее распространённых подходов является использование полупрозрачного слоя, который накладывается на весь экран, оставляя модальное окно четким.
В вашем случае вы можете создать "облачный" слой (overlay), который будет занимать всю страницу, и при этом модальное окно должно находиться выше этого слоя, чтобы оставаться четким. Вам стоит убедиться, что у вашего модального окна есть более высокий `z-index` по сравнению с `overlay`.
Вот пример того, как это можно сделать:
```css
.overlay {
position: fixed; /* фиксированное положение */
top: 0;
left: 0;
width: 100%; /* занимает всю ширину */
height: 100%; /* занимает всю высоту */
background-color: rgba(0, 0, 0, 0.5); /* затемняющий фон */
z-index: 1; /* уровень слоя, который ниже модального окна */
}
.modal {
position: fixed; /* фиксированное положение для центрирования */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* центрирование модального окна */
width: 382px;
height: 410px;
background-color: #FAFAFA; /* цвет фона модального окна */
padding: 40px 35px;
z-index: 2; /* уровень слоя, который выше фона */
}
```
Таким образом, когда вы открываете модальное окно, `overlay` будет затемнять весь фон, но не будет перекрывать само модальное окно, которое будет отображаться поверх него. Не забудьте также добавить другие стили, если это необходимо, для управления элевативными слоями и их поведением.