Brand variables for colors & effects
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);
}