グローバルメニュー（リストアイコン）に色を付けたい

#mobile-menu a {
  color: 任意の色;
  background-color: 任意の色;
}

で変えられますが、僕個人的には、

#mobile-menu {
  color: 任意の色;
  background-color: 任意の色;
}

#mobile-menu a {
  color: inherit;
  background-color: inherit;
}

として、aに必要以上のスタイルをしないようにするのが良いのではなかろうかと思います。このモバイルメニューではあまり恩恵は感じられませんが、なるべく設定できるポイントを増やすと言うのが目的です。
オリジナルの場合、#mobile-menuをマウスオーバーしても変化はなく、#mobile-menu aをマウスオーバーさせることで少し薄くなります。そもそもタップデバイスはマウスオーバーができないので、タップした瞬間に薄くなる程度のものですが、これは、

#mobile-menu a:hover, #page-top a:hover {
    opacity: 0.7;
}

このようなスタイルがされているからです。例えば背景色は薄くしたいが文字ははっきりさせたいというような場合opacityは利用せずたいてい背景の方にrgbaで色指定してrgbaのaの部分で不透明度を設定します。
hover(マウスオーバー)が可能だとして、aのhoverにした場合はaをhoverした時の背景色の変化をつけないといけません。
cssは前提として、指定したセレクタの親を調べることは今の所できなかったと思うので、hoverなどの要素については親に設定した子の操作をするべきです。

例えば、

#mobile-menu a{
  background-color: rgba(0,0,0,1); /*黒背景透過0*/
}
#mobile-menu:hover a{
  background-color: rgba(0,0,0,.7); /*黒背景透過70%*/
}
#mobile-menu span { /*中のハンバーガーメニュー*/
  transform: rotate(0deg);
  transition: .3s ease;
}
#mobile-menu:hover span { 
  transform: totate(90deg);
}

このようにすると、#mobile-menuをマウスオーバーした時に、その中身のハンバーガーメニューアイコンを(アニメーション付きで)右に90度回転させることができます。かつ、aに対して何かしらスタイルを加えることもできます。

もしaをマウスオーバーして#mobile-menu a:hover {なんちゃら}として、#mobile-menu自体に変化を加えたい場合はできないわけです。なので、可能性や汎用性を考えて、できるだけ親に対して動作のきっかけを与え、何かしらのアクション時にその子要素に新たなスタイルを加えるということを意識するとより良くなります。

これらは例えばformパーツ等で、checkedのあるなしでその中身やlabelを操作するときなどにも役立ちます。Simplicityで言えばグローバルメニューなどをいじくるときにも使えるだろうと思います。

☓ transform: totate(90deg);
○ transform: rotate(90deg);

totate（笑）