Ivan Bogachev

Как вариант:

ul.sub-menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 35px;
    top: -35px;
    left: 0;
}

first-child -> Ничего не происходит.
nth-child(2) -> работает, но первый элемент считает как второй

Ну давайте посчитаем:

<div class="row">
    <div class="col-6">...</div> <!-- Первый -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Второй. Определенно второй. -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Третий -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Четвертый -->
</div>

Возможно вам стоит еще разок почитать, как работают все эти псевдоклассы.

Обычно задача ставится в обратную сторону - определяется список браузеров и потом код проверяется на наличие в нем неподдерживаемых в этих браузерах свойств. С этим отлично справляется doiuse.

Они используют CSS-градиенты и свойство backgrond-clip:

А перемещают эти градиенты нехитрой анимацией:

Также это можно делать на SVG-масках. Будет более кроссбраузерно.
Ну и на канвасе можно, по тому же принципу, что и с масками.

Может быть какой-нибудь piechart на максималках?)

Это не труъ. Настоящие верстальщики делают такие штуки на чистом CSS. А если лениво или времени нет - вставляют в страницу большой картинкой. На самом деле в верстке может быть смысл, если нужна адаптивность - не всегда, но часто ее может быть проще сверстать, чем на лету подгружать разные картинки в зависимости от изменяющегося размера экрана.

Набросал вам примерчик, думаю раскрасить его градиентами вы уже сами сможете:

Юрий Артюх уже рассказывал как подобные штуки делать, так что пересказывать не буду - просто посмотрите. Подход там универсальный - можно и на канвасе и на SVG все делать (хотя канвас по идее более производительным будет).

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

На CSS только плоская карта получится. Надпись можно было бы соорудить с помощью большого количества элементов и 3d-трансформаций, но результат будет очень грубым. Так что WebGL в таких задачах - наше все.

Запустить крутиться планету

Все не так уж и сложно - одна сфера, одна текстура. Пример можно посмотреть в статье про трехмерные презентации на Three.js, там все то же самое, только в вашем случае сфера маленькая. Ну а поворачивать землю немного каждый кадр - это даже не задача.

запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.

Смущает класс ".list__link"

Если вас смущает повторение list в названии класса, то можно воспользоваться сохранением имени в стиле that=this из javascript:

.list {
    $b: &;

    &__item {
        &:first-child {
            #{$b}__link {
                // . . .
            }
        }
    }
}

Но это сложно назвать более читаемым вариантом.

Если цель - все же сделать код более удобоваримым, то может иметь смысл просто ограничить вложенность при написании стилей (именно визуальную вложенность кода, а не каскад), как это делают в том же rscss:

.list {
    &__item {
        // . . .
    }

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}

А почему бы не использовать обычную feDropShadow?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="2" flood-color="grey" />
    </filter>
  </defs>
  <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5"
           filter="url(#shadow)" fill="hsl(156,80%,50%)"></polygon>
</svg>

Блоки с классами man, woman и kid должны быть рядом с инпутами, в той же обертке. Вот так:

div
    input
    label
    input
    label
    .man
    .woman
    .kid

а не вот так:

div
    input
    label
    input
    label
.man
.woman
.kid

Попробуйте использовать одинаковые наборы функций, но с разными значениями:

.filters {
    filter: grayscale(0.85) sepia(0%) brightness(1);
}

.links-item:hover .filters {
    filter: grayscale(0) sepia(40%) brightness(0.55);
}

Задача разделяется на две:
1. Анимировать саму линию
2. Перемещать огонь по ней

Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.

Что такое 1em? Это текущий размер шрифта. Когда вы задаете размер шрифта в единицах em, браузер считает этот размер относительно родительского размера шрифта. Но у html вы задаете font-size равный 0px. В данном случае это означает, что у всех потомков 1em будет равен нулю до тех пор, пока вы не зададите какое-то другое значение не в em/rem, тогда у потомков того элемента 1em будет равен заданному значению.

P.S.: Задавать font-size равный нулю для html - это не лучшая идея, она может приводить к самым разным багам, а также проблемам, когда у пользователей в браузере настроены ограничения на размер шрифта для html.

С первого взгляда видно:

1. Font-size в 1px для HTML, а потом все в REM? - интересное начало...
2. CSS-методология? - отсутствует.
3. Препроцессор для облегчения жизни? - отсутствует.
4. Все в одном файле? - да, так и есть.
5. Магические числа в CSS? - много.
6. Префиксы прямо в коде? - ага.
7. 21 брейкпоинт для такой простой страницы? - ежик...
8. Шрифты? - Fira отвалилась. Letter-spacing скачет.
9. Critical CSS? - отсутствует.
10. Бесполезные условные комментарии для IE6, гриды и флексы в одном флаконе? - о дааа.
11. HTML lang='ru' и контент на английском? - почему бы и нет.
12. Грузить весь FontAwesome ради пары иконок? - классика.
13. Асинхронная загрузка картинок? - отсутствует.

Продолжать можно долго. Рекомендации можно дать следующие:

1. Освойтесь с инструментами верстальщика. Откройте для себя препроцессоры и автопрефиксер. Почитайте про БЭМ. Используйте.
2. Добейтесь такого, чтобы вы понимали абсолютно все в своей верстке. Что? Зачем? Почему именно так? Избегайте копипасты. Не используйте какие-то "фишки" только потому, что кто-то их где-то поиспользовал - вполне вероятно, что там был другой контекст, а в вашей ситуации получится что-то странное. Разбирайтесь со всем.
3. Изучайте хорошие практики.
4. Ну и JS, без него никак.

Все в одну картинку - не универсально, тем более, что сверстать не сложно.
Первый пример - один круг с градиентом, второй - белый, сверху.
Второй пример - тот же круг с градиентом, и перекрыть ему половину. На мой взгляд варианты с большим количеством бордер-радиусов могут ломать мозг, но тут на вкус и цвет...

Да, симпатичная штука. Как говорится, ябзаверстал. Да и показаться на первой странице CodePen с такой демкой тоже будет не лишним. Так что вот вам концепт для изучения по мотивам вашего видео:

В разных браузерах не тестировал, это скорее пример, чтобы показать подход к решению задачи. Рекомендую смотреть на большом экране - версия только для десктопа.