Антон Усачев

Обратиться только к ячейкам в первому ряду и...

table tr:first-child td {
	border-top: 1px solid #eee;
}

UPD: если вопрос про правый отступ в последней колонке, то можно схитрить. Цветом заливать див внутри ячеек, а последней в ряду давать правый паддинг:

table tr td {
	background: #fff;
}

table tr:first-child td {
	border-top: 1px solid #eee;
}

table tr td:last-child {
	padding-right: 40px;
}

table tr td div {
	width: 100%;
	height: 100%;
	background: #fceeff;
}

Нужно перевести $header-grad в rgba и плясать от него. Сафари любой прозрачный градиент воспринимает как 0% черного (или белого? не помню). Короче, если, например, хотим сделать исчезающий красный, то пишем так:

elem {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
    /* ниже ваш цвет */
    background-image: linear-gradient(to bottom, rgba(55, 60, 70, 1), rgba(55, 60, 70, 0));
}

Проверь, есть ли у тебя вообще .woff в папке, где он их ищет: css-файл (есть ли ссылка на .woff) и физически в папке глянь. IE тоже часто ругается, что не видит .woff, но я смотрю, тут не этот случай, Хромиум во всей красе.

Нужно немного поправить цсс для указанных блоков:

.hex-in {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hex-in h5 {
    line-height: 18px;
    font-size: 18px;
    width: 70%;
    margin-bottom: 0;
}

Можно привязаться с границам блока, а не page. Например, через clientX и getBoundingClientRect.

Во-первых, лучше один раз указать семью и оперировать только начертанием. Типа того:

@font-face {
	font-family: 'Open Sans';
	src: url('/../fonts/OpenSans-Bold.eot');
	src: url('/../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('/../fonts/OpenSans-Bold.woff') format('woff'),
		url('/../fonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/../fonts/OpenSans-Regular.eot');
	src: url('/../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
		url('/../fonts/OpenSans-Regular.woff') format('woff'),
		url('/../fonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

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

Табличная верстка? Фи...

td {
    width: 80%;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Размер текста можно задавать в величинах vw, vh, vmin, vmax, например, font-size: 2.5vw даст размер шрифта в 2,5% от ширины экрана.

Никак, потому что псевдоэлементы принадлежат блоку.
Обход такой. Если нужно дать какой-то фон, дать его для :after с z-index: 1.
Для :before – z-index по умолчанию (он будет под :after).
Таким образом имитируем что-то под фоном блока.
Для контента блока z-index: 2 (если там будет контент).,
Ну и не забываем играть с position, чтобы все это расставить по местам.