/************************ root colors and typography **************************/ :root { /* Override Bootstrap default theme colors */ --bs-primary: #1b264b; --bs-secondary: #6A6A6A; --bs-success: #16B364; --bs-info: #17A2B8; --bs-warning: #FFB21A; --bs-danger: #D82C2C; --bs-light: #ffffff; --bs-dark: #2E3645; /* Hover state colors (~15% darker) #1b264b; */ --bs-primary-hover: #4F6FDF; --bs-secondary-hover: #555555; --bs-success-hover: #128c4e; --bs-info-hover: #138294; --bs-warning-hover: #cc8e15; --bs-danger-hover: #ad2323; --bs-light-hover: #F3F4FC; /* Typography scale */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ /* Font weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Base typography styles */ body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-headers); font-weight: var(--font-weight-semibold); } /* Font families */ --font-family-base: “Inter”, “Helvetica Neue”, “Open Sans”, -apple-system, BlinkMacSystemFont, Arial, sans-serif; /* --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */ --font-family-headers: var(--font-family-base); --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /*************************** buttons ******************************************/ .mantine-Button-root.blue-button:hover{ background-color: var(--bs-primary-hover); } /*************************** spinner ******************************************/ .dash-spinner { position: absolute !important; top: 20% !important; } /*************************** tabs ******************************************/ /* Debugging style to confirm selector matches */ .mantine-Tabs-tab { border: 0px solid red !important; /* This should make all tabs have a red border */ } /* Style for active/selected tabs */ .mantine-Tabs-tab[data-active="true"] { /* Enhance the active tab styling with more visible indicators #1971c2 #e6f0fa */ border-bottom: 2px solid #1b264b !important; /* Blue underline for selected tab */ background-color: #ebeef6 !important; /* Light blue background (rgba(25, 113, 194, 0.05) as hex) */ color: #1b264b !important; /* Blue text color */ font-weight: 600 !important; /* Make text slightly bolder */ } /* More specific selectors with hover effect that won't interfere with active state */ .mantine-Tabs-tab:not([data-active="true"]):hover { background-color: #e9ebf2 !important; /* rgba(27, 38, 75, 0.1) as hex */ color: #1B264B !important; transition: background-color 0.3s ease !important; } /* Target tabs directly with stronger selectors */ div[role="tablist"] > button.mantine-Tabs-tab:not([data-active="true"]):hover { background-color: #e9ebf2 !important; /* rgba(27, 38, 75, 0.1) as hex */ } /* Target both pills and default tabs */ .mantine-Tabs-tabsList .mantine-Tabs-tab:not([data-active="true"]):hover, .mantine-Tabs-root[data-orientation="vertical"] .mantine-Tabs-tab:not([data-active="true"]):hover { background-color: #e9ebf2 !important; /* rgba(27, 38, 75, 0.1) as hex */ } /* Override any inline styles */ .mantine-Tabs-tab:not([data-active="true"]):hover { background-color: #e9ebf2 !important; /* rgba(27, 38, 75, 0.1) as hex */ color: #1B264B !important; } /* legislator card hover effect ... not sure which one is working as none working locally but one working deployed!! :P */ .legislator-card-hover:hover, .federal-card-hover:hover { background: #f6f6f8 !important; box-shadow: 2px 4px 16px 4px rgba(60, 60, 60, 0.30) !important; transition: background 0.2s, box-shadow 0.2s !important; } div.legislator-card-hover:hover, div.federal-card-hover:hover { background: #f6f6f8 !important; box-shadow: 2px 4px 16px 4px rgba(60, 60, 60, 0.30) !important; transition: background 0.2s, box-shadow 0.2s !important; } div.legislator-card-hover.mantine-Card-root:hover, div.federal-card-hover.mantine-Card-root:hover { background: #f6f6f8 !important; box-shadow: 2px 4px 16px 4px rgba(60, 60, 60, 0.30) !important; transition: background 0.2s, box-shadow 0.2s !important; } /* Extend modal header blue background to full width */ .mantine-Modal-title { background: #d9deef; /* or use your dc.LIGHT_BLUE value */ padding: 16px 24px; font-size: 1.5rem; font-weight: 700; color: #1a2957; /* or use your dc.DARK_BLUE value */ border-top-left-radius: 16px; border-top-right-radius: 16px; } /* Add yellow shadow to search ActionIcon on hover */ .search-actionicon-hover:hover { box-shadow: 0 0 16px 0 #FFB21A, 0 0 32px 8px rgba(255,178,26,0.3) !important; background: radial-gradient(circle, #FFB21A 40%, rgba(255,178,26,0.15) 100%) !important; transition: box-shadow 0.2s, background 0.2s; } /* Hover effect for the main accordion control */ .map-accordion-control { /* Smooth transitions for hover glow and background only; avoid transform to prevent text shift */ transition: box-shadow 0.28s ease, background 0.22s ease, color 0.15s ease; will-change: box-shadow, background; transform: none; } .map-accordion-control:hover { /* Stronger uniform dark overlay on hover so the control reads darker (not lighter) */ background-color: rgba(27,38,75,0.22) !important; /* increase alpha to darken */ /* keep text/icon color unchanged for icon-only accordion controls */ cursor: pointer; transform: none !important; /* no lift to avoid shifting text */ /* inset left glow (subtle) and uniform outer glow centered around the control */ box-shadow: inset 6px 0 10px rgba(27,38,75,0.10), 0 0 18px 6px rgba(27,38,75,0.14), 0 0 8px 2px rgba(27,38,75,0.08) !important; } /* Pressed / focus states should keep no lift and a reduced glow */ .map-accordion-control:active, .map-accordion-control:focus { transform: none !important; /* keep text/icon color unchanged on active/focus */ /* smaller, centered glow for active/focus */ box-shadow: inset 4px 0 8px rgba(27,38,75,0.08), 0 0 12px 4px rgba(27,38,75,0.10) !important; outline: none; }