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 Columnsborder-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;
|
![]() |