/* Vattenfall Color Scheme */ :root { --vattenfall-blue: #0066CC; --vattenfall-dark-blue: #004499; --vattenfall-light-blue: #E6F2FF; --vattenfall-green: #00B050; --vattenfall-dark-green: #008040; --vattenfall-light-green: #E6F7E6; --vattenfall-orange: #FF6600; --vattenfall-dark-orange: #CC5200; --vattenfall-light-orange: #FFF2E6; --vattenfall-gray: #666666; --vattenfall-light-gray: #F5F5F5; --vattenfall-dark-gray: #333333; --vattenfall-white: #FFFFFF; --vattenfall-black: #000000; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f8f9fa; color: var(--vattenfall-dark-gray); overflow: auto; min-height: 100vh; font-size: 14px; line-height: 1.4; } .presentation-container { width: 100vw; min-height: 100vh; position: relative; padding: 1rem; background: #f8f9fa; } .slide-container { width: 100%; min-height: calc(100vh - 8rem); position: relative; } .slide { display: none; width: 100%; min-height: calc(100vh - 4rem); padding: 2rem; background: var(--vattenfall-white); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative; transition: all 0.5s ease-in-out; overflow-y: auto; border: 1px solid #e0e0e0; } .slide.active { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .slide-content { max-width: 1200px; width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; padding: 1rem 0; } .slide-content h1 { font-size: 2rem; font-weight: 600; color: var(--vattenfall-blue); margin-bottom: 1.5rem; text-align: center; width: 100%; } .slide-content h2 { font-size: 1.5rem; font-weight: 600; color: #FFDA00; background: #2071B5; margin-bottom: 1rem; margin-top: 0; padding: 0.75rem 1.5rem; border-radius: 6px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } .slide-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--vattenfall-dark-gray); margin-bottom: 0.75rem; margin-top: 1.5rem; } .slide-content h4 { font-size: 1rem; font-weight: 600; color: var(--vattenfall-dark-gray); margin-bottom: 0.5rem; margin-top: 1rem; } .slide-content p { font-size: 14px; line-height: 1.5; margin-bottom: 1rem; color: var(--vattenfall-dark-gray); } .slide-content ul, .slide-content ol { margin-bottom: 1rem; padding-left: 1.5rem; text-align: left; } .slide-content li { font-size: 14px; line-height: 1.5; margin-bottom: 0.5rem; color: var(--vattenfall-dark-gray); } /* Title Slide Styles */ .vattenfall-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .logo-circle { width: 60px; height: 60px; background: var(--vattenfall-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: bold; } .vattenfall-logo h1 { font-size: 3rem; color: var(--vattenfall-blue); margin: 0; } h1 { font-size: 3rem; color: var(--vattenfall-dark-blue); margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } h2 { font-size: 2.5rem; color: #FFDA00; background: #2071B5; margin-bottom: 2rem; padding: 1rem 2rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 1200px; margin-left: auto; margin-right: auto; } h3 { font-size: 1.8rem; color: var(--vattenfall-dark-blue); margin-bottom: 1rem; } h4 { font-size: 1.4rem; color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .subtitle { font-size: 1.5rem; color: var(--vattenfall-gray); margin-bottom: 1rem; } .date-section { margin-top: 2rem; } .date { font-size: 1.2rem; color: var(--vattenfall-gray); font-style: italic; } .tagline { font-size: 1rem; color: var(--vattenfall-green); font-weight: bold; margin-top: 0.5rem; } /* Objective Slide Styles */ .objective-content { text-align: left; max-width: 1000px; } .objective-section h3 { color: var(--vattenfall-green); margin-top: 2rem; margin-bottom: 1rem; } .challenges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .challenge-item { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; text-align: center; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .challenge-icon { font-size: 2rem; margin-bottom: 1rem; } .challenge-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .challenge-item p { font-size: 0.9rem; color: var(--vattenfall-gray); } .phase1-goals { background: #f8f9fa; padding: 2rem; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .phase1-goals h3 { color: var(--vattenfall-green); margin-bottom: 1rem; } .phase1-goals ul { margin-left: 2rem; } .phase1-goals li { margin-bottom: 0.5rem; font-size: 1.1rem; line-height: 1.6; } .value-hypotheses { background: #f8f9fa; padding: 2rem; border-radius: 8px; border: 1px solid #e0e0e0; margin-top: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .value-hypotheses h3 { color: var(--vattenfall-orange); margin-bottom: 1rem; } .value-hypotheses p { margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.6; } .hypotheses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .hypothesis-item { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: center; } .hypothesis-item h4 { color: var(--vattenfall-orange); margin-bottom: 0.8rem; } .hypothesis-item p { font-size: 0.9rem; color: var(--vattenfall-gray); line-height: 1.5; margin: 0; } /* Environmental Analysis Styles */ .analysis-sections { max-width: 1200px; width: 100%; } .certainty-title, .volatility-title, .synthesis-title { font-size: 1.5rem; margin-bottom: 0.5rem; text-align: left; } .certainty-title { color: var(--vattenfall-green); } .volatility-title { color: var(--vattenfall-orange); } .synthesis-title { color: var(--vattenfall-blue); } .section-subtitle { font-size: 1rem; color: var(--vattenfall-gray); margin-bottom: 2rem; text-align: left; font-style: italic; } .trends-grid, .volatility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .trend-card, .volatility-card { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: left; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .trend-card.operational { border: 1px solid #e0e0e0; } .trend-card.software { border: 1px solid #e0e0e0; } .trend-card.customer { border: 1px solid #e0e0e0; } .trend-card.energy { border: 1px solid #e0e0e0; } .volatility-card { border: 1px solid #e0e0e0; } .trend-card h4, .volatility-card h4 { color: var(--vattenfall-dark-blue); margin-bottom: 1rem; font-size: 1.2rem; } .metric { font-weight: bold; color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .implication { color: var(--vattenfall-gray); font-style: italic; margin-bottom: 0.5rem; } .action { color: var(--vattenfall-green); font-weight: bold; } .paradox { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .conflict { flex: 1; padding: 0.5rem; background: var(--vattenfall-light-orange); border-radius: 5px; font-size: 0.9rem; } .vs { font-weight: bold; color: var(--vattenfall-orange); } .volatility-range { font-weight: bold; color: var(--vattenfall-orange); margin: 0.5rem 0; } .indicator { font-size: 0.9rem; color: var(--vattenfall-gray); font-style: italic; } .synthesis-section { background: #f8f9fa; padding: 2rem; border-radius: 8px; border: 1px solid #e0e0e0; margin-top: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .synthesis-content { text-align: left; } .core-challenge, .required-approach { margin: 1rem 0; padding: 1rem; background: var(--vattenfall-white); border-radius: 5px; } /* Internal Analysis Styles */ .internal-analysis { max-width: 1000px; width: 100%; } .analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .analysis-card { background: var(--vattenfall-white); padding: 2rem; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .analysis-card.strengths { border: 1px solid #e0e0e0; } .analysis-card.challenges { border: 1px solid #e0e0e0; } .analysis-card.opportunities { border: 1px solid #e0e0e0; } .card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .card-header h3 { color: var(--vattenfall-dark-blue); margin: 0; } .strength-icon, .challenge-icon, .opportunity-icon { font-size: 1.5rem; } .analysis-card ul { margin-left: 1.5rem; } .analysis-card li { margin-bottom: 0.8rem; font-size: 1.1rem; line-height: 1.6; } .key-insights { background: #f8f9fa; padding: 2rem; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .insight-item { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: left; } .insight-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.8rem; } .insight-item p { font-size: 1rem; line-height: 1.6; color: var(--vattenfall-gray); } .strategic-framework { background: var(--vattenfall-light-green); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; margin-top: 2rem; } .strategic-framework h3 { color: var(--vattenfall-green); margin-bottom: 1.5rem; } .framework-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .framework-section { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; } .framework-section h4 { color: var(--vattenfall-dark-blue); margin-bottom: 1rem; font-size: 1.1rem; } .framework-section ul { margin-left: 1.5rem; } .framework-section li { margin-bottom: 0.8rem; font-size: 0.95rem; line-height: 1.6; color: var(--vattenfall-gray); } /* Interview Results Styles */ .interview-results { max-width: 1000px; width: 100%; } .insights-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .insight-category { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: left; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .category-header h4 { color: var(--vattenfall-dark-blue); margin: 0; } .sentiment { padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: bold; } .sentiment.negative { background: var(--vattenfall-light-orange); color: var(--vattenfall-dark-orange); } .sentiment.warning { background: var(--vattenfall-light-blue); color: var(--vattenfall-blue); } .quote { font-style: italic; color: var(--vattenfall-gray); margin-bottom: 1rem; padding: 1rem; background: var(--vattenfall-white); border-radius: 5px; border: 1px solid #e0e0e0; } .impact { font-size: 0.9rem; color: var(--vattenfall-dark-gray); } .interview-summary { background: var(--vattenfall-light-green); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; } .summary-stats { display: flex; justify-content: space-around; margin-top: 1rem; } .stat-item { text-align: center; } .stat-number { font-size: 2rem; font-weight: bold; color: var(--vattenfall-green); } .stat-label { font-size: 0.9rem; color: var(--vattenfall-gray); } .critical-challenges { background: var(--vattenfall-light-orange); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; margin-top: 2rem; } .critical-challenges h3 { color: var(--vattenfall-orange); margin-bottom: 1.5rem; } .challenges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .challenge-item.critical { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: center; border: 1px solid #e0e0e0; } .challenge-item.critical .challenge-icon { font-size: 2rem; margin-bottom: 1rem; } .challenge-item.critical h4 { color: var(--vattenfall-orange); margin-bottom: 0.8rem; font-size: 1.1rem; } .challenge-item.critical p { font-size: 0.9rem; color: var(--vattenfall-gray); line-height: 1.5; margin: 0; } .success-metrics { background: var(--vattenfall-light-blue); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; margin-top: 2rem; } .success-metrics h3 { color: var(--vattenfall-blue); margin-bottom: 1.5rem; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; } .metric-item { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .metric-current { font-size: 1.2rem; font-weight: bold; color: var(--vattenfall-orange); } .metric-arrow { font-size: 1.5rem; color: var(--vattenfall-blue); font-weight: bold; } .metric-target { font-size: 1.2rem; font-weight: bold; color: var(--vattenfall-green); } .metric-label { font-size: 0.8rem; color: var(--vattenfall-gray); text-align: center; line-height: 1.3; } /* Conclusion Styles */ .conclusions-container { max-width: 1000px; width: 100%; } .conclusion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .conclusion-section { background: var(--vattenfall-white); padding: 2rem; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .conclusion-section.strategic { border: 1px solid #e0e0e0; } .conclusion-section.success { border: 1px solid #e0e0e0; } .conclusion-section h3 { color: var(--vattenfall-dark-blue); margin-bottom: 1.5rem; } .imperative-list { display: flex; flex-direction: column; gap: 1rem; } .imperative-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: var(--vattenfall-white); border-radius: 8px; } .priority { padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; } .imperative-item.high .priority { background: var(--vattenfall-light-orange); color: var(--vattenfall-dark-orange); } .imperative-item.medium .priority { background: var(--vattenfall-light-blue); color: var(--vattenfall-blue); } .imperative-item h4 { color: var(--vattenfall-dark-blue); margin-bottom: 0.5rem; } .imperative-item p { color: var(--vattenfall-gray); font-size: 0.9rem; } .success-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .factor-item { text-align: center; padding: 1rem; background: var(--vattenfall-white); border-radius: 8px; } .factor-icon { font-size: 2rem; margin-bottom: 0.5rem; } .factor-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .factor-item p { font-size: 0.9rem; color: var(--vattenfall-gray); } .phase2-readiness { background: var(--vattenfall-light-green); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; } .readiness-indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; } .indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem; background: var(--vattenfall-white); border-radius: 5px; } .indicator-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vattenfall-green); } /* IMD Model Styles */ .imd-container { max-width: 1400px; width: 100%; } .imd-header { text-align: center; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 3px solid var(--vattenfall-light-gray); } .imd-subtitle { color: var(--vattenfall-gray); font-style: italic; margin-bottom: 2rem; } .legend { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .legend-color { width: 20px; height: 12px; border-radius: 3px; } .legend-color.low { background: linear-gradient(90deg, #e74c3c, #c0392b); } .legend-color.medium { background: linear-gradient(90deg, #f39c12, #e67e22); } .legend-color.high { background: linear-gradient(90deg, #27ae60, #229954); } .volatility-legend { width: 30px; height: 2px; background: black; position: relative; } .volatility-legend::before, .volatility-legend::after { content: ''; position: absolute; width: 2px; height: 8px; background: black; top: -3px; } .volatility-legend::before { left: 0; } .volatility-legend::after { right: 0; } .orchestra-sections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2rem; } .section { background: var(--vattenfall-light-gray); border-radius: 15px; padding: 2rem; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .section:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .section-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #e0e0e0; } .section-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem; } .section1 .section-title { color: var(--vattenfall-blue); } .section2 .section-title { color: #9b59b6; } .section3 .section-title { color: #e74c3c; } .section4 .section-title { color: #f39c12; } .instrument { margin-bottom: 1.5rem; } .instrument-name { font-weight: 500; color: var(--vattenfall-dark-blue); margin-bottom: 0.5rem; font-size: 0.95rem; } .instrument-description { font-size: 0.85rem; color: var(--vattenfall-gray); margin-bottom: 0.8rem; line-height: 1.4; } .bar-container { position: relative; height: 30px; background: #ecf0f1; border-radius: 8px; overflow: visible; } .bar { height: 100%; border-radius: 8px; position: relative; transition: width 1s ease-out; } .bar-low { background: linear-gradient(90deg, #e74c3c, #c0392b); } .bar-medium { background: linear-gradient(90deg, #f39c12, #e67e22); } .bar-high { background: linear-gradient(90deg, #27ae60, #229954); } .volatility-indicator { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; background: rgba(0,0,0,0.8); pointer-events: none; } .volatility-indicator::before, .volatility-indicator::after { content: ''; position: absolute; width: 2px; height: 8px; background: rgba(0,0,0,0.8); top: -3px; } .volatility-indicator::before { left: 0; } .volatility-indicator::after { right: 0; } .maturity-value { position: absolute; right: -35px; top: 50%; transform: translateY(-50%); font-weight: 600; font-size: 0.9rem; color: var(--vattenfall-dark-blue); } .insights { background: linear-gradient(135deg, var(--vattenfall-blue) 0%, var(--vattenfall-green) 100%); color: white; padding: 2rem; border-radius: 15px; margin-bottom: 2rem; } .insights h3 { margin-bottom: 1.5rem; font-size: 1.8rem; color: white; } .insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .insight-item { background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 10px; backdrop-filter: blur(10px); text-align: center; } .insight-label { font-size: 0.9rem; opacity: 0.9; margin-bottom: 0.5rem; } .insight-value { font-size: 1.5rem; font-weight: 700; } .strategic-imperatives { background: var(--vattenfall-light-blue); padding: 2rem; border-radius: 15px; border: 1px solid #e0e0e0; } .strategic-imperatives h3 { color: var(--vattenfall-dark-blue); margin-bottom: 1.5rem; text-align: center; } .imperatives-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .imperative-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: var(--vattenfall-white); border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .imperative-number { width: 35px; height: 35px; background: var(--vattenfall-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; flex-shrink: 0; } .imperative-content h4 { color: var(--vattenfall-dark-blue); margin-bottom: 0.5rem; font-size: 1.1rem; } .imperative-content p { color: var(--vattenfall-gray); font-size: 0.9rem; line-height: 1.5; margin: 0; } @keyframes slideIn { from { width: 0; } } .bar { animation: slideIn 1s ease-out; } /* Technical Vision Styles */ .vision-container { max-width: 1000px; width: 100%; } .vision-header { text-align: center; margin-bottom: 2rem; } .vision-subtitle { color: var(--vattenfall-gray); font-style: italic; } .vision-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .pillar { background: var(--vattenfall-light-gray); padding: 2rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; border-top: 5px solid var(--vattenfall-blue); } .pillar.digital { border-top-color: var(--vattenfall-blue); } .pillar.ai { border-top-color: var(--vattenfall-green); } .pillar.hardware { border-top-color: var(--vattenfall-orange); } .pillar.operational { border-top-color: var(--vattenfall-dark-green); } .pillar-icon { font-size: 3rem; margin-bottom: 1rem; } .pillar h4 { color: var(--vattenfall-dark-blue); margin-bottom: 1rem; font-size: 1.3rem; } .pillar p { font-size: 1rem; line-height: 1.6; color: var(--vattenfall-gray); margin-bottom: 1rem; } .pillar-details { text-align: left; margin-top: 1rem; } .pillar-details ul { margin-left: 1.5rem; } .pillar-details li { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--vattenfall-gray); } .vision-principles { background: var(--vattenfall-light-blue); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; } .principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .principle { background: var(--vattenfall-white); padding: 1.5rem; border-radius: 8px; text-align: center; } .principle h4 { color: var(--vattenfall-blue); margin-bottom: 0.8rem; } .principle p { font-size: 0.9rem; color: var(--vattenfall-gray); line-height: 1.5; } /* Strategy Styles */ .strategy-container { max-width: 1000px; width: 100%; } .strategy-header { text-align: center; margin-bottom: 2rem; } .strategy-subtitle { color: var(--vattenfall-gray); font-style: italic; } .strategy-priorities { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .priority-item { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem; background: var(--vattenfall-light-gray); border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .priority-item.vision { border: 1px solid #e0e0e0; } .priority-item.ai { border: 1px solid #e0e0e0; } .priority-item.team { border: 1px solid #e0e0e0; } .priority-item.collaboration { border: 1px solid #e0e0e0; } .priority-number { width: 40px; height: 40px; background: var(--vattenfall-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; flex-shrink: 0; } .priority-content { flex: 1; text-align: left; } .priority-content h4 { color: var(--vattenfall-dark-blue); margin-bottom: 0.8rem; font-size: 1.3rem; } .priority-content p { color: var(--vattenfall-gray); margin-bottom: 1rem; line-height: 1.6; } .priority-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .action-tag { background: var(--vattenfall-light-blue); color: var(--vattenfall-blue); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: bold; } .implementation-timeline { background: var(--vattenfall-light-green); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; margin-bottom: 2rem; } .timeline { display: flex; justify-content: space-between; margin-top: 1rem; } .timeline-item { flex: 1; text-align: center; padding: 1rem; background: var(--vattenfall-white); border-radius: 8px; margin: 0 0.5rem; } .timeline-phase { background: var(--vattenfall-green); color: white; padding: 0.5rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem; } .timeline-content h4 { color: var(--vattenfall-dark-blue); margin-bottom: 0.5rem; } .timeline-content p { font-size: 0.9rem; color: var(--vattenfall-gray); } .success-metrics { background: var(--vattenfall-light-blue); padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .metric-item { text-align: center; padding: 1rem; background: var(--vattenfall-white); border-radius: 8px; } .metric-value { font-size: 1.8rem; font-weight: bold; color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .metric-label { font-size: 0.9rem; color: var(--vattenfall-gray); } /* Navigation Styles */ .navigation { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; background: var(--vattenfall-white); padding: 0.75rem 1.5rem; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 1px solid var(--vattenfall-border); z-index: 1000; } .navigation button { background: var(--vattenfall-blue); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 25px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: all 0.3s ease; } .navigation button:hover { background: var(--vattenfall-dark-blue); transform: translateY(-2px); } .navigation button:disabled { background: var(--vattenfall-gray); cursor: not-allowed; transform: none; } #slideCounter { font-size: 1.1rem; font-weight: bold; color: var(--vattenfall-dark-blue); min-width: 80px; text-align: center; } /* Responsive Design */ @media (max-width: 768px) { .slide { padding: 1rem; } h1 { font-size: 2rem; } h2 { font-size: 1.8rem; padding: 0.75rem 1.5rem; } .analysis-grid, .conclusion-grid, .imd-indicators, .vision-pillars, .strategy-priorities { grid-template-columns: 1fr; } .navigation { bottom: 1rem; padding: 0.8rem 1.5rem; gap: 1rem; } .navigation button { padding: 0.6rem 1.2rem; font-size: 0.9rem; } .timeline { flex-direction: column; } .timeline-item { margin: 0.5rem 0; } } /* Additional scrolling and content visibility styles */ .slide-content h2 { margin-top: 0; padding: 0.75rem 1.5rem; } .slide-content h3 { margin-top: 2rem; margin-bottom: 1rem; } .slide-content h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; } /* Ensure all content is visible */ .slide-content > * { margin-bottom: 1rem; } .slide-content > *:last-child { margin-bottom: 2rem; } /* Better spacing for complex content */ .analysis-sections, .internal-analysis, .interview-results, .conclusion-content, .imd-model, .technical-vision, .strategy-content { margin-top: 1rem; } /* Title Slide Styles */ .title-header { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid var(--vattenfall-border); } .vattenfall-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; } .logo-image { height: 60px; width: auto; max-width: 100%; } .title-content { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; } .date-section { text-align: center; padding: 1rem; background: var(--vattenfall-light-gray); border-radius: 4px; } .date { font-size: 1.2rem; font-weight: 600; color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .tagline { font-size: 0.9rem; color: var(--vattenfall-gray); font-style: italic; } .phase-info h3 { color: var(--vattenfall-blue); margin-bottom: 1rem; font-size: 1.1rem; } .phase-info ul { list-style: none; padding-left: 0; } .phase-info li { padding: 0.5rem 0; border-bottom: 1px solid var(--vattenfall-border); position: relative; padding-left: 1.5rem; } .phase-info li:before { content: "•"; color: var(--vattenfall-blue); font-weight: bold; position: absolute; left: 0; } /* Objective Slide Styles */ .objective-content { max-width: 100%; } .context-section { margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-light-gray); border-radius: 4px; border: 1px solid #e0e0e0; } .challenges-section { margin-bottom: 2rem; } .challenges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; } .challenge-item { padding: 1rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .challenge-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 0.95rem; } .challenge-item p { font-size: 13px; line-height: 1.4; margin-bottom: 0; } .phase1-objectives { margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-light-blue); border-radius: 4px; } .phase1-objectives h3 { color: var(--vattenfall-blue); margin-bottom: 1rem; } .phase1-objectives ul { list-style: none; padding-left: 0; } .phase1-objectives li { padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 102, 204, 0.2); position: relative; padding-left: 1.5rem; } .phase1-objectives li:before { content: "✓"; color: var(--vattenfall-blue); font-weight: bold; position: absolute; left: 0; } .value-hypotheses { padding: 1.5rem; background: var(--vattenfall-light-green); border-radius: 4px; } .value-hypotheses h3 { color: var(--vattenfall-green); margin-bottom: 1rem; } .hypotheses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; } .hypothesis-item { padding: 1rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .hypothesis-item h4 { color: var(--vattenfall-green); margin-bottom: 0.5rem; font-size: 0.95rem; } .hypothesis-item p { font-size: 13px; line-height: 1.4; margin-bottom: 0; } /* Environmental Analysis Styles */ .analysis-sections { max-width: 100%; } .certainty-section, .volatility-section, .synthesis-section { margin-bottom: 2rem; } .certainty-section h3 { color: var(--vattenfall-green); font-size: 1.1rem; margin-bottom: 0.5rem; } .volatility-section h3 { color: #e74c3c; font-size: 1.1rem; margin-bottom: 0.5rem; } .synthesis-section h3 { color: var(--vattenfall-orange); font-size: 1.1rem; margin-bottom: 0.5rem; } .section-subtitle { font-size: 0.9rem; color: var(--vattenfall-gray); margin-bottom: 1rem; font-style: italic; } .trends-grid, .volatility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; } .trend-card, .volatility-card { padding: 1rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .volatility-card { border: 1px solid #e0e0e0; } .trend-card h4, .volatility-card h4 { color: var(--vattenfall-blue); margin-bottom: 0.75rem; font-size: 0.95rem; } .metric, .implication, .action { font-size: 13px; line-height: 1.4; margin-bottom: 0.5rem; } .metric { font-weight: 600; color: var(--vattenfall-dark-gray); } .implication { color: var(--vattenfall-gray); font-style: italic; } .action { color: var(--vattenfall-green); font-weight: 500; } .paradox { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 13px; } .conflict { flex: 1; padding: 0.25rem 0.5rem; background: #f8f9fa; border-radius: 3px; text-align: center; } .vs { font-weight: bold; color: #e74c3c; } .volatility-range { font-size: 12px; color: #e74c3c; font-weight: 600; margin-bottom: 0.5rem; } .indicator { font-size: 12px; color: var(--vattenfall-gray); font-style: italic; } .synthesis-content { padding: 1.5rem; background: var(--vattenfall-light-orange); border-radius: 4px; border: 1px solid #e0e0e0; } .core-challenge, .required-approach { margin-bottom: 1rem; font-size: 14px; line-height: 1.5; } .core-challenge strong, .required-approach strong { color: var(--vattenfall-orange); } /* Internal Analysis Styles */ .internal-analysis { max-width: 100%; } .analysis-sections { display: grid; grid-template-columns: 1fr; gap: 2rem; } .it-strategy-section, .e-mobility-section, .ai-guidelines-section, .strategic-recommendations { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .strategy-objectives, .coordination-domains, .category-framework, .maturity-assessment, .ai-architecture { margin-bottom: 1.5rem; } .strategy-objectives h4, .coordination-domains h4, .category-framework h4, .maturity-assessment h4, .ai-architecture h4 { color: var(--vattenfall-blue); margin-bottom: 1rem; font-size: 1rem; } .domains-grid, .framework-grid, .ai-types, .recommendations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .domain-item, .framework-item, .ai-type-item, .recommendation-item { padding: 1rem; background: var(--vattenfall-light-gray); border-radius: 4px; border: 1px solid #e0e0e0; } .framework-item h5, .ai-type-item h5, .recommendation-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 0.9rem; } .framework-item p, .ai-type-item p, .recommendation-item p { font-size: 13px; line-height: 1.4; margin-bottom: 0; color: var(--vattenfall-dark-gray); } .maturity-assessment p { font-size: 14px; line-height: 1.5; color: var(--vattenfall-dark-gray); background: var(--vattenfall-light-blue); padding: 1rem; border-radius: 4px; border: 1px solid #e0e0e0; } .strategic-recommendations { border: 1px solid #e0e0e0; } .strategic-recommendations h3 { color: var(--vattenfall-green); margin-bottom: 1.5rem; } /* Interview Results Styles */ .interview-results { max-width: 100%; } .current-state, .key-divergences, .critical-challenges, .strategic-imperatives, .success-metrics { margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .consensus-content p, .divergences-content p { font-size: 14px; font-weight: 600; color: var(--vattenfall-blue); margin-bottom: 1rem; } .divergence-grid, .challenges-grid, .imperatives-grid, .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .divergence-item, .challenge-item { padding: 1rem; background: var(--vattenfall-light-gray); border-radius: 4px; text-align: center; border: 1px solid #e0e0e0; } .challenge-item { display: flex; flex-direction: column; align-items: center; } .challenge-icon { font-size: 2rem; margin-bottom: 0.5rem; } .challenge-item h4, .divergence-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 0.9rem; } .challenge-item p, .divergence-item p { font-size: 13px; line-height: 1.4; margin-bottom: 0; color: var(--vattenfall-dark-gray); } .imperative-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: var(--vattenfall-light-blue); border-radius: 4px; border: 1px solid #e0e0e0; } .imperative-number { background: var(--vattenfall-blue); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; } .imperative-content h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 0.95rem; } .imperative-content p { font-size: 13px; line-height: 1.4; margin-bottom: 0; color: var(--vattenfall-dark-gray); } .metric-item { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; background: var(--vattenfall-light-green); border-radius: 4px; border: 1px solid #e0e0e0; text-align: center; } .metric-current, .metric-target { font-weight: bold; font-size: 1.1rem; color: var(--vattenfall-green); } .metric-arrow { color: var(--vattenfall-gray); font-weight: bold; } .metric-label { font-size: 13px; color: var(--vattenfall-dark-gray); flex: 1; } /* Conclusion Styles */ .conclusion-content { max-width: 100%; } .key-findings, .strategic-imperatives, .value-potential, .next-phase { margin-bottom: 2rem; } .findings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .finding-item { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .finding-item.critical { border: 1px solid #e0e0e0; } .finding-item.opportunity { border: 1px solid #e0e0e0; } .finding-item.strength { border: 1px solid #e0e0e0; } .finding-item h4 { color: var(--vattenfall-blue); margin-bottom: 1rem; font-size: 1rem; } .finding-item ul { list-style: none; padding-left: 0; } .finding-item li { padding: 0.5rem 0; border-bottom: 1px solid var(--vattenfall-border); position: relative; padding-left: 1.5rem; font-size: 13px; line-height: 1.4; } .finding-item li:before { content: "•"; color: var(--vattenfall-blue); font-weight: bold; position: absolute; left: 0; } .imperatives-container { margin-top: 1rem; } .imperative-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: var(--vattenfall-light-gray); border-radius: 4px; border: 1px solid #e0e0e0; margin-bottom: 1rem; } .imperative-number { background: var(--vattenfall-blue); color: white; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1rem; flex-shrink: 0; } .imperative-content h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 1rem; } .imperative-content p { font-size: 14px; line-height: 1.5; margin-bottom: 0; color: var(--vattenfall-dark-gray); } .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .value-item { padding: 1.5rem; background: var(--vattenfall-light-green); border-radius: 4px; border: 1px solid #e0e0e0; text-align: center; } .value-metric { font-size: 1.5rem; font-weight: bold; color: var(--vattenfall-green); margin-bottom: 0.5rem; } .value-label { font-size: 13px; color: var(--vattenfall-dark-gray); line-height: 1.4; } .phase2-content { padding: 1.5rem; background: var(--vattenfall-light-blue); border-radius: 4px; border: 1px solid #e0e0e0; } .phase2-content p { font-size: 14px; font-weight: 600; color: var(--vattenfall-blue); margin-bottom: 1rem; } .phase2-content ul { list-style: none; padding-left: 0; } .phase2-content li { padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 102, 204, 0.2); position: relative; padding-left: 1.5rem; font-size: 14px; line-height: 1.5; } .phase2-content li:before { content: "→"; color: var(--vattenfall-blue); font-weight: bold; position: absolute; left: 0; } /* IMD Model Styles */ .imd-model { max-width: 100%; } .imd-header { text-align: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--vattenfall-border); } .imd-header h3 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 1.3rem; } .imd-subtitle { color: var(--vattenfall-gray); font-size: 0.9rem; font-style: italic; } .imd-dimensions { margin-bottom: 2rem; } .dimension-row { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; margin-bottom: 1.5rem; align-items: start; } .dimension-label { font-weight: 600; color: var(--vattenfall-blue); font-size: 0.9rem; padding: 0.5rem; background: var(--vattenfall-light-blue); border-radius: 4px; text-align: center; } .dimension-bars { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .bar-container { display: grid; grid-template-columns: 200px 1fr 80px 100px; gap: 1rem; align-items: center; } .bar-label { font-size: 0.85rem; color: var(--vattenfall-dark-gray); font-weight: 500; } .bar { position: relative; height: 25px; background: #ecf0f1; border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease-out; } .bar-value { font-size: 0.8rem; font-weight: 600; color: var(--vattenfall-dark-gray); text-align: center; } .volatility { font-size: 0.75rem; font-weight: 500; text-align: center; padding: 0.25rem 0.5rem; border-radius: 3px; } .volatility.high { background: #ffebee; color: #c62828; } .volatility.medium { background: #fff3e0; color: #ef6c00; } .imd-summary { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-light-gray); border-radius: 4px; } .summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .stat-item { text-align: center; padding: 1rem; background: var(--vattenfall-white); border-radius: 4px; border: 1px solid var(--vattenfall-border); } .stat-number { font-size: 1.5rem; font-weight: bold; color: var(--vattenfall-blue); margin-bottom: 0.5rem; } .stat-label { font-size: 0.8rem; color: var(--vattenfall-gray); } .key-insights h4 { color: var(--vattenfall-blue); margin-bottom: 1rem; font-size: 1rem; } .key-insights ul { list-style: none; padding-left: 0; } .key-insights li { padding: 0.5rem 0; border-bottom: 1px solid var(--vattenfall-border); font-size: 0.85rem; line-height: 1.4; } .key-insights li strong { color: var(--vattenfall-blue); } .imd-legend { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--vattenfall-dark-gray); } .legend-color { width: 20px; height: 12px; border-radius: 2px; } /* Technical Vision Styles */ .technical-vision { max-width: 100%; } .vision-overview { text-align: center; margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-light-blue); border-radius: 4px; border: 1px solid #e0e0e0; } .vision-overview h3 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 1.3rem; } .vision-subtitle { color: var(--vattenfall-gray); font-size: 0.9rem; font-style: italic; } .vision-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .pillar { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; text-align: center; } .pillar-icon { font-size: 2.5rem; margin-bottom: 1rem; } .pillar h4 { color: var(--vattenfall-blue); margin-bottom: 1rem; font-size: 1rem; } .pillar-content ul { list-style: none; padding-left: 0; text-align: left; } .pillar-content li { padding: 0.5rem 0; border-bottom: 1px solid var(--vattenfall-border); position: relative; padding-left: 1.5rem; font-size: 13px; line-height: 1.4; } .pillar-content li:before { content: "•"; color: var(--vattenfall-green); font-weight: bold; position: absolute; left: 0; } .technology-stack, .key-capabilities, .implementation-phases { margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .stack-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .stack-layer { padding: 1rem; background: var(--vattenfall-light-gray); border-radius: 4px; border: 1px solid #e0e0e0; } .stack-layer h4 { color: var(--vattenfall-blue); margin-bottom: 0.75rem; font-size: 0.9rem; } .tech-items { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tech-item { background: var(--vattenfall-blue); color: white; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 0.8rem; font-weight: 500; } .capabilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .capability-item { padding: 1rem; background: var(--vattenfall-light-gray); border-radius: 4px; border: 1px solid #e0e0e0; text-align: center; } .capability-icon { font-size: 2rem; margin-bottom: 0.5rem; } .capability-item h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 0.9rem; } .capability-item p { font-size: 13px; line-height: 1.4; margin-bottom: 0; color: var(--vattenfall-dark-gray); } .phases-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; } .phase-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: var(--vattenfall-light-blue); border-radius: 4px; border: 1px solid #e0e0e0; } .phase-number { background: var(--vattenfall-blue); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; } .phase-content h4 { color: var(--vattenfall-blue); margin-bottom: 0.5rem; font-size: 0.95rem; } .phase-content p { font-size: 13px; line-height: 1.4; margin-bottom: 0; color: var(--vattenfall-dark-gray); } /* Strategy Styles */ .strategy-content { max-width: 100%; } .strategy-overview { text-align: center; margin-bottom: 2rem; padding: 1.5rem; background: var(--vattenfall-light-green); border-radius: 4px; border: 1px solid #e0e0e0; } .strategy-overview h3 { color: var(--vattenfall-green); margin-bottom: 0.5rem; font-size: 1.3rem; } .strategy-subtitle { color: var(--vattenfall-gray); font-size: 0.9rem; font-style: italic; } .strategic-pillars, .value-creation, .implementation-roadmap, .success-metrics { margin-bottom: 2rem; } .pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .pillar-card { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .pillar-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .pillar-icon { font-size: 2rem; } .pillar-header h4 { color: var(--vattenfall-blue); margin-bottom: 0; font-size: 1rem; } .pillar-content ul { list-style: none; padding-left: 0; } .pillar-content li { padding: 0.5rem 0; border-bottom: 1px solid var(--vattenfall-border); position: relative; padding-left: 1.5rem; font-size: 13px; line-height: 1.4; } .pillar-content li:before { content: "•"; color: var(--vattenfall-blue); font-weight: bold; position: absolute; left: 0; } .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .value-stream { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .value-stream h4 { color: var(--vattenfall-green); margin-bottom: 1rem; font-size: 1rem; } .value-metrics { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .metric { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; background: var(--vattenfall-light-gray); border-radius: 4px; } .metric-value { font-size: 1.2rem; font-weight: bold; color: var(--vattenfall-green); } .metric-label { font-size: 12px; color: var(--vattenfall-dark-gray); line-height: 1.3; } .roadmap-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .roadmap-phase { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .phase-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--vattenfall-border); } .phase-number { background: var(--vattenfall-orange); color: white; padding: 0.5rem 1rem; border-radius: 4px; font-weight: bold; font-size: 0.9rem; } .phase-duration { font-size: 0.8rem; color: var(--vattenfall-gray); font-style: italic; } .phase-content h4 { color: var(--vattenfall-blue); margin-bottom: 0.75rem; font-size: 1rem; } .phase-content ul { list-style: none; padding-left: 0; } .phase-content li { padding: 0.5rem 0; border-bottom: 1px solid var(--vattenfall-border); position: relative; padding-left: 1.5rem; font-size: 13px; line-height: 1.4; } .phase-content li:before { content: "→"; color: var(--vattenfall-orange); font-weight: bold; position: absolute; left: 0; } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .metric-category { padding: 1.5rem; background: var(--vattenfall-white); border: 1px solid var(--vattenfall-border); border-radius: 4px; border: 1px solid #e0e0e0; } .metric-category h4 { color: var(--vattenfall-blue); margin-bottom: 1rem; font-size: 1rem; } .kpi-list { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .kpi { padding: 0.75rem; background: var(--vattenfall-light-gray); border-radius: 4px; font-size: 13px; line-height: 1.4; color: var(--vattenfall-dark-gray); text-align: center; }