Normes graphiques

Normes graphiques

CCQ Comprehensive Style Guide For Print and Web

Download PDF File

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)

Download SCSS Source Files

CCQ Logo

Header

 

Download SVG File

Footer

 

Download SVG File

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

Download SVG File

Font Resources

Uni Sans

Zip Download

Akkurat Pro

Zip Download

CCQ Custom Icon Font

Zip Download

Font Awesome 5.8.2

Zip Download

Font Awesome Icon Reference

Icofont

Zip Download

IcoFont Reference

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 Icons

CSS:
                    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-f
Linkedin Icon Class:
fab fa-linkedin-in
Youtube Icon Class:
fab fa-youtube

Language Icons

CSS 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
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;

 

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 Button

Icon 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;
                    

 

X

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de témoins, communément appelés « cookies », et d'autres traceurs nous permettant de vous proposer des contenus et des promotions adaptées à vos intérêts et de recueillir des statistiques de visites en vue d’améliorer votre expérience de navigation. Vous pouvez en tout temps bloquer la transmission des données grâce au module offert par Google.

Pour en savoir plus sur notre politique de confidentialité et nos conditions d'utilisation, cliquez ici.

Confirmer