RAX7

Safari сам находит и стилизует телефонные номера на странице.
На stackoverflow описано как исправить https://stackoverflow.com/questions/3736807/how-do...

Выбирай как больше нравится

Может просто на flexbox сверстать?

https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%)

217deg это и есть угол градиента.
https://developer.mozilla.org/en-US/docs/Web/CSS/l...

С помощью clip-path с clipPathUnits="objectBoundingBox" можно вот такое соорудить без паттернов

<svg>
  <!-- Градиент -->
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="gold"/>
    <stop offset="100%" stop-color="teal"/>
  </linearGradient>

  <!-- Фигура с градиентной заливкой -->
  <rect fill="url(#linear-gradient)"
        width="100%" height="100%"/>
</svg>

css.yoksel.ru/svg-gradients

Упрощенно и без js вот так:

1. В иллюстраторе создаешь новый документ в CMYK, делаешь в нем две плашки с нужными тебе цветами (cmyk 100 80 0 0 и cmyk 0 0 0 25). Конвертируешь их в панотоны https://www.rockymountaintraining.com/adobe-illust...
2. В индизайне, на панели цветов заменяешь СМУК на пантон и экспоритуешь в PDF

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

people.reduce((acc, cur) => {
  if (cur.country && !acc.some(m => m.country === cur.country)) acc.push(cur);
  return acc;
}, []);

Проще сначала нарисовать как оно должно выглядеть в браузерах которые не могут в SMIL, а уже потом все это попытаться расшевелить.

Можно через requestAnimationFrame

подробней здесь https://medium.com/@roderickhsiao/implement-smooth...

Можно на масках заменить сетчатые градиенты на радиальные, либо создать переходы похожие на сетку.

ai файл https://we.tl/t-MIBFjwQbzH

Сначала нужно сделать изображение для рамки.
Картинка режется вот по такой схеме:

В твоем случае будет типа такого


Получившуюся картинку уже можно будет использовать для border-image

Создаем параллельный контур для правой фигуры со смещением допустим 5px

Рисуем эллипс по форме левой фигуры

Переноси параллельный контур поверх всех объектов

Вычитаем из эллипса параллельный контур

готово

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

Окно -> показать градиентный аннотатор

Всё дело в CMYK, это изображение делали для печати в типографии, для вэб нужно изображение в RGB. Поищи эту картинку в rgb или сконветируй самостоятельно. https://www.youtube.com/watch?v=rzJoNimdUh4

Потыкай в эту кнопочку