diff --git a/src/components/CarbonImpactComparison.tsx b/src/components/CarbonImpactComparison.tsx index 3687194..7e191ed 100644 --- a/src/components/CarbonImpactComparison.tsx +++ b/src/components/CarbonImpactComparison.tsx @@ -81,34 +81,34 @@ function ComparisonCard({ comparison, index }: ComparisonCardProps) { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.1, duration: 0.5 }} - className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20 hover:border-emerald-400/50 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20" + className="bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20 hover:border-emerald-400/50 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20 print:bg-white print:border-2 print:border-black print:backdrop-blur-none" > {/* Icon */}
-
- +
+
{/* Value */}
-
+
-
{comparison.unit}
+
{comparison.unit}
{/* Label */}
-

{comparison.label}

+

{comparison.label}

{comparison.description && ( -

{comparison.description}

+

{comparison.description}

)}
{/* Source */}
- Source: {comparison.source} + Source: {comparison.source}
); @@ -140,14 +140,14 @@ export function CarbonImpactComparison({ initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} - className="text-center mb-8" + className="text-center mb-8 print:mb-4" > -

{titleText}

-

{subtitleText}

+

{titleText}

+

{subtitleText}

{/* Comparison Cards Grid */} -
+
{comparisons.map((comparison, index) => ( -

+

Equivalencies calculated using EPA 2024, DEFRA 2024, and IMO 2024 verified conversion factors.

diff --git a/src/components/RechartsPortfolioPieChart.tsx b/src/components/RechartsPortfolioPieChart.tsx index c26404a..86be9fa 100644 --- a/src/components/RechartsPortfolioPieChart.tsx +++ b/src/components/RechartsPortfolioPieChart.tsx @@ -98,9 +98,9 @@ export function RechartsPortfolioPieChart({ return (
- {/* SVG Chart - Responsive container */} -
- + {/* SVG Chart - Responsive container (hidden in print) */} +
+ @@ -136,19 +136,45 @@ export function RechartsPortfolioPieChart({
- {/* Legend below chart (for print clarity) */} -
+ {/* Print-optimized table (visible only in print) */} +
+

Portfolio Distribution

+

+ Total: {totalTons} tons CO₂ +

+ + + + + + + + + + {chartData.map((item, index) => ( + + + + + + ))} + +
Project NamePercentageTons CO₂
{item.name}{item.percentage.toFixed(1)}%{item.tons}
+
+ + {/* Legend below chart (for screen clarity, hidden in print) */} +
{chartData.map((item, index) => ( -
+
-

+

{item.name}

-

+

{item.tons} tons ({item.percentage.toFixed(1)}%)

diff --git a/src/pages/CheckoutSuccess.tsx b/src/pages/CheckoutSuccess.tsx index 7267d2c..45566b0 100644 --- a/src/pages/CheckoutSuccess.tsx +++ b/src/pages/CheckoutSuccess.tsx @@ -126,29 +126,134 @@ export default function CheckoutSuccess({ {/* Print-specific styles */}