Ankhena

1. Прозрачность в одном блоке, текст в другом и наложить один на другой.
2. Если речь об однородном фоне, использовать цвет в rgba вместо opacity.

https://www.browserstack.com/

1. Использовать в качестве фона одного блока svg, ну или хуже, обычную картинку.
2. Делать несколько элементов с тенями, но боюсь, в углах будет наложение теней.

Макеты на каждую страницу? На каждый девайс(планшет, телефон и т.п.)? Может как-то надо привязываться к сеткам, размерам и так далее?

Как дизайнер нарисует, так верстальщик (вменяемый) и сверстает.
А дизайнер нарисует так, как Вы напишете в ТЗ.
Кто, дизайнер или верстальщик, будет продумывать адаптив зависит от талантов обоих и вашего желания сэкономить.
Нужно ли рисовать каждую страницу, опять таки зависит от тех же переменных.
Я часто работаю с дизайнером, который рисует только главную страницу и особо не заморачивается на вырисовывание внутренних страниц каталогов, различных заголовков, списков, форм, кнопочек и т.д. Все это делаю я уже при верстке. Называется это "сделай нам красиво". Естественно, при таком подходе я беру за верстку заметно больше, чем обычно. Но дизайнер меньше.

Про сетки и размеры.
Ваш сайт должен выглядеть хорошо на любом размереэкрана/окна браузера.
Дизайн по сетке проще для некоторых верстальщиков. Но с другой стороны, так вы частично ограничиваете фантазию дизайнера. И как всегда: талантливый дизайнер сделает отличный симпатичный макет и по сетке, а талантливый верстальщик сверстает все и без сеток :)

Что нужно требовать от дизайнера в макете, чтобы верстальщик смог обновить дизайн

Легче будет, если блоки останутся такими же, как и сейчас, т.е. изменится только их вид и расположение на странице. Если появятся какие-то новые блоки или фильтры товаров (т.е. добавится функциональность), то, возможно, потребуется помощь программиста или верстальщик с расширенными способностями.

Вот сервис показывающий поддержку свойств в разных браузерах (не устройствах) caniuse.com

какие устройства нужно учесть при верстке, если от заказчика особых требований нет, т.к. он в это не вникает. Каков стандарт?

Нет никаких стандартов, есть целевая аудитория конкретного проекта. От этого и пляшут.

1. градиенты https://webref.ru/css/value/linear-gradient
2. трансформации https://webref.ru/css/transform
3. тени https://webref.ru/css/box-shadow

Вообще, зависит от судьбы блоков при адаптации, может фоновой картинкой будет проще

а есть только такие прямоугольные куски багетов

Я бы склеила их в фотошопе для нормального результата и использовала border-image. А не насиловала бы браузер трансформами и лишними блоками.

@keyframes cloud_anime--3{
    0%, 100%{
        right: 50%;
    }
    25%{
        right: -100%;
    }
    50%{
        right: 50%;
    }
    75%{
        right: 100%;
    }
}

Вы понимаете, что эти расстояния разные и неравномерные?

Версии браузеров можно выяснить, например, на browserstack.com. В бесплатной версии только частично.
caniuse показывает поддержку свойств браузерами, а не устройствами.

1. Прописать правильный meta viewport
2. Задать html и body высоту и минимальную высоту 100%
3. Не применять background к html, лучше к body или к основному блоку-обертке.

Множественный фон из картинки и градиента

background: 
  linear-gradient(to top left, #FFF 0, #FFF 50%, transparent 50.6%,  transparent) bottom no-repeat/ 100% 200px,
  url("http://namonitore.ru/uploads/catalog/other/kapelki_vodi_1600.jpg") no-repeat center center/cover;

В моем примере угол градиента будет меняться в зависимости от ширины блока. Если надо постоянный угол, то нужно указать градус, например, 20deg
https://jsfiddle.net/Lvj166ck/

warcevil:
1. Рамка с болтиками можно сделать с помощью border-image, болтики через before и after или позиционированием bg. (Второй вариант лично мне нравится больше)
2. Блок со стрелками я бы делала через display:flex и сами стрелки фоном contain
3. Аналогично background-size: contain. Размер шрифта либо считать через vw либо изменять в точках перелома макета.