/** * POSITIVE FEEDBACK AI * Brand Identity: Colors and typography styling only * Usage example: LOGIN */ /****************************************************************************** * GLOBAL UTILITIES ******************************************************************************/ /* NUCLEAR OPTION - FORCE ALL LINKS TO WORK */ /* GLOBAL LINK RESET */ a { text-decoration: none !important; } /* Button hover glow */ .layout--button:hover { box-shadow: 0 0 30px rgba(212, 197, 165, 0.9); /* Very bright cream glow */ transform: translateY(-2px); } /* Force buttons to maintain their assigned colors */ a.layout--button { color: inherit !important; } /* Or be even more specific */ .layout--button { color: inherit !important; } /****************************************************************************** * TYPOGRAPHY AND COLOR PALETTE - COLOR SYSTEM * * COLOR NAMING STRUCTURE: * [type]--[mode]-[level]-[element] * * TYPE: color, font, size, weight, line-height * MODE: dark-mode, light-mode * LEVEL: parent-company, product-line, product-01, product-02, product-03, technology-01, technology-02 * ELEMENT: surface, primary, secondary, tertiary, supporting, interactive * /* Design Token Variables */ :root { /* GLOBAL COLOR APPLICATION SUCCESS AND WARNING */ --color-global-success-01: #20810c; /* DARK GREEN FONT */ --color-global-success-02: #b2f59d; /* LIGHT GREEN BACKGROUND */ --color-global-warning-01: #f2c2f4; /* LIGHT PINK WHITE FONT */ --color-global-warning-02: #730a21; /* DARK RED BACKGROUND */ /* GLOBAL COLOR GREY-SCALE RANGE */ --color-global-base-000: #ffffff; /* PURE WHITE */ --color-global-base-100: #f3f0ee; /********************************************* GLOBAL OFF WHITE */ --color-global-base-200: #e8e5e0; /* VERY LIGHT GRAY */ --color-global-base-300: #d6d3ce; /* LIGHT GRAY */ --color-global-base-400: #9a9a9a; /********************************************* GLOBAL MEDIUM LIGHT GRAY*/ --color-global-base-500: #8a8a8a; /* MEDIUM GRAY */ --color-global-base-600: #767676; /********************************************** GLOBAL GREY */ --color-global-base-700: #242528; /********************************************* VERY DARK GRAY */ --color-global-base-800: #1E1e20; /********************************************* GLOBAL DARK GRAY */ --color-global-base-900: #0f0f10; /********************************************* GLOBAL NEAR BLACK */ --color-global-base-1000: #000000; /* PURE BLACK */ /* GLOBAL CUSTOM RANGE - Ordered by Hue & Lightness */ --color-global-base-01: #EFE5C6; /* Cream */ --color-global-base-02: #92866f; /* Gold */ --color-global-base-03: #D5C5AA; /* Tan */ --color-global-base-04: #AFCEEC; /* Light Blue */ --color-global-base-05: #7DB0D2; /* Capri Blue */ --color-global-base-06: #072437; /* Dark Blue */ --color-global-base-07: #0d1c2b; /* Extra Dark Blue */ --color-global-base-08: #006544; /* Dark Green */ --color-global-base-09: #006544; /* R*L*X Green */ --color-global-base-10: #3199ce; /* S*P*D Blue */ --color-global-base-11: #43abcc; /* Teal Blue */ --color-global-base-12: #703d18; /* Dark Brown */ --color-global-base-13: #986026; /* Brown */ --color-global-base-14: #3e1115; /* SH*S**D* Dark Red */ --color-global-base-15: #311014; /* SH*S**D* Extra Dark Red */ --color-global-base-16: #0A2031; /* Super Dark Blue */ --color-global-base-17: #066047; /* Medium Green */ --color-global-base-18: #871719; /* SH*S**D* Red */ --color-global-base-19: #ff0004; /* SH*S**D* Red */ --color-global-base-20: #d18ff2; /* SH*S**D* Red */ /* Typography Variables */ --text-xs: 0.75rem; --font-bold: 500; /* Button Variables */ --transition-smooth: all 0.3s ease; } /****************************************************************************** * GLOBAL APPLICATION SUCCESS AND WARNING ******************************************************************************/ .color--light-mode-global_primary { color: var( --color-global-base-19); } .color--light-mode-global_secondary { color: var( --color-global-base-900); } .color--dark-mode-supporting-success { color: var(--color-global-success-01); } .color--dark-mode-surface-success { background-color: var(--color-global-success-02); } .color--dark-mode-supporting-warning { color: var(--color-global-warning-01); } .color--dark-mode-surface-warning { background-color: var(--color-global-warning-02); } /****************************************************************************** * COLOR THEME APPLICATION ******************************************************************************/ /* Parent Company - Dark Mode */ .color--dark-mode-parent-company-primary { color: var(--color-global-base-100); } .color--dark-mode-parent-company-secondary { color: var(--color-global-base-400); } .color--dark-mode-parent-company-tertiary { color: var(--color-global-base-100); } .color--dark-mode-parent-company-interactive { color: var(--color-global-base-01); } .color--dark-mode-parent-company-interactive:hover { color: var(--color-global-base-100); } .color--dark-mode-parent-company-supporting-neutral { color: var(--color-global-base-100); } .color--dark-mode-parent-company-supporting-emphasis { color: var(--color-global-base-01); } .color--dark-mode-parent-company-surface { background-color: var(--color-global-base-900); } .color--dark-mode-parent-company-surface-interface-outer { background-color: var(--color-global-base-800); } .color--dark-mode-parent-company-surface-interface-inner { background-color: var(--color-global-base-700); } /* Parent Company - Light Mode */ .color--light-mode-parent-company-primary { color: var(--color-global-base-900); } .color--light-mode-parent-company-secondary { color: var(--color-global-base-600); } .color--light-mode-parent-company-tertiary { color: var(--color-global-base-900); } .color--light-mode-parent-company-interactive { color: var(--color-global-base-100); } .color--light-mode-parent-company-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-parent-company-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-parent-company-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-parent-company-surface { background-color: var(--color-global-base-100); } .color--light-mode-parent-company-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-parent-company-surface-interface-inner { background-color: var(--color-global-base-900); } /* Product Line - Dark Mode */ .color--dark-mode-product-line-primary { color: var(--color-global-base-02); } .color--dark-mode-product-line-secondary { color: var(--color-global-base-400); } .color--dark-mode-product-line-tertiary { color: var(--color-global-base-02); } .color--dark-mode-product-line-interactive { color: var(--color-global-base-03); } .color--dark-mode-product-line-interactive:hover { color: var(--color-global-base-100); } .color--dark-mode-product-line-supporting-neutral { color: var(--color-global-base-100); } .color--dark-mode-product-line-supporting-emphasis { color: var(--color-global-base-03); } .color--dark-mode-product-line-surface { background-color: var(--color-global-base-900); } .color--dark-mode-product-line-surface-interface-outer { background-color: var(--color-global-base-800); } .color--dark-mode-product-line-surface-interface-inner { background-color: var(--color-global-base-700); } /* Product Line - Light Mode */ .color--light-mode-product-line-primary { color: var(--color-global-base-900); } .color--light-mode-product-line-secondary { color: var(--color-global-base-600); } .color--light-mode-product-line-tertiary { color: var(--color-global-base-02); } .color--light-mode-product-line-interactive { color: var(--color-global-base-06); } .color--light-mode-product-line-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-product-line-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-product-line-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-product-line-surface { background-color: var(--color-global-base-100); } .color--light-mode-product-line-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-product-line-surface-interface-innder { background-color: var(--color-global-base-900); } /* Product 01 (Invoice Maps) - Dark Mode */ .color--dark-mode-product-01-primary { color: var(--color-global-base-04); } .color--dark-mode-product-01-secondary { color: var(--color-global-base-04); } .color--dark-mode-product-01-tertiary { color: var(--color-global-base-04); } .color--dark-mode-product-01-interactive { color: var(--color-global-base-05); } .color--dark-mode-product-01-interactive:hover { color: var(--color-global-base-05); } .color--dark-mode-product-01-supporting-neutral { color: var(--color-global-base-05); } .color--dark-mode-product-01-supporting-emphasis { color: var(--color-global-base-100); } .color--dark-mode-product-01-surface { background-color: var(--color-global-base-06); } .color--dark-mode-product-01-surface-interface-outer { background-color: var(--color-global-base-16); } .color--dark-mode-product-01-surface-interface-inner { background-color: var(--color-global-base-07); } /* Product 01 (Invoice Maps) - Light Mode */ .color--light-mode-product-01-primary { color: var(--color-global-base-05); } .color--light-mode-product-01-secondary { color: var(--color-global-base-600); } .color--light-mode-product-01-tertiary { color: var(--color-global-base-07); } .color--light-mode-product-01-interactive { color: var(--color-global-base-400); } .color--light-mode-product-01-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-product-01-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-product-01-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-product-01-surface { background-color: var(--color-global-base-100); } .color--light-mode-product-01-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-product-01-surface-interface-inner { background-color: var(--color-global-base-900); } /* Product 02 (Agency Management) - Dark Mode */ .color--dark-mode-product-02-primary { color: var(--color-global-base-100); } .color--dark-mode-product-02-secondary { color: var(--color-global-base-100); } .color--dark-mode-product-02-tertiary { color: var(--color-global-base-100); } .color--dark-mode-product-02-interactive { color: var(--color-global-base-03); } .color--dark-mode-product-02-interactive:hover { color: var(--color-global-base-100); } .color--dark-mode-product-02-supporting-neutral { color: var(--color-global-base-100); } .color--dark-mode-product-02-supporting-emphasis { color: var(--color-global-base-03); } .color--dark-mode-product-02-surface { background-color: var(--color-global-base-08); } .color--dark-mode-product-02-surface-interface-outer { background-color: var(--color-global-base-17); } .color--dark-mode-product-02-surface-interface-inner { background-color: var(--color-global-base-09); } /* Product 02 (Agency Management) - Light Mode */ .color--light-mode-product-02-primary { color: var(--color-global-base-09); } .color--light-mode-product-02-secondary { color: var(--color-global-base-600); } .color--light-mode-product-02-tertiary { color: var(--color-global-base-07); } .color--light-mode-product-02-interactive { color: var(--color-global-base-400); } .color--light-mode-product-02-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-product-02-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-product-02-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-product-02-surface { background-color: var(--color-global-base-100); } .color--light-mode-product-02-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-product-02-surface-interface-inner { background-color: var(--color-global-base-900); } /* Product 03 (Pace Shift) - Dark Mode */ .color--dark-mode-product-03-primary { color: var(--color-global-base-10); } .color--dark-mode-product-03-secondary { color: var(--color-global-base-10); } .color--dark-mode-product-03-tertiary { color: var(--color-global-base-10); } .color--dark-mode-product-03-interactive { color: var(--color-global-base-20); } .color--dark-mode-product-03-interactive:hover { color: var(--color-global-base-100); } .color--dark-mode-product-03-supporting-neutral { color: var(--color-global-base-11); } .color--dark-mode-product-03-supporting-emphasis { color: var(--color-global-base-20); } .color--dark-mode-product-03-surface { background-color: var(--color-global-base-900); } .color--dark-mode-product-03-surface-interface-outer { background-color: var(--color-global-base-800); } .color--dark-mode-product-03-surface-interface-inner { background-color: var(--color-global-base-700); } /* Product 03 (Pace Shift) - Light Mode */ .color--light-mode-product-03-primary { color: var(--color-global-base-900); } .color--light-mode-product-03-secondary { color: var(--color-global-base-600); } .color--light-mode-product-03-tertiary { color: var(--color-global-base-07); } .color--light-mode-product-03-interactive { color: var(--color-global-base-400); } .color--light-mode-product-03-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-product-03-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-product-03-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-product-03-surface { background-color: var(--color-global-base-100); } .color--light-mode-product-03-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-product-03-surface-interface-inner { background-color: var(--color-global-base-900); } /* Technology 01 (Frost Security) - Dark Mode */ .color--dark-mode-technology-01-primary { color: var(--color-global-base-400); } .color--dark-mode-technology-01-secondary { color: var(--color-global-base-400); } .color--dark-mode-technology-01-tertiary { color: var(--color-global-base-400); } .color--dark-mode-technology-01-interactive { color: var(--color-global-base-100); } .color--dark-mode-technology-01-interactive:hover { color: var(--color-global-base-400); } .color--dark-mode-technology-01-supporting-neutral { color: var(--color-global-base-400); } .color--dark-mode-technology-01-supporting-emphasis { color: var(--color-global-base-100); } .color--dark-mode-technology-01-surface { background-color: var(--color-global-base-18); } .color--dark-mode-technology-01-surface-interface-outer { background-color: var(--color-global-base-14); } .color--dark-mode-technology-01-surface-interface-inner { background-color: var(--color-global-base-15); } /* Technology 01 (Frost Security) - Light Mode */ .color--light-mode-technology-01-primary { color: var(--color-global-base-13); } .color--light-mode-technology-01-secondary { color: var(--color-global-base-13); } .color--light-mode-technology-01-tertiary { color: var(--color-global-base-13); } .color--light-mode-technology-01-interactive { color: var(--color-global-base-13); } .color--light-mode-technology-01-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-technology-01-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-technology-01-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-technology-01-surface { background-color: var(--color-global-base-100); } .color--light-mode-technology-01-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-technology-01-surface-interface-inner { background-color: var(--color-global-base-900); } /* Technology 02 (Da-m) - Dark Mode */ .color--dark-mode-technology-02-primary { color: var(--color-global-base-12); } .color--dark-mode-technology-02-secondary { color: var(--color-global-base-12); } .color--dark-mode-technology-02-tertiary { color: var(--color-global-base-12); } .color--dark-mode-technology-02-interactive { color: var(--color-global-base-12); } .color--dark-mode-technology-02-interactive:hover { color: var(--color-global-base-13); } .color--dark-mode-technology-02-supporting-neutral { color: var(--color-global-base-12); } .color--dark-mode-technology-02-supporting-emphasis { color: var(--color-global-base-12); } .color--dark-mode-technology-02-surface { background-color: var(--color-global-base-14); } .color--dark-mode-technology-02-surface-interface-outer { background-color: var(--color-global-base-15); } .color--dark-mode-technology-02-surface-interface-inner { background-color: var(--color-global-base-16); } /* Technology 02 (Da-m) - Light Mode */ .color--light-mode-technology-02-primary { color: var(--color-global-base-02); } .color--light-mode-technology-02-secondary { color: var(--color-global-base-600); } .color--light-mode-technology-02-tertiary { color: var(--color-global-base-07); } .color--light-mode-technology-02-interactive { color: var(--color-global-base-400); } .color--light-mode-technology-02-interactive:hover { color: var(--color-global-base-400); } .color--light-mode-technology-02-supporting-neutral { color: var(--color-global-base-100); } .color--light-mode-technology-02-supporting-emphasis { color: var(--color-global-base-07); } .color--light-mode-technology-02-surface { background-color: var(--color-global-base-100); } .color--light-mode-technology-02-surface-interface-outer { background-color: var(--color-global-base-900); } .color--light-mode-technology-02-surface-interface-inner { background-color: var(--color-global-base-900); } /****************************************************************************** * TYPOGRAPHY SYSTEM ******************************************************************************/ /* Typography Font Families */ .font--primary-heading { font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; font-weight: 900; letter-spacing: -1.5px; } /* Print version: Europa Grotesk SH */ .font--primary-title { font-family: 'Helvetica Neue', Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; } .font--secondary-subtitle { font-family: 'Helvetica Neue', sans-serif; } .font--secondary-body { font-family: 'Helvetica Neue', sans-serif; } .font--tertiary-caption { font-family: 'Helvetica Neue', sans-serif; text-transform: uppercase; font-weight: 700; } .font--interactive-link { font-family: 'Helvetica Neue', sans-serif; text-transform: uppercase; text-decoration: underline; } .font--supporting-callout { font-family: 'Roboto Mono', monospace; text-transform: uppercase; font-weight: 500; } /* Print version: Approach Mono */ .font--supporting-press { font-family: 'Roboto Mono', monospace; font-weight: 500; } /* Print version: Approach Mono */ /* Typography Sizes */ .size--xxs { font-size: 0.6rem; } .size--xs { font-size: 0.8rem; } .size--s { font-size: 0.9rem; } .size--m { font-size: 1.1rem; } .size--l { font-size: 1.5rem; } .size--xl { font-size: 2rem; } .size--xxl { font-size: 3rem; } .size--xxxl { font-size: 4.5rem; } .size--xxxxl { font-size: 8rem; } /* Typography Weights */ .weight--thin { font-weight: 100; } .weight--extra-light { font-weight: 200; } .weight--light { font-weight: 300; } .weight--regular { font-weight: 400; } .weight--medium { font-weight: 500; } .weight--semi-bold { font-weight: 600; } .weight--bold { font-weight: 700; } .weight--extra-bold { font-weight: 800; } .weight--black { font-weight: 900; } /* Typography Line Heights */ .line-height--small { line-height: 1.2; } .line-height--medium { line-height: 2.2; }