Typography
Headers
H1
h1 {
/* Proxima Nova Extra Bold */
font: 36px / 3.6rem $font-stack-proxima-nova-extra-bold;
color: #000;
color: $eq-black;
letter-spacing: normal;
margin-bottom: 40px;
text-transform: uppercase;
}
.section-container h1 (Color 1)
.section-container h1 {
/* Proxima Nova Black */
font: 36px / 3.6rem $font-stack-proxima-nova-black;
color: #000;
color: $eq-black;
letter-spacing: -2px;
text-transform: uppercase;
}
.section-container h1 (Color 2)
.section-container h1.option2 {
/* Proxima Nova Black */
font: 36px / 3.6rem $font-stack-proxima-nova-black;
color: #a1a1a4;
color: #eq-platinum;
letter-spacing: -2px;
text-transform: uppercase;
}
.section-container h1 (Color 3)
.section-container h1.option3 {
/* Proxima Nova Black */
font: 36px / 3.6rem $font-stack-proxima-nova-black;
color: #fff;
color: #eq-white;
letter-spacing: -2px;
text-transform: uppercase;
}
H2 (with Link)
h2.link, h2 a {
/* Proxima Nova Bold */
font: 26px / 2.6rem $font-stack-proxima-nova-bold;
color: #ed1c24;
color: #eq-red;
&:hover {
text-decoration: underline;
}
}
H2 (without Link)
h2 {
/* Proxima Nova Bold */
font: 26px / 2.6rem $font-stack-proxima-nova-bold;
color: #000000;
color: #eq-black;
line-height: 1.3;
}
h2.headline (Headline Paragraph)
h2.headline {
/* Proxima Nova Bold */
font: 32px / 3.2rem $font-stack-proxima-nova-bold;
color: #000000;
color: #eq-black;
line-height: 38px;
}
Usage: UPA Banners
h2.banner (Banner Paragraph)
h2.banner {
/* Proxima Nova Bold */
font: 32px / 3.2rem $font-stack-proxima-nova-bold;
color: #ffffff;
color: #eq-white;
line-height: 38px;
}
Usage: UPA Banners
H3
h3 {
/* Proxima Nova Bold */
font: 20px / 2rem $font-stack-proxima-nova-bold;
color: #ed1c24;
color: #eq-red;
line-height: 24px;
margin-top: 20px;
margin-bottom: 10px;
}
p.intro, p.lead (Intro Paragraph)
p.intro, p.lead {
/* Proxima Nova */
font: 20px / 2rem $font-stack-proxima-nova;
color: #333333;
color: $eq-dark-gray;
line-height: 28px;
margin: 15px 0;
}
Paragraphs
Paragraph
p {
/* Proxima Nova */
font: 16px / 1.6rem $font-stack-proxima-nova;
color: #333333;
color: $eq-dark-gray;
line-height: 22px;
margin: 0 0 10px;
}
Need to change all 'p.regular' and 'p.subtitle' to 'p' using new sizes/spacing
.scene-selector-nav (Slider Navigation - Main/in-page)
a.scene-selector-nav {
/* Proxima Nova Bold */
font: 14px / 1.4rem $font-stack-proxima-nova-bold;
color: #999999;
color: $eq-mid-gray;
line-height: 22px;
margin: 0 0 10px;
padding: 25px;
&:hover {
color: #ed1c24;
color: $eq-red;
}
}
Link
a:link,
a:active,
a:visited {
color: #ed1c24;
color: #eq-red;
}
a:active {
text-decoration: underline;
}
a:hover {
color: #af0e14;
color: $link-hover-color;
}
Icons
Font Awesome
http://fontawesome.io or Glyph Search
| Icon | Class |
|---|---|
fa fa-caret-down |
|
fa fa-caret-down gray |
|
fa fa-caret-down white |
|
fa fa-bars |
|
fa fa-bars gray |
|
fa fa-bars white |
|
fa fa-play |
Glyphicons
http://glyphicons.com, red triangle after the text
Icomoon
icon eq-advertising
icon eq-approval
icon eq-apps
icon eq-asset-article
icon eq-asset-blog
icon eq-asset-brochure
icon eq-asset-casestudy
icon eq-asset-datasheet
icon eq-asset-ebook
icon eq-asset-event
icon eq-asset-infographic
icon eq-asset-presentation
icon eq-asset-pr
icon eq-asset-related
icon eq-asset-report
icon eq-asset-survey
icon eq-asset-video
icon eq-asset-vr
icon eq-asset-webinar
icon eq-asset-whitepaper
icon eq-business-continuity
icon eq-cage
icon eq-circle-choices
icon eq-circle-cloud
icon eq-circle-content
icon eq-circle-enterprise
icon eq-circle-expertise
icon eq-circle-financial
icon eq-circle-green
icon eq-circle-locations
icon eq-circle-network
icon eq-circle-performance
icon eq-circle-piggy
icon eq-circle-pindrop
icon eq-circle-revenue
icon eq-circle-uptime
icon eq-circle-world
icon eq-cloud
icon eq-cloud-exchange
icon eq-cloud-provider
icon eq-connected-customers
icon eq-connected-ethernet
icon eq-connected-link
icon eq-connected-metro
icon eq-connected-partners
icon eq-connected-traffic
icon eq-consultants
icon eq-cooling
icon eq-currency
icon eq-customer
icon eq-datacenter
icon eq-ecommerce
icon eq-electrical
icon eq-entertainment
icon eq-folder
icon eq-gaming
icon eq-gears
icon eq-green
icon eq-health
icon eq-idea
icon eq-images
icon eq-insurance
icon eq-integrator
icon eq-it-provider
icon eq-link
icon eq-locations
icon eq-messaging
icon eq-metro
icon eq-mobile
icon eq-music
icon eq-networks
icon eq-partnership
icon eq-performance
icon eq-platform
icon eq-power
icon eq-revenue
icon eq-savings
icon eq-security
icon eq-social
icon eq-storage
icon eq-temperature
icon eq-thumbs
icon eq-tools
icon eq-uptime
icon eq-vault
icon eq-video
icon eq-virtual-desktop
icon eq-web
icon eq-wifi
icon eq-file-empty
icon eq-newspaper
icon eq-fortress
http://icomoon.io/, customizable font icons, can upload vectors and create youre own custom font.
Buttons
.btn-default {
background: #ed1c24;
background: $eq-red;
box-shadow: 2px 2px 0 0 rgba(102,102,102,.5);
padding: 10px 15px 5px;
text-transform: uppercase;
}
.btn-clear {
background: transparent;
border: 3px solid #999;
color: #ffffff;
color: $eq-white;
padding: 10px 25px 5px;
text-transform: uppercase;
}
Lists
List
- List Item 1
- List Item 2
- List Item 3
ul {
color: $eq-mid-gray;
}
Bulleted List
- Bullet 1
- Bullet 2
- Bullet 3
ul.bulleted {
color: $eq-mid-gray;
content: '\25A0';
}
Bold
<strong>This is "strong" text</strong>Font-family: Proxima Nova Bold
strong {
font-family: $font-stack-proxima-nova-bold;
}
Emphasized Text
<em>This is "em" text</em>
strong {
font-style: italic;
}
Superscript
Superscript one
one
Subscript
Subscriptone
one
Horizontal Rule
Colors
Pantone 485
C0 M100 Y100 K0
R237 G28 B36
HEX #ed1c24
SCSS $eq-red
Standard Black: K100
(No Pantone)
Rich Black:
C30 M30 Y30 K100
R0 G0 B0
HEX #000000
SCSS $eq-black
C0 M0 Y0 K0
R255 G255 B255
HEX #FFFFFF
SCSS $eq-white
Pantone Cool Gray 11
C0 M0 Y0 K70
R112 G112 B115
HEX #707073
SCSS $eq-carbon
Pantone Cool Gray 8
C0 M0 Y0 K43
R161 G161 B164
HEX #A1A1A4
SCSS $eq-platinum
Pantone Cool Gray 4
C0 M0 Y0 K25
R201 G201 B204
HEX #c9c9cc
SCSS $eq-chrome
Pantone 367
C40 M0 Y80 K0
R163 G207 B98
HEX #a3cf62
SCSS $eq-light-green
Pantone 347
C96 M0 Y88 K0
R0 G168 B95
HEX #00a85f
SCSS $eq-green
Pantone 288
C100 M80 Y5 K30
R4 G55 B118
HEX #043776
SCSS $eq-dark-blue
Pantone 2915
C60 M10 Y0 K0
R83 G183 B232
HEX #53b7e8
SCSS $eq-light-blue
Pantone 144
C0 M55 Y100 K0
R246 G140 B31
HEX #f68c1f
SCSS $eq-orange