/* ---- block 1 of 7, extracted from stock_forecast.html ---- */
/* Modern CSS Variables for Consistency */
:root {
--primary-orange: #ec7c30;
--secondary-orange: #d16b26;
--dark-orange: #d16b26;
--accent-orange: #ec7c30;
}
/* Global Body Enhancements - Keep only background animation */
body {
background: #0b101b !important;
position: relative;
}
/* Only apply overflow-x: hidden when sidebars are NOT active AND page is fully loaded */
body:not(.right-bar-enabled):not(.sidebar-enable):not(.enlarged):not(.page-loading) {
overflow-x: hidden;
}
/* Ensure sidebars always work regardless of page state */
body.right-bar-enabled,
body.sidebar-enable,
body.enlarged {
overflow-x: auto !important;
}
/* Animated Background Particles - DISABLED to prevent double background */
body::before {
display: none !important;
}
/* Mobile-first base styles - Simplified */
.content-page .content {
min-height: 100vh;
/* padding: 0.1rem; */
}
/* Page Title Box - use unified styles from base.html */
.page-title-box.unified-page-header {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0 0 1.5rem 0 !important;
transition: none;
color: white;
}
.page-title-box.unified-page-header:hover {
transform: none;
border-color: transparent;
background: transparent;
}
.breadcrumb {
background: transparent;
margin: 0;
padding: 0;
font-size: 0.75rem;
}
.breadcrumb-item a {
color: #ec7c30;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: #d16b26;
}
.breadcrumb-item.active {
color: #e2e8f0;
}
/* Simplified Forecast Card - Remove glassmorphism */
.forecast-card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
margin: 0.5rem 0;
color: white;
overflow: hidden;
}
.forecast-card:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.3);
background: rgba(255, 255, 255, 0.02);
}
.forecast-card .card-box {
background: transparent;
border: none;
color: white;
padding: 0.5rem;
}
/* Simplified Headers */
.header-title {
color: #ec7c30;
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
padding: 0 0 0.3rem 0;
border-bottom: 1px solid rgba(236, 124, 48, 0.3);
line-height: 1.3;
}
.chart-title {
color: #ec7c30;
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 1rem 0;
padding: 0;
border-bottom: none;
}
/* Simplified Forecast Returns Section */
.forecast-returns-section {
background: rgba(236, 124, 48, 0.02);
border-radius: 8px;
padding: 0.5rem;
border: 1px solid rgba(236, 124, 48, 0.1);
margin: 0.5rem 0;
}
.forecast-returns-title {
color: #ec7c30;
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.forecast-period {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background: rgba(26, 32, 44, 0.3);
border-radius: 6px;
margin: 0 0 0.3rem 0;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.forecast-period:hover {
border-color: rgba(236, 124, 48, 0.3);
background: rgba(236, 124, 48, 0.03);
}
.forecast-period-label {
font-weight: 600;
color: #e2e8f0;
font-size: 0.8rem;
}
.forecast-period-value {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
}
.company-analysis-section {
padding: 0.5rem;
margin: 0.5rem 0;
}
/* Simplified Analysis Subsections */
.analysis-subsection {
margin: 0 0 0.5rem 0;
padding: 0.5rem;
background: rgba(236, 124, 48, 0.02);
border-radius: 6px;
border-left: 2px solid #ec7c30;
}
.analysis-subsection-title {
color: #ec7c30;
font-weight: 600;
font-size: 0.9rem;
margin: 0 0 0.3rem 0;
line-height: 1.3;
}
.analysis-text {
color: #e2e8f0;
font-size: 0.8rem;
line-height: 1.4;
margin: 0 0 0.3rem 0;
}
/* Simplified Metrics Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 0.3rem;
margin: 0.5rem 0 0 0;
}
.metric-item {
border: 1px solid rgba(236, 124, 48, 0.2);
border-radius: 8px;
padding: 0.4rem;
text-align: center;
transition: all 0.3s ease;
background: transparent;
}
.metric-item:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.4);
background: rgba(236, 124, 48, 0.05);
}
.metric-label {
color: #a0aec0;
font-size: 0.6rem;
margin: 0 0 0.2rem 0;
display: block;
}
.metric-value {
color: #ec7c30;
font-weight: 600;
font-size: 0.8rem;
}
.chart-loading {
background: transparent;
color: #e2e8f0;
text-align: center;
padding: 2rem;
border-radius: 8px;
}
/* Simplified Section Styling - Remove glassmorphism */
.fundamentals-section, .news-section, .peers-section, .sidebar-section, .faq-section, .cta-section {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
padding: 0.75rem;
margin: 0.5rem 0;
color: white;
}
/*
* =====================================================
* UNIFIED SECTION ALIGNMENT SYSTEM (Desktop + Mobile)
* Ensures pixel-perfect vertical alignment between:
* - .forecast-card .card-box
* - .fundamentals-section
* =====================================================
*/
/* Normalize .fundamentals-section to match .forecast-card structure */
.fundamentals-section {
/* Use standard section padding like other sections */
}
/* Inner content should not have extra padding since section already has it */
.fundamentals-section > h2.header-title,
.fundamentals-section > p,
.fundamentals-section > .chart-container,
.fundamentals-section > .col-12 {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* Header alignment */
.forecast-card .card-box > h2.header-title,
.fundamentals-section > h2.header-title {
margin-top: 8px !important;
margin-bottom: 8px !important;
padding: 0 0 5px 0;
}
/* Inline controls (small text + Full Screen button) - unified flex layout */
.forecast-card .card-box > h2.header-title small.text-muted,
.fundamentals-section > h2.header-title small.text-muted {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
}
/* Icon vertical alignment within headers */
.forecast-card .card-box > h2.header-title > i.mdi,
.fundamentals-section > h2.header-title > i.mdi {
vertical-align: middle;
position: relative;
top: -1px;
}
.fundamentals-section:hover, .news-section:hover, .peers-section:hover, .sidebar-section:hover, .faq-section:hover, .cta-section:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.3);
background: rgba(255, 255, 255, 0.02);
}
.sidebar-section {
padding: 0;
overflow: hidden;
}
.sidebar-header {
background: rgba(44, 62, 80, 0.3);
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-title {
color: #ec7c30;
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
}
/* Simplified Follow Button */
.follow-btn {
background: transparent;
border: 1px solid var(--primary-orange);
color: var(--primary-orange);
padding: 6px 16px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}
.follow-btn:hover {
background: #ec7c30;
color: white;
transform: none;
}
.follow-btn.followed {
background: #ec7c30;
color: white;
}
.news-section .card-title, .peers-section .card-title {
color: #ec7c30;
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 1rem 0;
padding: 0 0 0.5rem 0;
border-bottom: 1px solid rgba(236, 124, 48, 0.3);
}
/* Simplified Content Areas */
.news-content {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 0.5rem;
max-height: 250px;
overflow-y: auto;
transition: all 0.3s ease;
}
.news-content:hover {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(236, 124, 48, 0.3);
}
.peers-content {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 0.5rem;
overflow: hidden; /* keeps rounded corners on the scroll area */
transition: all 0.3s ease;
}
.peers-content:hover {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(236, 124, 48, 0.3);
}
.peers-content .table-responsive {
/* IMPORTANT: no padding here.
Padding creates a visible area above the sticky where
can appear while scrolling, which looks like rows “flying over” headers. */
padding: 0;
max-height: 250px;
overflow: auto;
position: relative;
isolation: isolate;
border-radius: 8px;
}
/* Simplified Scrollbars */
.news-content::-webkit-scrollbar, .peers-content .table-responsive::-webkit-scrollbar {
width: 4px;
}
.news-content::-webkit-scrollbar-track, .peers-content .table-responsive::-webkit-scrollbar-track {
background: rgba(44, 62, 80, 0.3);
border-radius: 2px;
}
.news-content::-webkit-scrollbar-thumb, .peers-content .table-responsive::-webkit-scrollbar-thumb {
background: #ec7c30;
border-radius: 2px;
}
.news-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0 0 0.5rem 0;
margin: 0 0 0.5rem 0;
}
.news-item:last-child {
border-bottom: none;
margin: 0;
}
.news-item h4 {
color: #ec7c30;
font-size: 0.9rem;
margin: 0 0 0.3rem 0;
line-height: 1.3;
}
.news-item h4 a {
color: #ec7c30;
text-decoration: none;
transition: color 0.3s ease;
}
.news-item h4 a:hover {
color: #d16b26;
}
.news-item .author {
color: #a0aec0;
font-size: 0.75rem;
margin: 0 0 0.3rem 0;
}
.news-item p {
color: #e2e8f0;
font-size: 0.8rem;
line-height: 1.4;
}
/* Simplified Table Styling */
.peers-table {
width: 100%;
color: white;
font-size: 0.7rem;
border-collapse: separate;
border-spacing: 0;
position: relative;
isolation: isolate;
background: transparent;
}
.peers-table thead {
position: relative;
z-index: 100;
}
.peers-table thead th {
background: rgba(15, 23, 42, 0.92);
color: white;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.5rem 0.3rem;
font-weight: 600;
font-size: 0.65rem;
position: sticky;
top: 0;
z-index: 100;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.peers-table thead th::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.92);
z-index: -1;
}
.peers-table thead th:hover {
background: rgba(15, 23, 42, 0.98);
color: #ec7c30;
}
.peers-table thead th::after {
content: '';
display: inline-block;
margin-left: 0.5rem;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(255, 255, 255, 0.3);
opacity: 0;
transition: opacity 0.2s ease;
}
.peers-table thead th:hover::after {
opacity: 1;
}
.peers-table thead th.sort-asc::after {
opacity: 1;
border-top: none;
border-bottom: 4px solid #ec7c30;
}
.peers-table thead th.sort-desc::after {
opacity: 1;
border-top: 4px solid #ec7c30;
}
.peers-table thead th.sort-asc,
.peers-table thead th.sort-desc {
color: #ec7c30;
}
.peers-table thead th:focus-visible {
outline: 2px solid rgba(236, 124, 48, 0.55);
outline-offset: 2px;
}
.peers-table tbody {
position: relative;
z-index: 1;
}
.peers-table tbody td {
border-color: rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 0.45rem 0.25rem;
color: #e2e8f0;
font-size: 0.7rem;
background: transparent;
position: relative;
z-index: 1;
}
.peers-table tbody tr {
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.peers-table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.015);
}
.peers-table tbody tr:hover {
background: transparent;
}
.peers-table tbody tr:hover td {
background: rgba(236, 124, 48, 0.08);
z-index: 1;
}
.peers-table a {
color: #ec7c30;
text-decoration: none;
transition: color 0.3s ease;
}
.peers-table a:hover {
color: #d16b26;
}
/* Simplified Badges */
.badge {
padding: 0.2rem 0.4rem;
border-radius: 12px;
font-size: 0.6rem;
font-weight: 600;
margin: 0.1rem;
transition: all 0.3s ease;
}
.badge:hover {
transform: none;
}
.badge a {
color: inherit !important;
text-decoration: none;
}
.badge.badge-warning a {
color: white !important;
}
/* Social Icons - Updated to match signals page styling */
.social-icons {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0.75rem 0 0 0;
}
.social-icons .ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: #ffffff;
font-size: 0.8rem !important;
transition: all 0.3s ease;
border-radius: 50%;
text-decoration: none;
border: 1px solid #ec7c30;
background: #ec7c30;
}
.social-icons .ico:hover {
transform: none;
box-shadow: none;
border-color: #d16b26;
background: #d16b26;
text-decoration: none;
}
.social-icons .ico.fab.fa-facebook {
background: #ec7c30;
border-color: #ec7c30;
}
.social-icons .ico.fab.fa-facebook:hover {
background: #d16b26;
border-color: #d16b26;
box-shadow: none;
}
.social-icons .ico.fab.fa-x-twitter {
background: #ec7c30;
border-color: #ec7c30;
}
.social-icons .ico.fab.fa-x-twitter:hover {
background: #d16b26;
border-color: #d16b26;
box-shadow: none;
}
.social-icons .ico.fab.fa-linkedin {
background: #ec7c30;
border-color: #ec7c30;
}
.social-icons .ico.fab.fa-linkedin:hover {
background: #d16b26;
border-color: #d16b26;
box-shadow: none;
}
.social-icons .ico.fab:contains("ST") {
background: #ec7c30;
border-color: #ec7c30;
font-weight: bold;
font-size: 0.9rem;
}
.social-icons .ico.fab:contains("ST"):hover {
background: #d16b26;
border-color: #d16b26;
box-shadow: none;
}
.social-icons .ico.fas.fa-envelope {
background: #ec7c30;
border-color: #ec7c30;
}
.social-icons .ico.fas.fa-envelope:hover {
background: #d16b26;
border-color: #d16b26;
box-shadow: none;
}
hr {
border-color: rgba(255, 255, 255, 0.1) !important;
opacity: 0.3;
margin: 0.5rem 0 !important;
}
/*
.container-fluid {
padding: 0.1rem;
}
.row {
margin: 0;
}
.col-12, .col-md-6, .col-md-3, .col-md-12, .col-xl-12, .col-xl-3, .col-lg-4, .col-lg-8, .col-lg-12 {
padding: 0.1rem;
}
*/
.positive {
color: #1abc9c !important;
}
.negative {
color: #f1556c !important;
}
.neutral {
color: #f7b84b !important;
}
.market-position-title {
color: #e74c3c;
font-weight: bold;
font-size: 0.8rem;
margin: 0 0 0.3rem 0;
}
.market-position-text {
font-size: 0.75rem;
margin: 0 0 0.2rem 0;
line-height: 1.3;
}
/* Remove iframe borders */
.chart-iframe, iframe {
width: 100% !important;
display: block;
border: none !important;
overflow: hidden;
min-height: 280px;
height: 280px;
margin: 0;
}
/* NOTE: h2 header styling moved to UNIFIED VERTICAL ALIGNMENT SYSTEM section at end of CSS */
/* Simplified Investment Metrics Section */
.investment-metrics-section {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
padding: 1rem;
margin: 0.5rem 0;
color: white;
}
.investment-metrics-section:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.3);
background: rgba(255, 255, 255, 0.02);
}
.investment-metrics-wrapper .nav-pills {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.3rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.investment-metrics-wrapper .nav-pills:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(236, 124, 48, 0.3);
}
.investment-metrics-wrapper .nav-pills .nav-link {
background: transparent;
border: 1px solid #ec7c30;
color: #ec7c30;
padding: 0.3rem 0.5rem;
border-radius: 6px;
margin: 0.05rem;
font-weight: 500;
font-size: 0.7rem;
transition: all 0.3s ease;
}
.investment-metrics-wrapper .nav-pills .nav-link:hover,
.investment-metrics-wrapper .nav-pills .nav-link.active {
background: #ec7c30;
color: white;
}
.investment-metrics-wrapper .tab-content {
min-height: 300px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(236, 124, 48, 0.2);
padding: 0.75rem;
border-radius: 8px;
margin-top: 0.5rem;
}
.investment-metrics-wrapper .metrics-explanation {
border-radius: 6px;
font-size: 0.8rem;
line-height: 1.3;
padding: 0.5rem;
border: 1px solid rgba(236, 124, 48, 0.2);
background: rgba(236, 124, 48, 0.02);
}
.investment-metrics-wrapper .metrics-explanation h5 {
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 0.9rem;
color: #ec7c30;
}
.investment-metrics-wrapper .metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
margin-top: 1rem;
}
.investment-metrics-wrapper .metric-item {
border: 1px solid rgba(236, 124, 48, 0.2);
border-radius: 8px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.02);
}
.investment-metrics-wrapper .metric-item:hover {
border-color: rgba(236, 124, 48, 0.4);
background: rgba(236, 124, 48, 0.05);
transform: none;
}
.investment-metrics-wrapper .metric-label {
color: #a0aec0;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
display: block;
font-weight: 600;
}
.investment-metrics-wrapper .metric-value {
color: #ec7c30;
font-weight: 700;
font-size: 1.1rem;
}
/* Simplified CTA and FAQ Sections */
.cta-section {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
color: white;
padding: 1rem;
margin: 0.5rem 0;
}
.cta-section:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.3);
background: rgba(255, 255, 255, 0.02);
}
.cta-section .btn-light {
background: #ec7c30;
border: none;
color: white;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
font-size: 0.8rem;
margin-bottom: 0.3rem;
border-radius: 6px;
font-weight: 500;
}
.cta-section .btn-light:hover {
background: #d16b26;
transform: none;
color: white;
}
.cta-section .btn-outline-light {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
font-size: 0.8rem;
border-radius: 6px;
}
.cta-section .btn-outline-light:hover {
background: rgba(236, 124, 48, 0.1);
color: white;
border-color: rgba(236, 124, 48, 0.3);
}
.faq-section {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
color: white;
padding: 1rem;
margin: 0.5rem 0;
}
.faq-section:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.3);
background: rgba(255, 255, 255, 0.02);
}
.faq-section h4 {
color: #ec7c30 !important;
}
.faq-section p {
color: #e2e8f0;
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
/* Simplified Buttons - IFC Tab Style */
.metrics-tab-btn {
padding: 0.5rem 1rem !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.6) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.metrics-tab-btn i {
margin-right: 0.4rem !important;
font-size: 0.85rem !important;
color: white !important;
}
.metrics-tab-btn:hover {
color: rgba(255, 255, 255, 0.9) !important;
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.metrics-tab-btn.active {
color: white !important;
background: #ec7c30 !important;
border-color: transparent !important;
box-shadow: none !important;
}
.nav-pills {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0 !important;
overflow: visible !important;
padding: 0.5rem 0.75rem !important;
transition: all 0.3s ease;
display: flex !important;
flex-wrap: wrap !important;
gap: 0.25rem !important;
}
.nav-pills:hover {
background: transparent !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.nav-pills .nav-link {
padding: 0.5rem 1rem !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.6) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
margin: 0 !important;
}
.nav-pills .nav-link i {
margin-right: 0.4rem !important;
font-size: 0.85rem !important;
color: white !important;
}
.nav-pills .nav-link:hover {
color: rgba(255, 255, 255, 0.9) !important;
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.nav-pills .nav-link.active {
color: white !important;
background: #ec7c30 !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* Simplified Full Screen Button */
.fundamentals-fullscreen-btn {
background: transparent;
border: 1px solid #ec7c30;
color: #ec7c30;
text-decoration: none;
margin-right: 0.3rem;
font-size: 0.7rem;
font-weight: 500;
padding: 0.2rem 0.4rem;
border-radius: 6px;
transition: all 0.3s ease;
cursor: pointer;
display: inline-block;
}
.fundamentals-fullscreen-btn:hover {
background: #ec7c30;
color: white;
text-decoration: none;
}
/*
* =====================================================
* FULLSCREEN CHART MODAL - Clean Implementation
* =====================================================
*/
#stockPriceModal {
display: none;
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
max-width: 100vw;
max-height: 100dvh;
z-index: 99999;
background: #0b101b;
}
#stockPriceModal.show {
display: flex;
flex-direction: column;
}
#stockPriceModal .fullscreen-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: rgba(15, 23, 42, 0.9);
border-bottom: 1px solid rgba(236, 124, 48, 0.3);
flex-shrink: 0;
}
#stockPriceModal .fullscreen-modal-title {
margin: 0;
color: #ec7c30;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
#stockPriceModal .fullscreen-modal-close {
background: rgba(236, 124, 48, 0.1);
border: 1px solid rgba(236, 124, 48, 0.4);
width: 36px;
height: 36px;
border-radius: 8px;
color: #ec7c30;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
line-height: 1;
}
#stockPriceModal .fullscreen-modal-close:hover {
background: #ec7c30;
color: white;
}
#stockPriceModal .fullscreen-modal-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
#stockPriceModal .fullscreen-modal-chart-container {
flex: 1;
min-height: 0;
padding: 16px;
display: flex;
flex-direction: column;
}
/* Force chart components to fill modal height */
#stockPriceModal .intratio-chart-component,
#stockPriceModal [data-intratio-chart] {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
#stockPriceModal .intratio-chart-wrapper {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
#stockPriceModal .intratio-chart-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
#stockPriceModal .intratio-price-chart-container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
#stockPriceModal .intratio-price-chart {
flex: 1;
min-height: 0;
}
#stockPriceModal .intratio-price-chart .tv-lightweight-charts,
#stockPriceModal .intratio-price-chart .tv-lightweight-charts table {
width: 100% !important;
height: 100% !important;
}
#stockPriceModal .intratio-chart-header,
#stockPriceModal .intratio-chart-legend {
flex-shrink: 0;
}
/* Fundamentals modal (iframe-based) - shared styles */
#fundamentalsModal {
display: none;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
max-width: 100vw;
max-height: 100vh;
max-height: 100dvh;
z-index: 99999;
background: #0b101b;
}
#fundamentalsModal.show {
display: flex;
flex-direction: column;
}
#fundamentalsModal .fullscreen-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: rgba(15, 23, 42, 0.9);
border-bottom: 1px solid rgba(236, 124, 48, 0.3);
flex-shrink: 0;
}
#fundamentalsModal .fullscreen-modal-title {
margin: 0;
color: #ec7c30;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
#fundamentalsModal .fullscreen-modal-close {
background: rgba(236, 124, 48, 0.1);
border: 1px solid rgba(236, 124, 48, 0.4);
width: 36px;
height: 36px;
border-radius: 8px;
color: #ec7c30;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
line-height: 1;
}
#fundamentalsModal .fullscreen-modal-close:hover {
background: #ec7c30;
color: white;
}
#fundamentalsModal .fullscreen-modal-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
position: relative;
overflow: hidden;
padding: 0;
background: transparent;
}
/* Ensure fundamentals chart component fills the modal body */
#fundamentalsModal .ifc-component,
#fundamentalsModal .fundamentals-chart-component {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
#fundamentalsModal .fullscreen-modal-chart-container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
background: transparent;
padding: 16px;
box-sizing: border-box;
}
#fundamentalsModal .fullscreen-modal-loading {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
gap: 12px;
flex-direction: column;
background: rgba(15, 23, 42, 0.55);
z-index: 1;
}
#fundamentalsModal .fullscreen-modal-loading.show {
display: flex;
}
#fundamentalsModal .fullscreen-modal-loading-text {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
margin: 0;
}
#fundamentalsModal .fullscreen-modal-body iframe {
flex: 1;
width: 100%;
height: 100%;
border: none;
}
/* Mobile adjustments */
@media (max-width: 768px) {
#stockPriceModal .fullscreen-modal-header,
#fundamentalsModal .fullscreen-modal-header {
padding: 10px 12px;
}
#stockPriceModal .fullscreen-modal-title,
#fundamentalsModal .fullscreen-modal-title {
font-size: 0.85rem;
}
#stockPriceModal .fullscreen-modal-close,
#fundamentalsModal .fullscreen-modal-close {
width: 32px;
height: 32px;
font-size: 20px;
}
#stockPriceModal .fullscreen-modal-chart-container,
#fundamentalsModal .fullscreen-modal-chart-container {
padding: 8px;
}
/* iOS-specific fixes for modal interaction */
#fundamentalsModal {
-webkit-overflow-scrolling: touch;
}
#fundamentalsModal .fullscreen-modal-body {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
}
/* Enhanced Text Selection */
::selection {
background: rgba(236, 124, 48, 0.3);
color: white;
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Desktop Layout - Match forecast screener centered container */
@media (min-width: 992px) {
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1600px !important;
margin: 0 auto !important;
}
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
/* This page uses a full-width container inside `.content`.
On small screens, the global `.content` padding + container padding makes the page feel too narrow.
Keep the container gutters, but remove the outer padding for this page only. */
.content-page .content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.page-title-box.unified-page-header {
padding: 0;
margin: 0;
}
.forecast-card .card-box {
padding: 0.5rem;
}
.header-title {
font-size: 0.9rem;
margin: 0 0 0.5rem 0;
padding: 0 0 0.3rem 0;
line-height: 1.3;
}
.fundamentals-section, .news-section, .peers-section, .faq-section, .cta-section {
padding: 0.75rem;
margin: 0.5rem 0;
}
/* Peers: the tbody is the scroll container on mobile */
.peers-content {
max-height: none !important;
overflow: hidden !important;
}
/*
* =====================================================
* MOBILE: Pixel-Perfect Section Alignment
* =====================================================
*/
/* Override inline margin-top on fundamentals section */
.fundamentals-section {
/* Match standard mobile section padding (will inherit from parent rule) */
margin-top: 0.5rem !important; /* overrides inline margin-top: 3rem */
}
/* Unified inner content margins - no extra padding needed */
.forecast-card .card-box {
padding: 8px !important;
}
.fundamentals-section > h2.header-title,
.fundamentals-section > p,
.fundamentals-section > .chart-container,
.fundamentals-section > .col-12 {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Header vertical spacing - identical for both sections */
.forecast-card .card-box > h2.header-title,
.fundamentals-section > h2.header-title {
margin-top: 8px !important;
margin-bottom: 8px !important;
padding: 0 0 4px 0 !important;
}
/* Inline controls alignment */
.forecast-card .card-box > h2.header-title small.text-muted,
.fundamentals-section > h2.header-title small.text-muted {
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: middle;
}
/* Icon alignment */
.forecast-card .card-box > h2.header-title > i.mdi,
.fundamentals-section > h2.header-title > i.mdi {
vertical-align: middle;
position: relative;
top: -1px;
}
.metrics-grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 0.3rem;
}
.metric-item {
padding: 0.4rem;
}
.metric-label {
font-size: 0.6rem;
margin: 0 0 0.2rem 0;
}
.metric-value {
font-size: 0.8rem;
}
.social-icons {
gap: 0.4rem;
margin: 0.5rem 0 0 0;
}
.social-icons .ico {
font-size: 0.7rem !important;
width: 28px;
height: 28px;
}
.breadcrumb {
font-size: 0.7rem;
margin: 0;
padding: 0;
}
.chart-iframe, iframe {
min-height: 280px;
height: 280px;
}
.company-analysis-section {
padding: 0.5rem;
margin: 0.5rem 0;
}
.investment-metrics-wrapper .tab-content {
padding: 0.75rem;
margin-top: 0.5rem;
}
.investment-metrics-wrapper .nav-pills {
padding: 0.5rem 0.5rem !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: visible !important;
scrollbar-width: thin !important;
scrollbar-color: #ec7c30 transparent !important;
}
.investment-metrics-wrapper .nav-pills .nav-link {
padding: 0.4rem 0.8rem !important;
font-size: 0.65rem !important;
}
.nav-pills {
padding: 0.5rem 0.5rem !important;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
scrollbar-width: thin !important;
scrollbar-color: #ec7c30 transparent !important;
}
.nav-pills::-webkit-scrollbar {
height: 4px !important;
}
.nav-pills::-webkit-scrollbar-track {
background: transparent !important;
}
.nav-pills::-webkit-scrollbar-thumb {
background: #ec7c30 !important;
border-radius: 2px !important;
}
.nav-pills .nav-item {
flex: 0 0 auto;
}
.nav-pills .nav-link {
padding: 0.4rem 0.8rem !important;
font-size: 0.65rem !important;
margin: 0 !important;
white-space: nowrap !important;
}
.analysis-subsection {
margin: 0 0 0.5rem 0;
padding: 0.5rem;
}
.analysis-subsection-title {
font-size: 0.9rem;
margin: 0 0 0.3rem 0;
}
.analysis-text {
font-size: 0.8rem;
line-height: 1.4;
margin: 0 0 0.3rem 0;
}
.forecast-returns-section {
padding: 0.5rem;
margin: 0.5rem 0;
}
.forecast-returns-title {
font-size: 0.9rem;
margin: 0 0 0.5rem 0;
}
.forecast-period {
padding: 0.5rem;
margin: 0 0 0.3rem 0;
}
.forecast-period-label {
font-size: 0.8rem;
}
.forecast-period-value {
font-size: 0.9rem;
}
.news-content {
padding: 0.5rem;
max-height: 250px;
}
.news-item {
padding: 0 0 0.5rem 0;
margin: 0 0 0.5rem 0;
}
.news-item h4 {
font-size: 0.85rem;
margin: 0 0 0.3rem 0;
line-height: 1.3;
}
.news-item .author {
font-size: 0.7rem;
margin: 0 0 0.3rem 0;
}
.news-item p {
font-size: 0.75rem;
line-height: 1.4;
}
.peers-content .table-responsive {
/* IMPORTANT (mobile): padding here creates a visible area ABOVE the sticky header
where can scroll into, making rows appear over the header. */
padding: 0 !important;
/* Let tbody handle vertical scrolling (more reliable on mobile than sticky ). */
max-height: none !important;
overflow: visible !important;
position: relative;
isolation: isolate;
}
/* Mobile: make only the table body scroll, keep header fixed in place.
This guarantees can never paint “over” the header on iOS/Android browsers. */
#peersTable {
width: 100%;
}
#peersTable thead {
display: table;
width: 100%;
table-layout: fixed;
}
#peersTable thead th {
position: static !important;
}
#peersTable tbody {
display: block;
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#peersTable tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.peers-table {
font-size: 0.65rem;
}
.peers-table thead th {
padding: 0.4rem 0.25rem;
font-size: 0.6rem;
}
.peers-table tbody td {
padding: 0.35rem 0.2rem;
font-size: 0.65rem;
}
.badge {
padding: 0.15rem 0.3rem;
font-size: 0.55rem;
}
.fundamentals-fullscreen-btn {
padding: 0.2rem 0.4rem;
font-size: 0.7rem;
margin-right: 0.3rem;
}
.metrics-explanation {
padding: 0.5rem;
font-size: 0.75rem;
line-height: 1.35;
}
.metrics-explanation h5 {
font-size: 0.85rem;
margin-bottom: 0.3rem;
}
.metrics-explanation p {
margin-bottom: 0.3rem;
}
.cta-section {
padding: 1rem;
margin: 0.5rem 0;
}
.cta-section .btn-light,
.cta-section .btn-outline-light {
padding: 0.5rem 1rem;
font-size: 0.8rem;
margin-bottom: 0.3rem;
border-radius: 6px;
}
hr {
margin: 0.5rem 0 !important;
}
/* Tab content mobile */
.tab-content,
#companyAnalysisTabContent,
#metricsTabContent {
padding: 1rem !important;
}
/* Mobile heading alignment in tabs */
.tab-content h4,
#companyAnalysisTabContent h4,
#metricsTabContent h4 {
font-size: 1rem !important;
margin: 0 0 0.75rem 0 !important;
}
.tab-content h5,
#companyAnalysisTabContent h5,
#metricsTabContent h5,
.metrics-explanation h5 {
font-size: 0.9rem !important;
margin: 0 0 0.5rem 0 !important;
}
/* Mobile analysis timestamp */
.analysis-timestamp {
font-size: 0.75rem !important;
margin: 0 0 0.75rem 0 !important;
}
/* Mobile paragraphs in tabs */
.tab-content p,
#companyAnalysisTabContent p,
#metricsTabContent p,
.analysis-text p,
.metrics-explanation p {
font-size: 0.85rem !important;
margin: 0 0 0.5rem 0 !important;
}
/* FAQ section mobile */
.faq-section {
padding: 1rem !important;
}
.faq-item h4 {
font-size: 0.9rem;
line-height: 1.3;
}
.faq-item p {
font-size: 0.8rem;
}
/* Follow button mobile */
.follow-btn {
padding: 5px 14px;
font-size: 0.72rem;
}
/* Company Analysis Tabs & Metrics Tabs - Fix overflow for longer translations */
#companyAnalysisTab,
#metricsTab {
flex-wrap: wrap !important;
gap: 0.25rem;
}
#companyAnalysisTab .nav-item,
#metricsTab .nav-item {
flex: 1 1 auto;
min-width: 0;
}
#companyAnalysisTab .nav-link,
#companyAnalysisTab .metrics-tab-btn,
#metricsTab .nav-link,
#metricsTab .metrics-tab-btn {
white-space: normal !important;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
font-size: 0.6rem !important;
padding: 0.3rem 0.4rem !important;
line-height: 1.2;
min-height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
}
#companyAnalysisTab .nav-link i,
#companyAnalysisTab .metrics-tab-btn i,
#metricsTab .nav-link i,
#metricsTab .metrics-tab-btn i {
display: none;
}
}
@media (max-width: 480px) {
.page-title {
font-size: 0.85rem;
line-height: 1.15;
}
.forecast-card .card-box {
padding: 0.4rem;
}
.header-title {
font-size: 0.8rem;
margin: 0 0 0.4rem 0;
line-height: 1.25;
}
.fundamentals-section, .news-section, .peers-section, .faq-section, .cta-section {
padding: 0.5rem;
margin: 0.3rem 0;
}
.metrics-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.25rem;
}
.metric-item {
padding: 0.3rem;
}
.metric-label {
font-size: 0.55rem;
margin: 0 0 0.15rem 0;
}
.metric-value {
font-size: 0.7rem;
}
.social-icons {
gap: 0.35rem;
margin: 0.4rem 0 0 0;
}
.social-icons .ico {
font-size: 0.65rem !important;
width: 26px;
height: 26px;
}
.follow-btn {
padding: 4px 10px !important;
font-size: 0.68rem !important;
}
.breadcrumb {
font-size: 0.65rem;
}
.chart-iframe, iframe {
min-height: 250px;
height: 250px;
}
.company-analysis-section {
padding: 0.4rem;
}
.investment-metrics-wrapper .tab-content {
padding: 0.5rem;
}
.investment-metrics-wrapper .nav-pills {
padding: 0.5rem 0.5rem !important;
}
.investment-metrics-wrapper .nav-pills .nav-link {
padding: 0.35rem 0.7rem !important;
font-size: 0.6rem !important;
}
.nav-pills {
padding: 0.5rem 0.5rem !important;
}
.nav-pills .nav-link {
padding: 0.35rem 0.7rem !important;
font-size: 0.6rem !important;
}
.analysis-subsection {
margin: 0 0 0.5rem 0;
padding: 0.5rem;
}
.analysis-subsection-title {
font-size: 0.85rem;
margin: 0 0 0.3rem 0;
}
.analysis-text {
font-size: 0.75rem;
line-height: 1.35;
margin: 0 0 0.3rem 0;
}
.forecast-returns-section {
padding: 0.5rem;
margin: 0.5rem 0;
}
.forecast-returns-title {
font-size: 0.85rem;
margin: 0 0 0.5rem 0;
}
.forecast-period {
padding: 0.4rem;
margin: 0 0 0.3rem 0;
}
.forecast-period-label {
font-size: 0.75rem;
}
.forecast-period-value {
font-size: 0.85rem;
}
.news-content {
padding: 0.4rem;
max-height: 200px;
}
.news-item h4 {
font-size: 0.8rem;
line-height: 1.25;
}
.news-item .author,
.news-item p {
font-size: 0.7rem;
}
.peers-table {
font-size: 0.6rem;
}
.peers-table thead th {
padding: 0.35rem 0.15rem;
font-size: 0.55rem;
}
.peers-table tbody td {
padding: 0.3rem 0.1rem;
font-size: 0.6rem;
}
.badge {
padding: 0.12rem 0.25rem;
font-size: 0.5rem;
}
.fundamentals-fullscreen-btn {
padding: 0.15rem 0.3rem;
font-size: 0.65rem;
margin-right: 0.2rem;
}
.metrics-explanation {
padding: 0.4rem;
font-size: 0.7rem;
line-height: 1.3;
}
.metrics-explanation h5 {
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
.metrics-explanation p {
margin-bottom: 0.25rem;
}
.cta-section {
padding: 0.75rem;
margin: 0.5rem 0;
}
.cta-section .btn-light,
.cta-section .btn-outline-light {
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
margin-bottom: 0.25rem;
border-radius: 6px;
}
hr {
margin: 0.4rem 0 !important;
}
/* Tab content small mobile */
.tab-content,
#companyAnalysisTabContent,
#metricsTabContent {
padding: 0.6rem !important;
}
/* FAQ section small mobile */
.faq-section {
padding: 0.75rem !important;
}
.faq-item h4 {
font-size: 0.85rem;
line-height: 1.25;
}
.faq-item p {
font-size: 0.75rem;
line-height: 1.35;
}
/* Company Analysis Tabs - Extra small screens */
#companyAnalysisTab {
flex-direction: column !important;
gap: 0.2rem;
}
#companyAnalysisTab .nav-item {
width: 100%;
flex: none;
}
#companyAnalysisTab .nav-link,
#companyAnalysisTab .metrics-tab-btn {
width: 100%;
font-size: 0.65rem !important;
padding: 0.4rem !important;
min-height: auto;
}
}
/* Additional mobile-specific improvements */
@media (max-width: 576px) {
.page-title-box.unified-page-header {
border-radius: 0;
}
.forecast-card, .fundamentals-section, .news-section, .peers-section, .faq-section, .cta-section {
border-radius: 8px;
}
/* Stack navigation pills as 2-column grid on very small screens */
.nav-pills {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.25rem !important;
flex-direction: unset !important;
overflow-x: visible !important;
padding: 0.5rem !important;
}
.nav-pills .nav-item {
width: 100%;
margin-bottom: 0;
}
.nav-pills .nav-link {
text-align: center !important;
width: 100% !important;
padding: 0.35rem 0.25rem !important;
font-size: 0.6rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.nav-pills .nav-link i {
display: block;
margin-bottom: 0.15rem;
font-size: 0.8rem;
}
/* Optimize table for mobile */
.peers-table thead th:nth-child(n+4) {
display: none;
}
.peers-table tbody td:nth-child(n+4) {
display: none;
}
/* Show only company, ticker, and forecast on mobile */
.peers-table thead th:nth-child(1),
.peers-table thead th:nth-child(2),
.peers-table thead th:nth-child(3) {
display: table-cell;
}
.peers-table tbody td:nth-child(1),
.peers-table tbody td:nth-child(2),
.peers-table tbody td:nth-child(3) {
display: table-cell;
}
/* FAQ section improvements */
.faq-section .row {
flex-direction: column;
}
.faq-section .col-md-6 {
width: 100%;
padding: 0;
}
.faq-item {
margin-bottom: 1rem !important;
}
.faq-item h4 {
font-size: 0.9rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.faq-item p {
font-size: 0.8rem;
line-height: 1.4;
}
/* Optimize social sharing for mobile */
.social-icons {
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.4rem !important;
}
.social-icons .ico {
width: 28px;
height: 28px;
font-size: 0.7rem !important;
}
/* Better spacing for buttons */
.cta-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 250px;
}
/* Metrics grid mobile optimization */
.metrics-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.3rem !important;
}
.investment-metrics-wrapper .metrics-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Tab content padding reduction */
.tab-content {
padding: 0.75rem !important;
}
#companyAnalysisTabContent,
#metricsTabContent {
padding: 0.75rem !important;
}
/* Metrics explanation box mobile */
.metrics-explanation {
padding: 0.5rem !important;
font-size: 0.75rem !important;
}
.metrics-explanation h5 {
font-size: 0.85rem !important;
}
.metrics-explanation p {
margin-bottom: 0.25rem !important;
line-height: 1.35 !important;
}
/* Page title adjustments */
.page-title {
font-size: 0.85rem !important;
line-height: 1.2 !important;
}
.page-title .badge {
display: inline-block;
margin-top: 0.3rem;
}
.page-title small {
display: block;
margin-top: 0.3rem;
font-size: 0.7rem;
}
/* Header title mobile */
.header-title {
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
.header-title small {
display: block;
margin-top: 0.3rem;
}
/* Follow button mobile */
.follow-btn {
padding: 4px 12px !important;
font-size: 0.7rem !important;
}
/* Analysis text mobile */
.analysis-text {
font-size: 0.75rem !important;
line-height: 1.4 !important;
}
.analysis-text p {
margin-bottom: 0.5rem !important;
}
/* Breadcrumb mobile */
.breadcrumb {
font-size: 0.65rem !important;
flex-wrap: wrap;
}
.breadcrumb-item {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Object/iframe fundamentals mobile */
#fundamentals_id {
min-height: 75vh !important;
height: 75vh !important;
}
/* News section mobile */
.news-content {
max-height: 200px;
}
.news-item h4 {
font-size: 0.8rem !important;
}
/* Peers table improvements */
.peers-table {
font-size: 0.6rem !important;
}
.peers-table thead th {
padding: 0.4rem 0.2rem !important;
font-size: 0.55rem !important;
}
.peers-table tbody td {
padding: 0.3rem 0.15rem !important;
}
.peers-table .badge {
font-size: 0.5rem !important;
padding: 0.15rem 0.25rem !important;
}
/* CTA section mobile */
.cta-section {
padding: 1rem !important;
}
.cta-section p {
font-size: 0.85rem !important;
}
}
/* Extra small devices (phones in portrait, less than 400px) */
@media (max-width: 400px) {
/* Single column nav pills for very small screens */
.nav-pills {
grid-template-columns: repeat(2, 1fr) !important;
}
.nav-pills .nav-link {
font-size: 0.55rem !important;
padding: 0.3rem 0.15rem !important;
}
.nav-pills .nav-link i {
font-size: 0.7rem;
}
/* Even smaller metrics grid */
.metrics-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.metric-item {
padding: 0.25rem !important;
}
.metric-label {
font-size: 0.5rem !important;
}
.metric-value {
font-size: 0.65rem !important;
}
/* Page title very small */
.page-title {
font-size: 0.75rem !important;
}
.header-title {
font-size: 0.75rem !important;
}
/* Social icons very small */
.social-icons .ico {
width: 24px;
height: 24px;
font-size: 0.6rem !important;
}
/* Analysis text very small */
.analysis-text {
font-size: 0.7rem !important;
}
/* Breadcrumb very small */
.breadcrumb {
font-size: 0.6rem !important;
}
.breadcrumb-item {
max-width: 70px;
}
}
/* ===========================================
UNIFIED VERTICAL ALIGNMENT SYSTEM
Master alignment for all elements
=========================================== */
/* ===== CSS VARIABLES FOR CONSISTENT SPACING ===== */
:root {
--section-gap: 1.5rem;
--section-padding-desktop: 1.5rem;
--section-padding-mobile: 1rem;
--content-margin-x: 0;
--header-margin-top: 0;
--header-margin-bottom: 1rem;
--h1-font-size-desktop: 1.75rem;
--h1-font-size-tablet: 1.5rem;
--h1-font-size-mobile: 1.25rem;
--h2-font-size-desktop: 1.25rem;
--h2-font-size-tablet: 1.1rem;
--h2-font-size-mobile: 1rem;
--h3-font-size-desktop: 1.1rem;
--h3-font-size-mobile: 0.95rem;
}
/* ===== UNIFIED CONTAINER ALIGNMENT ===== */
.container-fluid {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ===== MAIN CONTENT WRAPPER ===== */
main.container-fluid {
max-width: 1600px;
margin: 0 auto;
}
/* ===== PAGE TITLE BOX - Consistent alignment ===== */
.page-title-box.unified-page-header {
padding: var(--section-padding-desktop);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 0 0 var(--section-gap) 0 !important;
}
/* ===== H1 PAGE TITLE ===== */
h1.page-title {
color: white !important;
font-size: var(--h1-font-size-desktop) !important;
font-weight: 700 !important;
margin: 0 0 0.75rem 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
text-align: left !important;
}
h1.page-title span.badge {
vertical-align: middle;
font-size: 0.7rem !important;
padding: 0.35em 0.7em !important;
border-radius: 6px !important;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700 !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
border: 1px solid rgba(255,255,255,0.1);
margin-left: 0.5rem;
}
h1.page-title span.badge a {
color: white !important;
text-decoration: none !important;
}
h1.page-title small.text-muted {
font-size: 0.75rem !important;
font-weight: 400 !important;
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7) !important;
padding: 0.2rem 0.5rem !important;
border-radius: 4px;
margin-left: 0.5rem;
display: inline-block;
}
/* ===== H2 SECTION HEADERS - Unified ===== */
h2, .h2,
h2.header-title,
h2.header-title.text-left,
h2.header-title.text-left.mb-4,
h2.header-title.text-left.mb-4.metrics-h2 {
font-size: var(--h2-font-size-desktop) !important;
font-weight: 600 !important;
font-family: "Cerebri Sans", sans-serif !important;
color: #ec7c30 !important;
margin: var(--header-margin-top) 0 var(--header-margin-bottom) 0 !important;
padding: 0 0 0.5rem 0 !important;
line-height: 1.4 !important;
border-bottom: 1px solid rgba(236, 124, 48, 0.3);
text-align: left !important;
}
/* Remove border from h2s that should not have it */
h2.chart-title,
h3.header-title,
h4,
h5,
h6 {
border-bottom: none !important;
}
/* ===== H3 SUB-HEADERS ===== */
h3.header-title,
h3.chart-title {
font-size: var(--h3-font-size-desktop) !important;
font-weight: 600 !important;
color: #ec7c30 !important;
margin: 0 0 0.75rem 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
/* ===== UNIFIED SECTION STYLING ===== */
.forecast-card,
.fundamentals-section,
.news-section,
.peers-section,
.faq-section,
.cta-section,
.investment-metrics-section {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: var(--section-padding-desktop) !important;
margin: 0 0 var(--section-gap) 0 !important;
color: white;
transition: all 0.3s ease;
}
/* Remove margin-top inline styles override */
.news-section[style*="margin-top"],
.peers-section[style*="margin-top"],
.faq-section[style*="margin-top"] {
margin-top: 0 !important;
margin-bottom: var(--section-gap) !important;
}
/* ===== CARD BOX INSIDE FORECAST CARD ===== */
.forecast-card .card-box {
background: transparent;
border: none;
color: white;
padding: 0 !important;
}
/* ===== ROW AND COLUMN ALIGNMENT ===== */
.row {
margin-left: 0;
margin-right: 0;
}
.col-12,
.col-md-6,
.col-md-12,
.col-lg-12,
.col-xl-12 {
padding-left: 0;
padding-right: 0;
}
/* ===== CONTENT PARAGRAPH ALIGNMENT ===== */
.forecast-card p,
.fundamentals-section p,
.news-section p,
.peers-section p,
.faq-section p,
.cta-section p {
margin: 0 0 0.75rem 0;
text-align: left;
}
/* ===== BREADCRUMB ALIGNMENT ===== */
.breadcrumb {
background: transparent;
margin: 0 0 0.5rem 0 !important;
padding: 0 !important;
font-size: 0.8rem;
}
/* ===== SOCIAL ICONS ALIGNMENT ===== */
.social-icons {
margin: 0.75rem 0 0 0 !important;
justify-content: flex-start;
}
/* ===== HR DIVIDER ===== */
hr {
margin: var(--section-gap) 0 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* ===== COMPANY ANALYSIS SECTION ===== */
.company-analysis-section {
padding: 0 !important;
margin: 0 !important;
}
/* ===== TAB CONTENT ALIGNMENT ===== */
.tab-content,
#companyAnalysisTabContent,
#metricsTabContent {
padding: 1.5rem !important;
margin-top: 0.75rem;
text-align: left;
background: rgba(26, 32, 44, 0.5) !important;
border: 1px solid #4a5568 !important;
border-radius: 15px !important;
}
/* ===== UNIFIED HEADING ALIGNMENT IN TABS ===== */
/* H4 headers in analysis tabs */
.tab-content h4,
#companyAnalysisTabContent h4,
#metricsTabContent h4 {
color: #ec7c30 !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
margin: 0 0 1rem 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
/* H5 headers in analysis tabs - match h4 styling for consistency */
.tab-content h5,
#companyAnalysisTabContent h5,
#metricsTabContent h5,
.metrics-explanation h5 {
color: #ec7c30 !important;
font-size: 1rem !important;
font-weight: 600 !important;
margin: 0 0 0.75rem 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
/* ===== UNIFIED EXPLANATION BOX STYLING ===== */
.analysis-text,
.metrics-explanation {
margin: 0 0 1.5rem 0 !important;
padding: 0 !important;
color: #e2e8f0;
}
/* Analysis timestamp paragraph */
.analysis-timestamp {
font-size: 0.85rem !important;
margin: 0 0 1rem 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.6) !important;
}
/* Paragraphs in tab content */
.tab-content p,
#companyAnalysisTabContent p,
#metricsTabContent p,
.analysis-text p,
.metrics-explanation p {
margin: 0 0 0.75rem 0 !important;
line-height: 1.6 !important;
color: #e2e8f0 !important;
}
/* Last paragraph no margin */
.analysis-text p:last-child,
.metrics-explanation p:last-child {
margin-bottom: 0 !important;
}
/* ===== NAV PILLS ALIGNMENT ===== */
.nav-pills {
margin-bottom: 0 !important;
}
/* ===== METRICS GRID ALIGNMENT ===== */
.metrics-grid {
margin: 0.75rem 0 0 0 !important;
}
/* ===== FAQ SECTION ALIGNMENT ===== */
.faq-section .row {
margin: 0;
}
.faq-section .col-md-6 {
padding: 0 0.75rem;
}
.faq-section .col-md-6:first-child {
padding-left: 0;
}
.faq-section .col-md-6:last-child {
padding-right: 0;
}
.faq-item {
margin-bottom: 1.25rem !important;
}
.faq-item h4 {
font-size: 1rem !important;
font-weight: 600 !important;
color: #ec7c30 !important;
margin: 0 0 0.5rem 0 !important;
line-height: 1.4 !important;
}
.faq-item p {
font-size: 0.9rem !important;
line-height: 1.5 !important;
color: #e2e8f0 !important;
margin: 0 !important;
}
/* ===== NEWS ITEM ALIGNMENT ===== */
.news-item {
text-align: left;
}
.news-item h4 {
margin: 0 0 0.5rem 0 !important;
}
/* ===== PEERS TABLE ALIGNMENT ===== */
.peers-content {
margin: 0 !important;
}
/* ============================================
TABLET RESPONSIVE (768px - 992px)
============================================ */
@media (max-width: 992px) {
:root {
--section-gap: 1.25rem;
--section-padding-desktop: 1.25rem;
}
h1.page-title {
font-size: var(--h1-font-size-tablet) !important;
}
h2, .h2,
h2.header-title,
h2.header-title.text-left,
h2.header-title.text-left.mb-4,
h2.header-title.text-left.mb-4.metrics-h2 {
font-size: var(--h2-font-size-tablet) !important;
}
}
/* ============================================
MOBILE RESPONSIVE (max-width: 768px)
============================================ */
@media (max-width: 768px) {
:root {
--section-gap: 1rem;
--section-padding-desktop: 1rem;
--header-margin-bottom: 0.75rem;
}
.container-fluid {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* H1 Mobile */
h1.page-title {
font-size: var(--h1-font-size-mobile) !important;
margin: 0 0 0.5rem 0 !important;
line-height: 1.35 !important;
}
h1.page-title span.badge {
font-size: 0.6rem !important;
padding: 0.3em 0.5em !important;
margin-left: 0.25rem;
display: inline-block;
margin-top: 0.25rem;
}
h1.page-title small.text-muted {
font-size: 0.65rem !important;
display: block;
margin-left: 0;
margin-top: 0.5rem;
}
/* H2 Mobile */
h2, .h2,
h2.header-title,
h2.header-title.text-left,
h2.header-title.text-left.mb-4,
h2.header-title.text-left.mb-4.metrics-h2 {
font-size: var(--h2-font-size-mobile) !important;
margin: 0 0 0.75rem 0 !important;
padding: 0 0 0.4rem 0 !important;
}
/* H3 Mobile */
h3.header-title,
h3.chart-title {
font-size: var(--h3-font-size-mobile) !important;
margin: 0 0 0.5rem 0 !important;
}
/* Section padding mobile */
.forecast-card,
.fundamentals-section,
.news-section,
.peers-section,
.faq-section,
.cta-section,
.investment-metrics-section {
padding: var(--section-padding-mobile) !important;
margin: 0 0 var(--section-gap) 0 !important;
border-radius: 8px;
}
/* Tab content mobile */
.tab-content,
#companyAnalysisTabContent,
#metricsTabContent {
padding: 1rem !important;
}
/* FAQ mobile - stack columns */
.faq-section .col-md-6 {
padding: 0 !important;
}
.faq-item h4 {
font-size: 0.9rem !important;
}
.faq-item p {
font-size: 0.85rem !important;
}
/* Social icons mobile */
.social-icons {
margin: 0.5rem 0 0 0 !important;
}
/* Breadcrumb mobile */
.breadcrumb {
font-size: 0.7rem !important;
margin: 0 0 0.4rem 0 !important;
}
/* HR mobile */
hr {
margin: 0.75rem 0 !important;
}
}
/* ============================================
SMALL MOBILE (max-width: 576px)
============================================ */
@media (max-width: 576px) {
:root {
--section-gap: 0.75rem;
--section-padding-mobile: 0.75rem;
}
/* Tab content alignment - small mobile */
#companyAnalysisTabContent h4,
#metricsTabContent h4 {
font-size: 0.95rem !important;
margin: 0 0 0.6rem 0 !important;
padding: 0 !important;
color: #ec7c30;
}
#companyAnalysisTabContent h5,
#metricsTabContent h5 {
font-size: 0.85rem !important;
margin: 0 0 0.4rem 0 !important;
padding: 0 !important;
color: #ec7c30;
}
#companyAnalysisTabContent .analysis-timestamp,
#metricsTabContent .analysis-timestamp {
font-size: 0.7rem !important;
margin: 0 0 0.75rem 0 !important;
}
#companyAnalysisTabContent p,
#metricsTabContent p,
#companyAnalysisTabContent .analysis-text,
#metricsTabContent .metrics-explanation {
font-size: 0.8rem !important;
margin: 0 0 0.4rem 0 !important;
line-height: 1.4;
}
.container-fluid {
padding-left: 8px !important;
padding-right: 8px !important;
}
h1.page-title {
font-size: 1.1rem !important;
}
h2, .h2,
h2.header-title,
h2.header-title.text-left,
h2.header-title.text-left.mb-4,
h2.header-title.text-left.mb-4.metrics-h2 {
font-size: 0.95rem !important;
}
h3.header-title,
h3.chart-title {
font-size: 0.85rem !important;
}
.faq-item h4 {
font-size: 0.85rem !important;
}
.faq-item p {
font-size: 0.8rem !important;
}
/* Tab content small mobile */
.tab-content,
#companyAnalysisTabContent,
#metricsTabContent {
padding: 0.75rem !important;
}
}
/* ============================================
EXTRA SMALL MOBILE (max-width: 400px)
============================================ */
@media (max-width: 400px) {
h1.page-title {
font-size: 1rem !important;
}
h2, .h2,
h2.header-title {
font-size: 0.9rem !important;
}
h3.header-title {
font-size: 0.8rem !important;
}
.faq-item h4 {
font-size: 0.8rem !important;
}
.faq-item p {
font-size: 0.75rem !important;
}
}
/* ============================================
NEWS MODULE (newsletter-style)
Keeps Intratio visual identity (orange accent + dark glass)
============================================ */
.news-section {
position: relative;
}
.news-content {
max-height: min(560px, 70vh);
overflow-y: auto;
padding: 0.75rem;
border-radius: 12px;
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.news-card {
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.03);
padding: 0.85rem 0.95rem;
margin: 0;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.news-card:hover {
transform: none;
border-color: rgba(236, 124, 48, 0.45);
background: rgba(236, 124, 48, 0.06);
}
.news-card--featured {
background: rgba(236, 124, 48, 0.07);
border-color: rgba(236, 124, 48, 0.25);
}
.news-card__title {
margin: 0 0 0.45rem 0;
line-height: 1.35;
font-weight: 700;
font-size: 1rem;
border: none !important;
}
.news-card__title a {
color: #e2e8f0;
text-decoration: none;
}
.news-card__title a:hover {
color: var(--secondary-orange);
}
.news-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin: 0 0 0.6rem 0;
}
.news-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.55rem;
border-radius: 6px;
font-size: 0.72rem;
line-height: 1.2;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.news-badge strong {
color: rgba(255, 255, 255, 0.92);
font-weight: 700;
}
.news-badge--time i {
color: var(--primary-orange);
}
.news-card__snippet {
margin: 0;
color: #cbd5e1;
font-size: 0.88rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.news-content {
max-height: 360px;
padding: 0.6rem;
border-radius: 10px;
gap: 0.6rem;
}
.news-card {
padding: 0.75rem 0.8rem;
border-radius: 10px;
}
.news-card__title {
font-size: 0.92rem;
}
.news-card__snippet {
font-size: 0.82rem;
-webkit-line-clamp: 4;
}
}
@media (prefers-reduced-motion: reduce) {
.news-card {
transition: none;
}
.news-card:hover {
transform: none;
}
}
/* ---- block 2 of 7, extracted from stock_forecast.html ---- */
/* Sticky CTA Banner Styles */
.sticky-cta-banner {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: 800px;
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 12px 20px;
z-index: 9990;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-signal-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 6px;
font-weight: 700;
font-size: 0.75rem;
flex-shrink: 0;
}
.sticky-signal-badge.signal-bullish {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.sticky-signal-badge.signal-bearish {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.sticky-signal-badge.signal-neutral-badge {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.3);
}
/* Hidden signal badge - for strong predictions shown to non-predict users */
.sticky-signal-badge.signal-hidden-badge {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
border: 1px solid rgba(99, 102, 241, 0.3);
}
.sticky-google-btn {
display: flex;
align-items: center;
gap: 8px;
background: white;
color: #374151 !important;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
}
.sticky-google-btn:hover {
background: #f3f4f6;
transform: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #374151;
}
.sticky-subscribe-btn {
display: flex;
align-items: center;
gap: 8px;
background: #ec7c30 !important;
color: #ffffff !important;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none !important;
transition: all 0.2s ease;
}
.sticky-subscribe-btn:hover {
background: #d16b26 !important;
transform: none;
box-shadow: none;
color: #ffffff !important;
}
.sticky-subscribe-btn i {
color: #ffffff !important;
}
@keyframes slideUpFade {
from { transform: translate(-50%, 100%); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
.sticky-cta-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.sticky-cta-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.sticky-text-group {
display: flex;
flex-direction: column;
min-width: 0;
}
.sticky-title {
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-subtitle {
color: #94a3b8;
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-cta-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.sticky-btn {
background: white;
color: #0f172a;
padding: 10px 24px;
border-radius: 10px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.sticky-btn:hover {
background: #f1f5f9;
transform: none;
color: #ec7c30;
}
.sticky-close-btn {
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
padding: 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.sticky-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
/* Mobile signal indicator - hidden on desktop, shown on mobile */
.sticky-signal-mobile {
display: none;
}
.signal-bullish-text {
color: #10b981;
}
.signal-bearish-text {
color: #ef4444;
}
.signal-neutral-text {
color: #fbbf24;
}
/* Mobile responsive */
@media (max-width: 768px) {
.sticky-cta-banner {
bottom: 0;
left: 0;
transform: none;
width: 100%;
max-width: none;
border-radius: 16px 16px 0 0;
border-bottom: none;
border-left: none;
border-right: none;
padding: 12px 15px;
padding-right: 90px; /* Space for chatbot widget (56px) + close button + gap */
}
.sticky-cta-wrapper {
flex-direction: row;
align-items: center;
gap: 10px;
}
.sticky-cta-left {
flex: 1;
min-width: 0;
padding-right: 0;
}
.sticky-signal-badge {
display: none; /* Hide full signal badge on mobile */
}
.sticky-signal-mobile {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 0.8rem;
margin-right: 6px;
}
.sticky-signal-mobile i {
font-size: 0.9rem;
}
.sticky-text-group {
width: 100%;
}
.sticky-title {
white-space: normal;
line-height: 1.3;
font-size: 0.85rem;
margin-bottom: 2px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.sticky-title-text {
color: #ffffff;
}
.sticky-subtitle {
white-space: normal;
line-height: 1.2;
font-size: 0.75rem;
}
.sticky-cta-right {
flex-shrink: 0;
}
.sticky-btn {
padding: 10px 16px;
font-size: 0.85rem;
white-space: nowrap;
}
.sticky-google-btn,
.sticky-subscribe-btn {
padding: 10px 14px;
font-size: 0.8rem;
}
.sticky-google-btn svg {
width: 16px;
height: 16px;
}
.sticky-close-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 70px; /* Position before the chatbot widget */
background: rgba(255, 255, 255, 0.1);
width: 28px;
height: 28px;
}
}
/* Small mobile responsive */
@media (max-width: 576px) {
.sticky-cta-banner {
padding: 10px 12px;
padding-right: 85px; /* Space for chatbot widget + close button */
}
.sticky-cta-wrapper {
gap: 8px;
}
.sticky-title {
font-size: 0.8rem;
}
.sticky-signal-mobile {
font-size: 0.75rem;
}
.sticky-signal-mobile i {
font-size: 0.85rem;
}
.sticky-subtitle {
display: none; /* Hide subtitle on small mobile */
}
.sticky-btn,
.sticky-google-btn,
.sticky-subscribe-btn {
padding: 8px 12px;
font-size: 0.75rem;
gap: 5px;
}
.sticky-google-btn svg {
width: 14px;
height: 14px;
}
.sticky-subscribe-btn i {
font-size: 0.85rem;
}
.sticky-close-btn {
right: 65px;
width: 26px;
height: 26px;
}
}
/* Extra small mobile */
@media (max-width: 400px) {
.sticky-cta-banner {
padding: 8px 10px;
padding-right: 80px;
}
.sticky-title {
font-size: 0.75rem;
line-height: 1.2;
}
.sticky-signal-mobile {
font-size: 0.7rem;
margin-right: 4px;
}
.sticky-signal-mobile i {
font-size: 0.8rem;
}
.sticky-btn,
.sticky-google-btn,
.sticky-subscribe-btn {
padding: 7px 10px;
font-size: 0.7rem;
border-radius: 6px;
}
.sticky-close-btn {
width: 24px;
height: 24px;
right: 60px;
}
}
/* ==================== UX IMPROVEMENT STYLES ==================== */
/* Content Gate Overlay - for gating analysis tabs */
.content-preview-container {
position: relative;
min-height: 350px;
max-height: 450px;
overflow: hidden;
}
.content-preview-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 300px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(11, 16, 27, 0.3) 20%,
rgba(11, 16, 27, 0.6) 40%,
rgba(11, 16, 27, 0.85) 60%,
rgba(11, 16, 27, 0.95) 80%,
rgba(11, 16, 27, 1) 100%);
pointer-events: none;
z-index: 50;
}
.content-gate-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
padding-top: 3rem;
text-align: center;
z-index: 100;
background: transparent;
}
.content-gate-box {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(236, 124, 48, 0.3);
border-radius: 12px;
padding: 1.5rem;
max-width: 400px;
margin: 0 auto;
}
.content-gate-box i {
font-size: 2rem;
color: #ec7c30;
margin-bottom: 0.5rem;
}
.content-gate-box h4 {
color: white;
margin: 0.5rem 0;
font-size: 1.1rem;
}
.content-gate-box p {
color: #a0aec0;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.content-gate-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: #0f172a !important;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
margin: 5px;
}
.content-gate-btn:hover {
background: #f1f5f9;
color: #ec7c30 !important;
transform: none;
text-decoration: none;
}
.content-gate-btn.google-btn {
background: white;
color: #374151 !important;
}
.content-gate-btn.linkedin-btn {
background: #0A66C2;
color: white !important;
}
.content-gate-btn.linkedin-btn:hover {
background: #004182;
color: white !important;
}
/* News Gate specific styles */
.news-gate {
position: relative;
margin-top: 20px;
padding: 0;
}
.news-gate .content-gate-overlay {
position: relative;
background: linear-gradient(to bottom,
transparent 0%,
rgba(11, 16, 27, 0.7) 20%,
rgba(11, 16, 27, 0.95) 50%,
rgba(11, 16, 27, 1) 100%);
padding: 40px 20px 20px 20px;
border-radius: 12px;
}
.content-gate-message {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(236, 124, 48, 0.3);
border-radius: 12px;
padding: 1.5rem;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.content-gate-message i {
color: #ec7c30;
}
.content-gate-message h4 {
color: white;
margin: 0.5rem 0;
font-size: 1.1rem;
}
.content-gate-message p {
color: #a0aec0;
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* Sticky Header CTA - desktop */
.sticky-header-cta {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(15, 23, 42, 0.98);
border-bottom: 1px solid rgba(236, 124, 48, 0.3);
padding: 10px 20px;
z-index: 9999;
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.sticky-header-cta.visible {
transform: translateY(0);
}
.sticky-header-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.sticky-ticker {
color: white;
font-weight: 600;
}
.sticky-signal {
font-weight: 700;
}
.sticky-signal.bullish {
color: #10b981;
}
.sticky-signal.bearish {
color: #ef4444;
}
.sticky-signal.neutral {
color: #fbbf24;
}
.sticky-teaser {
color: #94a3b8;
font-size: 0.9rem;
}
.sticky-header-cta-btn {
background: #ec7c30;
color: white !important;
padding: 8px 20px;
border-radius: 6px;
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.2s ease;
}
.sticky-header-cta-btn:hover {
background: #d16b26;
color: white !important;
transform: none;
text-decoration: none;
}
/* Desktop Sticky CTA - shows when value-preview-banner scrolls out */
.desktop-sticky-cta {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(15, 23, 42, 0.98);
border-bottom: 2px solid rgba(236, 124, 48, 0.5);
padding: 12px 20px;
z-index: 10000;
transform: translateY(-100%);
transition: transform 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.desktop-sticky-cta.visible {
transform: translateY(0);
}
.desktop-sticky-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.desktop-sticky-left {
display: flex;
align-items: center;
gap: 15px;
}
.desktop-sticky-ticker {
color: white;
font-weight: 700;
font-size: 1.1rem;
}
.desktop-sticky-signal {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 0.85rem;
}
.desktop-sticky-signal.signal-bullish {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.desktop-sticky-signal.signal-bearish {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.desktop-sticky-signal.signal-neutral {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
/* Hidden signal for non-predict users viewing strong predictions */
.desktop-sticky-signal.signal-hidden {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
}
.desktop-sticky-teaser {
color: #94a3b8;
font-size: 0.9rem;
}
.desktop-sticky-right {
display: flex;
align-items: center;
gap: 10px;
}
.desktop-sticky-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: #0f172a !important;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
}
.desktop-sticky-btn:hover {
background: #ec7c30;
color: white !important;
transform: none;
text-decoration: none;
}
@media (max-width: 768px) {
.desktop-sticky-cta {
display: none; /* Hide on mobile, use sticky banner instead */
}
}
/* Quick Answer Card */
.quick-answer-card {
background: rgba(15, 23, 42, 0.9);
border: 2px solid rgba(236, 124, 48, 0.4);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
.quick-answer-content {
/* Container for content */
}
.quick-answer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.quick-answer-label {
background: rgba(236, 124, 48, 0.2);
color: #ec7c30;
padding: 4px 12px;
border-radius: 12px;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.quick-answer-ticker {
color: white;
font-weight: 700;
font-size: 1.1rem;
}
.quick-answer-body {
/* Body container */
}
.quick-answer-question {
color: white;
font-size: 1.1rem;
margin-bottom: 15px;
}
.quick-answer-response {
margin-bottom: 20px;
}
.quick-answer-response p {
color: #a0aec0;
font-size: 0.95rem;
margin: 10px 0 0 0;
line-height: 1.5;
}
.quick-answer-signal {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
}
.quick-answer-signal.signal-bullish {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.quick-answer-signal.signal-bearish {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.quick-answer-signal.signal-neutral {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.3);
}
.quick-answer-signal i {
font-size: 1.1rem;
}
.quick-answer-cta {
text-align: center;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.quick-answer-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: white;
color: #0f172a !important;
padding: 12px 28px;
border-radius: 6px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
margin-bottom: 10px;
}
.quick-answer-btn:hover {
background: #ec7c30;
color: white !important;
transform: none;
box-shadow: none;
text-decoration: none;
}
.quick-answer-trust {
display: block;
color: #64748b;
font-size: 0.8rem;
}
/* Old QA styles (keep for compatibility) */
.qa-label {
color: #ec7c30;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 1px;
}
.qa-updated {
color: #64748b;
font-size: 0.8rem;
}
.qa-direction {
display: flex;
align-items: center;
gap: 8px;
}
.qa-direction i {
font-size: 2rem;
}
.qa-signal {
font-size: 1.5rem;
font-weight: 800;
}
.qa-signal.bullish {
color: #10b981;
}
.qa-signal.bearish {
color: #ef4444;
}
.qa-signal.neutral {
color: #fbbf24;
}
.qa-target, .qa-confidence {
text-align: center;
}
.qa-target-label, .qa-confidence-label {
display: block;
color: #64748b;
font-size: 0.75rem;
margin-bottom: 4px;
}
.qa-target-value {
color: #ec7c30;
font-size: 1.3rem;
font-weight: 700;
}
.qa-target-value.blurred {
filter: blur(6px);
user-select: none;
}
.qa-confidence-value {
color: white;
font-weight: 600;
}
.quick-answer-cta {
text-align: center;
}
.qa-unlock-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: #0f172a !important;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.qa-unlock-btn:hover {
background: #f1f5f9;
color: #ec7c30 !important;
transform: none;
text-decoration: none;
}
/* Premium Upgrade Box */
.premium-upgrade-box {
background: rgba(236, 124, 48, 0.05);
border: 1px solid rgba(236, 124, 48, 0.2);
border-radius: 12px;
padding: 20px;
text-align: left;
}
.premium-upgrade-box h4 {
color: white;
margin: 0 0 15px 0;
font-size: 1rem;
}
.premium-features-list {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
}
.premium-features-list li {
color: #e2e8f0;
font-size: 0.85rem;
padding: 6px 0;
display: flex;
align-items: center;
gap: 10px;
}
.premium-features-list li i {
color: #10b981;
}
.premium-features-list .blurred {
filter: blur(4px);
color: #ec7c30;
}
.premium-cta-btn {
display: block;
background: #ec7c30;
color: white !important;
text-align: center;
padding: 12px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.premium-cta-btn:hover {
transform: none;
box-shadow: none;
color: white !important;
text-decoration: none;
}
.premium-guarantee {
text-align: center;
color: #64748b;
font-size: 0.8rem;
margin: 10px 0 0 0;
}
/* News section signup prompt */
.news-signup-prompt {
background: rgba(236, 124, 48, 0.1);
border: 1px solid rgba(236, 124, 48, 0.3);
border-radius: 10px;
padding: 15px;
text-align: center;
margin-top: 15px;
}
.news-signup-prompt p {
color: #e2e8f0;
margin: 0 0 10px 0;
font-size: 0.9rem;
}
.news-signup-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ec7c30;
color: white !important;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.2s ease;
}
.news-signup-btn:hover {
background: #d16b26;
color: white !important;
transform: none;
text-decoration: none;
}
/* Mobile Overrides for UX Improvements */
@media (max-width: 768px) {
.sticky-header-cta {
padding: 8px 12px;
}
.sticky-header-content {
font-size: 0.85rem;
gap: 8px;
}
.sticky-header-cta-btn {
padding: 6px 14px;
font-size: 0.8rem;
}
.quick-answer-card {
padding: 15px;
}
.quick-answer-body {
flex-direction: column;
gap: 15px;
}
.qa-signal {
font-size: 1.2rem;
}
.content-preview-container {
max-height: 200px;
}
.content-gate-box {
padding: 1rem;
}
.content-gate-box h4 {
font-size: 1rem;
}
.content-gate-btn {
padding: 8px 16px;
font-size: 0.8rem;
display: block;
width: 100%;
text-align: center;
margin: 5px 0;
}
}
/* ==================== END UX IMPROVEMENT STYLES ==================== */
/* Exit Intent Modal Styles */
.exit-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.exit-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.8);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.exit-modal-content {
position: relative;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 40px;
max-width: 480px;
width: 100%;
text-align: center;
animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
@keyframes scaleIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.exit-modal-close {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
color: #94a3b8;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.exit-modal-close:hover {
background: rgba(255, 255, 255, 0.05);
color: white;
}
.exit-modal-icon-wrapper {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: white;
font-size: 32px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.exit-modal-title {
color: white;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 12px 0;
line-height: 1.3;
}
.exit-modal-subtitle {
color: #94a3b8;
font-size: 1rem;
line-height: 1.5;
margin: 0 0 32px 0;
}
.exit-feature-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
text-align: left;
}
.exit-feature-item {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.exit-feature-item i {
color: #ec7c30;
font-size: 1.2rem;
}
.exit-feature-item span {
color: #e2e8f0;
font-size: 0.95rem;
font-weight: 500;
}
.exit-modal-cta-btn {
display: block;
width: 100%;
background: white;
color: #0f172a;
padding: 16px;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
transition: all 0.2s ease;
margin-bottom: 16px;
}
.exit-modal-cta-btn:hover {
background: #f1f5f9;
color: #ec7c30;
transform: none;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}
.exit-modal-dismiss {
color: #64748b;
font-size: 0.9rem;
cursor: pointer;
margin: 0;
transition: color 0.2s;
}
.exit-modal-dismiss:hover {
color: #94a3b8;
text-decoration: underline;
}
/* Mobile responsive */
@media (max-width: 768px) {
.sticky-cta-content {
flex-direction: column;
text-align: left;
align-items: flex-start;
}
.sticky-cta-text {
justify-content: flex-start;
margin-bottom: 12px;
width: 100%;
}
.sticky-cta-sub {
display: none; /* Hide subtitle on mobile to save space */
}
.sticky-cta-buttons {
width: 100%;
justify-content: flex-start;
}
.sticky-cta-btn-primary {
flex: 1;
text-align: center;
justify-content: center;
}
.sticky-cta-close {
margin-left: 10px;
}
.exit-modal-content {
padding: 20px;
margin: 10px;
max-height: 90vh;
overflow-y: auto;
}
.exit-modal-title {
font-size: 1.3rem;
}
.exit-modal-icon {
font-size: 3rem;
margin-bottom: 10px;
}
.exit-feature {
padding: 8px 12px;
}
.value-preview-banner {
padding: 15px;
}
.value-preview-content {
gap: 20px;
}
.value-preview-left {
min-width: 0; /* Fix overflow for long titles */
width: 100%;
}
.value-preview-stats {
width: 100%;
justify-content: center;
gap: 8px;
flex-wrap: wrap; /* Allow wrapping for long words like 'Quotidiennement' */
}
.stat-item {
flex: 1 1 auto;
min-width: 80px;
padding: 8px 5px;
}
.stat-value {
font-size: 0.9rem;
overflow-wrap: break-word;
hyphens: auto;
}
.stat-label {
font-size: 0.6rem;
}
}
/* ---- block 3 of 7, extracted from stock_forecast.html ---- */
/* Value Preview Banner Styles */
.value-preview-banner {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px 25px;
margin-bottom: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.value-preview-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.value-preview-left {
flex: 1;
min-width: 280px;
}
.value-preview-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(236, 124, 48, 0.2);
color: #ec7c30;
padding: 5px 15px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 10px;
}
.pulse-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
}
.value-preview-title {
color: white !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
margin: 0 0 8px 0 !important;
line-height: 1.3 !important;
}
.value-preview-desc {
color: #a0aec0;
font-size: 0.95rem;
margin: 0;
}
.value-preview-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.value-preview-stats {
display: flex;
gap: 20px;
}
.stat-item {
text-align: center;
padding: 8px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-value {
display: block;
color: #ec7c30;
font-size: 1.2rem;
font-weight: 700;
}
.stat-label {
display: block;
color: #a0aec0;
font-size: 0.7rem;
text-transform: uppercase;
}
.value-preview-cta {
background: white;
color: #0f172a;
padding: 12px 30px;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: none;
}
.value-preview-cta:hover {
background: #f1f5f9;
color: #ec7c30;
transform: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.value-preview-cta span {
transition: transform 0.3s ease;
}
.value-preview-cta:hover span {
transform: translateX(5px);
}
.value-preview-trust {
color: #6c757d;
font-size: 0.8rem;
margin: 0;
}
.value-preview-trust span {
color: #1abc9c;
}
/* Teased Prediction Box Styles */
.teased-prediction-box {
background: rgba(15, 23, 42, 0.8);
border: 2px solid rgba(236, 124, 48, 0.4);
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 15px;
display: inline-block;
}
.teased-label {
font-size: 0.7rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
font-weight: 600;
}
.teased-signal {
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.teased-signal i {
font-size: 1.3rem;
}
/* Signal colors for teased prediction box */
.teased-signal.signal-bullish {
color: #10b981;
}
.teased-signal.signal-bearish {
color: #ef4444;
}
.teased-signal.signal-neutral {
color: #fbbf24;
}
.signal-strong-buy { color: #10b981; }
.signal-buy { color: #34d399; }
.signal-neutral { color: #fbbf24; }
.signal-sell { color: #f87171; }
.signal-strong-sell { color: #ef4444; }
/* Hidden signal color for strong predictions shown to non-predict users */
.signal-hidden { color: #818cf8; }
.teased-value {
display: flex;
align-items: center;
gap: 10px;
}
.blurred-value {
font-size: 1.8rem;
font-weight: 700;
color: #ec7c30;
filter: blur(6px);
user-select: none;
}
.teased-hint {
font-size: 0.75rem;
color: #94a3b8;
font-style: italic;
}
/* Instant Signup Box Styles */
.instant-signup-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
text-align: center;
min-width: 280px;
}
.instant-signup-title {
color: white;
font-weight: 600;
font-size: 0.95rem;
margin: 0 0 15px 0;
}
.social-signup-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
margin-bottom: 10px;
position: relative;
}
.social-signup-btn:last-child {
margin-bottom: 0;
}
.social-signup-btn svg,
.social-signup-btn i {
position: relative;
z-index: 2;
display: block;
}
.google-btn {
background: white;
color: #374151;
border: 1px solid #e5e7eb;
}
.google-btn:hover {
background: #f9fafb;
color: #374151;
transform: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.linkedin-btn {
background: #0A66C2;
color: white;
border: 1px solid #0A66C2;
}
.linkedin-btn:hover {
background: #004182;
color: white;
transform: none;
box-shadow: none;
}
.email-btn {
background: rgba(236, 124, 48, 0.1);
color: #ec7c30;
border: 1px solid rgba(236, 124, 48, 0.3);
}
.email-btn:hover {
background: #ec7c30;
color: white;
transform: none;
}
.subscribe-btn {
background: #ec7c30;
color: white !important;
border: none;
}
.subscribe-btn:hover {
background: #d16b26;
color: white;
transform: none;
box-shadow: none;
}
.signup-divider {
display: flex;
align-items: center;
margin: 12px 0;
color: #64748b;
font-size: 0.8rem;
}
.signup-divider::before,
.signup-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.signup-divider span {
padding: 0 12px;
}
@media (max-width: 768px) {
.value-preview-content {
flex-direction: column;
text-align: center;
}
.teased-prediction-box {
width: 100%;
box-sizing: border-box;
}
.instant-signup-box {
width: 100%;
min-width: unset;
}
.value-preview-right {
align-items: center;
width: 100%;
}
.value-preview-stats {
justify-content: center;
}
.value-preview-title {
font-size: 1.2rem !important;
}
.stat-item {
padding: 6px 12px;
}
.stat-value {
font-size: 1rem;
}
}
/* ---- block 4 of 7, extracted from stock_forecast.html ---- */
.big-move-cta-banner {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(236, 124, 48, 0.4);
border-radius: 10px;
padding: 20px 25px;
margin-bottom: 1.5rem;
box-shadow: none;
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
}
.big-move-cta-badge.badge-bullish {
background: rgba(16, 185, 129, 0.2) !important;
color: #10b981 !important;
}
.big-move-cta-badge.badge-bearish {
background: rgba(239, 68, 68, 0.2) !important;
color: #ef4444 !important;
}
.blurred-inline {
filter: blur(5px);
color: #ec7c30;
}
.big-move-google-btn, .big-move-linkedin-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 250px;
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
margin-bottom: 8px;
}
.big-move-google-btn {
background: white;
color: #374151 !important;
}
.big-move-google-btn:hover {
background: #f9fafb;
transform: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
color: #374151;
}
.big-move-linkedin-btn {
background: #0A66C2;
color: white !important;
}
.big-move-linkedin-btn:hover {
background: #004182;
transform: none;
box-shadow: none;
color: white;
}
.big-move-subscribe-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 250px;
padding: 14px 25px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
margin-bottom: 8px;
background: #ec7c30;
color: white !important;
}
.big-move-subscribe-btn:hover {
background: #d16b26;
transform: none;
box-shadow: none;
color: white;
}
.big-move-cta-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.big-move-cta-left {
flex: 1;
min-width: 280px;
}
.big-move-cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(236, 124, 48, 0.2);
color: #ec7c30;
padding: 5px 15px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 10px;
}
.pulse-dot-orange {
width: 8px;
height: 8px;
background: #ec7c30;
border-radius: 50%;
animation: pulseDotOrange 2s infinite;
}
@keyframes pulseDotOrange {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
}
.big-move-cta-title {
color: white !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
margin: 0 0 8px 0 !important;
line-height: 1.3 !important;
}
.big-move-cta-desc {
color: #a0aec0;
font-size: 0.95rem;
margin: 0;
}
.big-move-cta-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.big-move-cta-stats {
display: flex;
gap: 20px;
margin-bottom: 5px;
}
.big-move-stat-item {
text-align: center;
}
.big-move-stat-value {
display: block;
color: #ec7c30;
font-size: 1.2rem;
font-weight: 700;
}
.big-move-stat-label {
display: block;
color: #6c757d;
font-size: 0.7rem;
text-transform: uppercase;
}
.big-move-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: #0f172a !important;
padding: 12px 28px;
border-radius: 6px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
}
.big-move-cta-btn:hover {
background: #f1f5f9;
color: #ec7c30 !important;
transform: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.big-move-cta-btn span {
transition: transform 0.3s ease;
}
.big-move-cta-btn:hover span {
transform: translateX(4px);
}
.big-move-cta-trust {
color: #6c757d;
font-size: 0.8rem;
margin: 0;
}
.big-move-cta-trust span {
color: #1abc9c;
}
@media (max-width: 768px) {
.big-move-cta-banner {
padding: 15px;
}
.big-move-cta-content {
flex-direction: column;
text-align: center;
}
.big-move-cta-left {
min-width: 0;
width: 100%;
}
.big-move-cta-right {
width: 100%;
}
.big-move-cta-title {
font-size: 1.1rem !important;
}
.big-move-cta-stats {
justify-content: center;
gap: 10px;
}
.big-move-stat-item {
padding: 6px 10px;
}
.big-move-stat-value {
font-size: 1rem;
}
.big-move-stat-label {
font-size: 0.6rem;
}
.big-move-cta-btn {
font-size: 0.85rem;
padding: 10px 20px;
}
.big-move-cta-trust {
font-size: 0.7rem;
}
}
@media (max-width: 400px) {
.big-move-cta-banner {
padding: 12px 10px;
}
.big-move-cta-badge {
font-size: 0.65rem;
padding: 4px 10px;
}
.big-move-cta-title {
font-size: 0.95rem !important;
}
.big-move-cta-desc {
font-size: 0.8rem;
}
.big-move-cta-stats {
gap: 6px;
flex-wrap: nowrap;
}
.big-move-stat-item {
flex: 1 1 0;
min-width: 0;
padding: 6px 4px;
}
.big-move-stat-value {
font-size: 0.85rem;
}
.big-move-stat-label {
font-size: 0.5rem;
}
.big-move-cta-btn {
font-size: 0.75rem;
padding: 10px 15px;
width: 100%;
display: block;
text-align: center;
}
.big-move-cta-trust {
font-size: 0.6rem;
}
}
/* ---- block 5 of 7, extracted from stock_forecast.html ---- */
.premium-cta-banner {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px 25px;
margin-top: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
}
.premium-cta-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.premium-cta-left {
flex: 1;
min-width: 280px;
}
.premium-cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(236, 124, 48, 0.2);
color: #ec7c30;
padding: 5px 15px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 10px;
}
.pulse-dot-premium {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulseDotPremium 2s infinite;
}
@keyframes pulseDotPremium {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
}
.premium-cta-title {
color: white !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
margin: 0 0 8px 0 !important;
line-height: 1.3 !important;
}
.premium-cta-desc {
color: #a0aec0;
font-size: 0.95rem;
margin: 0;
}
.premium-cta-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.premium-cta-stats {
display: flex;
gap: 20px;
margin-bottom: 5px;
}
.premium-stat-item {
text-align: center;
padding: 8px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.premium-stat-value {
display: block;
color: #ec7c30;
font-size: 1.2rem;
font-weight: 700;
}
.premium-stat-label {
display: block;
color: #6c757d;
font-size: 0.7rem;
text-transform: uppercase;
}
.premium-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: #0f172a !important;
padding: 12px 28px;
border-radius: 6px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
}
.premium-cta-btn:hover {
background: #f1f5f9;
color: #ec7c30 !important;
transform: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.premium-cta-btn span {
transition: transform 0.3s ease;
}
.premium-cta-btn:hover span {
transform: translateX(4px);
}
.premium-cta-trust {
color: #6c757d;
font-size: 0.8rem;
margin: 0;
}
.premium-cta-trust span {
color: #1abc9c;
}
@media (max-width: 768px) {
.premium-cta-banner {
padding: 15px;
}
.premium-cta-content {
flex-direction: column;
text-align: center;
}
.premium-cta-left {
min-width: 0;
width: 100%;
}
.premium-cta-right {
width: 100%;
}
.premium-cta-title {
font-size: 1.1rem !important;
}
.premium-cta-stats {
justify-content: center;
gap: 10px;
}
.premium-stat-item {
padding: 6px 10px;
}
.premium-stat-value {
font-size: 1rem;
}
.premium-stat-label {
font-size: 0.6rem;
}
.premium-cta-btn {
font-size: 0.85rem;
padding: 10px 20px;
}
.premium-cta-trust {
font-size: 0.7rem;
}
}
@media (max-width: 400px) {
.premium-cta-banner {
padding: 12px 10px;
}
.premium-cta-badge {
font-size: 0.65rem;
padding: 4px 10px;
}
.premium-cta-title {
font-size: 0.95rem !important;
}
.premium-cta-desc {
font-size: 0.8rem;
}
.premium-cta-stats {
gap: 6px;
flex-wrap: nowrap;
}
.premium-stat-item {
flex: 1 1 0;
min-width: 0;
padding: 6px 4px;
}
.premium-stat-value {
font-size: 0.85rem;
}
.premium-stat-label {
font-size: 0.5rem;
}
.premium-cta-btn {
font-size: 0.75rem;
padding: 10px 15px;
width: 100%;
display: block;
text-align: center;
}
.premium-cta-trust {
font-size: 0.6rem;
}
}
/* ---- block 6 of 7, extracted from stock_forecast.html ---- */
.peers-unlock-cta {
margin-top: 15px;
padding: 12px 16px;
background: rgba(236, 124, 48, 0.08);
border: 1px solid rgba(236, 124, 48, 0.2);
border-radius: 10px;
}
.peers-unlock-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
}
.peers-unlock-left {
display: flex;
align-items: center;
gap: 12px;
color: #e2e8f0;
}
.peers-unlock-left i {
font-size: 1.5rem;
color: #ec7c30;
}
.peers-unlock-left strong {
display: block;
font-size: 0.9rem;
}
.peers-unlock-left span {
font-size: 0.8rem;
color: #94a3b8;
}
.peers-unlock-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: #374151 !important;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.2s ease;
}
.peers-unlock-btn:hover {
background: #f9fafb;
transform: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
color: #374151;
}
.peers-subscribe-btn {
background: #ec7c30 !important;
color: white !important;
}
.peers-subscribe-btn:hover {
background: #d16b26 !important;
box-shadow: none !important;
color: white !important;
}
.forecast-teaser {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 576px) {
.peers-unlock-content {
flex-direction: column;
text-align: center;
}
.peers-unlock-left {
flex-direction: column;
}
.peers-unlock-btn {
width: 100%;
justify-content: center;
}
}
/* ---- block 7 of 7, extracted from stock_forecast.html ---- */
/* ============================================================
INSTITUTIONAL THEME — matches the portfolio optimization
progress monitor: flat ink panels, hairline rules, restrained
accent, small-caps labels, monospace tabular figures.
Loaded last so it re-skins every component above.
============================================================ */
/* ---------- Panels: flat ink, hairline border, 10px radius ---------- */
.forecast-card,
.fundamentals-section, .news-section, .peers-section, .sidebar-section,
.faq-section, .cta-section, .investment-metrics-section,
.company-analysis-section,
.value-preview-banner, .instant-signup-box,
.big-move-cta-banner, .premium-cta-banner,
.content-gate-box, .exit-modal-content,
.news-content, .peers-content {
background: #0b101b !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 10px !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.company-analysis-section {
padding: 1rem !important;
}
/* No hover lift anywhere — hover is a quiet border shift */
.forecast-card:hover,
.fundamentals-section:hover, .news-section:hover, .peers-section:hover,
.sidebar-section:hover, .faq-section:hover, .cta-section:hover,
.investment-metrics-section:hover,
.news-content:hover, .peers-content:hover,
.metric-item:hover, .forecast-period:hover, .stat-item:hover {
transform: none !important;
box-shadow: none !important;
background: #0b101b !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
/* Inner tiles */
.stat-item, .premium-stat-item, .metric-item, .forecast-period,
.teased-prediction-box, .metrics-explanation, .peers-unlock-cta {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.analysis-subsection {
background: rgba(255, 255, 255, 0.015) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-left: 2px solid #ec7c30 !important;
border-radius: 0 8px 8px 0 !important;
}
.forecast-returns-section {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 8px !important;
}
.news-card--featured {
background: rgba(255, 255, 255, 0.02) !important;
border-color: rgba(255, 255, 255, 0.09) !important;
}
.sidebar-header {
background: rgba(255, 255, 255, 0.02) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
/* ---------- Headers: bright, hairline underline, accent icon ---------- */
.header-title, .chart-title,
.news-section .card-title, .peers-section .card-title,
.sidebar-title, .value-preview-title,
.forecast-returns-title, .analysis-subsection-title {
color: #eef1f6 !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
.header-title,
.news-section .card-title, .peers-section .card-title {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-bottom: 0.5rem !important;
}
.header-title > i.mdi, .header-title .mdi,
.news-section .card-title i, .peers-section .card-title i,
.sidebar-title i {
color: #ec7c30 !important;
}
.analysis-subsection-title, .forecast-returns-title {
font-size: 0.84rem !important;
}
/* Small-caps micro labels */
.teased-label, .stat-label, .metric-label {
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
font-size: 0.6rem !important;
font-weight: 600 !important;
color: #57617a !important;
}
/* ---------- Numbers: monospace, tabular ---------- */
.metric-value, .stat-value, .blurred-value,
.forecast-period-value, .teased-value,
.premium-stat-item .stat-value, .premium-stat-item strong {
font-family: "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace !important;
font-variant-numeric: tabular-nums !important;
}
.metric-value { color: #ccd3e0 !important; font-weight: 600 !important; }
.stat-value { color: #ccd3e0 !important; }
/* ---------- Semantic colors: calmer institutional palette ---------- */
.positive { color: #3fae8a !important; }
.negative { color: #d9605f !important; }
.neutral { color: #cfa14a !important; }
.teased-signal.signal-bullish, .signal-strong-buy { color: #3fae8a !important; }
.signal-buy { color: #4fae93 !important; }
.teased-signal.signal-neutral, .signal-neutral { color: #cfa14a !important; }
.signal-sell { color: #d3736f !important; }
.teased-signal.signal-bearish, .signal-strong-sell { color: #d9605f !important; }
/* ---------- Tabs: terminal-style underline, no pills ---------- */
.investment-metrics-wrapper .nav-pills,
.nav-pills {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0 !important;
padding: 0 !important;
}
.nav-pills .nav-link, .metrics-tab-btn {
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
color: #7b8497 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
font-size: 0.66rem !important;
font-weight: 600 !important;
padding: 0.6rem 0.75rem !important;
transition: color 0.2s, border-color 0.2s !important;
}
.nav-pills .nav-link:hover, .metrics-tab-btn:hover {
color: #aab3c4 !important;
transform: none !important;
box-shadow: none !important;
}
.nav-pills .nav-link.active, .metrics-tab-btn.active {
background: transparent !important;
color: #eef1f6 !important;
border-bottom: 2px solid #ec7c30 !important;
box-shadow: none !important;
}
/* ---------- Tables: solid header, small caps, mono cells ---------- */
.peers-table thead th,
.table thead th {
background: #0d1320 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
font-size: 0.58rem !important;
font-weight: 600 !important;
color: #7b8497 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}
.peers-table thead th::before { background: #0d1320 !important; }
.peers-table thead th:hover { background: #0d1320 !important; color: #aab3c4 !important; }
.peers-table tbody td, .table tbody td {
font-family: "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace !important;
font-variant-numeric: tabular-nums !important;
color: #aab3c4 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.peers-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012) !important; }
.peers-table tbody tr:hover td { background: rgba(236, 124, 48, 0.05) !important; }
/* ---------- Buttons ---------- */
/* Primary actions: flat accent, no gradients, no lift */
.subscribe-btn, .sticky-subscribe-btn, .premium-cta-btn,
.big-move-subscribe-btn, .peers-subscribe-btn,
.value-preview-cta, .exit-modal-cta-btn, .quick-answer-btn,
.content-gate-btn.subscribe-btn, .desktop-sticky-subscribe {
background: #ec7c30 !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
box-shadow: none !important;
font-weight: 600 !important;
}
.subscribe-btn:hover, .sticky-subscribe-btn:hover, .premium-cta-btn:hover,
.big-move-subscribe-btn:hover, .peers-subscribe-btn:hover,
.value-preview-cta:hover, .exit-modal-cta-btn:hover, .quick-answer-btn:hover,
.content-gate-btn.subscribe-btn:hover, .desktop-sticky-subscribe:hover {
background: #d16b26 !important;
color: #ffffff !important;
transform: none !important;
box-shadow: none !important;
}
/* Identity sign-in buttons keep their brand colors, lose the lift */
.google-btn, .sticky-google-btn, .peers-unlock-btn, .content-gate-btn,
.linkedin-btn, .email-btn, .sticky-btn, .desktop-sticky-btn, .social-signup-btn {
border-radius: 6px !important;
}
.google-btn:hover, .sticky-google-btn:hover, .peers-unlock-btn:hover,
.content-gate-btn:hover, .linkedin-btn:hover, .email-btn:hover,
.sticky-btn:hover, .desktop-sticky-btn:hover, .social-signup-btn:hover {
transform: none !important;
box-shadow: none !important;
}
.follow-btn {
border-radius: 6px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
font-size: 0.66rem !important;
}
.follow-btn:hover { transform: none !important; box-shadow: none !important; }
/* ---------- Badges & signal chips: square, small caps, muted fills ---------- */
.badge, .value-preview-badge, .sticky-signal-badge,
.big-move-cta-badge, .premium-cta-badge {
border-radius: 4px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.badge:hover { transform: none !important; }
.badge-success { background: rgba(63, 174, 138, 0.14) !important; color: #3fae8a !important; }
.badge-warning { background: rgba(236, 124, 48, 0.14) !important; color: #ec7c30 !important; }
.badge-danger { background: rgba(217, 96, 95, 0.14) !important; color: #d9605f !important; }
.value-preview-badge, .big-move-cta-badge, .premium-cta-badge {
background: rgba(236, 124, 48, 0.12) !important;
color: #ec7c30 !important;
font-size: 0.62rem !important;
}
/* ---------- Sticky CTAs: flat ink bars ---------- */
.sticky-cta-banner {
background: #0b101b !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
border-radius: 10px !important;
}
.desktop-sticky-cta {
background: rgba(11, 16, 27, 0.97) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
}
/* ---------- Hero: teased prediction ---------- */
.teased-prediction-box {
border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
.teased-signal { font-weight: 600 !important; font-size: 1.25rem !important; }
.blurred-value { color: #ccd3e0 !important; }
/* ---------- News ---------- */
.news-item h4, .news-item h4 a, .news-card__title, .news-card__title a {
color: #d7dce6 !important;
font-weight: 600 !important;
}
.news-item h4 a:hover, .news-card__title a:hover { color: #ec7c30 !important; }
.news-item .author, .news-card__meta { color: #57617a !important; }
.news-item p { color: #8b95a8 !important; }
/* ---------- FAQ ---------- */
.faq-section h4 { color: #d7dce6 !important; font-size: 0.88rem !important; }
.faq-section p { color: #8b95a8 !important; }
/* ---------- Social icons: ghost circles ---------- */
.social-icons .ico {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #8b95a8 !important;
}
.social-icons .ico:hover {
background: transparent !important;
border-color: #ec7c30 !important;
color: #ec7c30 !important;
transform: none !important;
box-shadow: none !important;
}
/* ---------- Scrollbars: slate, not orange ---------- */
.news-content::-webkit-scrollbar-thumb,
.peers-content .table-responsive::-webkit-scrollbar-thumb {
background: #39435a !important;
}
.news-content::-webkit-scrollbar-track,
.peers-content .table-responsive::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.04) !important;
}
/* ---------- Misc ---------- */
.metrics-explanation {
border: 1px solid rgba(255, 255, 255, 0.07) !important;
background: transparent !important;
color: #8b95a8 !important;
}
.peers-unlock-cta {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.exit-modal-content { border-radius: 12px !important; }
.analysis-text { color: #aab3c4 !important; }
.market-position-title { color: #d7dce6 !important; }
hr { border-color: rgba(255, 255, 255, 0.07) !important; }
/* ---------- Headers: out-specify the unified header system ---------- */
h2, .h2,
h2.header-title,
h2.header-title.text-left.mb-4.metrics-h2,
h3.header-title, h3.chart-title,
h3.header-title.text-left.mb-4.metrics-h2 {
color: #eef1f6 !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
h2 i.mdi, h3.header-title i.mdi, h2.header-title i.mdi {
color: #ec7c30 !important;
}
.tab-content h4, #companyAnalysisTabContent h4, #metricsTabContent h4,
.tab-content h5, #companyAnalysisTabContent h5, #metricsTabContent h5,
.metrics-explanation h5 {
color: #d7dce6 !important;
}
.tab-content h4 i, #companyAnalysisTabContent h4 i, #metricsTabContent h4 i,
.tab-content h5 i, #companyAnalysisTabContent h5 i, #metricsTabContent h5 i,
.metrics-explanation h5 i {
color: #ec7c30 !important;
}
/* Tab content: soft inner panel, not slate-blue rounded box */
.tab-content, #companyAnalysisTabContent, #metricsTabContent {
background: rgba(255, 255, 255, 0.015) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 10px !important;
}
/* Remaining white-pill CTAs: flat accent */
.big-move-cta-btn, .qa-unlock-btn {
background: #ec7c30 !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.big-move-cta-btn:hover, .qa-unlock-btn:hover {
background: #d16b26 !important;
color: #ffffff !important;
transform: none !important;
box-shadow: none !important;
}
/* ---------- Fundamentals chart component (page-scoped re-theme) ---------- */
.ifc-component {
--ifc-secondary: #ec7c30; /* collapses gradients to flat accent */
--ifc-bullish: #3fae8a;
--ifc-bullish-dim: rgba(63, 174, 138, 0.22);
--ifc-bearish: #d9605f;
--ifc-bearish-dim: rgba(217, 96, 95, 0.22);
--ifc-neutral: #cfa14a;
--ifc-border-active: rgba(255, 255, 255, 0.14);
--ifc-glass-bg: rgba(255, 255, 255, 0.02);
--ifc-panel-bg: rgba(255, 255, 255, 0.015);
--ifc-shadow: none;
--ifc-shadow-glow: none;
}
.ifc-category-btn {
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
color: #7b8497 !important;
letter-spacing: 0.1em !important;
font-size: 0.66rem !important;
}
.ifc-category-btn:hover {
background: transparent !important;
color: #aab3c4 !important;
}
.ifc-category-btn.active {
background: transparent !important;
box-shadow: none !important;
color: #eef1f6 !important;
border-bottom: 2px solid #ec7c30 !important;
}
.ifc-category-btn i, .ifc-category-btn .ifc-cat-icon i {
color: inherit !important;
}