/* 01_variables.css */
/* ======================== */ /* CSS VARIABLES - MUST LOAD FIRST */ /* File: 00_variables.css */ /* ======================== */ :root { /* ======================== */ /* DARK THEME COLORS */ /* ======================== */ /* Background colors */ --bg-primary: rgb(25, 25, 25); --bg-secondary: rgb(35, 35, 35); --bg-tertiary: rgb(15, 15, 15); --bg-dark: rgb(10, 10, 10); --bg-hover: rgba(255, 255, 255, 0.1); --bg-modal: #2a2a2a; --bg-modal-header: #1a1a1a; /* Border colors */ --border-primary: #444; --border-secondary: #666; --border-tertiary: #888; --border-focus: #0d6efd; --border-focus-shadow: rgba(13, 110, 253, 0.25); /* Text colors */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: #d0d0d0; --text-muted: #888; --text-disabled: #666; /* Status colors */ --color-success: #00bc8c; --color-success-hover: #009670; --color-danger: #e74c3c; --color-danger-hover: #dc3545; --color-warning: #f39c12; --color-warning-hover: #ffd700; --color-info: #3498db; --color-info-hover: #66b3ff; --color-primary: #0d6efd; --color-primary-hover: #0a58ca; --color-primary-light: #66b3ff; /* Value colors for tables */ --value-positive: #28a745; --value-negative: #dc3545; /* Component specific */ --shadow-default: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5); /* Transitions */ --transition-default: all 0.2s ease; --transition-slow: all 0.3s ease; /* Font sizes */ --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; /* Border radius */ --radius-sm: 3px; --radius-base: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Z-index layers */ --z-sticky-1: 1; --z-sticky-2: 2; --z-sticky-3: 3; --z-dropdown: 10; --z-modal: 100; --z-tooltip: 1000; }
/* 02_global_dynamic_fonts.css */
/* ======================== */ /* GLOBAL DYNAMIC FONT SIZING */ /* File: 01_global_dynamic_fonts.css */ /* ======================== */ /* * This file sets dynamic font sizing for ALL components * Load this AFTER variables.css but BEFORE all other component CSS files * This ensures all components inherit these responsive sizes */ /* ======================== */ /* OVERRIDE CSS VARIABLES BASED ON SCREEN SIZE */ /* ======================== */ /* Mobile First - Smallest sizes */ :root { --font-size-xs: 9px; --font-size-sm: 10px; --font-size-base: 10px; /* Down from 12px */ --font-size-md: 11px; /* Down from 13px */ --font-size-lg: 12px; /* Down from 14px */ --font-size-xl: 14px; /* Down from 16px */ } /* Small devices (landscape phones, 544px and up) */ @media (min-width: 544px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 11px; --font-size-md: 12px; --font-size-lg: 13px; --font-size-xl: 15px; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* ======================== */ /* UNIVERSAL FONT SIZE APPLICATION */ /* ======================== */ /* Apply to ALL text elements by default */ body, body * { font-size: var(--font-size-base) !important; }¨ /* ======================== */ /* SPECIFIC COMPONENT OVERRIDES */ /* ======================== */ /* Paragraphs - Keep your existing responsive sizing */ p { font-size: var(--font-size-base) !important; } /* Spans */ span { font-size: var(--font-size-base) !important; } /* Headers - Slightly larger but still dynamic */ h1 { font-size: calc(var(--font-size-xl) * 1.5) !important; } h2 { font-size: calc(var(--font-size-xl) * 1.25) !important; } h3 { font-size: calc(var(--font-size-lg) * 1.2) !important; } h4 { font-size: var(--font-size-lg) !important; } h5 { font-size: var(--font-size-md) !important; } h6 { font-size: var(--font-size-base) !important; } /* ======================== */ /* TABLES (DataTable & dbc.Table) */ /* ======================== */ /* Table body cells */ .table tbody td, .dash-spreadsheet-container td, div.dash-spreadsheet-container .dash-spreadsheet-inner table td { font-size: var(--font-size-base) !important; } /* Table headers - slightly larger */ .table thead th, .dash-spreadsheet-container th, div.dash-spreadsheet-container .dash-spreadsheet-inner table th { font-size: var(--font-size-md) !important; } /* ======================== */ /* FORMS & INPUTS */ /* ======================== */ /* All form controls */ .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { font-size: var(--font-size-base) !important; } /* Labels */ label, .form-label { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DROPDOWNS & SELECT MENUS */ /* ======================== */ /* Keep dropdowns small as you like them */ .Select-control, .Select-menu-outer, .Select-value-label, .Select-option, .Select-input input, .Select-placeholder { font-size: var(--font-size-sm) !important; /* 10-11px dynamic */ } /* ======================== */ /* BUTTONS */ /* ======================== */ /* All buttons */ .btn, button, [type="button"], [type="submit"], .export { font-size: var(--font-size-base) !important; } /* Small buttons */ .btn-sm { font-size: var(--font-size-sm) !important; } /* Large buttons */ .btn-lg { font-size: var(--font-size-md) !important; } /* ======================== */ /* NAVIGATION & TABS */ /* ======================== */ .nav-link, .nav-tabs .nav-link, .navbar-nav { font-size: var(--font-size-base) !important; } /* ======================== */ /* CARDS */ /* ======================== */ .card-body, .card-title, .card-text { font-size: var(--font-size-base) !important; } .card-header, .card-footer { font-size: var(--font-size-sm) !important; } /* ======================== */ /* MODALS */ /* ======================== */ .modal-body { font-size: var(--font-size-base) !important; } .modal-title { font-size: var(--font-size-lg) !important; } /* ======================== */ /* PAGINATION */ /* ======================== */ .page-number, .current-page-container input, .pagination { font-size: var(--font-size-sm) !important; } /* ======================== */ /* TOOLTIPS & POPOVERS */ /* ======================== */ .tooltip, .popover, .dash-tooltip { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DATE PICKERS */ /* ======================== */ .DateInput_input, .DateInput_input_1, .CalendarDay__default, .CalendarMonth_caption { font-size: var(--font-size-base) !important; } /* ======================== */ /* OVERRIDE FOR SPECIFIC SMALL ELEMENTS */ /* ======================== */ /* Keep these extra small */ .badge, .form-text, small, .small { font-size: var(--font-size-xs) !important; } /* ======================== */ /* ENSURE READABILITY MINIMUMS */ /* ======================== */ /* Never go below 9px for readability */ @media (max-width: 543px) { body, body * { min-font-size: 9px; } } /* ======================== */ /* PLOTLY GRAPH OVERRIDES */ /* ======================== */ /* Let Plotly control its own font sizes */ .js-plotly-plot .plotly text, .js-plotly-plot .legend text, .js-plotly-plot .legendtext, g.legend text.legendtext { font-size: var(--font-size-xs) !important; } /* Alternatively, if you want to use your CSS variable system */ .js-plotly-plot .legend text { font-size: var(--font-size-xs) !important; /* 11px by default */ } /* ======================== */ /* TERMLY BANNER SIZE FIX - SPECIFIC VERSION */ /* Based on exact class names from inspection */ /* ======================== */ /* ======================== */ /* TERMLY BANNER SIZE FIX - DYNAMIC VERSION WITH SCALE VARIABLE */ /* Adjust the --termly-scale variable to make everything bigger/smaller */ /* ======================== */ /* Define the scale variable - CHANGE THIS TO ADJUST SIZE */ :root { --termly-scale: 0.7; /* 0.5 = 50% of original size, 1.0 = 100%, 0.7 = 70%, etc. */ } /* Responsive scale adjustments */ @media (max-width: 768px) { :root { --termly-scale: 0.65; /* Slightly smaller on tablets */ } } @media (max-width: 480px) { :root { --termly-scale: 0.6; /* Even smaller on phones */ } } @media (max-width: 375px) { :root { --termly-scale: 0.55; /* Smallest for iPhone SE and similar */ } } /* Calculate all sizes based on the scale variable */ :root { /* Original sizes multiplied by scale */ --termly-font-size: calc(14px * var(--termly-scale)); --termly-message-font: calc(13px * var(--termly-scale)); --termly-button-font: calc(13px * var(--termly-scale)); /* Padding calculations */ --termly-banner-padding-y: calc(12px * var(--termly-scale)); --termly-banner-padding-x: calc(16px * var(--termly-scale)); --termly-button-padding-y: calc(8px * var(--termly-scale)); --termly-button-padding-x: calc(16px * var(--termly-scale)); /* Heights and gaps */ --termly-button-height: calc(36px * var(--termly-scale)); --termly-gap: calc(12px * var(--termly-scale)); --termly-button-gap: calc(8px * var(--termly-scale)); --termly-max-height: calc(160px * var(--termly-scale)); /* Line height scales less aggressively to maintain readability */ --termly-line-height: calc(1.4 - (0.2 * (1 - var(--termly-scale)))); } /* Main banner container */ .termly-styles-root-b8aebb.termly-styles-banner-e1cd59 { padding: var(--termly-banner-padding-y) var(--termly-banner-padding-x) !important; font-size: var(--termly-font-size) !important; } /* Content wrapper */ .termly-styles-content-fcafe4 { font-size: var(--termly-font-size) !important; gap: var(--termly-gap) !important; } /* Message container */ .termly-styles-messageContainer-d6c726 { font-size: var(--termly-font-size) !important; } /* Message text */ .termly-styles-message-d6c726, .termly-styles-root-d5f97a { font-size: var(--termly-message-font) !important; line-height: var(--termly-line-height) !important; } /* Cookie policy link text */ .termly-styles-root-d5f97a[role="button"][tabindex="0"] { font-size: var(--termly-message-font) !important; text-decoration: underline; } /* Preferences link */ .termly-styles-root-d5f97a[data-testid="preferences-link"] { font-size: var(--termly-message-font) !important; } /* Button container */ .termly-styles-buttons-bb7ed2 { gap: var(--termly-button-gap) !important; } /* Accept button */ .termly-styles-button-bb7ed2[data-tid="banner-accept"] { background: rgb(74, 74, 74) !important; font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; min-height: unset !important; } /* Accept All Cookies button */ .termly-styles-module-root-aa0eb.termly-styles-module-primary-aa493c.termly-styles-module-solid-cd1b13.termly-styles-button-a4543c button { font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; font-weight: normal !important; } /* Override all text inside the banner */ #termly-code-snippet-support * { font-size: inherit !important; line-height: inherit !important; } /* Ensure the banner container doesn't grow too large */ #termly-code-snippet-support { font-size: var(--termly-font-size) !important; max-height: var(--termly-max-height) !important; } /* Additional micro-adjustments for very small screens */ @media (max-width: 320px) { :root { --termly-scale: 0.45; /* Ultra-compact for very small devices */ } /* Stack buttons vertically on very small screens */ .termly-styles-buttons-bb7ed2 { flex-direction: column !important; width: 100% !important; } .termly-styles-button-bb7ed2, .termly-styles-module-root-aa0eb { width: 100% !important; } }
/* 03_typography.css */
/* ======================== */ /* TYPOGRAPHY AND TEXT STYLES */ /* File: 02_typography.css */ /* ======================== */ /* Base font family inheritance */ .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-container table, .dash-spreadsheet-container input { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* ======================== */ /* RESPONSIVE TYPOGRAPHY */ /* ======================== */ /* Paragraph responsive sizing */ @media (min-width: 1px) { p { font-size: var(--font-size-xs); } } @media (min-width: 544px) { p { font-size: var(--font-size-base); } } @media (min-width: 768px) { p { font-size: var(--font-size-md); } } @media (min-width: 992px) { p { font-size: var(--font-size-md); } } @media (min-width: 1200px) { p { font-size: var(--font-size-md); } } /* Span responsive sizing */ @media (min-width: 1px) { span { font-size: var(--font-size-xs); } } @media (min-width: 544px) { span { font-size: var(--font-size-base); } } @media (min-width: 768px) { span { font-size: var(--font-size-md); } } @media (min-width: 992px) { span { font-size: var(--font-size-md); } } @media (min-width: 1200px) { span { font-size: var(--font-size-md); } } /* H1 responsive sizing */ @media (min-width: 1px) { h1 { font-size: 1.8rem; } } @media (min-width: 544px) { h1 { font-size: 2rem; } } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 992px) { h1 { font-size: 2.4rem; } } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } /* H2 responsive sizing */ @media (min-width: 1px) { h2 { font-size: 1.4rem; } } @media (min-width: 544px) { h2 { font-size: 1.6rem; } } @media (min-width: 768px) { h2 { font-size: 1.8rem; } } @media (min-width: 992px) { h2 { font-size: 1.9rem; } } @media (min-width: 1200px) { h2 { font-size: 2rem; } } /* H3 responsive sizing */ @media (min-width: 1px) { h3 { font-size: 1.2rem; } } @media (min-width: 544px) { h3 { font-size: 1.25rem; } } @media (min-width: 768px) { h3 { font-size: 1.35rem; } } @media (min-width: 992px) { h3 { font-size: 1.5rem; } } @media (min-width: 1200px) { h3 { font-size: 1.75rem; } } /* H4 responsive sizing */ @media (min-width: 1px) { h4 { font-size: 1rem; } } @media (min-width: 544px) { h4 { font-size: 1rem; } } @media (min-width: 768px) { h4 { font-size: 1rem; } } @media (min-width: 992px) { h4 { font-size: 1.1rem; } } @media (min-width: 1200px) { h4 { font-size: 1.1rem; } } /* H5 responsive sizing */ @media (min-width: 1px) { h5 { font-size: 1rem; } } @media (min-width: 544px) { h5 { font-size: 1rem; } } @media (min-width: 768px) { h5 { font-size: 1rem; } } @media (min-width: 992px) { h5 { font-size: 1.1rem; } } @media (min-width: 1200px) { h5 { font-size: 1.1rem; } } /* ======================== */ /* COLOR CODING FOR VALUES */ /* ======================== */ /* Positive values */ .cell-value-positive { color: var(--value-positive); font-weight: 500; } /* Negative values */ .cell-value-negative { color: var(--value-negative); font-weight: 500; } /* Primary text color in modals */ .learn-more-content .text-primary { color: var(--color-info-hover); }
/* 04_forms_inputs.css */
/* ======================== */ /* FORM ELEMENTS AND INPUTS */ /* File: 03_forms-inputs.css */ /* ======================== */ /* Base form controls */ .form-control, .form-control:focus, .form-control:valid, input[type="number"], input[type="text"], input.form-control { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); } .form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 0.25rem var(--border-focus-shadow); } /* Form control responsive sizing */ @media (min-width: 1px) { .form-control:valid { font-size: var(--font-size-xs); } } @media (min-width: 768px) { .form-control:valid { font-size: var(--font-size-sm); } } /* Disabled input styling */ input:disabled, .form-control:disabled { background-color: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; opacity: 0.6; } /* ======================== */ /* SELECT DROPDOWNS */ /* ======================== */ /* Select control base styling */ .Select-control { background-color: var(--bg-primary); border: 1px solid var(--border-primary); min-height: 30px; font-size: var(--font-size-base); /* font-size changed to var(--font-size-base): old design was font-size: 11px;*/ } /* Select menu styling */ .Select-menu-outer { background-color: var(--bg-primary); border: 1px solid var(--border-primary); margin-top: 2px; font-size: var(--font-size-sm); /* font-size: 11px; Changed to var(--font-size-sm) to match new design */ } /* Select value and label */ .Select-value, .Select-value-label { color: var(--text-primary); } /* Select input */ .Select-input input { color: var(--text-primary); font-size: var(--font-size-sm); /* font-size: 11px; changed to var(--font-size-base): old design was font-size: 11px;* */ } /* Select options */ .Select-option { background-color: var(--bg-primary); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); } .Select-option:hover { background-color: var(--bg-hover); } .Select-option.is-selected { background-color: var(--color-primary); color: var(--text-primary); } /* Dropdown container */ .dash-dropdown-container { background-color: var(--bg-primary); } /* Custom form select (date dropdowns) */ .form-select-sm { background-color: #222; color: var(--text-primary); border: 1px solid var(--border-primary); transition: var(--transition-default); } .form-select-sm:focus { background-color: #2a2a2a; border-color: var(--color-success); box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25); color: var(--text-primary); } .form-select-sm option { background-color: #222; color: var(--text-primary); } .form-select-sm:hover { border-color: var(--border-secondary); } /* ======================== */ /* EXPORT BUTTONS */ /* ======================== */ .export { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 6px 12px; border-radius: var(--radius-base); font-size: var(--font-size-base); cursor: pointer; transition: var(--transition-default); margin: var(--spacing-xs); } .export:hover { background-color: var(--bg-hover); border-color: var(--border-secondary); } /* ======================== */ /* DCC.DROPDOWN FIXES */ /* ======================== */ /* Fix focus state - prevent white background */ .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; border-color: var(--border-focus) !important; box-shadow: 0 0 0 0.25rem var(--border-focus-shadow) !important; } /* Fix selected value text color for single select */ .Select--single > .Select-control .Select-value { color: var(--text-primary) !important; } /* Ensure text remains white in all states */ .Select-value-label { color: var(--text-primary) !important; } /* Fix placeholder text color */ .Select-placeholder { color: var(--text-muted) !important; } /* Fix dropdown arrow color */ .Select-arrow { border-color: var(--text-muted) transparent transparent !important; } /* Fix dropdown arrow on hover */ .Select-control:hover .Select-arrow { border-color: var(--text-primary) transparent transparent !important; } /* Additional fixes for multi-select if needed */ .Select--multi .Select-value { background-color: var(--bg-secondary) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } .Select--multi .Select-value-icon { border-color: var(--border-primary) !important; } .Select--multi .Select-value-icon:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } /* ======================== */ /* DROPDOWN STATE FIXES - Add these to the end of 03_forms_inputs.css */ /* ======================== */ /* Fix for dropdown background turning white after callbacks */ .Select-control, .Select.is-open > .Select-control, .Select.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Ensure menu stays dark */ .Select-menu-outer, .Select.is-open .Select-menu-outer { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Fix for multi-select specific issues */ .Select--multi .Select-control, .Select--multi.is-open > .Select-control, .Select--multi.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; } /* Handle React-Select's dynamic classes */ .Select-control, .Select-control:hover, .Select--single > .Select-control, .Select--multi > .Select-control { background-color: rgb(25, 25, 25) !important; } /* Ensure dropdown arrow and clear button stay visible */ .Select-arrow-zone, .Select-clear-zone { background-color: transparent !important; } /* Handle the input field inside the dropdown */ .Select-input > input, .Select--multi .Select-input > input { background-color: transparent !important; color: var(--text-primary) !important; } /* Mobile: prevent iOS zoom on dropdown focus by ensuring 16px input font-size */ @media (max-width: 768px) { .dash-dropdown-container .Select-input input { font-size: 16px !important; } } /* Fix for when dropdown is disabled */ .Select.is-disabled > .Select-control { background-color: var(--bg-tertiary) !important; opacity: 0.6; } /* Additional specificity for problematic states */ .dash-dropdown .Select-control, .dash-dropdown .Select.is-open > .Select-control, .dash-dropdown .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; color: var(--text-primary) !important; } /* Force dark background on all Select elements regardless of state */ div[class*="Select"] .Select-control { background-color: rgb(25, 25, 25) !important; } /* Handle Dash's wrapper divs */ .dash-dropdown-container .Select-control, .dash-dropdown-container .Select-menu-outer { background-color: var(--bg-primary) !important; } /* Ensure the dropdown doesn't inherit any white backgrounds from parent elements */ .Select-control * { background-color: transparent !important; } /* Fix for dropdown options */ .Select-option, .Select-option.is-focused, .Select-option.is-selected { background-color: var(--bg-primary) !important; } .Select-option.is-focused:not(.is-selected) { background-color: var(--bg-hover) !important; } .Select-option.is-selected { background-color: var(--color-primary) !important; } /* Ensure no white background bleeds through from Bootstrap or other sources */ .form-control.Select-input, .form-control .Select-control { background-color: transparent !important; } /* ======================== */ /* SAFER DASH RADIO/CHECKBOX SPACING */ /* This version ONLY affects radio buttons and checkboxes */ /* ======================== */ /* Only target labels that CONTAIN radio buttons */ label:has(input[type="radio"]) { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } /* Only target labels that CONTAIN checkboxes */ label:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } /* Spacing for the radio/checkbox inputs themselves */ input[type="radio"], input[type="checkbox"] { margin-right: 8px !important; /*margin-left: 2px !important;*/ cursor: pointer; } /* For browsers that don't support :has() - more specific targeting */ label > input[type="radio"], label > input[type="checkbox"] { margin-right: 8px !important; } /* Only affect labels with inline-block IF they contain radio/checkbox */ label[style*="inline-block"]:has(input[type="radio"]), label[style*="inline-block"]:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; } /* Remove margin from last radio/checkbox label in a group */ div.mb-3 > label:last-child:has(input[type="radio"]), div.mb-3 > label:last-child:has(input[type="checkbox"]) { margin-right: 0 !important; } /* Alternative approach using attribute selectors for Dash components */ /* This targets RadioItems and Checklist components specifically */ div[id*="-radioitems"] label, div[id*="-checklist"] label, div[id*="radio"] label:has(input[type="radio"]), div[id*="check"] label:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; } /* Fallback for older browsers without :has() support */ /* Only applies to labels that are direct children of common Dash containers */ .dash-radioitems > label, .dash-checklist > label, div[class*="radio"] > label, div[class*="check"] > label { margin-right: 8px !important; margin-bottom: 8px !important; } /* Ensure we don't affect any other inline-block elements */ /* Reset margins for non-radio/checkbox labels */ label:not(:has(input[type="radio"])):not(:has(input[type="checkbox"])) { /* These labels keep their default styling */ }
/* 05_tables.css */
/* ======================== */ /* TABLE STYLES */ /* File: 04_tables.css */ /* ======================== */ /* ======================== */ /* STICKY COLUMNS - DEFAULT (First column) */ /* ======================== */ th:first-child, td:first-child { position: sticky !important; left: 0px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - TWO COLUMNS */ /* Apply class 'two-columns-sticky' when first column has collapse button */ /* ======================== */ .two-columns-sticky th:nth-child(1), .two-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .two-columns-sticky th:nth-child(2), .two-columns-sticky td:nth-child(2) { position: sticky !important; left: 20px; /* Adjust based on first column width - it was 31 before*/ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - THREE COLUMNS */ /* Apply class 'three-columns-sticky' when both [+] and [X] buttons present */ /* ======================== */ .three-columns-sticky th:nth-child(1), .three-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(2), .three-columns-sticky td:nth-child(2) { position: sticky !important; left: 25px; /* Width of first column */ z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(3), .three-columns-sticky td:nth-child(3) { position: sticky !important; left: 50px; /* Width of first + second columns */ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - FOUR COLUMNS */ /* Apply class 'four-columns-sticky' when [+], [✎] and [X] buttons present */ /* ======================== */ .four-columns-sticky th:nth-child(1), .four-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .four-columns-sticky th:nth-child(2), .four-columns-sticky td:nth-child(2) { position: sticky !important; left: 20px; /* Width of + column */ z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .four-columns-sticky th:nth-child(3), .four-columns-sticky td:nth-child(3) { position: sticky !important; left: 45px; /* Width of + and ✎ columns */ z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .four-columns-sticky th:nth-child(4), .four-columns-sticky td:nth-child(4) { position: sticky !important; left: 70px; /* Width of +, ✎ and X columns */ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* SPECIAL COLUMN WIDTHS */ /* ======================== */ /* Fixed width "+" column */ .plus-col, .plus-col > button { width: 20px; min-width: 20px; max-width: 20px; text-align: center; padding: 0; } /* Fixed width "✎" edit column */ .edit-col, .edit-col > button { width: 25px; min-width: 25px; max-width: 25px; text-align: center; padding: 0; } /* Fixed width "X" column */ .remove-col, .remove-col > button { width: 25px; min-width: 25px; max-width: 25px; text-align: center; padding: 0; } /* First sticky column: "+" */ th.plus-col, td.plus-col { position: sticky; left: 0; z-index: var(--z-sticky-2); background: var(--bg-secondary); } /* Second sticky column: "X" (if present) or ticker */ th.remove-col, td.remove-col { position: sticky; left: 25px; /* Exactly width of first column */ z-index: var(--z-sticky-1); background: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMN SEAM MASK */ /* Hide tiny text bleed on horizontal scroll due to subpixel rendering */ /* ======================== */ th:first-child::after, td:first-child::after { content: ""; position: absolute; top: 0; right: -2px; bottom: 0; width: 2px; background: var(--bg-secondary); pointer-events: none; } /* In multi-sticky tables, mask only on the last sticky column */ .two-columns-sticky th:nth-child(2)::after, .two-columns-sticky td:nth-child(2)::after, .three-columns-sticky th:nth-child(3)::after, .three-columns-sticky td:nth-child(3)::after, .four-columns-sticky th:nth-child(4)::after, .four-columns-sticky td:nth-child(4)::after { content: ""; position: absolute; top: 0; right: -2px; bottom: 0; width: 2px; background: var(--bg-secondary); pointer-events: none; } .two-columns-sticky th:nth-child(1)::after, .two-columns-sticky td:nth-child(1)::after, .three-columns-sticky th:nth-child(1)::after, .three-columns-sticky td:nth-child(1)::after, .three-columns-sticky th:nth-child(2)::after, .three-columns-sticky td:nth-child(2)::after, .four-columns-sticky th:nth-child(1)::after, .four-columns-sticky td:nth-child(1)::after, .four-columns-sticky th:nth-child(2)::after, .four-columns-sticky td:nth-child(2)::after, .four-columns-sticky th:nth-child(3)::after, .four-columns-sticky td:nth-child(3)::after { display: none; }
/* 06_datatable.css */
/* ======================== */ /* DASH DATATABLE STYLES - TRADITIONAL TABLE MATCHING */ /* File: 05_datatable.css */ /* ======================== */ /* Override inline styles with higher specificity */ .dash-table-container .dash-spreadsheet-container { --accent: #0d6efd !important; --border: #3a3a3a !important; --text-color: #ffffff !important; --background-color: #1a1a1a !important; --hover: #2a2a2a !important; } /* Main container */ .dash-table-container { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Table wrapper */ .dash-spreadsheet-container { border: none !important; border-radius: 0 !important; overflow: hidden !important; } /* Inner container */ .dash-spreadsheet-inner { background-color: transparent !important; } /* The actual table - TRADITIONAL GRID */ .dash-spreadsheet-inner table { background-color: transparent !important; border-collapse: collapse !important; /* No gaps between cells */ border-spacing: 0 !important; } /* ============= HEADERS - DARKER LIKE LEFT TABLE ============= */ .dash-spreadsheet .dash-header { background-color: #141414 !important; /* Darker header */ font-weight: 600 !important; } .dash-spreadsheet-inner th, .dash-header th, .dash-filter th { background-color: #141414 !important; /* Very dark header */ color: #ffffff !important; font-weight: 600 !important; padding: 8px 10px !important; /* Reduced padding to match */ border: none !important; border-bottom: 1px solid #3a3a3a !important; /* Bottom border only */ border-radius: 0 !important; /* No rounded corners */ font-size: 11px !important; /* Smaller to match */ text-align: left !important; } /* Column headers specifically */ .column-header-name { color: #ffffff !important; font-weight: 600 !important; } /* ============= DATA CELLS - TRADITIONAL STYLE ============= */ .dash-spreadsheet-inner td, .dash-cell-value, .dash-select-cell { background-color: transparent !important; /* Inherit row background */ color: #e0e0e0 !important; /* Slightly softer white */ border: none !important; border-bottom: 1px solid #2a2a2a !important; /* Horizontal lines only */ border-radius: 0 !important; /* No rounded corners */ padding: 6px 10px !important; /* Tighter padding */ font-size: 11px !important; font-weight: 400 !important; /* Regular weight */ line-height: 1.4 !important; /* Tighter line height */ transition: none !important; /* Remove animations */ } /* Cell content */ .dash-cell-value { background-color: transparent !important; border: none !important; padding: 0 !important; } /* ============= ROW BACKGROUNDS - SUBTLE STRIPING ============= */ .dash-spreadsheet-inner tbody tr { background-color: #1a1a1a !important; /* Base background */ } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: #1d1d1d !important; /* Very subtle stripe */ } /* ============= HOVER STATES - SUBTLE ============= */ .dash-spreadsheet-inner tbody tr:hover { background-color: #252525 !important; /* Subtle hover */ } .dash-spreadsheet-inner tbody tr:hover td { background-color: transparent !important; /* Cells inherit row background */ transform: none !important; /* No scaling */ box-shadow: none !important; /* No shadow */ } /* ============= SELECTED/ACTIVE CELLS ============= */ .dash-spreadsheet td.focused { background-color: rgba(13, 110, 253, 0.15) !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet td.cell--selected { background-color: rgba(13, 110, 253, 0.08) !important; } /* ============= FILTERS ============= */ .dash-filter { background-color: #1a1a1a !important; } .dash-filter input { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 2px !important; /* Minimal rounding */ padding: 4px 6px !important; font-size: 11px !important; } .dash-filter input:focus { border-color: #0d6efd !important; outline: none !important; } .dash-filter--case { background-color: #1a1a1a !important; } /* ============= PAGINATION CONTAINER ============= */ .previous-next-container { background-color: #1a1a1a !important; padding: 8px !important; border-top: 1px solid #3a3a3a !important; display: flex !important; align-items: center !important; gap: 4px !important; } /* ============= PAGINATION BUTTONS - TRADITIONAL ============= */ .previous-page, .next-page, .first-page, .last-page, .page-number { border-radius: 3px !important; /* Minimal rounding */ background: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; padding: 4px 8px !important; height: 28px !important; /* Smaller height */ box-sizing: border-box !important; font-size: 11px !important; font-weight: 400 !important; line-height: 20px !important; transition: background-color 0.15s ease !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 2px !important; } .page-number:hover, .previous-page:hover:not([disabled]), .next-page:hover:not([disabled]), .first-page:hover:not([disabled]), .last-page:hover:not([disabled]) { background: #2a2a2a !important; border-color: #444 !important; transform: none !important; /* No movement */ box-shadow: none !important; /* No shadow */ } /* Disabled state */ .previous-page[disabled], .next-page[disabled], .first-page[disabled], .last-page[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; } /* ============= CURRENT PAGE INPUT - TRADITIONAL ============= */ /* Remove pseudo-elements */ .current-page-container::before, .current-page-container::after, .current-page-container input::before, .current-page-container input::after, .current-page-container *::before, .current-page-container *::after { content: none !important; display: none !important; } /* Container alignment */ .current-page-container { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; background: transparent !important; height: 28px !important; line-height: 28px !important; margin: 0 2px !important; } /* Hide duplicate elements */ .current-page-container > *:not(input) { display: none !important; } /* Traditional input style */ .current-page-container input { border-radius: 3px !important; background: #0d6efd !important; border: 1px solid #0d6efd !important; color: #ffffff !important; font-weight: 500 !important; padding: 4px 8px !important; width: 50px !important; height: 28px !important; box-sizing: border-box !important; text-align: center !important; font-size: 11px !important; line-height: 20px !important; transition: background-color 0.15s ease !important; box-shadow: none !important; position: relative !important; top: 0 !important; margin: 0 !important; vertical-align: middle !important; z-index: 1 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(0) !important; } /* Subtle hover effect */ .current-page-container input:hover, .current-page-container input:focus { background: #0a58ca !important; border-color: #0a58ca !important; box-shadow: none !important; transform: none !important; outline: none !important; } /* ============= SORT INDICATORS ============= */ .sort { color: #0d6efd !important; font-weight: 600 !important; padding-left: 4px !important; font-size: 10px !important; } .sort.descending::after { content: ' ↓' !important; } .sort.ascending::after { content: ' ↑' !important; } /* ============= SCROLLBARS ============= */ .dash-spreadsheet-inner::-webkit-scrollbar, .dash-table-viewport::-webkit-scrollbar { width: 8px !important; height: 8px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-track, .dash-table-viewport::-webkit-scrollbar-track { background: #1a1a1a !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb, .dash-table-viewport::-webkit-scrollbar-thumb { background: #3a3a3a !important; border-radius: 2px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover, .dash-table-viewport::-webkit-scrollbar-thumb:hover { background: #4a4a4a !important; } /* ============= EDITABLE CELLS ============= */ .dash-spreadsheet-inner .cell--editing { background-color: #1a1a1a !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet-inner .cell--editing input { background-color: transparent !important; color: #ffffff !important; font-size: 11px !important; } /* ============= DROPDOWN CELLS ============= */ .dash-dropdown { background-color: #1a1a1a !important; } .Select-control { background-color: #1a1a1a !important; border-color: #3a3a3a !important; } .Select-menu-outer { background-color: #1a1a1a !important; border-color: #3a3a3a !important; color: #ffffff !important; } /* ============= FORCE OVERRIDES ============= */ div.dash-table-container * { background-color: inherit !important; color: inherit !important; } div.dash-table-container table, div.dash-table-container tbody, div.dash-table-container thead, div.dash-table-container tr { background-color: transparent !important; } /* ============= EXPORT BUTTONS ============= */ .export { background-color: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 3px !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer !important; font-size: 11px !important; } .export:hover { background-color: #2a2a2a !important; border-color: #444 !important; } /* ============= ENSURE TEXT CONSISTENCY ============= */ .dash-spreadsheet-inner td, .dash-spreadsheet-inner th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } /* ============= HORIZONTAL SCROLLING FIX ============= */ /* Enable horizontal scrolling for all DataTables */ .dash-table-container { overflow-x: auto !important; width: 100% !important; } .dash-spreadsheet-container { overflow-x: auto !important; } /* Ensure the table can expand beyond container width */ .dash-table-container .dash-spreadsheet-inner { min-width: 100%; width: auto !important; } /* Optional: Ensure viewport scrolling works properly */ .dash-table-viewport { overflow-x: auto !important; } /* Optional: Fix for when table is inside a Bootstrap column */ .col .dash-table-container, .col-md-6 .dash-table-container, .col-lg-6 .dash-table-container, [class*="col-"] .dash-table-container { max-width: 100%; overflow-x: auto !important; } /* ============= FIX FOR STICKY COLUMNS IN DATATABLE ============= */ /* Ensure sticky columns have opaque backgrounds */ /* First sticky column */ .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: #252525 !important; /* Opaque background matching your theme */ position: sticky !important; left: 0; z-index: 2; } /* For two-columns-sticky class */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 3; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 31px; z-index: 2; } /* For three-columns-sticky class */ .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 4; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 25px; z-index: 3; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3) { background-color: #252525 !important; position: sticky !important; left: 50px; z-index: 2; } /* Ensure sticky headers also have opaque backgrounds */ .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: #141414 !important; /* Match your header background */ } /* Handle hover states for sticky columns */ .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: #2a2a2a !important; /* Slightly lighter on hover */ } /* Ensure cell content within sticky columns doesn't override */ .dash-spreadsheet-inner td:first-child .dash-cell-value, .dash-spreadsheet-inner td:nth-child(2) .dash-cell-value, .dash-spreadsheet-inner td:nth-child(3) .dash-cell-value { background-color: transparent !important; /* Keep content transparent */ } /* Add shadow to sticky columns for better visual separation */ .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* For multiple sticky columns, only add shadow to the last sticky column */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3)::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* Remove shadow from non-last sticky columns in multi-sticky setups */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after { display: none; }
/* 07_components.css */
/* ======================== */ /* UI COMPONENTS */ /* File: 05_components.css */ /* ======================== */ /* ======================== */ /* CARD HOVER EFFECTS */ /* ======================== */ /* Hover effect for cards with 'hover-card' class */ .hover-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-card:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); } /* Custom card shadow */ .custom-card-shadow { box-shadow: var(--shadow-default); } /* ETF module cards use the same subtle shadow treatment as other app cards */ #etf-module .card { box-shadow: var(--shadow-default); } /* ======================== */ /* LINK HOVER EFFECTS */ /* ======================== */ .hover-link:hover { cursor: pointer; } /* ======================== */ /* NAVIGATION TABS */ /* ======================== */ /* Pill-style modern tabs */ .nav-tabs { border-bottom: none; background-color: rgba(0, 0, 0, 0.2); padding: var(--spacing-sm); border-radius: var(--radius-xl); display: inline-flex; gap: var(--spacing-xs); } .nav-tabs .nav-link { border: none; border-radius: var(--radius-lg); background-color: transparent; color: rgba(255, 255, 255, 0.7); padding: 10px 18px; transition: var(--transition-slow); font-size: var(--font-size-md); font-weight: 500; } .nav-tabs .nav-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nav-tabs .nav-link.active { background-color: var(--color-primary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3); } /* ======================== */ /* TOOLTIPS */ /* ======================== */ .dash-tooltip { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-base); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); box-shadow: var(--shadow-default); } /* ======================== */ /* LOADING STATE */ /* ======================== */ .dash-loading { background-color: rgba(35, 35, 35, 0.9); color: var(--text-primary); } .dash-loading-spinner { border-color: var(--border-primary); border-top-color: var(--color-primary); } /* ======================== */ /* SCORE CARD HOVER */ /* ======================== */ /* Hover effect for clickable score cards */ [id^="score-card-click"] .card:hover, [id*="score-card-click"] .card:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); }
/* 08_date_picker.css */
/* ======================== */ /* DATE PICKER COMPONENT */ /* File: 06_date-picker.css */ /* ======================== */ /* Date input fields */ .DateInput_input { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } /* Date input variant (used by some date pickers) */ .DateInput_input_1 { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } .DateInput_input__focused { border-color: var(--border-focus); background-color: #2b2b2b; } /* Date picker container and wrapper */ .SingleDatePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } .DateRangePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } /* Calendar base */ .DayPicker { background-color: #1a1a1a; } .DayPicker__horizontal { background-color: #1a1a1a; } /* Month container */ .CalendarMonth { background-color: #1a1a1a; padding: 0; } /* Calendar month caption - THIS IS THE YEAR/MONTH HEADER */ .CalendarMonth_caption { color: var(--text-primary); background-color: #1a1a1a; font-weight: 600; font-size: var(--font-size-xl); padding: 10px 0; margin-bottom: 5px; } /* Navigation arrows */ .DayPickerNavigation_button { background-color: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); } .DayPickerNavigation_button:hover { background-color: var(--bg-hover); } .DayPickerNavigation_svg { fill: var(--text-primary); } /* Week headers (Su Mo Tu etc) - HIDDEN */ .DayPicker_weekHeader { display: none !important; } .DayPicker_weekHeader_ul { display: none !important; } .DayPicker_weekHeader_li { display: none !important; } /* Calendar table */ .CalendarMonth_table { background-color: #1a1a1a; margin: 0; margin-top: 5px; /* Add space above the date grid */ } /* Calendar week (tr elements) */ .CalendarWeek { background-color: #1a1a1a; } /* Calendar days */ .CalendarDay__default { background-color: #1a1a1a; color: var(--text-primary); border: 1px solid #2a2a2a; font-weight: 400; height: 35px; vertical-align: middle; } .CalendarDay__default:hover { background-color: #2a2a2a; color: var(--text-primary); border: 1px solid var(--border-primary); } /* Fix for the container edges */ .DayPicker_transitionContainer { background-color: #1a1a1a; padding-bottom: 10px; } .DayPickerKeyboardShortcuts_buttonReset { display: none !important; /* Hide the question mark button */ } /* Today */ .CalendarDay__today { background-color: #2a2a2a; color: var(--color-info-hover); font-weight: 600; } /* Selected day */ .CalendarDay__selected { background-color: var(--color-primary); color: var(--text-primary); border: 1px solid var(--color-primary); font-weight: 600; } .CalendarDay__selected:hover { background-color: var(--color-primary-hover); border: 1px solid var(--color-primary-hover); } /* Selected span */ .CalendarDay__selected_span { background-color: rgba(13, 110, 253, 0.2); color: var(--text-primary); border: 1px solid rgba(13, 110, 253, 0.3); } /* Hovered span */ .CalendarDay__hovered_span { background-color: rgba(13, 110, 253, 0.1); border: 1px solid rgba(13, 110, 253, 0.2); } /* Blocked/disabled days */ .CalendarDay__blocked_calendar { background-color: #1a1a1a; color: var(--border-primary); text-decoration: line-through; } /* Outside month days */ .CalendarDay__blocked_out_of_range { background-color: #1a1a1a; color: #333; } /* Additional fixes for white edges */ .DateRangePickerInput { background-color: #1a1a1a; } .DateRangePicker { background-color: #1a1a1a; } .DayPicker__withBorder { background-color: #1a1a1a; box-shadow: none; } /* Force dark background on all date picker elements */ .SingleDatePicker, .SingleDatePickerInput { background-color: transparent; } /* Override any default white backgrounds */ div[class*="DayPicker"], div[class*="CalendarMonth"], div[class*="CalendarDay"] { background-color: #1a1a1a; } /* Fix spacing to prevent first row from being hidden */ .CalendarMonthGrid { background-color: #1a1a1a; } .CalendarMonthGrid__horizontal { background-color: #1a1a1a; } /* Ensure proper spacing for the first week */ .CalendarMonth tbody { background-color: #1a1a1a; } .CalendarMonth_table tbody tr:first-child { height: auto; min-height: 35px; }
/* 09_modals.css */
/* ======================== */ /* MODAL DIALOGS */ /* File: 07_modals.css */ /* ======================== */ /* Modal base styling */ .modal-content { background-color: var(--bg-modal); border: 1px solid var(--border-primary); } .modal-header { background-color: var(--bg-modal-header); border-bottom: 1px solid var(--border-primary); color: var(--text-primary); /* This will use white ?*/ } .modal-body { background-color: var(--bg-modal); color: var(--text-secondary); } .modal-footer { background-color: var(--bg-modal-header); border-top: 1px solid var(--border-primary); } /* Close button */ #close-learn-more { background-color: var(--border-primary); border-color: var(--border-primary); } #close-learn-more:hover { background-color: #555; border-color: #555; } /* ======================== */ /* LEARN MORE MODAL SPECIFIC */ /* ======================== */ /* Learn More content styling */ .learn-more-content, .educational-content { font-size: var(--font-size-xl); line-height: 1.6; color: var(--text-secondary); } .learn-more-content h5, .educational-content h5 { color: var(--color-primary-light); font-weight: 600; border-bottom: 2px solid var(--border-primary); padding-bottom: var(--spacing-sm); } .learn-more-content h6, .educational-content h6 { color: #ffcc66; font-size: 18px; margin-top: var(--spacing-xl); } .learn-more-content p, .educational-content p { color: var(--text-tertiary); margin-bottom: 15px; } .learn-more-content ul, .educational-content ul { margin-left: var(--spacing-xl); margin-bottom: 15px; } .learn-more-content li, .educational-content li { margin-bottom: var(--spacing-sm); color: var(--text-tertiary); } .learn-more-content strong, .educational-content strong { color: var(--color-warning-hover); font-weight: 600; } /* Shared disclaimer block at the end of Learn More modals */ .modal-body hr:last-of-type { margin: 1.75rem auto 0.85rem; max-width: 180px; border-top: 1px solid var(--border-primary); opacity: 0.65; } .modal-body hr:last-of-type ~ h3, .modal-body hr:last-of-type ~ h4, .modal-body hr:last-of-type ~ h5, .modal-body hr:last-of-type ~ h6 { border-bottom: none; padding-bottom: 0; margin-top: 0; margin-bottom: 0.45rem; color: var(--text-muted); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .modal-body hr:last-of-type ~ p, .modal-body hr:last-of-type ~ ul, .modal-body hr:last-of-type ~ ol { max-width: 42rem; margin-left: auto; margin-right: auto; color: var(--text-muted); font-size: var(--font-size-base); line-height: 1.5; text-align: center; } .modal-body hr:last-of-type ~ p em { color: inherit; } /* Learn More Button */ #learn-more-button { border-color: var(--color-primary-light); color: var(--color-primary-light); font-weight: 500; transition: var(--transition-slow); } #learn-more-button:hover { background-color: var(--color-primary-light); color: var(--bg-modal-header); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 179, 255, 0.4); } /* ======================== */ /* MODAL SCROLLBAR */ /* ======================== */ .modal-body::-webkit-scrollbar { width: 10px; } .modal-body::-webkit-scrollbar-track { background: var(--bg-modal-header); } .modal-body::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 5px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #555; }
/* 10_scrollbars.css */
/* ======================== */ /* CUSTOM SCROLLBARS */ /* File: 08_scrollbars.css */ /* ======================== */ /* Dash DataTable scrollbars */ .dash-spreadsheet-container::-webkit-scrollbar, .dash-spreadsheet-inner::-webkit-scrollbar { width: 8px; height: 8px; } .dash-spreadsheet-container::-webkit-scrollbar-track, .dash-spreadsheet-inner::-webkit-scrollbar-track { background-color: var(--bg-primary); } .dash-spreadsheet-container::-webkit-scrollbar-thumb, .dash-spreadsheet-inner::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover, .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); }
/* 11_dbc_table.css */
/* ======================== */ /* DASH BOOTSTRAP COMPONENTS TABLE STYLES */ /* File: 10_dbc_table.css */ /* ======================== */ /* ======================== */ /* TABLE BODY STYLES */ /* ======================== */ /* Base table body cells */ .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); /* 12px by default */ color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); /* 8px 12px */ vertical-align: middle; } /* Alternative: If you want different font sizes for different screen sizes */ @media (min-width: 1px) { .table tbody td { font-size: var(--font-size-xs); /* 10px on mobile */ } } @media (min-width: 768px) { .table tbody td { font-size: var(--font-size-sm); /* 11px on tablet */ } } @media (min-width: 992px) { .table tbody td { font-size: var(--font-size-base); /* 12px on desktop */ } } /* ======================== */ /* TABLE HEADER STYLES */ /* ======================== */ /* Table header cells */ .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-md); /* 13px */ font-weight: 600; color: var(--text-primary); /*text-transform: uppercase; Optional: makes headers stand out */ letter-spacing: 0.5px; /* Optional: adds spacing between letters */ padding: var(--spacing-md) var(--spacing-md); /* 12px padding */ vertical-align: middle; border-bottom: 2px solid var(--border-primary); /* Thicker border for header */ } /* Alternative header styling (remove text-transform if not wanted) */ .table thead th { background-color: var(--bg-secondary); /* Slightly different background */ position: relative; } /* ======================== */ /* HOVER EFFECTS */ /* ======================== */ /* Row hover effect for better readability */ .table tbody tr:hover { background-color: var(--bg-hover) !important; transition: var(--transition-default); } /* Ensure text remains readable on hover */ .table tbody tr:hover td { color: var(--text-primary); } /* ======================== */ /* STRIPED TABLE VARIANT */ /* ======================== */ /* If using striped tables */ .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } .table-striped tbody tr:hover { background-color: var(--bg-hover) !important; } /* ======================== */ /* BORDERED TABLE VARIANT */ /* ======================== */ .table-bordered { border: 1px solid var(--border-primary); } .table-bordered td, .table-bordered th { border: 1px solid var(--border-primary); } /* ======================== */ /* SMALL/COMPACT TABLE VARIANT */ /* ======================== */ .table-sm td, .table-sm th { padding: var(--spacing-xs) var(--spacing-sm); /* 4px 8px for compact */ font-size: var(--font-size-sm); /* 11px for compact */ } /* ======================== */ /* RESPONSIVE TABLE WRAPPER */ /* ======================== */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Custom scrollbar for responsive tables */ .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background-color: var(--bg-primary); } .table-responsive::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .table-responsive::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* ======================== */ /* SPECIFIC DBC.TABLE TARGETING */ /* ======================== */ /* More specific selectors for dbc.Table if needed */ div[class*="dash-table"] .table tbody td, div[class*="dash-bootstrap"] .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-base); } div[class*="dash-table"] .table thead th, div[class*="dash-bootstrap"] .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-md); font-weight: 600; } /* ======================== */ /* CUSTOM FONT SIZE CLASSES */ /* ======================== */ /* Use these classes to override default sizes */ .table-font-xs tbody td { font-size: var(--font-size-xs) !important; } /* 10px */ .table-font-sm tbody td { font-size: var(--font-size-sm) !important; } /* 11px */ .table-font-md tbody td { font-size: var(--font-size-md) !important; } /* 13px */ .table-font-lg tbody td { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xs thead th { font-size: var(--font-size-sm) !important; } /* 11px */ .table-header-sm thead th { font-size: var(--font-size-base) !important; } /* 12px */ .table-header-md thead th { font-size: var(--font-size-md) !important; } /* 13px */ .table-header-lg thead th { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xl thead th { font-size: var(--font-size-xl) !important; } /* 16px */ /* ======================== */ /* ALIGNMENT UTILITIES */ /* ======================== */ .table .text-left { text-align: left !important; } .table .text-center { text-align: center !important; } .table .text-right { text-align: right !important; } .table .align-top { vertical-align: top !important; } .table .align-middle { vertical-align: middle !important; } .table .align-bottom { vertical-align: bottom !important; } /* ======================== */ /* COLOR CODING FOR VALUES (matching DataTable) */ /* ======================== */ .table .cell-value-positive, .table .text-success { color: var(--value-positive); font-weight: 500; } .table .cell-value-negative, .table .text-danger { color: var(--value-negative); font-weight: 500; }
/* 12_sticky_headers.css */
/* ======================== */ /* STICKY TABLE HEADERS - Page Scroll */ /* File: 12_sticky_headers.css */ /* Opt-in via .sticky-header-enabled class */ /* ======================== */ /* * Note: Most styling is done inline in JS for precise control. * This file provides additional polish and theme matching. */ /* Sticky header wrapper - fixed at top of viewport */ .sticky-header-wrapper { background-color: var(--bg-secondary, #1a1a1a); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* Inner container */ .sticky-header-inner { /* Hide scrollbar but keep scroll functionality */ scrollbar-width: none; -ms-overflow-style: none; } .sticky-header-inner::-webkit-scrollbar { display: none; } /* Ensure cloned header matches original styling */ .sticky-header-wrapper table { margin-bottom: 0 !important; } .sticky-header-wrapper thead th, .sticky-header-wrapper .dash-header th { background-color: var(--bg-secondary, #141414) !important; border-bottom: 2px solid var(--border-primary, #3a3a3a) !important; } /* Match DataTable header styling */ .sticky-header-wrapper .dash-spreadsheet-inner th { background-color: #141414 !important; color: #ffffff !important; font-weight: 600 !important; padding: 8px 10px !important; border: none !important; border-bottom: 1px solid #3a3a3a !important; font-size: 11px !important; } /* Match dbc.Table header styling */ .sticky-header-wrapper .table thead th { background-color: var(--bg-secondary, #1a1a1a) !important; font-weight: 600; color: var(--text-primary, #ffffff); border-bottom: 2px solid var(--border-primary, #3a3a3a); } /* Preserve sticky column styling in cloned header */ .sticky-header-wrapper th:first-child { position: sticky !important; left: 0; z-index: 2; background-color: var(--bg-secondary, #141414) !important; } .sticky-header-wrapper .two-columns-sticky th:nth-child(1), .sticky-header-wrapper .two-columns-sticky th:nth-child(2) { position: sticky !important; background-color: var(--bg-secondary, #141414) !important; } .sticky-header-wrapper .two-columns-sticky th:nth-child(1) { left: 0; z-index: 3; } .sticky-header-wrapper .two-columns-sticky th:nth-child(2) { left: 20px; z-index: 2; } .sticky-header-wrapper .three-columns-sticky th:nth-child(1), .sticky-header-wrapper .three-columns-sticky th:nth-child(2), .sticky-header-wrapper .three-columns-sticky th:nth-child(3) { position: sticky !important; background-color: var(--bg-secondary, #141414) !important; } .sticky-header-wrapper .three-columns-sticky th:nth-child(1) { left: 0; z-index: 4; } .sticky-header-wrapper .three-columns-sticky th:nth-child(2) { left: 25px; z-index: 3; } .sticky-header-wrapper .three-columns-sticky th:nth-child(3) { left: 50px; z-index: 2; } .sticky-header-wrapper .four-columns-sticky th:nth-child(1), .sticky-header-wrapper .four-columns-sticky th:nth-child(2), .sticky-header-wrapper .four-columns-sticky th:nth-child(3), .sticky-header-wrapper .four-columns-sticky th:nth-child(4) { position: sticky !important; background-color: var(--bg-secondary, #141414) !important; } .sticky-header-wrapper .four-columns-sticky th:nth-child(1) { left: 0; z-index: 5; } .sticky-header-wrapper .four-columns-sticky th:nth-child(2) { left: 20px; z-index: 4; } .sticky-header-wrapper .four-columns-sticky th:nth-child(3) { left: 45px; z-index: 3; } .sticky-header-wrapper .four-columns-sticky th:nth-child(4) { left: 70px; z-index: 2; } /* Hide tiny text bleed on the sticky boundary while horizontally scrolling */ .sticky-header-wrapper th:first-child::after { content: ""; position: absolute; top: 0; right: -2px; bottom: 0; width: 2px; background: var(--bg-secondary, #141414); pointer-events: none; } /* In multi-sticky headers, mask only on the last sticky column */ .sticky-header-wrapper .two-columns-sticky th:nth-child(2)::after, .sticky-header-wrapper .three-columns-sticky th:nth-child(3)::after, .sticky-header-wrapper .four-columns-sticky th:nth-child(4)::after { content: ""; position: absolute; top: 0; right: -2px; bottom: 0; width: 2px; background: var(--bg-secondary, #141414); pointer-events: none; } .sticky-header-wrapper .two-columns-sticky th:nth-child(1)::after, .sticky-header-wrapper .three-columns-sticky th:nth-child(1)::after, .sticky-header-wrapper .three-columns-sticky th:nth-child(2)::after, .sticky-header-wrapper .four-columns-sticky th:nth-child(1)::after, .sticky-header-wrapper .four-columns-sticky th:nth-child(2)::after, .sticky-header-wrapper .four-columns-sticky th:nth-child(3)::after { display: none; }
/* 13_home_not_authed.css */
/* ============================= */ /* DYNAMIC FONT SIZE VARIABLES */ /* ============================= */ /* Base viewport width for calculations */ #home-not-authed{ /* Base font sizes that scale with viewport */ --vw-unit: 0.5vw; /* Define base sizes as percentage of viewport width */ --text-scale-xs: calc(1.5 * var(--vw-unit)); --text-scale-sm: calc(2 * var(--vw-unit)); --text-scale-base: calc(2.5 * var(--vw-unit)); --text-scale-md: calc(3 * var(--vw-unit)); --text-scale-lg: calc(4 * var(--vw-unit)); --text-scale-xl: calc(5 * var(--vw-unit)); --text-scale-2xl: calc(6 * var(--vw-unit)); --text-scale-3xl: calc(8 * var(--vw-unit)); --text-scale-hero: calc(10 * var(--vw-unit)); /* Apply min/max constraints */ --text-xs: clamp(10px, var(--text-scale-xs), 18px); --text-sm: clamp(14px, var(--text-scale-sm), 20px); --text-base: clamp(16px, var(--text-scale-base), 24px); --text-md: clamp(16px, var(--text-scale-md), 28px); --text-lg: clamp(20px, var(--text-scale-lg), 32px); --text-xl: clamp(24px, var(--text-scale-xl), 40px); --text-2xl: clamp(30px, var(--text-scale-2xl), 56px); --text-3xl: clamp(40px, var(--text-scale-3xl), 72px); --text-hero: clamp(50px, var(--text-scale-hero), 96px); /* ============================= */ /* PADDING VARIABLES */ /* ============================= */ /* Base padding unit - easily change this to scale all padding */ --padding-base: 40px; /* Padding scale system */ --padding-xs: calc(var(--padding-base) * 0.25); /* 5px */ --padding-sm: calc(var(--padding-base) * 0.5); /* 10px */ --padding-md: calc(var(--padding-base) * 1); /* 20px */ --padding-lg: calc(var(--padding-base) * 1.5); /* 30px */ --padding-xl: calc(var(--padding-base) * 2); /* 40px */ --padding-2xl: calc(var(--padding-base) * 3); /* 60px */ /* Card-specific padding - using md as default */ --card-padding: var(--padding-md); --section-padding: var(--padding-2xl); } /* Override for medium screens */ @media (max-width: 768px) { #home-not-authed{ --text-scale-xs: calc(3.5 * var(--vw-unit)); --text-scale-sm: calc(4 * var(--vw-unit)); --text-scale-base: calc(4.5 * var(--vw-unit)); --text-scale-md: calc(5 * var(--vw-unit)); --text-scale-lg: calc(6 * var(--vw-unit)); --text-scale-xl: calc(7 * var(--vw-unit)); --text-scale-2xl: calc(9 * var(--vw-unit)); --text-scale-3xl: calc(11 * var(--vw-unit)); --text-scale-hero: calc(13 * var(--vw-unit)); /* Adjust padding for tablets */ --padding-base: 30px; } } /* Override for small screens */ @media (max-width: 480px) { #home-not-authed{ --text-scale-xs: calc(4 * var(--vw-unit)); --text-scale-sm: calc(4.5 * var(--vw-unit)); --text-scale-base: calc(5 * var(--vw-unit)); --text-scale-md: calc(5.5 * var(--vw-unit)); --text-scale-lg: calc(6.5 * var(--vw-unit)); --text-scale-xl: calc(8 * var(--vw-unit)); --text-scale-2xl: calc(10 * var(--vw-unit)); --text-scale-3xl: calc(12 * var(--vw-unit)); --text-scale-hero: calc(14 * var(--vw-unit)); /* Adjust padding for mobile */ --padding-base: 20px; } } /* ============================= */ /* RESET AND BASE STYLES */ /* ============================= */ #home-not-authed *{ margin: 0; padding: 0; box-sizing: border-box; } #home-not-authed{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #000; color: #fff; overflow-x: hidden; line-height: 1.5; font-size: var(--text-base) !important; } /* ============================= */ /* CONTAINER AND SECTIONS */ /* ============================= */ #home-not-authed .container{ max-width: 1080px; margin: 0 auto; background: #0a0a0a; } /* Large spacing between sections for one-at-a-time viewing */ #home-not-authed .section{ min-height: 100vh; padding: var(--section-padding) var(--padding-xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; background: #0a0a0a; border-bottom: 2px solid #000; } @media (max-width: 768px) { #home-not-authed .section{ padding: var(--section-padding) var(--padding-lg); min-height: 100vh; } } @media (max-width: 480px) { #home-not-authed .section{ padding: var(--section-padding) var(--padding-md); min-height: 100vh; } } /* ============================= */ /* LOGO STYLES */ /* ============================= */ #home-not-authed .logo{ width: 100px; height: 100px; background: #E85D4E; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; margin: 0 auto 40px; font-size: var(--text-3xl) !important; } /* ============================= */ /* TEXT UTILITIES */ /* ============================= */ #home-not-authed .highlight{ color: #E85D4E; } /* Force all inline text to use our sizing */ #home-not-authed div, #home-not-authed span, #home-not-authed p{ font-size: inherit !important; } /* ============================= */ /* STATS GRID */ /* ============================= */ #home-not-authed .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 40px; max-width: 400px; } @media (max-width: 480px) { #home-not-authed .stats-grid{ gap: 20px; } } #home-not-authed .stat-item{ background: #1a1a1a; padding: var(--card-padding); border-radius: 20px; text-align: center; } @media (max-width: 480px) { #home-not-authed .stat-item{ padding: var(--card-padding); } } /* ============================= */ /* COMPARISON CARDS */ /* ============================= */ #home-not-authed .comparison-container{ display: flex; gap: 40px; margin: 0 auto; flex-wrap: wrap; justify-content: center; width: 100%; /* Add this */ max-width: 100%; /* Add this */ padding: 0; /* Add this to ensure no hidden padding */ } #home-not-authed .card{ flex: 1; min-width: 300px; padding: var(--padding-lg) var(--card-padding); border-radius: 20px; background: #1a1a1a; text-align: left; } @media (max-width: 368px) { #home-not-authed .card{ min-width: 100%; } } #home-not-authed .card-highlighted{ border: 2px solid #E85D4E; } #home-not-authed .card-title{ margin: 0 0 20px 0; opacity: 0.6; text-transform: uppercase; letter-spacing: 2px; font-size: var(--text-lg) !important; } #home-not-authed .card-highlighted .card-title{ color: #E85D4E; opacity: 1; } /* Feature item with proper positioning */ #home-not-authed .feature-item{ margin: 20px 0; display: flex; align-items: center; gap: 15px; font-size: var(--text-base) !important; position: relative; padding-left: 35px; } /* Base for all ::before elements */ #home-not-authed .feature-item::before{ content: ''; position: absolute; left: 0; width: 20px; height: 20px; } /* X mark for traditional card */ #home-not-authed .card:not(.card-highlighted) .feature-item::before{ content: '×'; color: #E85D4E; font-size: 28px; opacity: 0.5; line-height: 20px; text-align: center; } /* Check mark for highlighted card */ #home-not-authed .card-highlighted .feature-item::before{ content: ''; width: 18px; height: 9px; border-left: 2px solid #4CAF50; border-bottom: 2px solid #4CAF50; transform: rotate(-45deg); position: absolute; left: 4px; top: 5px; opacity: 1; } /* ============================= */ /* TOOLS LIST */ /* ============================= */ #home-not-authed .tools-container{ margin: 20px auto; max-width: 600px; } #home-not-authed .tool-item{ display: flex; align-items: center; gap: 30px; margin: 40px 0; text-align: left; } @media (max-width: 480px) { #home-not-authed .tool-item{ gap: 20px; margin: 30px 0; } } #home-not-authed .tool-icon{ width: 42px; /* was 60px */ height: 42px; /* was 60px */ background: #1a1a1a; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 768px) { #home-not-authed .tool-icon{ width: 35px; /* was 50px */ height: 35px; /* was 50px */ } } @media (max-width: 480px) { #home-not-authed .tool-icon{ width: 28px; /* was 40px */ height: 28px; /* was 40px */ } } /* Icon Shapes */ #home-not-authed .icon-circle{ width: 28px; /* was 40px */ height: 28px; /* was 40px */ background: #E85D4E; border-radius: 50%; } #home-not-authed .icon-square{ width: 28px; /* was 40px */ height: 28px; /* was 40px */ background: transparent; border: 2px solid #E85D4E; /* reduced from 3px */ } #home-not-authed .icon-diamond{ width: 25px; /* was 35px */ height: 25px; /* was 35px */ background: #E85D4E; transform: rotate(45deg); } #home-not-authed .icon-triangle{ width: 0; height: 0; border-left: 14px solid transparent; /* was 20px */ border-right: 14px solid transparent; /* was 20px */ border-bottom: 25px solid #E85D4E; /* was 35px */ } #home-not-authed .icon-grid{ display: grid; grid-template-columns: repeat(3, 8px); /* was 12px */ grid-template-rows: repeat(3, 8px); /* was 12px */ gap: 2px; /* was 3px */ } #home-not-authed .grid-cell{ background: #E85D4E; } /* Scale icons for tablets */ @media (max-width: 768px) { #home-not-authed .icon-circle{ width: 25px; height: 25px; } /* was 35px */ #home-not-authed .icon-square{ width: 25px; height: 25px; } /* was 35px */ #home-not-authed .icon-diamond{ width: 21px; height: 21px; } /* was 30px */ #home-not-authed .icon-triangle{ border-left: 12px solid transparent; /* was 17px */ border-right: 12px solid transparent; /* was 17px */ border-bottom: 21px solid #E85D4E; /* was 30px */ } #home-not-authed .icon-grid{ grid-template-columns: repeat(3, 7px); /* was 10px */ grid-template-rows: repeat(3, 7px); /* was 10px */ } } /* Scale icons for mobile */ @media (max-width: 480px) { #home-not-authed .icon-circle{ width: 20px; height: 20px; } /* was 28px */ #home-not-authed .icon-square{ width: 20px; height: 20px; border-width: 2px; } /* was 28px */ #home-not-authed .icon-diamond{ width: 17px; height: 17px; } /* was 24px */ #home-not-authed .icon-triangle{ border-left: 10px solid transparent; /* was 14px */ border-right: 10px solid transparent; /* was 14px */ border-bottom: 17px solid #E85D4E; /* was 24px */ } #home-not-authed .icon-grid{ grid-template-columns: repeat(3, 6px); /* was 8px */ grid-template-rows: repeat(3, 6px); /* was 8px */ gap: 1px; /* was 2px */ } } /* ============================= */ /* CTA BUTTON */ /* ============================= */ #home-not-authed .cta-button{ background: #fff; color: #000; padding: 25px 70px; border-radius: 50px; text-decoration: none; display: inline-block; font-weight: 500; transition: transform 0.2s; border: none; cursor: pointer; margin-top: 40px; font-size: var(--text-md) !important; } @media (max-width: 480px) { #home-not-authed .cta-button{ padding: 20px 50px; } } #home-not-authed .cta-button:hover{ transform: scale(1.05); } /* ============================= */ /* DASHBOARD PREVIEW */ /* ============================= */ #home-not-authed .dashboard-preview{ width: 90%; max-width: 500px; background: #1a1a1a; border-radius: 20px; padding: var(--card-padding); margin: 40px auto 0; } #home-not-authed .chart-area{ height: 150px; background: #0a0a0a; border-radius: 10px; margin-bottom: 30px; position: relative; overflow: hidden; } #home-not-authed .chart-visual{ position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(135deg, #E85D4E 0%, #E85D4E 50%, #4CAF50 100%); clip-path: polygon(0 100%, 0 60%, 30% 70%, 50% 40%, 70% 50%, 100% 20%, 100% 100%); } #home-not-authed .metrics-row{ display: flex; justify-content: space-around; gap: 10px; } #home-not-authed .metric{ text-align: center; } /* ============================= */ /* INTERFACE MOCKUP */ /* ============================= */ #home-not-authed .interface-mockup{ width: 90%; max-width: 600px; background: #0a0a0a; border-radius: 20px; border: 2px solid #222; padding: var(--card-padding); margin: 40px auto 0; } #home-not-authed .chart-container{ display: flex; gap: 20px; padding: var(--padding-xs); background: #050505; border-radius: 10px; margin-bottom: 20px; } #home-not-authed .line-chart{ flex: 1; height: 120px; position: relative; } #home-not-authed .line-path{ stroke: #E85D4E; stroke-width: 3; fill: none; } #home-not-authed .bar-chart{ flex: 1; display: flex; align-items: flex-end; justify-content: space-evenly; gap: 10px; height: 120px; } #home-not-authed .bar{ width: 20%; background: #E85D4E; border-radius: 2px 2px 0 0; } #home-not-authed .bar:nth-child(1){ height: 70%; } #home-not-authed .bar:nth-child(2){ height: 45%; } #home-not-authed .bar:nth-child(3){ height: 85%; background: #4a8de8; } #home-not-authed .bar:nth-child(4){ height: 60%; background: #4ade80; } #home-not-authed .interface-metrics{ display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 10px; } #home-not-authed .metric-card{ background: #1a1a1a; padding: var(--padding-sm); border-radius: 10px; text-align: center; } /* ============================= */ /* COUNTRY TAGS */ /* ============================= */ #home-not-authed .tags-container{ display: flex; flex-wrap: wrap; gap: 15px; margin: 50px auto; justify-content: center; max-width: 800px; } @media (max-width: 480px) { #home-not-authed .tags-container{ gap: 10px; margin: 30px auto; } } #home-not-authed .tag{ background: #0a0a0a; border: 1px solid #E85D4E; color: #E85D4E; padding: 12px 25px; border-radius: 25px; font-size: var(--text-sm) !important; } @media (max-width: 480px) { #home-not-authed .tag{ padding: 10px 20px; } } #home-not-authed .screener-button{ background: #4ade80; color: #000; padding: 14px 60px; border-radius: 10px; font-weight: 500; border: none; cursor: pointer; margin: 20px auto; font-size: var(--text-md) !important; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2; text-decoration: none; } /* ============================= */ /* CORRELATION GRID */ /* ============================= */ #home-not-authed .correlation-grid{ background: #1a1a1a; border-radius: 20px; padding: var(--card-padding); max-width: 600px; margin: 40px auto; } #home-not-authed .correlation-cells{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; } #home-not-authed .correlation-cell{ height: 60px; border-radius: 8px; } /* ============================= */ /* PORTFOLIO ANALYSIS */ /* ============================= */ #home-not-authed .portfolio-grid{ display: flex; gap: 40px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } #home-not-authed .portfolio-card{ flex: 1; min-width: 300px; background: #1a1a1a; padding: var(--card-padding); border-radius: 20px; } @media (max-width: 768px) { #home-not-authed .portfolio-card{ min-width: 100%; } } #home-not-authed .allocation-item{ margin-bottom: 30px; } #home-not-authed .allocation-header{ display: flex; justify-content: space-between; margin-bottom: 10px; font-size: var(--text-base) !important; } #home-not-authed .allocation-bar{ height: 20px; background: #0a0a0a; border-radius: 10px; overflow: hidden; position: relative; } #home-not-authed .allocation-fill{ height: 100%; position: relative; } #home-not-authed .allocation-marker{ position: absolute; right: -2px; top: 0; width: 4px; height: 100%; background: #fff; } #home-not-authed .allocation-info{ display: flex; justify-content: space-between; margin-top: 5px; color: #999; /* Improved contrast for accessibility */ font-size: var(--text-xs) !important; } #home-not-authed .rebalance-button{ width: 100%; background: #fff; color: #000; padding: 20px; border-radius: 10px; border: none; cursor: pointer; font-size: var(--text-sm) !important; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2; text-decoration: none; } #home-not-authed .risk-chart{ height: 250px; position: relative; background: #0a0a0a; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } #home-not-authed .risk-options{ display: flex; justify-content: space-around; margin-top: 30px; } #home-not-authed .risk-option{ text-align: center; } /* ============================= */ /* ANIMATION STYLES - NAMESPACED FOR LANDING PAGE */ /* ============================= */ /* Base animation class */ #home-not-authed .slowio-landing-animate-on-scroll{ opacity: 0; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Fade up animation */ #home-not-authed .slowio-landing-fade-up{ transform: translateY(30px); } #home-not-authed .slowio-landing-fade-up.slowio-landing-animated{ opacity: 1; transform: translateY(0); } /* Fade in animation */ #home-not-authed .slowio-landing-fade-in{ transform: scale(0.95); } #home-not-authed .slowio-landing-fade-in.slowio-landing-animated{ opacity: 1; transform: scale(1); } /* Stagger animations for grids */ #home-not-authed .slowio-landing-stagger{ opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-stagger.slowio-landing-animated{ opacity: 1; transform: translateY(0); } /* Chart animations */ #home-not-authed .slowio-landing-chart-line{ stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-chart-line.slowio-landing-animated{ stroke-dashoffset: 0; } #home-not-authed .slowio-landing-chart-bar{ transform: scaleY(0); transform-origin: bottom; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-chart-bar.slowio-landing-animated{ transform: scaleY(1); } /* Progress bar animations */ #home-not-authed .slowio-landing-allocation-fill{ width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-allocation-fill.slowio-landing-animated{ transform: scaleX(var(--target-scale, 1)); } /* Number counting animation */ #home-not-authed .slowio-landing-count-up{ display: inline-block; } /* Tool icon animations */ #home-not-authed .slowio-landing-tool-icon{ opacity: 0; transform: scale(0.8) rotate(-10deg); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-tool-icon.slowio-landing-animated{ opacity: 1; transform: scale(1) rotate(0); } /* Correlation cell animations */ #home-not-authed .slowio-landing-correlation-cell{ opacity: 0; transform: scale(0); transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-correlation-cell.slowio-landing-animated{ opacity: var(--cell-opacity, 1); transform: scale(1); } /* Scatter plot points */ #home-not-authed .slowio-landing-scatter-point{ opacity: 0; transform: scale(0); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-scatter-point.slowio-landing-animated{ opacity: var(--point-opacity, 0.8); transform: scale(1); } /* Network nodes */ #home-not-authed .slowio-landing-network-node{ opacity: 0; transform: scale(0); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-network-node.slowio-landing-animated{ opacity: 1; transform: scale(1); } #home-not-authed .slowio-landing-network-line{ stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-network-line.slowio-landing-animated{ stroke-dashoffset: 0; } /* ============================= */ /* SVG PATH ANIMATIONS */ /* ============================= */ /* GPU-accelerate SVG animations to prevent CLS and improve smoothness */ /* Note: Using will-change instead of translateZ(0) to avoid overriding transform: scale(0) on animated elements like .slowio-landing-risk-point */ #home-not-authed .slowio-landing-risk-point, #home-not-authed .slowio-landing-trend-line, #home-not-authed .slowio-landing-risk-curve, #home-not-authed .slowio-landing-chart-line, #home-not-authed .slowio-landing-chart-bar, #home-not-authed .slowio-landing-allocation-fill, #home-not-authed .slowio-landing-scatter-point, #home-not-authed .slowio-landing-network-line, #home-not-authed .slowio-landing-network-node { will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Risk curve animation (Portfolio Analysis) */ #home-not-authed .slowio-landing-risk-curve{ stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-risk-curve.slowio-landing-animated{ stroke-dashoffset: 0; } /* Risk chart points */ #home-not-authed .slowio-landing-risk-point{ opacity: 0; transform: scale(0); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } #home-not-authed .slowio-landing-risk-point.slowio-landing-animated{ opacity: 1; transform: scale(1); } /* Dashboard preview chart animation - LEFT TO RIGHT REVEAL */ #home-not-authed .slowio-landing-chart-visual{ /* Use mask for smooth left-to-right reveal */ -webkit-mask-image: linear-gradient(to right, black 0%, black 100%); -webkit-mask-size: 0% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; mask-image: linear-gradient(to right, black 0%, black 100%); mask-size: 0% 100%; mask-repeat: no-repeat; mask-position: left center; transition: -webkit-mask-size 1.5s cubic-bezier(0.4, 0, 0.2, 1), mask-size 1.5s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-chart-visual.slowio-landing-animated{ -webkit-mask-size: 110% 100%; /* Slightly over 100% to ensure complete fill */ mask-size: 110% 100%; } /* Scatter plot trend line */ #home-not-authed .slowio-landing-trend-line{ stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); } #home-not-authed .slowio-landing-trend-line.slowio-landing-animated{ stroke-dashoffset: 0; } /* Hexagon icon */ #home-not-authed .icon-hexagon{ position: relative; width: 28px; height: 16px; background: #E85D4E; margin: 6px 0; } #home-not-authed .icon-hexagon:before, #home-not-authed .icon-hexagon:after{ content: ""; position: absolute; width: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; } #home-not-authed .icon-hexagon:before{ bottom: 100%; border-bottom: 8px solid #E85D4E; } #home-not-authed .icon-hexagon:after{ top: 100%; border-top: 8px solid #E85D4E; } /* Scale hexagon for tablets */ @media (max-width: 768px) { #home-not-authed .icon-hexagon{ width: 25px; height: 14px; margin: 5.5px 0; } #home-not-authed .icon-hexagon:before, #home-not-authed .icon-hexagon:after{ border-left: 12.5px solid transparent; border-right: 12.5px solid transparent; } #home-not-authed .icon-hexagon:before{ border-bottom: 7px solid #E85D4E; } #home-not-authed .icon-hexagon:after{ border-top: 7px solid #E85D4E; } } /* Scale hexagon for mobile */ @media (max-width: 480px) { #home-not-authed .icon-hexagon{ width: 20px; height: 11px; margin: 4.5px 0; } #home-not-authed .icon-hexagon:before, #home-not-authed .icon-hexagon:after{ border-left: 10px solid transparent; border-right: 10px solid transparent; } #home-not-authed .icon-hexagon:before{ border-bottom: 5.5px solid #E85D4E; } #home-not-authed .icon-hexagon:after{ border-top: 5.5px solid #E85D4E; } }
/* 14_financials_ai_modal.css */
/* * Fix dropdown overflow in Financial AI modal (modal_ai_insights) * Scoped to avoid affecting other modals */ /* Allow dropdown menu to overflow the modal body */ #modal_ai_insights .modal-body { overflow: visible !important; } /* Make the modal content scrollable instead */ #modal_ai_insights .modal-content { max-height: 90vh; overflow-y: auto; } /* Mobile: add padding for dropdown expansion */ @media (max-width: 768px) { #modal_ai_insights .modal-body { padding-bottom: 250px; } }
/* 15_home_alternatives.css */
/* ============================================================================= Home Page Design - Hover Styles ============================================================================= */ /* ============================================================================= Alternative 2.1: Icon Cards with Category Sections ============================================================================= */ #home-not-authed .alt2-card:hover .alt2-card-inner { border-color: #E85D4E !important; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(232, 93, 78, 0.15); } /* ============================================================================= Alternative 10: Sidebar Layout with Filtering ============================================================================= */ /* Sidebar button hover */ #home-not-authed .alt10-sidebar-btn:hover { background: rgba(232, 93, 78, 0.1) !important; } /* Active sidebar button */ #home-not-authed .alt10-sidebar-btn.active { background: rgba(232, 93, 78, 0.15) !important; } #home-not-authed .alt10-sidebar-btn.active span:last-child { color: #fff !important; } /* Content item hover */ #home-not-authed .alt10-link:hover .alt10-item { background: #1a1a1a !important; transform: translateX(4px); } /* Responsive padding for alt10 container - larger on desktop */ @media (min-width: 768px) { #home-not-authed .alt10-container { padding: 40px 20px !important; } }
/* 16_options_eu.css */
#options_EU-container .options-eu-symbol-row { flex-wrap: nowrap; } #options_EU-container .options-eu-dropdown-col { flex: 1 1 180px; min-width: 0; } #options_EU-container .options-eu-symbol-dropdown { min-width: 180px; width: 100%; } #options_EU-container .options-eu-label-col { white-space: nowrap; } @media (min-width: 768px) { #options_EU-container .options-eu-symbol-dropdown { min-width: 320px; } }
/* 17_options_us.css */
#options_US-root .options-us-mini-card { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } #options_US-root .options-us-tabs .nav { flex-wrap: wrap; gap: 0.35rem; } #options_US-root .options-us-tabs .nav-link { padding: 0.45rem 0.7rem; } #options_US-root .options-us-expiry-toggle { width: 100%; } @media (min-width: 768px) { #options_US-root .options-us-expiry-toggle { width: auto; } } @media (max-width: 576px) { #options_US-root .options-us-tabs .nav-link { font-size: 0.85rem; padding: 0.35rem 0.55rem; } }