iBird Rose

никак. браузеры рендерят шрифты каждый по своему.

1) у кнопок в фш отрезаешь левую часть и ставишь ее через before. остальную часть кнопки заливаешь тем же градиентом, справа сделав border-radius (если боишься что градиенты не совпадут - у картинки вырежи полоску шириной 1px и бэкграундом ее задай через repat-x)
2) сами кнопки распологай через display: inline-blok; и получишь то что хоешь. без задания ширины.

<div class="fixed-block">
	<div class="container"></div>  //контейнер шириной 960
</div>

.fixed-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

agragregra.github.io/Brazzers-Carousel

transform scale на body))

в gulp вроде так было. может и в grunt сработает
src: ['**/*.{png,jpg,gif}'],

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

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

a {
    left: 50%;
    transform: translateX(-50%);
}

он и не нужен. BrowserSync это просто альтернатива LiveReload. можешь юзать либо то, либо другое. на свое усмотрение.