Colors

For ease of project scaling and continuity per project. the color variables are all numbered (–clr-1, –clr-2, –clr-3… ect.) rather than unique named colors should be added in the UNQ Section.

/****************************************************************************
*****************************************************************************
01 Root Variables (VRS)
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
01-00 Branding Variables (BVR)
---------------------------------------------------------------------------*/

/* Colors FRAMEWORK 2024-05-26
-----------------------------------------------*/
:root {

    /* Hex Alpha Codes: 95% = F2, 90% = E6,  85% = D9, 80% = CC,  75% = BF, 70% = B3,  65% = A6, 60% = 99,  55% = 8C, 50% = 80,
                        45% = 73, 40% = 66,  35% = 59, 30% = 4D,  25% = 40, 20% = 33,  15% = 26, 10% = 1A,  5% = 0D */
                        
    /* Body Paragraph */
    --clr-body: #303d48;

    /* Color 1 */
    --clr-1-dark: #a71c24;
    --clr-1: #ED2224;

    /* Color 2 */
    --clr-2-dark: #303d48;
    --clr-2-dark-op: #303d4866;
    --clr-2: #6a7580;
    --clr-2-op: #6a758040;
    --clr-2-light: #F0F1F2;
    --clr-2-light-op: #F0F1F266;

    /* Color 3 */
    --clr-3: #f7f7f7;
    --clr-3-dark: #303d48;
    --clr-3-dark-op: #303d4866;
    --clr-3-light: #f7f7f78066;
    --clr-3-op: #f7f7f7;
    --clr-3-hover: #f7f7f7;

    /* Color 4 */
    --clr-4: #f7f7f7;
    --clr-4-dark: #303d48;
    --clr-4-dark-op: #303d4866;
    --clr-4-light: #f7f7f78066;
    --clr-4-op: #f7f7f7;
    --clr-4-hover: #f7f7f7;

    /* Color White */
    --clr-white: #ffffff;
    --clr-white-op: #ffffffBF;
    --clr-white-hover: #ffffff80;

    /* Color Black */
    --clr-black: #000000;
    --clr-black-op: #000000E6;
    --clr-black-hover: #000000E6;

    /*  Icon Colors */
    --clricon-primary: var(--clr-1);
    --clricon-secondary: var(--clr-1);
        /* Font Awesome Overides */
        --fa-primary-color: var(--clricon-primary);
        --fa-primary-opacity: 1.0;
        --fa-secondary-color: var(--clricon-secondary);
        --fa-secondary-opacity: 1.0;

}

Effects

Text Shadows, Box Shadows, Borders, Transitions, Filters are all handled here to keep the site experience consistnet

/* Effects FRAMEWORK 2024-05-26
-----------------------------------------------*/
:root {

    /* Text Shadow */
    --shadow-text: 2px 2px 2px rgb(39 41 46 / 24%);
    --shadow-text-light: 1px 2px 1px rgb(255 255 150 / 80%);

    /* Drop Shadow */
    --shadowcolor: 0, 70, 120;
    --shadowbox: 0px 2px 5px  rgba(var(--shadowcolor), 15%);
    --shadowbox-hover: 0px 2px 5px rgba(var(--shadowcolor), 33%);

    /* Backdrop Filters */
    --backdropblur:  blur(10px);
    --backdropsaturate:  saturate(145%);

    /* Border Radius */
    --borderradius: 2rem ;

    /* Transitions */
    --transitions: all 150ms ease-in !important;
    --transitions_slower: all 350ms ease-in !important;
}

Design Vernacular

Here we handle consistency informational design elements : lines, table cells, hr etc.

/* Design Vernacular (VRN) FRAMEWORK 2024-05-26
-----------------------------------------------*/
:root {

    /* Notices */
    --vern-notice-info: #007cba;
    --vern-notice-info-bkg: #f4f8ff;
    --vern-notice-success: #4ab866;
    --vern-notice-success-bkg: #f4fff7;
    --vern-notice-warning: #f0b849;
    --vern-notice-warning-bkg: #fffbf4;
    --vern-notice-error: #cc1818;
    --vern-notice-error-bkg: #fff0f0;

    /* Lines & Borders */
    --vern-line-thic: 2px;
    --vern-line-color: var(--clr-2);
    --vern-line-color-em: var(--clr-black);
    --vern-line-color-light: var(--clr-white);

    --vern-line: var(--vern-line-thic) solid var(--vern-line-color);
    --vern-line-em: var(--vern-line-thic) solid var(--vern-line-color-em);
    --vern-line-light: var(--vern-line-thic) solid var(--vern-line-color-light);

    /* Charts & Tables Text Colors */
    --vern-info_type-p: var(--clr-body);
    --vern-info_type-h: var(--clr-black);

    /* Cell */
    --vern-cell-padding: 0.5rem;
    --vern-cell-bkg-th: var(--clr-2-light-60);
    --vern-cell-bkg-td: var(--clr-white);
    --vern-cell-bkg-tdAlt: var(--clr-2-light-100);

}

Fonts used in project

Set the fonts here then override them with these variables in the other css sections

/*---------------------------------------------------------------------------
01-01 Fonts (BVF) FRAMEWORK 2024-05-26
---------------------------------------------------------------------------*/
:root {
    
    /* Body Font */
    --bodyfont: Inter ,-system-ui,system-ui,sans-serif ;
    --bodyfont-weight: 400;
    --bodyfont-weight-bold: 700;
    --bodyfont-style: normal;

    /* Heading 1 Font */
    --headingfont: Inter ,-system-ui,system-ui,sans-serif ;
    --headingfont-weight: 700;
    --headingfont-style: normal;

    /* Heading 2 Font */
    --heading2font: Inter ,-system-ui,system-ui,sans-serif ;
    --heading2font-weight: 700;
    --heading2font-style: normal;

    /* Heading 3 Font */
    --heading3font: Inter ,-system-ui,system-ui,sans-serif ;
    --heading3font-weight: 700;
    --heading3font-style: normal;
}

Here we control how the font grows and adapts to screens.

/*---------------------------------------------------------------------------
01-02 Type Scale (BVT) FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/

:root {
    
    /* Font Size Master -- Font size is the basis of all spacing */
    --fontSize: 16px;
    
    /* line height */
    --lineHeight: calc(var(--fontSize) * 1.6);

    /* Lead Paragraph Text */
    --leadsize: 1.6em;
    --leadlineHeight: calc(var(--fontSize) * 1.8);

    /* Fine Print */
    --fineprint: .8em;
    --fineprintlineHeight: calc(var(--fontSize) * 1.3);

    /* Heading Scaling */
    --h1-size: 2.1rem;
    --h2-size: 1.8rem;
    --h3-size: 1.55rem;
    --h4-size: 1.3rem;
    --h5-size: 1.175rem;
    --h6-size: .8rem;

    /* Letter Spacing */
    --letter_spacing-contract: -.07em;
    --letter_spacing-expand: .2em;

}
    /* Mobile SML DOWN (Test @ 320px Wide) */
    @media (max-width: 379px) { 
        :root { --fontSize:     14px;
        }
    }

    /* Tablet */
    @media (min-width: 760px)  { 
        :root { --fontSize: 16px; } 
    }

    /* HEADING SCALING Desktop SMLx LRG & UP */
    @media (min-width: 1300px) {
        :root {

            /* Font Size Master */
            --fontSize: 16px;

            /* Lead Paragraph Text */
            --leadsize: 1.4em;

            /* Fine Print */
            --fineprint: .7em;

            /* Heading Scaling */
            --h1-size: 2.8rem;
            --h2-size: 2.3rem;
            --h3-size: 1.8rem;
            --h4-size: 1.4rem;
            --h5-size: 1.2rem;
            --h6-size: .675rem;
        }
    }

    /* Desktop Medium */
    @media (min-width: 1500px) {  
        :root { --fontSize: 18px; } 
    }

Here we control how the font grows and adapts to screens.

Container Width Variables

/*---------------------------------------------------------------------------
01-03 Grid Container Widths Variables (BVC) FRAMEWORK 2024-07-29
---------------------------------------------------------------------------*/
:root {

    --gcw-max-xl:   100%;
    --gcw-max:      100%;
    --gcw-max-m:    100%;
    --gcw-max-s:    80%;

}

    /* Mobile LRG */
    @media (min-width: 560px) {  
        :root {
            --gcw-max-xl:   100%;
            --gcw-max:      100%;
            --gcw-max-m:    100%;
            --gcw-max-s:    500px;
        }        
    }

    /* Tablet */
    @media (min-width: 760px) {
        :root {
            --gcw-max-xl:   100%;
            --gcw-max:      720px;
            --gcw-max-m:    560px;
            --gcw-max-s:    560px;
        }
    }

    /* Tablet LRG */
    @media (min-width: 1000px) { 
        :root {
            --gcw-max-xl:   100%;
            --gcw-max:      960px;
            --gcw-max-m:    720px;
            --gcw-max-s:    560px;
        }
    }

    /* Desktop SML */
    @media (min-width: 1300px) {
        :root {
            --gcw-max-xl:   1320px;
            --gcw-max:      1140px;
            --gcw-max-m:    960px;
            --gcw-max-s:    720px;
        }
    }

    /* Desktop MED */
    @media (min-width: 1500px) {
        :root {
            --gcw-max-xl:   1440px;
            --gcw-max:      1140px;
            --gcw-max-m:    960px;
            --gcw-max-s:    720px;
        }
    }

    /* Desktop LRG */
    @media (min-width: 1800px) {
        :root {
            --gcw-max-xl:   1600px;
            --gcw-max:      1320px;
            --gcw-max-m:    960px;
            --gcw-max-s:    720px;
        }
    }

Spacing Variables

/*---------------------------------------------------------------------------
01-04 Spacing Variables (BVS) FRAMEWORK 2024-05-05
---------------------------------------------------------------------------*/
:root {
  --sp-feat: 6rem;
  --sp-base: 1.5rem;
  --sp-rim: .75rem;
}
    /* Tablet */
    @media screen and (min-width: 760px) {
        :root {
            --sp-feat: 6rem;
            --sp-base: 2.75rem;
            --sp-rim: 1.2rem;
        }
    }
    
    /* Desktop SML */
    @media screen and (min-width: 1300px) {
        :root {
            --sp-feat: 8rem;
            --sp-base: 3.5rem;
            --sp-rim: 1.2rem;
        }
    }