Marketing Tokens

Below is a list of all of the token variables that exist within the /css/common/ibkr-foundation.scss stylesheet and their respective values.
Marketing Websites (Specific to Marketing Websites only! DO NOT USE ELSEWHERE.)

Copy
                                    
                                        /* NAV-TOP */

                                        --nav-top-bg-color: hsla(0, 0%, 0%, 1.0);

                                        --nav-top-link-color: hsla(0, 0%, 80%, 1.0);

                                        --nav-top-link-color-hover: hsla(0, 0%, 100%, 1.0);

                                        --nav-top-link-color-active: hsla(0, 0%, 100%, 1.0);

                                        --nav-top-link-bg-color: hsla(0, 0%, 100%, 0);

                                        --nav-top-link-bg-color-hover: hsla(0, 0%, 100%, 0);

                                        --nav-top-link-bg-color-active: hsla(0, 0%, 100%, 0);

                                        --nav-top-dropdown-bg-color: hsla(0, 0%, 100%, 1.0);

                                        --nav-top-dropdown-font-color-dark: hsla(0, 0%, 0%, 1.0);

                                        --nav-top-dropdown-font-color: hsla(0, 0%, 20%, 1.0);

                                        --nav-top-dropdown-font-color-light: hsla(0, 0%, 40%, 1.0);

                                        --nav-top-dropdown-link-color: hsla(0, 0%, 20%, 1.0);

                                        --nav-top-dropdown-link-color-hover: hsla(0, 0%, 5%, 1.0);

                                        --nav-top-dropdown-link-color-active: hsla(0, 0%, 5%, 1.0);

                                        --nav-top-dropdown-link-bg-color: hsla(0, 0%, 100%, 0);

                                        --nav-top-dropdown-link-bg-color-hover: hsla(0, 0%, 95%, 1.0);

                                        --nav-top-dropdown-link-bg-color-active: hsla(0, 0%, 95%, 1.0);

                                        /* NAV-BOTTOM */

                                        --nav-bottom-bg-color: hsla(0, 0%, 100%, 1.0);

                                        --nav-bottom-link-color: hsla(0, 0%, 20%, 1.0);

                                        --nav-bottom-link-color-hover: hsla(0, 0%, 5%, 1.0);

                                        --nav-bottom-link-color-active: hsla(0, 0%, 5%, 1.0);

                                        --nav-bottom-link-bg-color: hsla(0, 0%, 100%, 0);

                                        --nav-bottom-link-bg-color-hover: hsla(0, 0%, 100%, 0);

                                        --nav-bottom-link-bg-color-active: hsla(0, 0%, 100%, 0);

                                        --nav-bottom-dropdown-bg-color: hsla(0, 0%, 100%, 1.0);

                                        --nav-bottom-dropdown-font-color-dark: hsla(0, 0%, 0%, 1.0);

                                        --nav-bottom-dropdown-font-color: hsla(0, 0%, 20%, 1.0);

                                        --nav-bottom-dropdown-font-color-light: hsla(0, 0%, 40%, 1.0);

                                        --nav-bottom-dropdown-link-color: hsla(0, 0%, 20%, 1.0);

                                        --nav-bottom-dropdown-link-color-hover: hsla(0, 0%, 5%, 1.0);

                                        --nav-bottom-dropdown-link-color-active: hsla(0, 0%, 5%, 1.0);

                                        --nav-bottom-dropdown-link-bg-color: hsla(0, 0%, 100%, 0);

                                        --nav-bottom-dropdown-link-bg-color-hover: hsla(0, 0%, 95%, 1.0);

                                        --nav-bottom-dropdown-link-bg-color-active: hsla(0, 0%, 95%, 1.0);

                                        /* FOOTER */

                                        --footer-bg-color: hsla(0, 0%, 97%, 1.0);

                                        --footer-font-color-dark: hsla(0, 0%, 0%, 1.0);

                                        --footer-font-color: hsla(0, 0%, 20%, 1.0);

                                        --footer-font-color-light: hsla(0, 0%, 40%, 1.0);

                                        --footer-link-color: hsla(0, 0%, 20%, 1.0);

                                        --footer-link-color-hover: hsla(0, 0%, 5%, 1.0);

                                        --footer-link-color-active: hsla(0, 0%, 5%, 1.0);