Normes graphiques
CCQ Comprehensive Style Guide For Print and Web
 |
CSS Resources
CCQ Uses the Bootstrap 4.0 and Greater Grid System
https://getbootstrap.com/docs/4.4/layout/overview/
CCQ's SCSS Source Files (Not including Bootstrap - please refer to preceding link)
CCQ Logo
Header
Footer
Page Title Font (H1):
font-family: "Uni Sans";
font-weight: 900;
font-style: normal;
color: #00547D rgb(0,90,125);
Primary Body Font:
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 400;
font-style: normal;
color: #4D656F rgb(77,101,111);
Secondary Title Font:
font-family: 'Akkurat Pro', Helvetica, Verdana, Tahoma, sans-serif;
font-weight: bold;
font-style: normal;
color: #00547D rgb(0,90,125);
Body Font Specifications
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 20px;
color: rgb(77,101,111);
@media (max-width: 441px){
font-size: .85em;
line-height: 1.5em;
}
@media (min-width: 576px) {
font-size: 1em;
line-height: 1.7em;
}
@media (min-width: 1200px) {
font-size: 1.05em;
line-height: 1.5em;
}
Primary Body Hyperlink Colors
Active
color: #08c;
text-decoration: underline;
opacity: 1;
Hovered
color: #005a7d;
text-decoration: none;
opacity: .5;
Headings CSS Specifications (H1 to H6)
H1
border-bottom: 1px solid #005A7D;
position: relative;
font-family: 'Uni Sans';
font-weight: 900;
font-style: normal;
font-size: calc(1.75rem + 1vh);
margin: 30px 0 20px;
color:$title-color;
line-height: 2rem;
padding-bottom: .5rem;
display: block;
text-decoration: none;
cursor: pointer;
@media (max-width: 441px){
font-size: 1.7rem;
line-height: 1.7rem;
margin: 20px 0 10px;
border-bottom: none;
}
@media (min-width: 768px) {
margin: 20px 0;
}
@media (min-width: 992px) {
font-size: calc(2rem + .7vh);
line-height: calc(2.25rem + .7vh);
}
H2
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.6rem;
padding-bottom: .4rem;
margin: 30px 0 10px;
border-bottom: 1px solid rgb(127,197,223);
@media (max-width: 441px){
font-size: 1.25rem;
line-height: 1.7rem;
padding-bottom: .4rem;
border-bottom: 0px;
margin: 30px 0 10px;
}
H3
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-size: 1.35rem;
font-weight: bold;
font-style: normal;
margin: 30px 0 10px;
@media (max-width: 441px){
font-size: 1.25rem;
}
H4
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-size: 1.35rem;
font-weight: bold;
font-style: normal;
margin: 30px 0 10px;
@media (max-width: 441px){
font-size: 1.25rem;
}
H5
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-size: calc(1rem + .2rem);
font-weight: bold;
font-style: normal;
margin: 30px 0 10px;
@media (max-width: 441px){
font-size: 1rem;
}
H6
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-size: calc(1rem + .2rem);
font-weight: bold;
font-style: normal;
margin: 30px 0 10px;
@media (max-width: 441px){
font-size: 1rem;
}
CSS Breakpoints
// first generation mobile devices down
@media (max-width: 320px)
// secpnd generation mobile devices down
@media (max-width: 441px)
//third generation mobile devices up
@media (min-width: 576px)
//tablet first generation up
@media (min-width: 728px)
//tablet general up
@media (min-width: 768px)
//tablet general down
@media ( max-width: 768px - 1px )
//large device
@media (min-width: 992px)
//desktop
@media (min-width: 1200px)
//hi-rez desktop
@media (min-width: 2400px)
Primary Section Colors
| Avantages sociaux background-color: #910048; |
Qualification et accès à l’industrie background-color: #ff6a13; |
Application de la Loi R-20 background-color: #7a7d81; |
Formation et perfectionnement background-color: #00ab8e; |
Primary Interface Colors
CCQ Colors
CCQ Primary Blue - color: #005A7D
CCQ Process Blue - color: rgb(0,136,204)
CCQ Pantone 305 - color: rgb(127,197,223)
Search Background - color: rgba(0, 88, 124, 0.1)
Tan Background - color: rgba(216,216,216,.3)
CCQ Accent Colors
Gray - color: rgb(216,216,216)
Pantone 3965 - color: rgb(238,220,0)
Pantone 559 - color: rgb(173,202,184)
Pantone 3268 - color: rgb(0,171,142)
Pantone 138 - color: rgb(222,124,0)
Pantone 173 - color: rgb(207,69,32)
Pantone 1815 - color: rgb(124,37,41)
Pantone 7556 - color: rgb(183,139,32)
Pantone 409 - color: rgb(133,120,116)
Pantone 2597 - color: rgb(92,6,140)
CCQ Custom Icons
Use :before or :after psuedo CSS selector: font-family: 'CCQ-Icons' !important,
content: "\e90f"
content: "\e909"
content: "\e90b"
content: "\e90d"
content: "\e899"
content: "\e900"
content: "\e901"
content: "\e902"
content: "\e903"
content: "\e906"
content: "\e907"
content: "\e908"
content: "\e90a"
content: "\e90c"
content: "\e90e"
content: "\e904"
content: "\e905"
Menu Icon
Font Resources
Uni Sans
Akkurat Pro
CCQ Custom Icon Font
Font Awesome 5.8.2
Icofont
Upper and Side Tray Navigation Colors
Header Links
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: 400;
font-style: normal;
color: rgba(0,88,124,.6);
Tray Upper Navigation Links
Level 1: font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: 700;
font-style: normal;
Level 2: font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 700;
font-style: normal;
color: rgb(77, 101, 111);
Level 3: font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(77, 101, 111);
|
 |
Tray Lower Navigation Links
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(151, 151, 151);
|
 |
Search Bar
Background Color: color: rgba(0, 88, 124, 0.1)
Text:
font-family: 'Uni Sans', font-weight: 100;
font-style: normal;
color: #005a7d;
Border: 1px solid #005a7d
Homepage Mega Menu Closed
Text:
font-family: 'Uni Sans';
font-weight: 100;
font-style: normal, color: white;
Overlay Color: rgba(0,136,204,.9)
Background Image Proportions: 550 x 438
Homepage Mega Menu Open
|
"Je Suis" Section Font: font-family: 'Uni Sans Book';
font-weight: normal;
font-style: normal;
color: #005a7d;
Thumbnail Image Proportions: 550 x 438 - uses same image source as closed version |
 |
|
"Je Veux" Title Font: font-family: 'Uni Sans Book';
font-weight: normal;
font-style: normal;
color: white;
Selections Font: font-family: 'Verdana, Geneva, Tahoma, sans-serif';
font-weight: 100;
font-style: normal;
color: white;
Selections Icons: font-family: 'Font Awesome 5 Pro';
or
font-family: 'IcoFont'
color: white;
Background Color: background-color: rgb(0, 136, 204) |
 |
Homepage Promotional Carousel
|
Image Proportions: 1138 x 350 pixels Navigation Arrows: color: white;
text-shadow: #005a7d 0 0 10px;
Use :before or :after psuedo CSS selector: font-family: 'CCQ-Icons' !important;
content: "\e904" content: "\e905" |
 |
Homepage News and Features Section
|
Section Title: font-family: 'Uni Sans';
font-weight: 100;
font-style: normal, color: #005a7d;
Subtitle: font-family: "Akkurat Pro",Helvetica,Verdana,Tahoma,sans-serif;
font-weight: bold;
font-style: normal;
color: #005a7d;
Date: font-family: 'Verdana, Geneva, Tahoma, sans-serif';
font-weight: bold;
color: #005a7d;
Body: font-family: 'Verdana, Geneva, Tahoma, sans-serif';
font-weight: normal;
color: rgb(77, 101, 111);
Link: font-family: "Akkurat Pro",Helvetica,Verdana,Tahoma,sans-serif;
font-weight: bold;
font-style: normal;
color: #005a7d;
content: "\e904" Background Color Blue: rgba(127,197,223,.3) Background Color Tan: rgba(216,216,216,.6) Upper Left Corner Cutout: Use :before or :after psuedo CSS selector
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 30px solid #fff;
border-right: 30px solid transparent;
z-index: 100;
Image Proportions: 500 x 625 pixels |
|
Homepage Web Links
|
Section Title: font-family: 'Uni Sans';
font-weight: 100;
font-style: normal;
color: #005a7d;
Body: font-family: 'Verdana, Geneva, Tahoma, sans-serif';
font-weight: normal;
color: rgb(77, 101, 111);
Link: font-family: "Akkurat Pro",Helvetica,Verdana,Tahoma,sans-serif;
font-weight: bold;
font-style: normal;
color: #005a7d;
Use :before or :after psuedo CSS selector content: "\e904" |
 |
Footer
Background Color: background-color: rgba(216,216,216,.3);
Link Columns border-right: 1px solid rgba(151,151,151,.4);
Links: font-family: "Akkurat Pro", Helvetica,Verdana,Tahoma,sans-serif;
font-weight: normal;
font-style: normal, color: #005a7d;
Copyright: font-family: "Akkurat Pro",Helvetica,Verdana,Tahoma,sans-serif;
font-weight: normal;
font-style: normal;
color: rgb(77, 101, 111);
border-top: 1px solid rgba(151, 151, 151, 0.4);
Top Border: border-top:1px solid rgba(216, 216, 216, 0.4);
Social IconsCSS: display: inline-block;
width: 36px;
height: 36px;
background-color: #7fc5df;
text-align: center;
font-family: 'Font Awesome 5 Brands';
color: white;
Facebook Icon Class:fab fa-facebook-fLinkedin Icon Class:fab fa-linkedin-inYoutube Icon Class:fab fa-youtubeLanguage IconsCSS Anchor: background-color: #7fc5df;
color: #fff;
width: 36px;
height: 36px;
CSS Inner Span: position: absolute;
left: 0;
top: 50%;
text-align: center;
line-height: 1rem;
width: 36px;
height: 15px;
padding: 0;
margin: -6px 0 0 0;
font-family: "Akkurat Pro",Helvetica,Verdana,Tahoma,sans-serif;
font-weight: normal;
font-style: normal;
font-size: 1rem;
|
 |
Breadcrumb Section
Background (One of the Four Primary Colors)
Avantages sociaux
background-color: #910048;
Qualification et accès à l’industrie
background-color: #ff6a13;
Application de la Loi R-20
background-color: #7a7d81;
Formation et perfectionnement
background-color: #00ab8e;
Padding
padding: 10px 20px;
@media (min-width: 576px) {
padding: 10px 20px;
}
@media (min-width: 768px) {
padding: 10px 30px;
}
@media (min-width: 992px) {
padding: 20px 30px;
}
@media (min-width: 1200px) {
padding: 10px 60px;
}
Link and Separator ( > Greater than character):
font-family:"Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: 100;
font-size: .75rem;
font-style: normal;
color: white;
Chapter and Section Headers
|
Background Image Proporation: 1280 pixels x 566 pixels Title and Descriptive Text Holder: background-color: rgba(0,88,124,.8);
padding: 30px 20px;
@media (min-width: 441px) {
padding: 30px 20px;
}
@media (min-width: 768px) {
padding: 30px 30px;
}
@media (min-width: 992px) {
padding: 30px 30px;
}
@media (min-width: 1200px) {
padding: 30px;
}
Title: border-bottom: none;
font-family: 'Uni Sans';
font-weight: 900;
font-style: normal;
font-size: calc(1.75rem + 1vh);
margin: 0px;
color:white;
line-height: 2rem;
padding-bottom: .5rem;
display: block;
text-decoration: none;
@media (max-width: 441px){
font-size: 1.7rem;
line-height: 1.7rem;
}
@media (min-width: 992px) {
font-size: calc(2rem + .7vh);
line-height: calc(2.25rem + .7vh);
}
Descriptive Text (Primary Body Font CSS) : color: white;
|
 |
Chapter Image Links
Image: 380 x 168 pixels
Subtitle Area:
Background (One of the Four Primary Colors)
Avantages sociaux
background-color: #910048;
Qualification et accès à l’industrie
background-color: #ff6a13;
Application de la Loi R-20
background-color: #7a7d81;
Formation et perfectionnement
background-color: #00ab8e;
font-family:"Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.1rem;
color: white;
Subtitle Icon:
Use :before or :after psuedo CSS selector
content: "\e904"
color: white;
Section Links Blocks
|
Blocks Holder: background-color: rgba(0,88,124,.1);
Accent Colors (One of the Four Primary Colors) Avantages sociaux Qualification et accès à l’industrie Application de la Loi R-20 Formation et perfectionnement
Block Title (Uses Accent Color or #005a7d): border-bottom: 1px solid #005A7D;
position: relative;
font-family: 'Uni Sans';
font-weight: 900;
font-style: normal;
font-size: calc(1.75rem + 1vh);
margin: 30px 0 20px;
line-height: 2rem;
padding-bottom: .5rem;
display: block;
text-decoration: none;
cursor: pointer;
@media (max-width: 441px){
font-size: 1.7rem;
line-height: 1.7rem;
margin: 20px 0 10px;
border-bottom: none;
}
@media (min-width: 768px) {
margin: 20px 0;
}
@media (min-width: 992px) {
font-size: calc(2rem + .7vh);
line-height: calc(2.25rem + .7vh);
}
Block Subtitle: font-family:"Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.1rem;
color: #005a7d;
Block Arrow (Uses Accent Color or #005a7d): Use :before or :after psuedo CSS selector content: "\e904" |
 |
Lower Page Sibling Links
|
Title (Uses Accent Color or #005a7d): font-family: 'Uni Sans';
font-weight: 900;
font-style: normal;
text-transform: uppercase;
font-size: 1.5rem;
margin: 0 0 15px;
line-height: normal;
padding-bottom: 15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d8d8d8;
margin-bottom: 0;
Link Text padding-top: 10px;
padding-bottom: 13px;
margin-bottom: 10px;
font-family:"Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
color: #005a7d;
padding-left: 30px;
font-size: 1em;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d8d8d8;
Link Icon: Use :before or :after psuedo CSS selector content: "\e904" color: #005a7d;
|
 |
Tabs
Tab(Uses Accent Color or #005a7d) font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-weight: bold;
font-style: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 20px 50px 20px 15px;
color: #005A7D;
position: relative;
min-height: 106px;
font-size: 1.1rem;
line-height: 1.35rem;
margin-bottom: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #7fc5df;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #7fc5df;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #7fc5df;
@media only screen and (min-width: 320px) and (max-width: 413px) {
min-height: auto;
border-top: 1px dashed rgba(127,197,223,.4);
}
Tab Open: background-color: white;
border-bottom-width: 0px;
background: white;
Tab Closed: background: rgba(0,88,124,.1);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #7fc5df;
Tab Action ButtonIcon Outer Open
display: block;
position: absolute;
width: 27px;
height: 27px;
right: 15px;
top: 15px;
padding: 13px;
margin-left: 15px;
background-color: white;
border-radius: 13.5px;
Use :before or :after psuedo CSS selector content: "_";
color: white;
vertical-align: top;
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-size: 2.5rem;
top: -6px;
right: 22px;
Icon Outer Closed
display: block;
position: absolute;
width: 27px;
height: 27px;
right: 15px;
top: 15px;
padding: 13px;
margin-left: 15px;
background-color: (Uses Accent Color or #005a7d);
border-radius: 13.5px;
Use :before or :after psuedo CSS selector content: "+";
color: white;
font-family: "Akkurat Pro", Helvetica, Verdana, Tahoma, sans-serif;
font-size: 2rem;
left: 4px;
top: 4px;
Tab Content Area
overflow: hidden;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #7fc5df;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #7fc5df;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #7fc5df;
padding: 10px 15px 10px 15px;
Tab Content Uses Primary Body Text Styling margin-bottom: 20px;
|
 |
Accordion
|
Title Closed font-family: "Akkurat Pro",Helvetica,Verdana,Tahoma,sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.35rem;
line-height: 1.6rem;
color: #005a7d;
margin: 0;
width: 90%;
border:0px;
@media (max-width: 441px){
padding: 10px 20px;
font-size: 1rem;
line-height: 1.35rem;
width: 80%;
}
Title Open color: (Uses Accent Color or #005a7d);
border-left-width: 1px;
border-left-style: solid;
border-left-color: #ff6a13;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ff6a13;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ff6a13;
Arrow Closed Use :before or :after psuedo CSS selector content: "\e904" font-family: 'CCQ-Icons' !important;
font-size: 3.5rem;
line-height: 2.5rem;
position: absolute;
top: -15px;
right: 0;
transition: transform .25s;
transform: rotate(90deg);
transform-origin: center center;
width: 40px;
height: 40px;
color: (Uses Accent Color or #005a7d);
@media (max-width: 441px){
top:45%;
font-size: 2.5rem;
line-height: 1.5rem;
width: 30px;
height: 30px;
margin-top: -15px;
}
Arrow Open Use :before or :after psuedo CSS selector content: "\e904" top: -8px;
right: -5px;
transform: rotate(-90deg);
@media (max-width: 441px){
top:50%;
right: -8px;
transform: rotate(-90deg);
}
Content Uses Primary Body Text Styling padding: 30px 30px 40px;
@media (max-width: 441px){
padding: 10px 20px 30px;
}
border-left-width: 1px;
border-left-style: solid;
border-left-color: #ff6a13;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ff6a13;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ff6a13;
|
 |