/*
Global CSS custom properties.
*/
:root {
/* ========================================
PRIMITIVES: COLORS
========================================
Defines colors available in the design system.
======================================== */
/* @todo unique; hex diverges from design system */
--fdic-tan: #B7AC83;
--fdic-gold: #7F7141;
--fdic-teal: #00908C;
--fdic-blue-misc: #20509E;
--fdic-neutral-misc: #343330;
/* Brand Primary */
--fdic-color-brand-primary-050: #e6f4fa; /* @todo CLOSE CURRENT VAR: --fdic-blue-tint-20 | --surface-accent */
/* color.navy.050 */
--fdic-color-brand-primary-100: #c8ebf9; /* @todo CLOSE CURRENT VAR: --fdic-blue-tint-40 */
/* color.navy.100 */
--fdic-color-brand-primary-200: #84dbff;
/* color.navy.200 */
--fdic-color-brand-primary-300: #5cc3ff;
/* color.navy.300 */
--fdic-color-brand-primary-400: #38b6ff; /* @todo CURRENT VAR --fdic-light-blue */
/* color.navy.400 */
--fdic-color-brand-primary-500: #0d6191; /* @todo CURRENT VAR: --fdic-med-blue */
/* color.navy.500 */
--fdic-color-brand-primary-600: #0b557f; /* @todo CLOSE CURRENT VAR: --fdic-map-blue */
/* color.navy.600 */
--fdic-color-brand-primary-700: #09496d;
/* color.navy.700 */
--fdic-color-brand-primary-800: #073c5b;
/* color.navy.800 */
--fdic-color-brand-primary-900: #003256; /* @todo CURRENT VAR: --fdic-dark-blue | --fdic-text-secondary | --surface-secondary | --fdic-table-header-bg-color */
/* color.navy.800 */
--fdic-color-brand-primary-950: #032f49;
/* color.navy.950 */
/* Brand Secondary */
--fdic-color-brand-secondary-050: #f8efda; /* @todo CLOSE CURRENT VAR: --fdic-gold-tint-20 */
/* color.gold.050 */
--fdic-color-brand-secondary-300: #ebd49b; /* @todo CLOSE CURRENT VAR: --fdic-gold-tint-40 */
/* color.gold.300 */
--fdic-color-brand-secondary-400: #e1c16e; /* @todo CLOSE CURRENT VAR: --fdic-gold-brand */
/* color.gold.400 */
--fdic-color-brand-secondary-500: #d9af45;
/* color.gold.500 */
--fdic-color-brand-secondary-600: #88691c; /* @todo CLOSE CURRENT VAR: --fdic-brass */
/* color.gold.800 */
--fdic-color-brand-secondary-900: #60511b; /* @todo CLOSE CURRENT VAR: --fdic-gold | --fdic-text-accent */
/* color.gold.900 */
/* Brand Accent */
--fdic-color-brand-accent-050: #f9e2e1;
/* color.persimmon.050 */
--fdic-color-brand-accent-300: #f3c5c2;
/* color.persimmon.300 */
--fdic-color-brand-accent-500: #e16f67;
/* color.persimmon.500 */
--fdic-color-brand-accent-600: #bc463d; /* @todo CLOSE ISH CURRENT VAR: --fdic-rose */
/* color.persimmon.600 */
--fdic-color-brand-accent-800: #99261d;
/* color.persimmon.800 */
/* Navy, FDIC Blue */
--fdic-color-navy-050: #e6f4fa;
/* color.navy.050 */
--fdic-color-navy-100: #c8ebf9;
/* color.navy.100 */
--fdic-color-navy-200: #84dbff;
/* color.navy.200 */
--fdic-color-navy-300: #5cc3ff;
/* color.navy.300 */
--fdic-color-navy-400: #38b6ff;
/* color.navy.400 */
--fdic-color-navy-500: #0d6191;
/* color.navy.500 */
--fdic-color-navy-600: #0b557f;
/* color.navy.600 */
--fdic-color-navy-700: #09496d;
/* color.navy.700 */
--fdic-color-navy-800: #073c5b;
/* color.navy.800 */
--fdic-color-navy-900: #003256;
/* color.navy.900 */
--fdic-color-navy-950: #032f49;
/* color.navy.950 */
/* Gold, FDIC Gold */
--fdic-color-gold-050: #f8efda;
/* color.gold.050 */
--fdic-color-gold-300: #ebd49b;
/* color.gold.300 */
--fdic-color-gold-400: #e1c16e;
/* color.gold.400 */
--fdic-color-gold-500: #d9af45;
/* color.gold.500 */
--fdic-color-gold-600: #bd9327;
/* color.gold.600 */
--fdic-color-gold-800: #88691c;
/* color.gold.800 */
--fdic-color-gold-900: #60511b;
/* color.gold.900 */
/* Persimmon */
--fdic-color-persimmon-050: #f9e2e1;
/* color.persimmon.050 */
--fdic-color-persimmon-300: #f3c5c2;
/* color.persimmon.300 */
--fdic-color-persimmon-500: #e16f67;
/* color.persimmon.500 */
--fdic-color-persimmon-600: #bc463d;
/* color.persimmon.600 */
--fdic-color-persimmon-800: #99261d;
/* color.persimmon.800 */
/* Utility */
--fdic-color-black: #000000; /* @todo CURRENT VAR: --fdic-black */
--fdic-color-white: #ffffff; /* @todo CURRENT VAR: --fdic-white | --footer-secondary-menu-color | --fdic-table-header-text-color | --fdic-table-row-bg-color */
/* Neutral */
--fdic-color-neutral-000: #ffffff;
/* color.neutral.000 */
--fdic-color-neutral-050: #fafafc; /* @todo CLOSE CURRENT VAR: --fdic-table-row-even-bg-color | --fdic-body-background-color | --surface-primary */
/* color.neutral.050 */
--fdic-color-neutral-100: #f5f5f7;
/* color.neutral.100 */
--fdic-color-neutral-200: #e0e0e2;
/* color.neutral.200 */
--fdic-color-neutral-300: #d6d6d8; /* @todo CLOSE CURRENT VAR: --fdic-neutral-020 */
/* color.neutral.300 */
--fdic-color-neutral-400: #bdbdbf; /* @todo CLOSE CURRENT VAR: --fdic-table-border-color */
/* color.neutral.400 */
--fdic-color-neutral-500: #9e9ea0;
/* color.neutral.500 */
--fdic-color-neutral-600: #757577; /* @todo CLOSE CURRENT VAR: --fdic-disable */
/* color.neutral.600 */
--fdic-color-neutral-700: #595961;
/* color.neutral.700 */
--fdic-color-neutral-800: #424244; /* @todo CLOSE CURRENT VAR: --default-font-color | --fdic-text-primary */
/* color.neutral.800 */
--fdic-color-neutral-850: #333335;
/* color.neutral.850 */
--fdic-color-neutral-900: #212123; /* @todo CLOSE CURRENT VAR: --footer-secondary-bg-color | --fdic-body-text-color | --fdic-neutral-100 | --fdic-neutral-100-shadow */
/* color.neutral.900 */
--fdic-color-neutral-950: #1b1b1b;
--fdic-color-neutral-1000: #000000;
/* color.neutral.1000 */
--fdic-color-neutral-150: #e8e8ed;
/* color.neutral.150 */
/* Yellow */
--fdic-color-yellow-200: #fff4e5;
/* color.yellow.200 */
--fdic-color-yellow-500: #ffbf47;
/* color.yellow.500 */
--fdic-color-yellow-600: #f49f00;
/* color.yellow.600 */
--fdic-color-yellow-800: #663d00;
/* color.yellow.800 */
--fdic-color-yellow-900: #44340E;
/* color.yellow.900 */
/* Green */
--fdic-color-green-100: #e8f5e9;
/* color.green.100 */
--fdic-color-green-400: #61d673;
/* color.green.400 */
--fdic-color-green-500: #4caf50;
/* color.green.500 */
--fdic-color-green-800: #204520;
/* color.green.800 */
/* Blue */
--fdic-color-blue-100: #e3f2fd;
/* color.blue.100 */
--fdic-color-blue-200: #add8e6;
/* color.blue.200 */
--fdic-color-blue-300: #b5ced9;
/* color.blue.300 */
--fdic-color-blue-400: #4eaff9;
/* color.blue.400 */
--fdic-color-blue-500: #1278B0;
/* color.blue.500 */
--fdic-color-blue-600: #0776cb;
/* color.blue.600 */
--fdic-color-blue-700: #005a9c;
/* color.blue.700 */
--fdic-color-blue-800: #1e3a5f;
/* color.blue.800 */
--fdic-color-blue-900: #003256;
/* color.blue.900 */
/* Purple */
--fdic-color-purple-300: #b19cd9;
/* color.purple.300 */
--fdic-color-purple-500: #855AA5;
/* color.purple.500 */
--fdic-color-purple-900: #4b0082;
/* color.purple.900 */
/* Red */
--fdic-color-red-100: #fdedea;
/* color.red.100 */
--fdic-color-red-300: #ffcccc;
/* color.red.300 */
--fdic-color-red-400: #f66f8b;
/* color.red.400 */
--fdic-color-red-500: #D80E3A;
/* color.red.500 */
--fdic-color-red-600: #b10b2d;
/* color.red.600 */
--fdic-color-red-900: #a30a2a;
/* color.red.900 */
--fdic-color-red-800: #442121;
/* color.red.800 */
/* Composite alpha colors */
--fdic-color-navy-100-alpha-75: color-mix(in srgb, var(--fdic-color-navy-100) 75%, transparent);
--fdic-color-navy-400-alpha-20: color-mix(in srgb, var(--fdic-color-navy-400) 20%, transparent);
--fdic-color-navy-400-alpha-50: color-mix(in srgb, var(--fdic-color-navy-400) 50%, transparent);
--fdic-color-navy-800-alpha-60: color-mix(in srgb, var(--fdic-color-navy-800) 60%, transparent);
--fdic-color-navy-800-alpha-70: color-mix(in srgb, var(--fdic-color-navy-800) 70%, transparent);
--fdic-color-neutral-000-alpha-04: color-mix(in srgb, var(--fdic-color-neutral-000) 4%, transparent);
--fdic-color-neutral-000-alpha-16: color-mix(in srgb, var(--fdic-color-neutral-000) 16%, transparent);
--fdic-color-neutral-000-alpha-20: color-mix(in srgb, var(--fdic-color-neutral-000) 20%, transparent);
--fdic-color-neutral-000-alpha-32: color-mix(in srgb, var(--fdic-color-neutral-000) 32%, transparent);
--fdic-color-neutral-000-alpha-48: color-mix(in srgb, var(--fdic-color-neutral-000) 48%, transparent);
--fdic-color-neutral-000-alpha-64: color-mix(in srgb, var(--fdic-color-neutral-000) 64%, transparent);
--fdic-color-neutral-900-alpha-10: color-mix(in srgb, var(--fdic-color-neutral-900) 10%, transparent);
--fdic-color-neutral-900-alpha-60: color-mix(in srgb, var(--fdic-color-neutral-900) 60%, transparent);
--fdic-color-neutral-1000-alpha-04: color-mix(in srgb, var(--fdic-color-neutral-1000) 4%, transparent);
--fdic-color-neutral-000-alpha-08: color-mix(in srgb, var(--fdic-color-neutral-000) 8%, transparent);
/* color.neutral.1000.alpha.08 */
--fdic-color-neutral-1000-alpha-08: color-mix(in srgb, var(--fdic-color-neutral-1000) 8%, transparent);
--fdic-color-neutral-1000-alpha-16: color-mix(in srgb, var(--fdic-color-neutral-1000) 16%, transparent);
--fdic-color-neutral-1000-alpha-32: color-mix(in srgb, var(--fdic-color-neutral-1000) 32%, transparent);
--fdic-color-neutral-1000-alpha-48: color-mix(in srgb, var(--fdic-color-neutral-1000) 48%, transparent);
--fdic-color-neutral-1000-alpha-64: color-mix(in srgb, var(--fdic-color-neutral-1000) 64%, transparent);
--fdic-color-neutral-1000-alpha-80: color-mix(in srgb, var(--fdic-color-neutral-1000) 80%, transparent);
--fdic-color-neutral-150-alpha-75: color-mix(in srgb, var(--fdic-color-neutral-150) 75%, transparent);
--fdic-color-neutral-800-alpha-70: color-mix(in srgb, var(--fdic-color-neutral-800) 70%, transparent);
--fdic-color-gold-300-alpha-75: color-mix(in srgb, var(--fdic-color-gold-300) 75%, transparent);
--fdic-color-gold-900-alpha-70: color-mix(in srgb, var(--fdic-color-gold-900) 70%, transparent);
/* ========================================
COLORS
========================================
Defines semantic colors available in the design system.
Default, Dark modes.
Light: variables.global.css.
Dark: variables.colors.dark.css
======================================== */
/* Brand color sets */
--fdic-brand-core-lightest: var(--fdic-color-navy-100);
--fdic-brand-core-lighter: var(--fdic-color-navy-200);
--fdic-brand-core-light: var(--fdic-color-navy-400);
--fdic-brand-core-default: var(--fdic-color-navy-500);
--fdic-brand-core-dark: var(--fdic-color-navy-700);
--fdic-brand-core-darker: var(--fdic-color-navy-900);
--fdic-brand-core-overlay: var(--fdic-color-neutral-800-alpha-70);
--fdic-brand-core-overlay-70: var(--fdic-color-neutral-800-alpha-70);
--fdic-brand-core-overlay-60: var(--fdic-color-neutral-800-alpha-60);
--fdic-brand-highlight-lightest: var(--fdic-color-gold-050);
--fdic-brand-highlight-lighter: var(--fdic-color-gold-300);
--fdic-brand-highlight-light: var(--fdic-color-gold-400);
--fdic-brand-highlight-default: var(--fdic-color-gold-500);
--fdic-brand-highlight-dark: var(--fdic-color-gold-600);
--fdic-brand-highlight-darker: var(--fdic-color-gold-900);
--fdic-brand-accent-light: var(--fdic-color-persimmon-300);
--fdic-brand-accent-default: var(--fdic-color-persimmon-500);
--fdic-brand-accent-dark: var(--fdic-color-persimmon-800);
/* Background */
--fdic-background-none: var(--fdic-color-neutral-000-alpha-20);
--fdic-background-base: var(--fdic-color-neutral-050);
--fdic-background-card: var(--fdic-color-neutral-000);
--fdic-background-container: var(--fdic-color-neutral-000);
--fdic-background-overlay: var(--fdic-color-neutral-000);
--fdic-background-modal: var(--fdic-color-neutral-100);
--fdic-background-interactive: var(--fdic-color-neutral-100);
--fdic-background-input: var(--fdic-color-neutral-000);
--fdic-background-inverted: var(--fdic-color-neutral-950);
--fdic-background-brand: var(--fdic-color-navy-900);
--fdic-background-highlight: var(--fdic-brand-core-light);
/* Semantic Alerts and Messages */
--fdic-semantic-background-success: var(--fdic-color-green-100);
--fdic-semantic-background-error: var(--fdic-color-red-100);
--fdic-semantic-background-warning: var(--fdic-color-yellow-200);
--fdic-semantic-background-info: var(--fdic-color-blue-100);
--fdic-semantic-foreground-success: var(--fdic-color-green-500);
--fdic-semantic-foreground-error: var(--fdic-color-red-500);
--fdic-semantic-foreground-warning: var(--fdic-color-yellow-600);
--fdic-semantic-foreground-info: var(--fdic-color-blue-600);
/* Semantic colors */
--fdic-color-semantic-error-text: var(--fdic-color-red-500);
--fdic-color-link-normal: var(--fdic-color-blue-500);
--fdic-color-link-visited: var(--fdic-color-purple-500);
--fdic-color-link-active: var(--fdic-color-blue-500);
--fdic-color-link-hover: var(--fdic-color-blue-500);
--fdic-color-link-focus: var(--fdic-color-blue-500);
/* Background/Button */
--fdic-background-button-destructive: var(--fdic-color-semantic-error-text);
/* Background/State */
--fdic-background-state-read-only: var(--fdic-color-neutral-100);
--fdic-background-state-selected: var(--fdic-color-navy-100);
--fdic-background-state-active: var(--fdic-color-navy-500);
--fdic-background-state-hover: var(--fdic-overlay-emphasize-100);
--fdic-background-state-pressed: var(--fdic-overlay-emphasize-200);
/* Text */
--fdic-text-primary: var(--fdic-color-neutral-900);
--fdic-text-secondary: var(--fdic-color-neutral-700);
--fdic-text-placeholder: var(--fdic-color-neutral-500);
--fdic-text-disabled: var(--fdic-color-neutral-500);
--fdic-text-inverted: var(--fdic-color-neutral-000);
--fdic-text-wordmark: var(--fdic-brand-core-darker);
--fdic-text-link: var(--fdic-color-link-normal);
--fdic-text-link-visited: var(--fdic-color-link-visited);
--fdic-text-error: var(--fdic-color-semantic-error-text);
--fdic-text-warm: var(--fdic-color-yellow-900);
/* Icon */
--fdic-icon-primary: var(--fdic-color-neutral-900);
--fdic-icon-secondary: var(--fdic-color-neutral-600);
--fdic-icon-placeholder: var(--fdic-color-neutral-600);
--fdic-icon-disabled: var(--fdic-color-neutral-400);
--fdic-icon-inverted: var(--fdic-color-neutral-000);
--fdic-icon-active: var(--fdic-color-link-normal);
--fdic-icon-link: var(--fdic-color-link-normal);
--fdic-icon-link-visited: var(--fdic-color-link-visited);
--fdic-icon-warm: var(--fdic-color-gold-900);
/* Border */
--fdic-border-divider: var(--fdic-color-neutral-400);
--fdic-border-divider-accent: var(--fdic-color-blue-700);
--fdic-border-image: var(--fdic-color-white);
/* Not in Figma */
--fdic-border-width-base: 1px;
--fdic-border-color-base: var(--fdic-border-divider);
--fdic-border-style-base: solid;
/* Border/Input */
--fdic-border-input-rest: var(--fdic-color-neutral-400);
--fdic-border-input-hover: var(--fdic-color-neutral-500);
--fdic-border-input-focus: var(--fdic-color-navy-400);
--fdic-border-input-active: var(--fdic-color-neutral-800);
--fdic-border-input-read-only: var(--fdic-color-neutral-200);
--fdic-border-input-interactive: var(--fdic-color-neutral-150);
--fdic-border-input-disabled: var(--fdic-color-neutral-300);
/* Effect */
--fdic-effect-drop-shadow: var(--fdic-color-neutral-1000-alpha-08);
/* Overlay */
--fdic-overlay-emphasize-100: var(--fdic-color-neutral-1000-alpha-04);
--fdic-overlay-emphasize-200: var(--fdic-color-neutral-1000-alpha-08);
--fdic-overlay-subdue-600: var(---fdic-color-neutral-100-alpha-04);
--fdic-overlay-subdue-300: var(--fdic-color-neutral-1000-alpha-16);
/* Gradients */
--fdic-gradient-background: linear-gradient(180deg, #ffffff1f 0%, #ffffff29 100%);
/* For header buttons to distinguish them from the brand color background. */
--fdic-gradient-border-inverted: linear-gradient(180deg, #ffffff33 0%, #ffffff00 100%);
/* For header buttons to distinguish them from the brand color background. */
--fdic-gradient-brand: linear-gradient(135deg, #003256 0%, #0d6191 100%);
--fdic-gradient-neutral: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
--fdic-gradient-warm: linear-gradient(90deg, #ffffff 0%, #e9e5e2 100%);
--fdic-gradient-metallic: linear-gradient(90deg, #d9af45 0%, #ebd49b 33%, #d9af45 100%);
--fdic-gradient-metallic-45: linear-gradient(135deg, #d9af45 0%, #ebd49b 33%, #d9af45 100%);
--fdic-gradient-sidebar: linear-gradient(90deg, #ffffff 0%, #f5f5f7 100%);
--fdic-gradient-cool: linear-gradient(153deg, #38b6ff 0%, #ffffff 100%);
--fdic-gradient-brass: linear-gradient(135deg, #d9af45 0%, #ebd49b 33%, #d9af45 74%, #88691c 100%);
--fdic-gradient-brass-vertical: linear-gradient(180deg, #ecd7a2 0%, #f6edd5 47%, #ecd7a2 53%, #e5c880 100%);
--fdic-gradient-brass-horizontal: linear-gradient(90deg, #e1c16e 0%, #ebd49b 47%, #e1c16e 53%, #d9af45 100%);
/* Drop shadows and insets */
--fdic-elevate-sm: 0 1px 1px 0 #00000014, 0 2px 2px 0 #00000014, 0 4px 4px 0 #00000014, 0 6px 8px 0 #00000014, 0 8px 16px 0 #00000014;
--fdic-elevate-md: 0 1px 1px 0 #00000014, 0 2px 2px 0 #00000014, 0 4px 4px 0 #00000014, 0 8px 8px 0 #00000014, 0 16px 16px 0 #00000014, 0 32px 32px 0 #00000014;
--fdic-elevate-lg: 0 1px 2px 0 #00000014, 0 2px 4px 0 #00000014, 0 4px 8px 0 #00000014, 0 8px 16px 0 #00000014, 0 16px 32px 0 #00000014, 0 32px 64px 0 #00000014;
--fdic-inset-sm: inset 0 0 3px 0 #00000040;
--fdic-inset-right: inset -1px 0 8px 0 #00000014;
/* Sidebar navigation pane */
--fdic-state-default: inset 0 0 0 0 #00000000;
--fdic-state-hover: inset 0 0 0 999px #0000000a;
--fdic-state-pressed: inset 0 0 0 999px #00000014;
--fdic-state-selected: inset 0 0 0 999px #c8ebf9;
--fdic-state-focus-inner: inset 0 0 0 2.5px #38b6ff, inset 0 0 0 4px #ffffff;
--fdic-state-focus-outer: 0 0 0 2px #ffffff, 0 0 0 4px #38b6ff;
--fdic-state-focus-glow: 0 0 2.5px 2px #38b6ff;
--fdic-shadow-dropdown: 0 1px 2px 0 #0000001a, 0 2px 12px 0 #0000001a;
/* ========================================
PRIMITIVES: TYPOGRAPHY
========================================
Defines font families and type parameters.
======================================== */
/* Typography */
--fdic-font-size-base: 1rem; /* @todo --default-font-size */
/* This is the size set on the html tag, not body */
/* Font/Family */
--fdic-font-family-sans-serif: "Source Sans 3";
--fdic-font-family-serif: "Merriweather";
--fdic-font-family-mono: "Roboto Mono";
--fdic-font-stack-sans: var(--fdic-font-family-sans-serif), sans-serif;
--fdic-font-stack-serif: var(--fdic-font-family-serif), serif;
--fdic-font-stack-mono: var(--fdic-font-family-mono), monospace;
/* Font/Weight (not in Figma) */
--fdic-font-weight-sans-regular: 400;
--fdic-font-weight-sans-semibold: 600;
--fdic-font-weight-sans-bold: 700;
--fdic-font-weight-serif-regular: 400;
--fdic-font-weight-serif-medium: 500;
--fdic-font-weight-serif-semibold: 600;
--fdic-font-weight-serif-bold: 700;
--fdic-font-style-sans-normal: 'normal';
--fdic-font-style-sans-italic: 'italic';
/* ========================================
TYPOGRAPHY
========================================
Defines font families and typescale.
Desktop responsive overrides.
Mobile: variables.global.css.
Desktop: variables.typography.desktop.css
======================================== */
/* Font/Size */
/* @todo CURRENT VAR FORMAT: --xs-font-size */
--fdic-font-size-xs: 0.75rem;
/* 12px */
--fdic-font-size-sm: 0.875rem;
/* 14px */
--fdic-font-size-md: 1rem;
/* 16px */
--fdic-font-size-lg: 1.25rem;
/* 20px */
--fdic-font-size-h1: 2.073rem;
/* 33.17px */
--fdic-font-size-h2: 1.728rem;
/* 27.65px */
--fdic-font-size-h3: 1.44rem;
/* 23.04px */
--fdic-font-size-h4: 1.2rem;
/* 19.2px */
--fdic-font-size-h5: 1rem;
/* 16px */
--fdic-font-size-h6: 0.75rem;
/* 12px */
--fdic-font-size-display1: 3rem;
/* 48px */
--fdic-font-size-display2: 2.25rem;
/* 36px */
/* Font/Padding */
--fdic-font-padding-h1-top: 0;
/* 60.75px */
--fdic-font-padding-h1-bottom: 0.691rem;
/* 11.05px */
--fdic-font-padding-h2-top: 0;
/* 48px */
--fdic-font-padding-h2-bottom: 0.576em;
/* 9.22px */
--fdic-font-padding-h3-top: 0;
/* 33.75px */
--fdic-font-padding-h3-bottom: 0.48rem;
/* 7.68px */
--fdic-font-padding-h4-top: 0;
/* 27px */
--fdic-font-padding-h4-bottom: 0.4rem;
/* 6.4px */
--fdic-font-padding-h5-top: 0;
/* 23.63px */
--fdic-font-padding-h5-bottom: 0.333rem;
/* 5.33px */
--fdic-font-padding-h6-top: 0;
/* 20.25px */
--fdic-font-padding-h6-bottom: 0.422rem;
/* 6.75px */
/* Spacing */
--fdic-spacing-paragraph: var(--fdic-font-size-md);
/* Text Styles */
/* example use: .article h2 { font: var(--fdic-article-title) }; */
--fdic-body-normal: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.375 var(--fdic-font-stack-sans);
/* Use for main content and paragraphs. */
--fdic-body-important: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-md)/1.375 var(--fdic-font-stack-sans);
/* Grabs attention with urgency, use sparingly. */
--fdic-body-emphasized: italic var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.375 var(--fdic-font-stack-sans);
/* Highlights specific information. Also useful for citations requiring italicization. */
--fdic-body-small: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/1.375 var(--fdic-font-stack-sans);
/* For secondary info. Supports main content unobtrusively. */
--fdic-body-smaller: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-xs)/1.375 var(--fdic-font-stack-sans);
--fdic-body-big: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/1.375 var(--fdic-font-stack-sans);
/* Highlights introductory or key points. Larger size for attention without compromising readability. */
--fdic-body-bigger: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/1.375 var(--fdic-font-stack-sans);
--fdic-article-title: var(--fdic-font-weight-sans-bold) var(--fdic-font-size-h2)/1.2 var(--fdic-font-stack-sans);
/* Primary headline of the article. */
--fdic-article-subtitle: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-lg)/normal var(--fdic-font-stack-sans);
/* Secondary heading that elaborates on the title. Provides additional context. */
--fdic-article-description: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/normal var(--fdic-font-stack-sans);
/* Brief overview or introduction to the article's content. */
--fdic-article-body: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.5 var(--fdic-font-stack-sans);
/* Main text for detailed content. Use for the bulk of the article's narrative and information. */
--fdic-article-citation: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
/* For referencing sources in endnotes or footnotes. */
--fdic-article-reference-mark: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* Marker within the body text that links to an endnote or footnote. Signals additional info or sources. */
--fdic-article-block-quote: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/1.45 var(--fdic-font-stack-sans);
/* Highlights significant quotes or excerpts. Use for emphasizing important viewpoints or statements. */
--fdic-article-callout: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* Used for side notes, warnings, or to draw attention to specific content. Contrasts with main body for emphasis. */
--fdic-article-figure-title: var(--fdic-font-weight-sans-bold) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* Titles for images, graphs, or tables within the article. Clarifies what the figure represents. */
--fdic-article-caption: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
/* Descriptive text for figures, providing context or data specifics. Placed directly under the figure. */
--fdic-article-sidebar: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* For supplementary information related to but distinct from the article's main content. */
--fdic-heading-h1: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h1)/1.15 var(--fdic-font-stack-sans);
/* Use as the main page title. It's the highest level heading summarizing the page's content. Each page should have only one H1. */
--fdic-heading-h2: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h2)/1.2 var(--fdic-font-stack-sans);
/* Apply for section titles. Breaks content into major sections, directly under H1 in the hierarchy. Use to structure the page logically for readability and navigation. */
--fdic-heading-h3: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h3)/1.25 var(--fdic-font-stack-sans);
/* Use for sub-sections within each H2 section. Offers a further level of detail, organizing content into manageable chunks. Helps users and search engines understand text structure. */
--fdic-heading-h4: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h4)/1.25 var(--fdic-font-stack-sans);
/* Apply for additional sub-sections under H3. Ideal for topics that need further division, provides granularity to the article structure, enhancing the reader's navigation through the content. */
--fdic-heading-h5: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h5)/1.25 var(--fdic-font-stack-sans);
/* Tertiary heading for small sub-sections or dense content areas. */
--fdic-heading-h6: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h6)/1.25 var(--fdic-font-stack-sans);
/* Smallest heading style for subtle titles or detailed categorization. */
--fdic-impact-display-1: var(--fdic-font-weight-sans-bold) var(--fdic-font-size-display1)/1.25 var(--fdic-font-stack-sans);
/* Hero text for standout headlines in key areas like hero sections or banners. */
--fdic-impact-display-2: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-display2)/1.25 var(--fdic-font-stack-sans);
/* Large secondary text for impactful subheadings or promotional headers. */
--fdic-impact-display-3: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-display3)/normal var(--fdic-font-stack-serif);
--fdic-impact-display-4: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-display4)/normal var(--fdic-font-stack-serif);
--fdic-table-heading: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
--fdic-table-content: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
--fdic-form-label: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
--fdic-form-content: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
--fdic-form-helper: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
--fdic-link-normal: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.33 var(--fdic-font-stack-sans);
--fdic-link-important: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-md)/1.33 var(--fdic-font-stack-sans);
--fdic-link-small: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/22 var(--fdic-font-stack-sans);
--fdic-link-big: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-lg)/1.25 var(--fdic-font-stack-sans);
--fdic-special-event-month: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-xs)/18 var(--fdic-font-stack-sans);
/* For the display of the month component in an events month and day visual. */
--fdic-special-event-day: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-lg)/32 var(--fdic-font-stack-sans);
/* For the day component of an event's month and day visual. */
/* ========================================
PRIMITIVES: METRICS
========================================
Defines sizes for spacing, corner radius, max widths, etc.
======================================== */
/* Base Scale Tokens */
--fdic-spacing-scale-0: 0;
/* spacing-scale.0 */
--fdic-spacing-scale-px: 1px;
/* spacing-scale.px */
--fdic-spacing-scale-1: 0.125rem;
/* spacing-scale.1 */
--fdic-spacing-scale-1-pixel-size: 2px;
--fdic-spacing-scale-2: 0.25rem;
/* spacing-scale.2 */
--fdic-spacing-scale-2-pixel-size: 4px;
--fdic-spacing-scale-2-5: 0.375rem;
/* spacing-scale.2-5 */
--fdic-spacing-scale-2-5-pixel-size: 6px;
--fdic-spacing-scale-3: 0.5rem;
/* spacing-scale.3 */
--fdic-spacing-scale-3-pixel-size: 8px;
--fdic-spacing-scale-4: 0.75rem;
/* spacing-scale.4 */
--fdic-spacing-scale-4-pixel-size: 12px;
--fdic-spacing-scale-5: 1rem;
/* spacing-scale.5 */
--fdic-spacing-scale-5-pixel-size: 16px;
--fdic-spacing-scale-6: 1.25rem;
/* spacing-scale.6 */
--fdic-spacing-scale-6-pixel-size: 20px;
--fdic-spacing-scale-7: 1.5rem;
/* spacing-scale.7 */
--fdic-spacing-scale-7-pixel-size: 24px;
--fdic-spacing-scale-8: 2rem;
/* spacing-scale.8 */
--fdic-spacing-scale-8-pixel-size: 32px;
--fdic-spacing-scale-9: 3rem;
/* spacing-scale.9 */
--fdic-spacing-scale-9-pixel-size: 48px;
--fdic-spacing-scale-10: 4rem;
/* spacing-scale.10 */
--fdic-spacing-scale-10-pixel-size: 64px;
--fdic-spacing-scale-11: 5rem;
/* spacing-scale.11 */
--fdic-spacing-scale-11-pixel-size: 80px;
--fdic-spacing-scale-12: 8rem;
/* spacing-scale.12 */
--fdic-spacing-scale-12-pixel-size: 128px;
--fdic-spacing-scale-13: 10rem;
/* spacing-scale.13 */
--fdic-spacing-scale-13-pixel-size: 160px;
--fdic-spacing-scale-14: 16rem;
/* spacing-scale.14 */
--fdic-spacing-scale-14-pixel-size: 256px;
/* Corner Radius */
--fdic-border-radius-none: 0;
/* border-radius.none */
--fdic-border-radius-2xs: 1px;
/* border-radius.2xs */
--fdic-border-radius-xs: 2px;
/* border-radius.xs */
--fdic-border-radius-sm: 3px;
/* border-radius.sm */
--fdic-border-radius-md: 5px;
/* border-radius.md */
--fdic-border-radius-lg: 7px;
/* border-radius.lg */
--fdic-border-radius-xl: 9px;
/* border-radius.xl */
--fdic-border-radius-full: 9999px;
/* border-radius.full */
/* ========================================
METRICS
========================================
Defines sizes for spacing, corner radius, max widths, etc.
Desktop, Tablet, Mobile responsive versions.
Mobile: variables.global.css
Tablet: variables.metrics.tablet.css
Desktop: variables.metrics.desktop.css
======================================== */
/* Base Scale */
--fdic-spacing-none: var(--fdic-spacing-scale-0);
--fdic-spacing-px: var(--fdic-spacing-scale-px);
--fdic-spacing-3xs: var(--fdic-spacing-scale-1);
--fdic-spacing-2xs: var(--fdic-spacing-scale-2);
--fdic-spacing-xs: var(--fdic-spacing-scale-2-5);
--fdic-spacing-sm: var(--fdic-spacing-scale-3);
--fdic-spacing-md: var(--fdic-spacing-scale-4);
--fdic-spacing-lg: var(--fdic-spacing-scale-5);
--fdic-spacing-xl: var(--fdic-spacing-scale-6);
--fdic-spacing-2xl: var(--fdic-spacing-scale-7);
--fdic-spacing-3xl: var(--fdic-spacing-scale-8);
--fdic-spacing-4xl: var(--fdic-spacing-scale-9);
--fdic-spacing-5xl: var(--fdic-spacing-scale-10);
--fdic-spacing-6xl: var(--fdic-spacing-scale-11);
--fdic-spacing-7xl: var(--fdic-spacing-scale-12);
--fdic-spacing-8xl: var(--fdic-spacing-scale-13);
/* Corner Radius */
--fdic-corner-radius-none: var(--fdic-border-radius-md);
--fdic-corner-radius-2xs: var(--fdic-border-radius-2xs);
--fdic-corner-radius-sm: var(--fdic-border-radius-sm);
--fdic-corner-radius-md: var(--fdic-border-radius-md);
--fdic-corner-radius-lg: var(--fdic-border-radius-lg);
--fdic-corner-radius-xl: var(--fdic-border-radius-xl);
--fdic-corner-radius-full: var(--fdic-border-radius-full);
/* Width */
--fdic-width-content-max: 100%;
/* width.content-max */
/* @TODO audit below */
--fdic-width-paragraph-max: 358px;
/* width.paragraph-max */
--fdic-width-column-s-min: 344px;
/* width.column-s-min */
--fdic-width-column-s-max: 480px;
/* width.column-s-max */
--fdic-width-column-m-min: 352px;
/* width.column-m-min */
--fdic-width-column-xs-min: 160px;
/* width.column-xs-min */
--fdic-width-col-2-min: 320px;
/* width.col-2-min */
--fdic-width-col-2-max: 100%;
/* width.col-2-max */
--fdic-width-col-2-gap: 16px;
/* width.col-2-gap */
--fdic-width-col-3-min: 200px;
/* width.col-3-min */
--fdic-width-col-3-max: 100%;
/* width.col-3-max */
--fdic-width-col-3-gap: 16px;
/* width.col-3-gap */
--fdic-width-col-4-min: 160px;
/* width.col-4-min */
--fdic-width-col-4-max: 180px;
/* width.col-4-max */
--fdic-width-col-4-gap: 16px;
/* width.col-4-gap */
/* Padding */
--fdic-padding-section-horizontal: 16px;
--fdic-padding-section-vertical: 16px;
--fdic-padding-section-bottom: 24px;
--fdic-padding-visual-vertical: 0;
/* Height */
--fdic-height-page-min: 1024px;
/* Visual */
--fdic-visual-xs: 24px;
--fdic-visual-sm: 32px;
--fdic-visual-md: 40px;
--fdic-visual-lg: 48px;
--fdic-visual-xl: 60px;
--fdic-visual-2xl: 72px;
/* Visual/Glyph */
--fdic-visual-glyph-xs: var(--fdic-font-size-xs);
--fdic-visual-glyph-sm: var(--fdic-font-size-sm);
--fdic-visual-glyph-md: var(--fdic-font-size-md);
--fdic-visual-glyph-ml: var(--fdic-font-size-ml);
--fdic-visual-glyph-lg: var(--fdic-font-size-lg);
--fdic-visual-glyph-h3: var(--fdic-font-size-h3);
--fdic-visual-glyph-xl: 28px;
--fdic-visual-glyph-2xl: 36px;
--fdic-visual-glyph-3xl: 44px;
--fdic-visual-glyph-4xl: 56px;
/* ========================================
TONAL COLOR SYSTEM
========================================
Defines color families by tone (cool, warm, neutral)
======================================== */
/* Basic colors */
/* Example usage: FDIC seal svg fill color */
--fdic-basic-color-cool: var(--fdic-brand-core-default, #0d6191);
--fdic-basic-color-warm: var(--fdic-brand-highlight-default, #bd9327);
--fdic-basic-color-neutral: var(--fdic-color-neutral-600, #757577);
/* Tonal colors */
/* Example usage: background color on band section - solid */
--fdic-tone-cool: var(--fdic-color-navy-100-alpha-75);
--fdic-tone-neutral: var(--fdic-color-neutral-150-alpha-75);
--fdic-tone-warm: var(--fdic-color-gold-300-alpha-75);
/* Highlight colors */
/* Example usage: hr colors, icon background color, etc. */
--fdic-main-accent-cool: var(--fdic-brand-core-light);
--fdic-main-accent-warm: var(--fdic-brand-highlight-default);
--fdic-main-accent-neutral: var(--fdic-color-neutral-400);
/* Contrast colors */
--fdic-contrast-accent-cool: var(--fdic-brand-core-default);
--fdic-contrast-accent-warm: var(--fdic-brand-highlight-default);
--fdic-contrast-accent-neutral: var(--fdic-color-neutral-500);
/* Basic background gradients */
/* Example usage: background gradient on band section - gradient */
--fdic-bg-gradient-cool: linear-gradient(140deg, var(--fdic-brand-core-lightest, rgba(180, 228, 248, 0.20)) 22.62%, var(--fdic-background-base, rgba(255, 255, 255, 0.20)) 100%);
--fdic-bg-gradient-warm: linear-gradient(90deg, #fff 0%, #e9e5e2 100%);
--fdic-bg-gradient-neutral: linear-gradient(89deg, var(--fdic-background-container, #f5f5f7) 2.06%, var(--fdic-background-base, #fff) 97.94%);
--fdic-gradient-brand-transparent: linear-gradient(100deg, rgb(0 50 86) 3.24%, rgba(7, 60, 91, 0.60) 94.32%);
/* Glass effect overlay */
/* Example usage: hero band text box gets glass effect background color */
--fdic-overlay-glass-cool: var(--fdic-color-navy-800-alpha-70);
--fdic-overlay-glass-warm: var(--fdic-color-gold-900-alpha-70);
--fdic-overlay-glass-neutral: var(--fdic-color-neutral-800-alpha-70);
/* Gradient overlay on background image */
/* Example usage: hero band background image gets gradient overlay */
--fdic-bg-image-overlay-gradient-cool: linear-gradient(180deg, rgba(13, 97, 145, 0.10) 0%, rgba(7, 60, 91, 0.70) 100%);
--fdic-bg-image-overlay-gradient-warm: linear-gradient(180deg, rgba(136, 105, 28, 0.10) 0%, rgba(136, 105, 28, 0.70) 100%);
--fdic-bg-image-overlay-gradient-neutral: linear-gradient(180deg, rgba(66, 66, 68, 0.10) 0%, rgba(66, 66, 68, 0.70) 100%);
/* Default variable settings */
--fdic-basic-color: var(--fdic-basic-color-cool);
--fdic-main-accent: var(--fdic-main-accent-cool);
--fdic-contrast-accent: var(--fdic-contrast-accent-cool);
--fdic-tone: var(--fdic-tone-cool);
--fdic-bg-gradient: var(--fdic-bg-gradient-cool);
--fdic-overlay-glass: var(--fdic-overlay-glass-cool);
--fdic-bg-image-overlay-gradient: var(--fdic-bg-image-overlay-gradient-cool);
/* ========================================
AUDIT
========================================
Fix and put in above sections.
======================================== */
/* Not using the --fdic-space-sm variables for these because we want em units */
--fdic-sp-none: 0;
--fdic-sp: 1em;
--fdic-sp0-25: 0.25em;
--fdic-sp0-5: 0.5em;
--fdic-sp1-5: 1.5em;
--fdic-sp2: 2em;
/* Letter spacing */
/* We are overwriting these as the values within the tokens get turned in
* rem. They should be a percentage, but letter spacing does not accept
* percentages. The best option is to use em so we're gauging the spacing off
* of the size of the targeted element. The out of the box transformers do not
* take any of this into account. We could create a custom transform, but
* time is better spent elsewhere at this point in the project. @todo
*/
--fdic-letter-spacing-0: 0;
--fdic-letter-spacing-1: -.01em;
--fdic-letter-spacing-2: -0.005em;
--fdic-letter-spacing-3: .2em;
--fdic-letter-spacing-4: -.2em;
--fdic-letter-spacing-5: -.015em;
--fdic-letter-spacing-6: .3em;
/* Layout Spacing */
--fdic-section-gaps: var(--fdic-spacing-lg) var(--fdic-spacing-3xl);
/* Site spacing */
/* It seems like we're having some issues with the sites max-width vars, so
* I am going to hardcode these now. We're also going to use calc() to add padding
* around smaller screens. Sometimes, given the current values, we're seeing elements
* push against the edge, because max-width on mobile is set so small. Note: Some
* of these values are being estimated as the figma only shows full and smallest
* screens.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
*/
--fdic-width-content-max: 100%;
--fdic-sidebar-width: 320px;
--fdic-prose-max-width: clamp(min(93.75vw, 50ch), 70vw, 75ch);
--fdic-prose-max-width-heading: clamp(min(93.75vw, 48ch), 75ch, 42rem);
--fdic-width-col-2-min: 400px;
--fdic-width-col-3-min: 200px;
--fdic-width-col-3-max: 9999px;
/* Still checking if these are used */
/* End: Still checking if these are used */
}
@media (min-width: 768px) {
:root {
--fdic-width-content-max: 720px;
--fdic-width-col-3-min: 360px;
--fdic-width-col-3-max: 440px;
}
}
@media (min-width: 992px) {
:root {
--fdic-width-content-max: 980px;
}
}
@media (min-width: 1200px) {
:root {
--fdic-width-content-max: 1140px;
}
}
@media (min-width: 1400px) {
:root {
--fdic-width-content-max: 1320px;
--fdic-width-column-s-min: 24rem;
}
}
:root {
--fdic-line-heights-0: 1.375;
--fdic-line-heights-1: 1.2;
--fdic-line-heights-2: normal;
--fdic-line-heights-3: 1.5;
--fdic-line-heights-4: 1.45;
--fdic-line-heights-5: 1.15;
--fdic-line-heights-6: 1.25;
--fdic-line-heights-7: 1.33;
--fdic-line-heights-8: 22;
--fdic-line-heights-9: 72;
--fdic-line-heights-10: 48;
--fdic-line-heights-11: 32;
--fdic-line-heights-12: 18;
--fdic-font-weights-source-sans-3-0: 400;
--fdic-font-weights-source-sans-3-1: 600;
--fdic-font-weights-source-sans-3-2-weight: 400;
--fdic-font-weights-source-sans-3-2-style: italic;
--fdic-font-weights-lora-3: 700;
--fdic-font-weights-lora-4: 600;
--fdic-font-weights-lora-5: 400;
--fdic-font-weights-source-sans-3-6: 700;
--fdic-font-weights-merriweather-7: 400;
--fdic-font-weights-source-sans-3-8: 500;
--fdic-paragraph-spacing-0: 0;
--fdic-paragraph-spacing-1: 0.875rem;
--fdic-paragraph-spacing-2: 1rem;
--fdic-paragraph-spacing-3: 1.125rem;
--fdic-paragraph-spacing-4: 1.25rem;
--fdic-paragraph-spacing-5: 1.375rem;
--fdic-paragraph-spacing-6: 1.5rem;
--fdic-paragraph-spacing-7: 1.5625rem;
--fdic-paragraph-spacing-8: 1.75rem;
--fdic-paragraph-spacing-9: 2rem;
--fdic-paragraph-spacing-10: 2.25rem;
--fdic-paragraph-spacing-11: 2.4375rem;
--fdic-paragraph-spacing-12: 2.5rem;
--fdic-paragraph-spacing-13: 3rem;
--fdic-paragraph-spacing-14: 3.875rem;
--fdic-text-case-none: none;
--fdic-text-case-uppercase: uppercase;
--fdic-text-decoration-none: none;
--fdic-text-decoration-underline: underline;
}
/* ========================================
METRICS
========================================
Defines sizes for spacing, corner radius, max widths, etc.
Desktop, Tablet, Mobile responsive versions.
Mobile: variables.global.css
Tablet: variables.metrics.tablet.css
Desktop: variables.metrics.desktop.css
======================================== */
@media (min-width: 896px) {
:root {
/* Base Scale */
--fdic-spacing-none: var(--fdic-spacing-scale-0);
--fdic-spacing-px: var(--fdic-spacing-scale-px);
--fdic-spacing-3xs: var(--fdic-spacing-scale-1);
--fdic-spacing-2xs: var(--fdic-spacing-scale-2);
--fdic-spacing-xs: var(--fdic-spacing-scale-3);
--fdic-spacing-sm: var(--fdic-spacing-scale-4);
--fdic-spacing-md: var(--fdic-spacing-scale-5);
--fdic-spacing-lg: var(--fdic-spacing-scale-6);
--fdic-spacing-xl: var(--fdic-spacing-scale-7);
--fdic-spacing-2xl: var(--fdic-spacing-scale-8);
--fdic-spacing-3xl: var(--fdic-spacing-scale-9);
--fdic-spacing-4xl: var(--fdic-spacing-scale-10);
--fdic-spacing-5xl: var(--fdic-spacing-scale-11);
--fdic-spacing-6xl: var(--fdic-spacing-scale-12);
--fdic-spacing-7xl: var(--fdic-spacing-scale-13);
--fdic-spacing-8xl: var(--fdic-spacing-scale-14);
/* Corner Radius */
--fdic-corner-radius-none: var(--fdic-border-radius-md);
--fdic-corner-radius-2xs: var(--fdic-border-radius-2xs);
--fdic-corner-radius-sm: var(--fdic-border-radius-sm);
--fdic-corner-radius-md: var(--fdic-border-radius-md);
--fdic-corner-radius-lg: var(--fdic-border-radius-lg);
--fdic-corner-radius-xl: var(--fdic-border-radius-xl);
--fdic-corner-radius-full: var(--fdic-border-radius-full);
/* Width */
--fdic-width-content-max: 1440px;
/* width.content-max */
--fdic-width-paragraph-max: 512px;
/* width.paragraph-max */
--fdic-width-column-s-min: 344px;
/* width.column-s-min */
--fdic-width-column-s-max: 480px;
/* width.column-s-max */
--fdic-width-column-m-min: 480px;
/* width.column-m-min */
--fdic-width-column-xs-min: 240px;
/* width.column-xs-min */
--fdic-width-col-2-min: 384px;
/* width.col-2-min */
--fdic-width-col-2-max: 688px;
/* width.col-2-max */
--fdic-width-col-2-gap: 32px;
/* width.col-2-gap */
--fdic-width-col-3-min: 256px;
/* width.col-3-min */
--fdic-width-col-3-max: 320px;
/* width.col-3-max */
--fdic-width-col-3-gap: 32px;
/* width.col-3-gap */
--fdic-width-col-4-min: 256px;
/* width.col-4-min */
--fdic-width-col-4-max: 320px;
/* width.col-4-max */
--fdic-width-col-4-gap: 32px;
/* width.col-4-gap */
/* Padding */
--fdic-padding-section-horizontal: 32px;
--fdic-padding-section-vertical: 24px;
--fdic-padding-section-bottom: 32px;
--fdic-padding-visual-vertical: 3px;
/* Height */
--fdic-height-page-min: 1024px;
/* Visual */
--fdic-visual-xs: 24px;
--fdic-visual-sm: 32px;
--fdic-visual-md: 40px;
--fdic-visual-lg: 48px;
--fdic-visual-xl: 60px;
--fdic-visual-2xl: 72px;
/* Visual/Glyph */
--fdic-visual-glyph-xs: var(--fdic-font-size-xs);
--fdic-visual-glyph-sm: var(--fdic-font-size-sm);
--fdic-visual-glyph-md: var(--fdic-font-size-md);
--fdic-visual-glyph-ml: var(--fdic-font-size-ml);
--fdic-visual-glyph-lg: var(--fdic-font-size-lg);
--fdic-visual-glyph-h3: var(--fdic-font-size-h3);
--fdic-visual-glyph-xl: 24px;
--fdic-visual-glyph-2xl: 32px;
--fdic-visual-glyph-3xl: 40px;
--fdic-visual-glyph-4xl: 48px
}
}
/* ========================================
METRICS
========================================
Defines sizes for spacing, corner radius, max widths, etc.
Desktop, Tablet, Mobile responsive versions.
Mobile: variables.global.css
Tablet: variables.metrics.tablet.css
Desktop: variables.metrics.desktop.css
======================================== */
@media (min-width: 992px) {
:root {
/* Base Scale */
--fdic-spacing-none: var(--fdic-spacing-scale-0);
--fdic-spacing-px: var(--fdic-spacing-scale-px);
--fdic-spacing-3xs: var(--fdic-spacing-scale-1);
--fdic-spacing-2xs: var(--fdic-spacing-scale-2);
--fdic-spacing-xs: var(--fdic-spacing-scale-3);
--fdic-spacing-sm: var(--fdic-spacing-scale-4);
--fdic-spacing-md: var(--fdic-spacing-scale-5);
--fdic-spacing-lg: var(--fdic-spacing-scale-6);
--fdic-spacing-xl: var(--fdic-spacing-scale-7);
--fdic-spacing-2xl: var(--fdic-spacing-scale-8);
--fdic-spacing-3xl: var(--fdic-spacing-scale-9);
--fdic-spacing-4xl: var(--fdic-spacing-scale-10);
--fdic-spacing-5xl: var(--fdic-spacing-scale-11);
--fdic-spacing-6xl: var(--fdic-spacing-scale-12);
--fdic-spacing-7xl: var(--fdic-spacing-scale-13);
--fdic-spacing-8xl: var(--fdic-spacing-scale-14);
/* Corner Radius */
--fdic-corner-radius-none: var(--fdic-border-radius-md);
--fdic-corner-radius-2xs: var(--fdic-border-radius-2xs);
--fdic-corner-radius-sm: var(--fdic-border-radius-sm);
--fdic-corner-radius-md: var(--fdic-border-radius-md);
--fdic-corner-radius-lg: var(--fdic-border-radius-lg);
--fdic-corner-radius-xl: var(--fdic-border-radius-xl);
--fdic-corner-radius-full: var(--fdic-border-radius-full);
/* Width */
--fdic-width-content-max: 1440px;
/* width.content-max */
--fdic-width-paragraph-max: 720px;
/* width.paragraph-max */
--fdic-width-column-s-min: 344px;
/* width.column-s-min */
--fdic-width-column-s-max: 480px;
/* width.column-s-max */
--fdic-width-column-m-min: 480px;
/* width.column-m-min */
--fdic-width-column-xs-min: 240px;
/* width.column-xs-min */
--fdic-width-col-2-min: 384px;
/* width.col-2-min */
--fdic-width-col-2-max: 688px;
/* width.col-2-max */
--fdic-width-col-2-gap: 48px;
/* width.col-2-gap */
--fdic-width-col-3-min: 360px;
/* width.col-3-min */
--fdic-width-col-3-max: 440px;
/* width.col-3-max */
--fdic-width-col-3-gap: 48px;
/* width.col-3-gap */
--fdic-width-col-4-min: 256px;
/* width.col-4-min */
--fdic-width-col-4-max: 320px;
/* width.col-4-max */
--fdic-width-col-4-gap: 48px;
/* width.col-4-gap */
/* Padding */
--fdic-padding-section-horizontal: 64px;
--fdic-padding-section-vertical: 32px;
--fdic-padding-section-bottom: 48px;
--fdic-padding-visual-vertical: 3px;
/* Height */
--fdic-height-page-min: 1024px;
/* Visual */
--fdic-visual-xs: 24px;
--fdic-visual-sm: 32px;
--fdic-visual-md: 40px;
--fdic-visual-lg: 48px;
--fdic-visual-xl: 60px;
--fdic-visual-2xl: 72px;
/* Visual/Glyph */
--fdic-visual-glyph-xs: var(--fdic-font-size-xs);
--fdic-visual-glyph-sm: var(--fdic-font-size-sm);
--fdic-visual-glyph-md: var(--fdic-font-size-md);
--fdic-visual-glyph-ml: var(--fdic-font-size-ml);
--fdic-visual-glyph-lg: var(--fdic-font-size-lg);
--fdic-visual-glyph-h3: var(--fdic-font-size-h3);
--fdic-visual-glyph-xl: 28px;
--fdic-visual-glyph-2xl: 36px;
--fdic-visual-glyph-3xl: 44px;
--fdic-visual-glyph-4xl: 56px
}
}
/* ========================================
TYPOGRAPHY
========================================
Defines font families and typescale.
Desktop, Mobile responsive overrides.
Mobile: variables.global.css.
Desktop: variables.typography.desktop.css
======================================== */
@media (min-width: 992px) {
:root {
/* Font/Size */
--fdic-font-size-xs: 0.8125rem;
/* 13px */
--fdic-font-size-sm: 1rem;
/* 16px */
--fdic-font-size-md: 1.125rem;
/* 18px */
--fdic-font-size-lg: 1.375rem;
/* 22px */
--fdic-font-size-h1: 2.073rem;
/* 33.17px */
--fdic-font-size-h2: 1.728rem;
/* 27.65px */
--fdic-font-size-h3: 1.44rem;
/* 23.04px */
--fdic-font-size-h4: 1.2rem;
/* 19.2px */
--fdic-font-size-h5: 1rem;
/* 16px */
--fdic-font-size-h6: 0.844rem;
/* 13.5px */
--fdic-font-size-display1: 3.75rem;
/* 60px */
--fdic-font-size-display2: 3rem;
/* 48px */
--fdic-font-size-display3: 1.9375rem;
/* 31px */
--fdic-font-size-display4: 1.3125rem;
/* 21px */
/* Font/Padding */
--fdic-font-padding-h1-top: 0;
/* 60.75px */
--fdic-font-padding-h1-bottom: 0.691rem;
/* 11.05px */
--fdic-font-padding-h2-top: 0;
/* 48px */
--fdic-font-padding-h2-bottom: 0.576em;
/* 9.22px */
--fdic-font-padding-h3-top: 0;
/* 33.75px */
--fdic-font-padding-h3-bottom: 0.48rem;
/* 7.68px */
--fdic-font-padding-h4-top: 0;
/* 27px */
--fdic-font-padding-h4-bottom: 0.4rem;
/* 6.4px */
--fdic-font-padding-h5-top: 0;
/* 23.63px */
--fdic-font-padding-h5-bottom: 0.333rem;
/* 5.33px */
--fdic-font-padding-h6-top: 0;
/* 20.25px */
--fdic-font-padding-h6-bottom: 0.422rem;
/* 6.75px */
/* Spacing */
--fdic-spacing-paragraph: var(--fdic-font-size-sm);
/* Text Styles */
/* example use: .article h2 { font: var(--fdic-article-title) }; */
--fdic-body-normal: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/1.375 var(--fdic-font-stack-sans);
/* Use for main content and paragraphs. */
--fdic-body-important: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-md)/1.375 var(--fdic-font-stack-sans);
/* Grabs attention with urgency, use sparingly. */
--fdic-body-emphasized: italic var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.375 var(--fdic-font-stack-sans);
/* Highlights specific information. Also useful for citations requiring italicization. */
--fdic-body-small: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/1.375 var(--fdic-font-stack-sans);
/* For secondary info. Supports main content unobtrusively. */
--fdic-body-smaller: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-xs)/1.375 var(--fdic-font-stack-sans);
--fdic-body-big: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/1.375 var(--fdic-font-stack-sans);
/* Highlights introductory or key points. Larger size for attention without compromising readability. */
--fdic-body-bigger: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/1.375 var(--fdic-font-stack-sans);
--fdic-article-title: var(--fdic-font-weight-sans-bold) var(--fdic-font-size-h2)/1.2 var(--fdic-font-stack-sans);
/* Primary headline of the article. */
--fdic-article-subtitle: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-lg)/normal var(--fdic-font-stack-sans);
/* Secondary heading that elaborates on the title. Provides additional context. */
--fdic-article-description: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/normal var(--fdic-font-stack-sans);
/* Brief overview or introduction to the article's content. */
--fdic-article-body: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.5 var(--fdic-font-stack-sans);
/* Main text for detailed content. Use for the bulk of the article's narrative and information. */
--fdic-article-citation: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
/* For referencing sources in endnotes or footnotes. */
--fdic-article-reference-mark: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* Marker within the body text that links to an endnote or footnote. Signals additional info or sources. */
--fdic-article-block-quote: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-lg)/1.45 var(--fdic-font-stack-sans);
/* Highlights significant quotes or excerpts. Use for emphasizing important viewpoints or statements. */
--fdic-article-callout: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* Used for side notes, warnings, or to draw attention to specific content. Contrasts with main body for emphasis. */
--fdic-article-figure-title: var(--fdic-font-weight-sans-bold) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* Titles for images, graphs, or tables within the article. Clarifies what the figure represents. */
--fdic-article-caption: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
/* Descriptive text for figures, providing context or data specifics. Placed directly under the figure. */
--fdic-article-sidebar: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
/* For supplementary information related to but distinct from the article's main content. */
--fdic-heading-h1: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h1)/1.15 var(--fdic-font-stack-sans);
/* Use as the main page title. It's the highest level heading summarizing the page's content. Each page should have only one H1. */
--fdic-heading-h2: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h2)/1.2 var(--fdic-font-stack-sans);
/* Apply for section titles. Breaks content into major sections, directly under H1 in the hierarchy. Use to structure the page logically for readability and navigation. */
--fdic-heading-h3: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h3)/1.25 var(--fdic-font-stack-sans);
/* Use for sub-sections within each H2 section. Offers a further level of detail, organizing content into manageable chunks. Helps users and search engines understand text structure. */
--fdic-heading-h4: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h4)/1.25 var(--fdic-font-stack-sans);
/* Apply for additional sub-sections under H3. Ideal for topics that need further division, provides granularity to the article structure, enhancing the reader's navigation through the content. */
--fdic-heading-h5: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h5)/1.25 var(--fdic-font-stack-sans);
/* Tertiary heading for small sub-sections or dense content areas. */
--fdic-heading-h6: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-h6)/1.25 var(--fdic-font-stack-sans);
/* Smallest heading style for subtle titles or detailed categorization. */
--fdic-impact-display-1: var(--fdic-font-weight-sans-bold) var(--fdic-font-size-display1)/1.25 var(--fdic-font-stack-sans);
/* Hero text for standout headlines in key areas like hero sections or banners. */
--fdic-impact-display-2: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-display2)/1.25 var(--fdic-font-stack-sans);
/* Large secondary text for impactful subheadings or promotional headers. */
--fdic-impact-display-3: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-display3)/normal var(--fdic-font-stack-serif);
--fdic-impact-display-4: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-display4)/normal var(--fdic-font-stack-serif);
--fdic-table-heading: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
--fdic-table-content: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
--fdic-form-label: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
--fdic-form-content: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/normal var(--fdic-font-stack-sans);
--fdic-form-helper: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/normal var(--fdic-font-stack-sans);
--fdic-link-normal: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-md)/1.33 var(--fdic-font-stack-sans);
--fdic-link-important: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-md)/1.33 var(--fdic-font-stack-sans);
--fdic-link-small: var(--fdic-font-weight-sans-regular) var(--fdic-font-size-sm)/22 var(--fdic-font-stack-sans);
--fdic-link-big: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-lg)/1.25 var(--fdic-font-stack-sans);
--fdic-special-event-month: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-xs)/18 var(--fdic-font-stack-sans);
/* For the display of the month component in an events month and day visual. */
--fdic-special-event-day: var(--fdic-font-weight-sans-semibold) var(--fdic-font-size-lg)/32 var(--fdic-font-stack-sans)
/* For the day component of an event's month and day visual. */
}
}
/**
* @file
* Generic base elements.
*/
/* DO NOT REMOVE THIS COMMENT, HOUSE WILL COLLAPSE */
/* Fallback for new css properties used in Figma (leading-text)
Mixin generated at http://text-crop.eightshapes.com/ and altered syntax
https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: var(--fdic-font-size-base, 16px);
}
body {
font: var(--fdic-body-normal);
color: var(--fdic-text-primary, #212123);
background-color: var(--fdic-background-base);
margin: 0;
word-wrap: break-word;
hyphens: manual;
}
body.is-fixed {
position: fixed;
overflow: hidden;
width: 100%;
}
[dir="rtl"] body {
background-position: top right;
}
figure {
margin: 0 0 1rem;
display: table !important;
}
/* important because image alignment from CK tries to add display: block */
figure[class*="align-right"] {
margin-left: 1rem;
}
figure[class*="align-left"] {
margin-right: 1rem;
}
figure figcaption {
font: var(--fdic-body-small);
color: var(--fdic-text-secondary, #595961);
display: table-caption;
caption-side: bottom;
margin-top: var(--fdic-spacing-sm);
}
figure figcaption em {
font-style: normal;
}
/* Caption accompanies image (but not blockquote) */
figure img+figcaption {
padding-top: var(--fdic-spacing-xs, 8px);
}
img,
svg {
vertical-align: middle;
}
img,
video {
display: block;
max-width: 100%;
height: auto;
}
audio {
display: block;
max-width: 100%;
}
p {
padding: 0;
margin: 0 0 var(--fdic-paragraph-spacing-2) 0;
}
b,
strong {
font-weight: var(--fdic-font-weight-sans-bold);
}
em {
font-style: italic;
}
small {
font: var(--fdic-body-small);
}
pre {
max-width: 100%;
overflow-x: auto;
/* If this isn't here, pre can cause the page to go wider than containers */
white-space: pre-wrap;
}
sup,
sub {
font: var(--fdic-body-small);
}
hr {
display: block;
margin-block-start: var(--fdic-spacing-lg);
margin-block-end: var(--fdic-spacing-lg);
margin-inline-start: 0;
margin-inline-end: 0;
unicode-bidi: isolate;
overflow: hidden;
border-style: inset;
background: none;
box-sizing: border-box;
height: 1px !important;
width: 100%;
border: 0 !important;
background-color: var(--fdic-border-divider) !important;
}
.link-category-list hr,
.link-category-list-basic hr,
.featured-image-with-text hr,
.hero hr,
.text--lead+hr {
width: 80px !important;
height: 4px !important;
background-color: var(--fdic-main-accent) !important;
}
/* This is needed to combat browser darkmode adding color: canvastext; */
dialog {
color: var(--fdic-text-primary, #212123);
}
/* Link definitions */
a {
color: var(--fdic-text-link);
text-decoration: underline;
text-decoration-thickness: 1px;
position: relative;
cursor: pointer;
}
a:active {
color: var(--fdic-color-text-link-active);
}
a:hover {
color: var(--fdic-color-text-link-hover);
text-decoration-thickness: 2px;
}
a:visited {
color: var(--fdic-color-link-visited);
}
.text--inverse a,
.text--inverse a:hover,
.text--inverse a:visited,
.text--inverse a:active {
color: var(--fdic-text-inverted, #ffffff);
}
.text--inverse .more-link a svg,
.text--inverse .more-link a:hover svg,
.text--inverse .more-link a:visited svg,
.text--inverse .more-link a:active svg {
color: var(--fdic-text-inverted, #ffffff);
}
.more-link {
text-align: right;
}
.more-link a svg {
color: var(--fdic-text-link);
}
.more-link a:active svg {
color: var(--fdic-color-text-link-active);
}
.more-link a:hover svg {
color: var(--fdic-color-text-link-hover);
}
.more-link a:visited svg {
color: var(--fdic-color-link-visited);
}
/* Tables vars */
table {
--fdic-table-primary-spacing: var(--fdic-spacing-xs, 1rem);
--fdic-table-margin: 0 0 var(--fdic-table-primary-spacing, 1rem) 0;
--fdic-table-cell-padding: var(--fdic-spacing-sm) var(--fdic-table-primary-spacing);
/* Table Headers */
--fdic-table-header-background: var(--fdic-color-brand-primary-500, #0d6191);
}
/* defining these in case we need to invert them later */
table th a {
--fdic-table-header-link-color: var(--fdic-text-inverted);
--fdic-table-header-link-color-active: var(---fdic-text-inverted);
--fdic-table-header-link-color-visited: var(---fdic-text-inverted);
--fdic-table-header-link-color-hover: var(--fdic-text-inverted);
--fdic-table-header-link-background-hover: transparent;
}
/* Tables definitions */
/* Need to be very specific when fighting CK5 editor styles */
table,
.table table,
.lpb-dialog table {
font: var(--fdic-table-content);
margin: var(--fdic-table-margin);
width: 100%;
border-collapse: collapse;
table-layout: fixed;
word-break: break-word;
border: 0;
border-radius: 0;
/* Stops empty cells from collapsing */
}
table caption,
table .caption,
.table table caption,
.table table .caption,
.lpb-dialog table caption,
.lpb-dialog table .caption {
text-indent: 0;
font-weight: bold;
text-align: left;
}
table thead tr, .table table thead tr, .lpb-dialog table thead tr {
border: 0;
}
table thead td,
table thead th,
.table table thead td,
.table table thead th,
.lpb-dialog table thead td,
.lpb-dialog table thead th {
font: var(--fdic-table-heading);
color: var(--fdic-text-inverted);
background: var(--fdic-table-header-background);
position: relative;
vertical-align: bottom;
}
table thead td a, table thead th a, .table table thead td a, .table table thead th a, .lpb-dialog table thead td a, .lpb-dialog table thead th a {
color: var(--fdic-table-header-link-color);
}
table thead td a:hover, table thead th a:hover, .table table thead td a:hover, .table table thead th a:hover, .lpb-dialog table thead td a:hover, .lpb-dialog table thead th a:hover {
color: var(--fdic-table-link-color-hover);
}
table thead td a:active, table thead th a:active, .table table thead td a:active, .table table thead th a:active, .lpb-dialog table thead td a:active, .lpb-dialog table thead th a:active {
color: var(--fdic-table-link-color-active);
}
table thead td a:visited, table thead th a:visited, .table table thead td a:visited, .table table thead th a:visited, .lpb-dialog table thead td a:visited, .lpb-dialog table thead th a:visited {
color: var(--fdic-table-link-color-visited);
}
table td, .table table td, .lpb-dialog table td {
vertical-align: top;
}
table td,
table th,
.table table td,
.table table th,
.lpb-dialog table td,
.lpb-dialog table th {
padding: var(--fdic-table-primary-spacing);
border-width: 0 0 var(--fdic-border-width-base) 0;
border-color: var(--fdic-border-color-base);
border-style: var(--fdic-border-style-base);
font-size: inherit;
text-align: inherit;
text-align: -webkit-match-parent;
background: #fff;
}
table summary, .table table summary, .lpb-dialog table summary {
display: block;
}
table tfoot, .table table tfoot, .lpb-dialog table tfoot {
font-weight: bold;
}
table td:empty:after,
table th:empty:after,
table td:empty:after,
table th:empty:after,
.table table td:empty:after,
.table table th:empty:after,
.table table td:empty:after,
.table table th:empty:after,
.lpb-dialog table td:empty:after,
.lpb-dialog table th:empty:after,
.lpb-dialog table td:empty:after,
.lpb-dialog table th:empty:after {
content: '\00a0';
visibility: hidden;
}
@media (max-width: 1199.98px) {
.table-wrapper {
overflow-x: auto;
width: 100%;
}
/* margin-bottom: 2rem; */
.table-wrapper table {
table-layout: auto;
word-break: normal;
}
.table-wrapper:has(table.footnotes) {
overflow-x: unset;
}
}
dl dt {
margin-block-start: 1rem;
font-weight: bold;
}
dl dt:first-of-type {
margin: 0;
}
dl dd {
display: inline;
margin: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/**
* @file
* Typographic base elements.
*/
/*
* Headings
*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: var(--fdic-text-primary, #212123);
padding: 0;
margin: 0;
margin-block-start: var(--fdic-sp1-5);
margin-block-end: var(--fdic-sp0-5);
}
/* Exception: first heading should not add top margin */
h1:first-child,
h1:first-of-type,
h2:first-child,
h2:first-of-type,
h3:first-child,
h3:first-of-type,
h4:first-child,
h4:first-of-type,
h5:first-child,
h5:first-of-type,
h6:first-child,
h6:first-of-type,
.h1:first-child,
.h1:first-of-type,
.h2:first-child,
.h2:first-of-type,
.h3:first-child,
.h3:first-of-type,
.h4:first-child,
.h4:first-of-type,
.h5:first-child,
.h5:first-of-type,
.h6:first-child,
.h6:first-of-type {
margin-top: 0;
margin-block-start: 0;
}
/* Exception: last heading should not add bottom margin */
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, .h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child {
margin-bottom: 0;
margin-block-end: 0;
}
h1:only-child, h2:only-child, h3:only-child, h4:only-child, h5:only-child, h6:only-child, .h1:only-child, .h2:only-child, .h3:only-child, .h4:only-child, .h5:only-child, .h6:only-child {
margin-block-start: 0;
margin-block-end: 0;
}
#block-nickel-page-title h1, #block-nickel-page-title h2, #block-nickel-page-title h3, #block-nickel-page-title h4, #block-nickel-page-title h5, #block-nickel-page-title h6, #block-nickel-page-title .h1, #block-nickel-page-title .h2, #block-nickel-page-title .h3, #block-nickel-page-title .h4, #block-nickel-page-title .h5, #block-nickel-page-title .h6 {
margin-block-end: var(--fdic-spacing-2xl);
}
.text--inverse h1,
.text--inverse h2,
.text--inverse h3,
.text--inverse h4,
.text--inverse h5,
.text--inverse h6,
.text--inverse .h1,
.text--inverse .h2,
.text--inverse .h3,
.text--inverse .h4,
.text--inverse .h5,
.text--inverse .h6 {
color: var(--fdic-text-inverted, #ffffff);
}
h1,
.h1 {
font: var(--fdic-heading-h1);
letter-spacing: var(--fdic-letter-spacing-1, -1%);
}
h2,
.h2 {
font: var(--fdic-heading-h2);
letter-spacing: var(--fdic-letter-spacing-2, -.5%);
}
h3,
.h3 {
font: var(--fdic-heading-h3);
letter-spacing: var(--fdic-letter-spacing-0, 0);
}
h4,
.h4 {
font: var(--fdic-heading-h4);
letter-spacing: var(--fdic-letter-spacing-2, -.5%);
}
h5,
.h5 {
font: var(--fdic-heading-h5);
letter-spacing: var(--fdic-letter-spacing-0, -0);
}
h6:not(.h1, .h2, .h3, .h4, .h5),
.h6 {
font: var(--fdic-heading-h6);
letter-spacing: var(--fdic-letter-spacing-3, 3%);
}
h6:not(.h1, .h2, .h3, .h4, .h5):not(.h1, .h2, .h3, .h4, .h5), .h6:not(.h1, .h2, .h3, .h4, .h5) {
text-transform: var(--fdic-text-case-uppercase, uppercase);
}
/* List vars */
ul:not(nav ul), ol:not(nav ul) {
/* Uses margin: and padding: Single value only, no shorthand */
--fdic-list-primary-spacing: var(--fdic-spacing-lg, 1rem);
/* Uses margin: and padding: accepts shorthand */
--fdic-list-padding: 0;
--fdic-list-margin: 0 0 0 var(--fdic-list-primary-spacing);
--fdic-list-item-padding: 0 0 0 0;
--fdic-list-item-margin: 0 0 var(--fdic-list-primary-spacing) 0;
--fdic-list-position: outside;
}
/* List definitions */
ul:not(nav ul), ol:not(nav ul) {
padding: var(--fdic-list-padding, 0);
margin: var(--fdic-list-margin, .5rem);
}
ul:not(nav ul) li:last-child, ol:not(nav ul) li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
ul:not(nav ul) li, ol:not(nav ul) li {
padding: var(--fdic-list-item-padding, 0);
margin: var(--fdic-list-item-margin, .5rem);
list-style-position: var(--fdic-list-position, outside);
/* Nested Lists */
}
ul:not(nav ul) li ol,
ul:not(nav ul) li ul,
ol:not(nav ul) li ol,
ol:not(nav ul) li ul {
margin-top: var(--fdic-list-primary-spacing);
}
ul:not(nav ul).no-style li, ol:not(nav ul).no-style li {
list-style-type: none;
}
/* Deep nests: ol */
ol li {
list-style-type: decimal;
}
ol li ol>li {
list-style-type: lower-alpha;
}
ol li ol>li ol>li {
list-style-type: lower-roman;
}
ol li ol>li ol>li ol>li {
list-style-type: upper-alpha;
}
ol li ol>li ol>li ol>li ol>li {
list-style-type: upper-roman;
}
/* Deep nests: ul */
ul li {
list-style-type: disc;
}
ul li ul>li {
list-style-type: circle;
}
ul li ul>li ul>li {
list-style-type: square;
}
ul li ul>li ul>li ul>li {
list-style-type: disc;
}
ul li ul>li ul>li ul>li ul>li {
list-style-type: circle;
}
li.numerical {
list-style-type: decimal;
}
li.alpha-upper {
list-style-type: upper-alpha;
}
li.alpha-lower {
list-style-type: lower-alpha;
}
li.roman-upper {
list-style-type: upper-roman;
}
li.roman-lower {
list-style-type: lower-roman;
}
/* Blockquote vars */
blockquote,
figure,
blockquote+p:has(cite) {
/* Uses margin: and padding: Single value only, no shorthand */
--fdic-blockquote-primary-spacing: var(--fdic-spacing-xl, 1.25rem);
--fdic-blockquote-icon-size: 2rem;
/* Fixes the padding required to display the icon */
--fdic-blockquote-icon-spacing-adjust: calc(var(--fdic-blockquote-icon-size) + (var(--fdic-blockquote-primary-spacing) / 2));
/* Uses margin: and padding: accepts shorthand */
/* Note: padding-left and right will be controlled by --fdic-blockquote-icon-size + --fdic-blockquote-primary-spacing */
--fdic-blockquote-margin: 0 0 var(--fdic-blockquote-primary-spacing) 0;
/* Used within content: param */
--fdic-blockquote-icon: url('data:image/svg+xml,');
--fdic-icon-color: var(--fdic-icon-disabled, #efefef);
}
figure:has(blockquote):has(figcaption) {
margin: var(--fdic-blockquote-margin);
}
/* Blockquote definitions */
blockquote {
margin: var(--fdic-blockquote-margin);
padding: 0;
padding-left: var(--fdic-blockquote-icon-spacing-adjust);
padding-right: var(--fdic-blockquote-icon-spacing-adjust);
position: relative;
font: var(--fdic-article-block-quote);
}
blockquote:before {
content: '';
font-size: var(--fdic-blockquote-icon-size, 1rem);
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
background-color: var(--fdic-icon-color);
-webkit-mask-image: var(--fdic-blockquote-icon, '');
mask-image: var(--fdic-blockquote-icon, '');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
height: var(--fdic-blockquote-icon-size, 2rem);
width: var(--fdic-blockquote-icon-size, 2rem);
}
blockquote p:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
blockquote+figcaption,
blockquote+cite,
blockquote+p:has(cite) {
padding: 0;
padding-left: calc(var(--fdic-blockquote-icon-spacing-adjust) + 1rem);
position: relative;
}
blockquote+figcaption:before, blockquote+cite:before, blockquote+p:has(cite):before {
position: absolute;
font-size: var(--fdic-font-size-ml, 0.875rem);
color: var(--fdic-text-primary, #212123);
content: '\2013';
top: 50%;
left: var(--fdic-blockquote-icon-spacing-adjust);
transform: translateY(-50%);
}
blockquote +figcaption {
font: var(--fdic-article-caption);
}
/*
* Text utils
*/
.text--standard {
color: var(--fdic-text-primary, #212123);
}
.text--inverse {
color: var(--fdic-text-inverted, #ffffff);
}
.text--big,
.text--lead {
font: var(--fdic-body-big);
}
.text--display-1,
.text--display-2,
.text--display-3,
.text--display-4 {
padding: 0;
margin: 0;
margin-block-start: var(--fdic-sp1-5);
margin-block-end: var(--fdic-sp0-5);
}
/* Exception: first heading should not add top margin */
.text--display-1:first-child,
.text--display-1:first-of-type,
.text--display-2:first-child,
.text--display-2:first-of-type,
.text--display-3:first-child,
.text--display-3:first-of-type,
.text--display-4:first-child,
.text--display-4:first-of-type {
margin-top: 0;
margin-block-start: 0;
}
/* Exception: last heading should not add bottom margin */
.text--display-1:last-child, .text--display-2:last-child, .text--display-3:last-child, .text--display-4:last-child {
margin-bottom: 0;
margin-block-end: 0;
}
.text--display-1:only-child, .text--display-2:only-child, .text--display-3:only-child, .text--display-4:only-child {
margin-block-start: 0;
margin-block-end: 0;
}
.text--display-1,
.text--display-2,
.text--display-3,
.text--display-4 {
letter-spacing: var(--fdic-letter-spacing-1, -1%);
}
.text--display-1 {
font: var(--fdic-impact-display-1);
}
.text--display-2 {
font: var(--fdic-impact-display-2);
}
.text--display-3 {
font: var(--fdic-impact-display-3);
}
.text--display-4 {
font: var(--fdic-impact-display-4);
letter-spacing: var(--fdic-letter-spacing-2, -0.5%);
}
.text--title {
font: var(--fdic-article-title);
}
.text--subtitle {
font: var(--fdic-article-subtitle);
}
.text--description {
font: var(--fdic-article-description);
}
.text--fdic-body {
font: var(--fdic-article-body);
}
.text--citation,
cite {
font: var(--fdic-article-citation);
}
.text--callout {
font: var(--fdic-article-callout);
}
.text--figure-title {
font: var(--fdic-article-figure-title);
}
.text--sidebar,
.sidebar {
font: var(--fdic-article-sidebar);
}
/**
* Base form styling.
*/
:root {
/* ---- Semantic form tokens */
/* Cross-cutting */
--fdic-form-border-width: 1px;
--fdic-form-border-color: var(--fdic-border-input-interactive);
--fdic-form-focus-color: var(--fdic-border-input-focus);
--fdic-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--fdic-form-focus-color) 35%, transparent);
--fdic-form-required-color: var(--fdic-text-error, #D80E3A);
--fdic-form-error-color: var(--fdic-semantic-foreground-error);
/* Fieldset */
--fdic-form-fieldset-bg: var(--fdic-background-container);
--fdic-form-fieldset-border: var(--fdic-form-border-width) solid var(--fdic-form-border-color);
--fdic-form-fieldset-radius: var(--fdic-corner-radius-xl);
--fdic-form-fieldset-padding: var(--fdic-spacing-xl);
--fdic-form-fieldset-gap: var(--fdic-spacing-2xl);
/* Legend */
--fdic-form-legend-color: var(--fdic-text-primary);
--fdic-form-legend-size: var(--fdic-font-size-h3);
--fdic-form-legend-weight: var(--fdic-font-weight-sans-bold);
--fdic-form-legend-margin: 0 0 var(--fdic-spacing-lg);
/* Labels */
--fdic-form-label-color: var(--fdic-text-primary);
--fdic-form-label-size: var(--fdic-font-size-md);
--fdic-form-label-weight: var(--fdic-font-weight-sans-regular);
/* Controls - input / text-area / select */
--fdic-form-control-bg: var(--fdic-background-base);
--fdic-form-control-text: var(--fdic-text-primary);
--fdic-form-control-placeholder: var(--fdic-text-placeholder);
--fdic-form-control-border: var(--fdic-form-border-width) solid var(--fdic-form-border-color);
--fdic-form-control-radius: var(--fdic-corner-radius-sm);
--fdic-form-control-padding: var(--fdic-spacing-sm) var(--fdic-spacing-md);
--fdic-form-control-size: 1rem;
--fdic-icon-cheveron-down: url('data:image/svg+xml,');
--fdic-icon-cheveron-up: url('data:image/svg+xml,');
--fdic-form-select-icon: var(--fdic-icon-cheveron-down);
--fdic-form-select-icon-open: var(--fdic-icon-cheveron-up);
/* Help text */
--fdic-form-description-color: var(--fdic-text-secondary);
--fdic-form-description-size: 0.8125rem;
/* Vertical rhythm */
--fdic-form-item-gap: var(--fdic-spacing-lg);
/* between form items */
--fdic-form-label-gap: var(--fdic-spacing-xs);
/* label -> control */
}
/* Form definition */
form {
font: var(--fdic-form-content);
color: var(--fdic-text-primary, #212123);
}
form .help-text,
form .filter-guidelines__item {
font: var(--fdic-form-helper);
}
/**
* ---- Group box
* fieldset (sections) and details (collapsible groups).
*/
fieldset,
details,
.fieldgroup.form-wrapper {
margin: 0 0 var(--fdic-form-fieldset-gap);
padding: var(--fdic-form-fieldset-padding);
background: var(--fdic-form-fieldset-bg);
border: var(--fdic-form-fieldset-border);
border-radius: var(--fdic-form-fieldset-radius);
}
/**
* ---- Legend
*