CEO.wiki:Charts.css

/* CEO.wiki Performance Charts CSS */ /* Modern, professional charts for company performance data */

.performance-chart {

   background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
   border-radius: 16px;
   padding: 30px;
   margin: 30px 0;
   box-shadow: 
       0 10px 40px rgba(0, 0, 0, 0.08),
       0 2px 8px rgba(0, 0, 0, 0.04);
   border: 1px solid #e5e7eb;
   animation: fadeInUp 0.6s ease-out;

}

@keyframes fadeInUp {

   from {
       opacity: 0;
       transform: translateY(20px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }

}

.chart-header {

   text-align: center;
   margin-bottom: 25px;
   padding-bottom: 20px;
   border-bottom: 3px solid;
   border-image: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%) 1;

}

.chart-title {

   font-size: 28px;
   font-weight: 700;
   color: #1e3a8a;
   margin: 0 0 10px 0;
   text-shadow: 0 1px 2px rgba(0,0,0,0.05);

}

.chart-subtitle {

   font-size: 16px;
   color: #6b7280;
   margin: 0;
   font-style: italic;

}

.chart-period {

   text-align: center;
   margin-bottom: 25px;
   padding: 12px 20px;
   background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
   border-radius: 8px;
   display: inline-block;
   width: 100%;

}

.period-label {

   font-weight: 600;
   color: #1e40af;
   margin-right: 8px;

}

.period-value {

   color: #1e3a8a;
   font-weight: 700;

}

/* Metrics Grid */ .metrics-grid {

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 20px;
   margin: 25px 0;

}

.metric-card {

   background: #ffffff;
   border-radius: 12px;
   padding: 20px;
   box-shadow: 
       0 4px 12px rgba(0, 0, 0, 0.05),
       0 1px 3px rgba(0, 0, 0, 0.03);
   border-left: 4px solid;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;

}

.metric-card::before {

   content: ;
   position: absolute;
   top: 0;
   right: 0;
   width: 100px;
   height: 100px;
   opacity: 0.05;
   background: radial-gradient(circle, currentColor 0%, transparent 70%);

}

.metric-card:hover {

   transform: translateY(-4px);
   box-shadow: 
       0 8px 20px rgba(0, 0, 0, 0.1),
       0 2px 6px rgba(0, 0, 0, 0.05);

}

.metric-revenue {

   border-left-color: #10b981;
   color: #10b981;

}

.metric-profit {

   border-left-color: #3b82f6;
   color: #3b82f6;

}

.metric-stock {

   border-left-color: #8b5cf6;
   color: #8b5cf6;

}

.metric-employees {

   border-left-color: #f59e0b;
   color: #f59e0b;

}

.metric-marketcap {

   border-left-color: #ef4444;
   color: #ef4444;

}

.metric-header {

   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 15px;
   color: currentColor;

}

.metric-comparison {

   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;

}

.metric-before, .metric-after {

   display: flex;
   flex-direction: column;
   flex: 1;

}

.metric-label {

   font-size: 11px;
   color: #6b7280;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 4px;

}

.metric-value {

   font-size: 18px;
   font-weight: 700;
   color: #1f2937;

}

.metric-arrow {

   font-size: 24px;
   color: #9ca3af;
   margin: 0 10px;
   font-weight: 300;

}

.metric-change {

   text-align: center;
   padding: 8px 15px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 700;
   margin-top: 10px;

}

.change-positive {

   background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
   color: #065f46;
   border: 1px solid #6ee7b7;

}

.change-positive::before {

   content: '▲ ';
   font-size: 12px;

}

.change-negative {

   background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
   color: #991b1b;
   border: 1px solid #fca5a5;

}

.change-negative::before {

   content: '▼ ';
   font-size: 12px;

}

/* Achievements Section */ .chart-achievements {

   margin-top: 30px;
   padding: 20px;
   background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
   border-radius: 12px;
   border-left: 4px solid #f59e0b;

}

.achievements-header {

   font-size: 18px;
   font-weight: 700;
   color: #92400e;
   margin: 0 0 15px 0;

}

.achievements-content {

   color: #78350f;
   line-height: 1.6;

}

.achievements-content ul {

   margin: 0;
   padding-left: 20px;

}

.achievements-content li {

   margin-bottom: 8px;

}

/* Sources */ .chart-sources {

   margin-top: 20px;
   padding-top: 15px;
   border-top: 1px solid #e5e7eb;
   text-align: center;
   color: #6b7280;

}

/* Mobile Responsiveness */ @media (max-width: 768px) {

   .performance-chart {
       padding: 20px 15px;
   }
   
   .metrics-grid {
       grid-template-columns: 1fr;
   }
   
   .metric-comparison {
       flex-direction: column;
       gap: 10px;
   }
   
   .metric-arrow {
       transform: rotate(90deg);
       margin: 10px 0;
   }

}

/* Print Styles */ @media print {

   .performance-chart {
       box-shadow: none;
       border: 1px solid #e5e7eb;
       page-break-inside: avoid;
   }
   
   .metric-card {
       box-shadow: none;
       border: 1px solid #e5e7eb;
   }

}