The Canada.ca Theme

// Clone: Canada.ca Edition
// Media Queries
    // Phone (Portrait): 320px
    $clone-phone-portrait: "screen and (min-width: 20em)";
    // Phone (Landscape): 480px
    $clone-phone-landscape: "screen and (min-width: 30em)";
    // Tablet (Portrait): 768px
    $clone-tablet-portrait: "screen and (min-width: 48em)";
    // Tablet (Landscape): 1024px
    $clone-tablet-landscape: "screen and (min-width: 64em)";
    // Desktop (Small): 1025px
    $clone-desktop-small: "screen and (min-width: 64.01em)";
    // Desktop (Medium): 1600px
    $clone-desktop-medium: "screen and (min-width: 100em)";
    // Desktop (Large): 1760px
    $clone-desktop-large: "screen and (min-width: 110em)";
// Layout Variables
$clone-large-layout: 100rem;
$clone-medium-layout: 60rem;
$clone-small-layout: 39rem;
// Whitespace Variables
// On Portrait Phone Devices, Media Queries exist at Tablet Landscape, and Desktop Large and are generated using the multiplier below.
$clone-margin: 1rem;
$clone-padding: 1rem;
    // Calculation Variables
    $clone-whitespace-multiplier: 1.15;
    $clone-ws-tp: #{$clone-whitespace-multiplier}; // 1.4rem
    $clone-ws-tl: #{$clone-ws-tp} * #{$clone-whitespace-multiplier}; // 1.68rem
    $clone-ws-ds: #{$clone-ws-tl} * #{$clone-whitespace-multiplier}; // 2.016rem
    $clone-ws-dm: #{$clone-ws-ds} * #{$clone-whitespace-multiplier}; // 2.4192rem
    $clone-ws-dl: #{$clone-ws-dm} * #{$clone-whitespace-multiplier}; // 2.90304rem
// Grid Variables
$clone-grid-columns: 12;
// Main Color Variables
    // Black & White
    $clone-white: #FFFFFF;
    $clone-gray: rgba(150, 150, 150, 1);
    $clone-black: rgba(10, 10, 20, 1);
    // Theme Colors
    $clone-c1: #26374A;
    $clone-c2: #269abc;
    $clone-c3: #af3c43;
    $clone-c4: #af3c43;
    $clone-c5: #af3c43;
    // Go, Slow, Stop
    $clone-go: green;
    $clone-slow: #ff9900;
    $clone-stop: #d3080c;
// Sitewide Color Variables
    // Text Selection
    $clone-selection-background-color: $clone-c1;
    // Hover
    $clone-hover-color: #0535d2;
    // Focus
    $clone-focus-color: $clone-hover-color;
    // Horizontal Rules
    $clone-hr-color: $clone-c2;
// Font Variables
    // Fonts
    $clone-font-sans: 'Lato', sans-serif;
    $clone-font-serif: serif;
    $clone-font-script: "Euphoria Script", cursive;
    $clone-font-monospace: "Consolas", monospace;
    $clone-font-default: $clone-font-sans;
    // Default Line Height
    $clone-line-height: 1.5;
    // The Typography Scale
    $clone-default-font-size: 1.25rem;
    $clone-font-scale: 1.2;
    $clone-font-scale-small: calc(#{$clone-default-font-size}/(#{$clone-font-scale}));
    $clone-font-scale-h5: $clone-default-font-size;
    $clone-font-scale-h4: calc(#{$clone-default-font-size}*(#{$clone-font-scale}));
    $clone-font-scale-h3: calc(#{$clone-font-scale-h4}*(#{$clone-font-scale}));
    $clone-font-scale-h2: calc(#{$clone-font-scale-h3}*(#{$clone-font-scale}));
    $clone-font-scale-h1: calc(#{$clone-font-scale-h2}*(#{$clone-font-scale}));
    // Headings
        // h1
        $clone-heading-1-border-color: $clone-c3;
        $clone-heading-1-border-style: none none solid none;
        $clone-heading-1-border-width: 1px; 
        $clone-heading-1-color: $clone-black;
        $clone-heading-1-font: $clone-font-sans;
        $clone-heading-1-font-size: $clone-font-scale-h1;
        $clone-heading-1-font-weight: bold;
        // h2
        $clone-heading-2-border-color: $clone-c1;
        $clone-heading-2-border-style: none none solid none;
        $clone-heading-2-border-width: 0px; 
        $clone-heading-2-color: $clone-black;
        $clone-heading-2-font: $clone-font-sans;
        $clone-heading-2-font-size: $clone-font-scale-h2;
        $clone-heading-2-font-weight: bold;
        // h3
        $clone-heading-3-border-color: $clone-black;
        $clone-heading-3-border-style: none none solid none;
        $clone-heading-3-border-width: 0px; 
        $clone-heading-3-color: $clone-black;
        $clone-heading-3-font: $clone-font-sans;
        $clone-heading-3-font-size: $clone-font-scale-h3;
        $clone-heading-3-font-weight: bold;
        // h4
        $clone-heading-4-border-color: $clone-c3;
        $clone-heading-4-border-style: none none solid none;
        $clone-heading-4-border-width: 0px; 
        $clone-heading-4-color: $clone-black;
        $clone-heading-4-font: $clone-font-sans;
        $clone-heading-4-font-size: $clone-font-scale-h4;
        $clone-heading-4-font-weight: bold;
        // h5
        $clone-heading-5-border-color: $clone-black;
        $clone-heading-5-border-style: none none solid none;
        $clone-heading-5-border-width: 0px;
        $clone-heading-5-color: $clone-black;
        $clone-heading-5-font: $clone-font-sans;
        $clone-heading-5-font-size: $clone-font-scale-h5;
        $clone-heading-5-font-weight: bold;
// Component Options
    // Cards
    $clone-card-shadow: 0 3px 5px rgba(0, 0, 0, .5);
// Component Color Variables
    // Accordions
    $clone-accordion-border-color: $clone-black;
    $clone-accordion-alternating-background-color: lighten($clone-gray, 35%);
    // Alerts
    $clone-alert-information: $clone-c2;
    $clone-alert-warning: $clone-slow;
    $clone-alert-error: $clone-stop;
    // Blockquotes
    $clone-blockquote-color: $clone-c1;
    // Carousels
    $clone-carousel-dot-color: $clone-c1;
    $clone-carousel-dot-active-color: $clone-c3;
    // Code Blocks
    $clone-code-background: $clone-black;
    // Menus
    $clone-menu-background-color: $clone-white;
    $clone-submenu-background-color: $clone-c1;
    $clone-menu-font-color: $clone-black;
    $clone-menu-divider-color: rgba($clone-gray, .5);
    $clone-menu-icon-color: $clone-c2;
    // Pullquotes
    $clone-pullquote-color: $clone-c2;
    // Tables
    // Note that $clone-table-alternating-color's transparency allows for a checker pattern on the grid when there is a vertical heading column.
    $clone-table-heading-color: $clone-c1;
    $clone-table-alternating-color: rgba(0, 0, 0, .1);