/* * Custom Stylesheet for ESG Lift Website * Version: 1.1 */ :root { /* ESG Lift Farbpalette */ --esglift-green: #11CE2D; --sky-blue: #A7D8F8; --sand-beige: #F4E1C1; --sun-yellow: #FFD166; --light-apricot: #FFAB81; /* Angewandte Farben */ --primary-color: var(--esglift-green); /* Hauptfarbe für Marke, CTAs, Links, Icons */ --heading-color: #2c3e50; /* Dunkles Blau-Grau für Überschriften (guter Kontrast) */ --text-color: #34495e; /* Lesbares Grau für Fließtext */ --background-light: #ffffff; --background-medium: #f9fef9; /* Sehr subtiler grüner Hauch als alternativer Hintergrund */ --background-accent: var(--sand-beige); /* Beige als Akzenthintergrund */ --cta-color: var(--sun-yellow); /* Haupt-CTA-Knopf */ --cta-text-color: #333; /* Dunkler Text auf hellem Gelb */ --secondary-cta-border: var(--primary-color); --secondary-cta-text: var(--primary-color); --highlight-color: var(--sky-blue); /* Für subtile Hervorhebungen */ --accent-color-subtle: var(--light-apricot); /* Für kleine Akzente, z.B. Borders */ --footer-bg: #343a40; /* Beibehaltung des dunklen Footers für Kontrast */ --footer-text: #adb5bd; --footer-link: #dee2e6; /* Typografie */ --font-heading: 'Poppins', sans-serif; --font-body: 'Lato', sans-serif; } html { scroll-padding-top: 70px; /* Offset für fixed navbar */ } body { font-family: var(--font-body, sans-serif); /* Nutzt Lato oder Fallback */ color: var(--text-color); line-height: 1.7; background-color: var(--background-light); /* Standard Hintergrund */ } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, sans-serif); /* Nutzt Poppins oder Fallback */ color: var(--heading-color); } h1 { font-weight: 700; } h2 { /* margin-bottom: 3rem !important; */ font-weight: 700; } h3 { /* H3 allgemein etwas hervorheben */ font-weight: 600; color: var(--heading-color); margin-top: 1.5rem; margin-bottom: 0.8rem; } /* Spezifische H3 für Karten etc. */ .card h3.h5 { font-weight: 600; color: var(--heading-color); min-height: 3.5em; margin-top: 1rem !important; margin-bottom: 0.5rem; /* Weniger Abstand nach unten */ } a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease; } a:hover { color: #0d9e21; /* Leicht abgedunkeltes Grün für Hover */ opacity: 0.9; text-decoration: none; /* Keine Unterstreichung bei Hover */ } /* Navbar */ .navbar { transition: box-shadow 0.3s ease; } .navbar-brand { font-weight: 700; /* Stärkerer Markenname */ color: var(--primary-color) !important; font-size: 1.5rem; /* Etwas größer */ } .nav-link { font-weight: 600; color: #1976D2 !important; transition: color 0.3s ease; } .nav-link:hover { color: var(--esglift-green) !important; /* Hover Farbe für Links */ } /* Hero Section */ .hero { background-color: var(--background-medium); /* Subtil grüner Hintergrund */ padding-top: 5rem; padding-bottom: 5rem; } .hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); /* Responsive Headline Größe */ } /* Cards */ .card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border: none; /* Rahmen entfernen, Schatten reicht */ background-color: var(--background-light); /* Sicherstellen, dass Karten einen weißen Hintergrund haben */ } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* Stärkerer Schatten bei Hover */ } /* Icons */ .icon-feature { /* Klasse für Icons in Feature-Listen / Boxen */ font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary-color); } /* Allgemeine Bi Icons können hier auch global gestyled werden */ .bi { vertical-align: middle; /* Hilft bei der Ausrichtung */ } /* Spezifische Icon-Farben aus der Palette */ .text-esglift-green { color: var(--esglift-green) !important; } .text-sky-blue { color: var(--sky-blue) !important; } .text-sand-beige { color: var(--sand-beige) !important; } .text-sun-yellow { color: var(--sun-yellow) !important; } .text-light-apricot { color: var(--light-apricot) !important; } /* Buttons */ .btn { padding: 0.7rem 1.5rem; font-weight: 600; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease; border-radius: 0.375rem; /* Bootstrap Standard */ } .btn-lg { padding: 0.8rem 1.8rem; font-size: 1.1rem; /* Etwas größer für LG */ } .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.875rem; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--background-light); /* Heller Text auf grünem Button */ } .btn-primary:hover { background-color: #0d9e21; /* Dunkleres Grün */ border-color: #0d9e21; color: var(--background-light); transform: translateY(-2px); } .btn-secondary { /* Standard Bootstrap Secondary, aber mit unseren Farben */ background-color: var(--highlight-color); /* Himmelblau */ border-color: var(--highlight-color); color: var(--heading-color); /* Dunkler Text auf Blau */ } .btn-secondary:hover { background-color: #8ec7e6; /* Dunkleres Blau */ border-color: #8ec7e6; color: var(--heading-color); transform: translateY(-2px); } .btn-outline-primary { /* Outline Variante für weniger wichtige Aktionen */ color: var(--primary-color); border-color: var(--primary-color); } .btn-outline-primary:hover { background-color: var(--primary-color); color: var(--background-light); transform: translateY(-2px); } /* Spezieller CTA Button auf gelbem Grund (wenn btn-light verwendet wird) */ .contact-cta .btn-light { font-weight: 700; color: var(--heading-color); /* Dunkler Text */ padding: 0.8rem 1.8rem; } .contact-cta .btn-light:hover { background-color: #f8f9fa; /* Leicht dunkleres Weiß */ transform: translateY(-2px); } /* Spezieller Outline Button auf gelbem Grund */ .contact-cta .btn-outline-primary { border-color: var(--heading-color); color: var(--heading-color); } .contact-cta .btn-outline-primary:hover { background-color: var(--heading-color); color: var(--background-light); } /* Sektionshintergründe & Padding */ section { padding-top: clamp(50px, 10vh, 90px); padding-bottom: clamp(50px, 10vh, 90px); position: relative; /* Für eventuelle ::before/::after Dekorationen */ } /* Standard-Wechsel für Lesbarkeit (kann spezifisch pro Seite überschrieben werden) */ body>main>section:nth-of-type(even):not(.cta):not(.hero) { background-color: var(--background-medium); } /* Explizite Hintergründe für bestimmte Sektionen (Beispiel) */ #challenges, #benefits { background-color: var(--background-light); } #solution, #vsme-focus { background-color: var(--background-medium); } #tools { background-color: var(--background-accent); } /* Beige für Tools behalten */ /* List Styling (Beispiel für Benefits-Liste) */ #benefits ul { list-style: none; padding-left: 0; } #benefits ul li { position: relative; padding-left: 35px; /* Platz für Icon */ margin-bottom: 1.2rem; font-size: 1.05rem; } #benefits ul li i.bi { /* Bootstrap Icons in der Liste */ position: absolute; left: 0; top: 5px; /* Feinjustierung vertikale Position */ color: var(--primary-color); font-size: 1.4rem; } /* Call to Action Sektion (Gelb) */ .cta, #cta { /* Klasse .cta oder ID #cta */ background-color: var(--cta-color); color: var(--cta-text-color); } .cta h2, #cta h2 { color: var(--heading-color); } .cta p, #cta p { color: var(--cta-text-color); } /* Footer */ footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 30px 0; font-size: 0.9rem; } footer a { color: var(--footer-link); text-decoration: none; transition: color 0.3s ease; } footer a:hover { color: var(--background-light); /* Heller bei Hover */ text-decoration: underline; } /* Bildstile */ .img-fluid { max-width: 100%; height: auto; } .rounded { border-radius: .375rem !important; /* Bootstrap's Standard-Rundung */ } .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; } .shadow { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; } /* Partner Logos (Falls verwendet) */ .partner-logos img { max-height: 60px; width: auto; /* Damit Aspect Ratio bleibt */ filter: grayscale(100%); opacity: 0.7; transition: filter 0.3s ease, opacity 0.3s ease; margin: 0 15px; /* Abstand zwischen Logos */ } .partner-logos img:hover { filter: grayscale(0%); opacity: 1; } /* Responsive Anpassungen (Beispiel) */ @media (max-width: 768px) { h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); } h2 { font-size: clamp(1.6rem, 5vw, 2rem); } .hero { padding-top: 3rem; padding-bottom: 3rem; text-align: center; /* Hero Text zentrieren auf Mobilgeräten */ } .hero .btn { display: block; /* Buttons untereinander */ margin-left: auto; margin-right: auto; max-width: 300px; margin-bottom: 1rem; } .hero .btn:last-child { margin-bottom: 0; } section { padding-top: clamp(40px, 8vh, 60px); padding-bottom: clamp(40px, 8vh, 60px); } } /* ================================== Cookie Consent Banner Styling ================================== */ .cookie-consent-banner { z-index: 1055; /* Höher als die meisten Bootstrap-Komponenten, unter Modals */ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Für Fade/Slide Effekte */ opacity: 0; /* Start unsichtbar für Transition */ transform: translateY(100%); /* Start unterhalb des Viewports */ } /* Sicherstellen, dass der Link im Banner gut sichtbar ist */ .cookie-consent-banner a { color: #dee2e6; /* Helleres Grau, Bootstrap's $gray-300 oft */ text-decoration: underline; } .cookie-consent-banner a:hover { color: #ffffff; /* Weiß bei Hover */ } /* Feinabstimmung Button Abstände falls nötig */ .cookie-consent-banner .btn { margin-top: 0.5rem; /* Etwas Abstand oben auf Mobilgeräten */ } @media (min-width: 768px) { /* md Breakpoint */ .cookie-consent-banner .btn { margin-top: 0; /* Kein extra Abstand oben auf größeren Schirmen */ } } /* the shadow of the cards set to green */ .card.shadow { box-shadow: 0 0.125rem 0.25rem rgba(40, 167, 69, 0.2) !important; } .card.shadow:hover { box-shadow: 0 0.25rem 0.5rem rgba(40, 167, 69, 0.3) !important; } /* table Scope 1. */ .emissions-table, .stationary-table, .fugitive-table, .other-table, .nondirect-table, .scope3-table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; /* Fixed layout for consistent column widths */ } .emissions-table th, .emissions-table td, .stationary-table th, .stationary-table td, .fugitive-table th, .fugitive-table td, .other-table th, .other-table td, .nondirect-table th, .nondirect-table td, .scope3-table th, .scope3-table td { border: 1px solid #dee2e6; padding: 12px 8px; text-align: left; vertical-align: middle; word-wrap: break-word; } /* Define consistent column widths for all tables including Scope 3 */ .emissions-table th:nth-child(1), .emissions-table td:nth-child(1), .stationary-table th:nth-child(1), .stationary-table td:nth-child(1), .fugitive-table th:nth-child(1), .fugitive-table td:nth-child(1), .other-table th:nth-child(1), .other-table td:nth-child(1), .nondirect-table th:nth-child(1), .nondirect-table td:nth-child(1), .scope3-table th:nth-child(1), .scope3-table td:nth-child(1) { width: 30%; /* Emittent column */ } .emissions-table th:nth-child(2), .emissions-table td:nth-child(2), .stationary-table th:nth-child(2), .stationary-table td:nth-child(2), .fugitive-table th:nth-child(2), .fugitive-table td:nth-child(2), .other-table th:nth-child(2), .other-table td:nth-child(2), .nondirect-table th:nth-child(2), .nondirect-table td:nth-child(2), .scope3-table th:nth-child(2), .scope3-table td:nth-child(2) { width: 15%; /* Funktionelle Einheit column */ } .emissions-table th:nth-child(3), .emissions-table td:nth-child(3), .stationary-table th:nth-child(3), .stationary-table td:nth-child(3), .fugitive-table th:nth-child(3), .fugitive-table td:nth-child(3), .other-table th:nth-child(3), .other-table td:nth-child(3), .nondirect-table th:nth-child(3), .nondirect-table td:nth-child(3), .scope3-table th:nth-child(3), .scope3-table td:nth-child(3) { width: 10%; /* Menge column */ } .emissions-table th:nth-child(4), .emissions-table td:nth-child(4), .stationary-table th:nth-child(4), .stationary-table td:nth-child(4), .fugitive-table th:nth-child(4), .fugitive-table td:nth-child(4), .other-table th:nth-child(4), .other-table td:nth-child(4), .nondirect-table th:nth-child(4), .nondirect-table td:nth-child(4), .scope3-table th:nth-child(4), .scope3-table td:nth-child(4) { width: 18%; /* kg CO2e / Einheit column */ } .emissions-table th:nth-child(5), .emissions-table td:nth-child(5), .stationary-table th:nth-child(5), .stationary-table td:nth-child(5), .fugitive-table th:nth-child(5), .fugitive-table td:nth-child(5), .other-table th:nth-child(5), .other-table td:nth-child(5), .nondirect-table th:nth-child(5), .nondirect-table td:nth-child(5), .scope3-table th:nth-child(5), .scope3-table td:nth-child(5) { width: 17%; /* kg CO2e (Gesamt) column */ } .emissions-table th:nth-child(6), .emissions-table td:nth-child(6), .stationary-table th:nth-child(6), .stationary-table td:nth-child(6), .fugitive-table th:nth-child(6), .fugitive-table td:nth-child(6), .other-table th:nth-child(6), .other-table td:nth-child(6), .nondirect-table th:nth-child(6), .nondirect-table td:nth-child(6), .scope3-table th:nth-child(6), .scope3-table td:nth-child(6) { width: 10%; /* Aktionen column */ } .emissions-table th, .stationary-table th, .fugitive-table th, .other-table th, .nondirect-table th, .scope3-table th { background-color: #f8f9fa; font-weight: 600; color: var(--heading-color); border-bottom: 2px solid var(--primary-color); } .emissions-table tbody tr:nth-child(even), .stationary-table tbody tr:nth-child(even), .fugitive-table tbody tr:nth-child(even), .other-table tbody tr:nth-child(even), .nondirect-table tbody tr:nth-child(even), .scope3-table tbody tr:nth-child(even) { background-color: #f8f9fa; } .emissions-table tbody tr:hover, .stationary-table tbody tr:hover, .fugitive-table tbody tr:hover, .other-table tbody tr:hover, .nondirect-table tbody tr:hover, .scope3-table tbody tr:hover { background-color: #e9ecef; } /* Add button styling for Scope 3 */ .add-emissions-btn, .add-stationary-btn, .add-fugitive-btn, .add-other-btn, .add-nondirect-btn, .add-scope3-btn { background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; font-size: 18px; margin-top: 15px; margin-bottom: 10px; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .add-emissions-btn:hover, .add-stationary-btn:hover, .add-fugitive-btn:hover, .add-other-btn:hover, .add-nondirect-btn:hover, .add-scope3-btn:hover { background-color: #0d9e21; transform: translateY(-2px); } /* Mobile responsive adjustments for all tables including Scope 3 */ @media (max-width: 768px) { .emissions-table, .stationary-table, .fugitive-table, .other-table, .nondirect-table, .scope3-table { font-size: 0.8rem; } .emissions-table th, .emissions-table td, .stationary-table th, .stationary-table td, .fugitive-table th, .fugitive-table td, .other-table th, .other-table td, .nondirect-table th, .nondirect-table td, .scope3-table th, .scope3-table td { padding: 8px 4px; } /* Adjust column widths for mobile - all tables including Scope 3 */ .emissions-table th:nth-child(1), .emissions-table td:nth-child(1), .stationary-table th:nth-child(1), .stationary-table td:nth-child(1), .fugitive-table th:nth-child(1), .fugitive-table td:nth-child(1), .other-table th:nth-child(1), .other-table td:nth-child(1), .nondirect-table th:nth-child(1), .nondirect-table td:nth-child(1), .scope3-table th:nth-child(1), .scope3-table td:nth-child(1) { width: 35%; } .emissions-table th:nth-child(2), .emissions-table td:nth-child(2), .stationary-table th:nth-child(2), .stationary-table td:nth-child(2), .fugitive-table th:nth-child(2), .fugitive-table td:nth-child(2), .other-table th:nth-child(2), .other-table td:nth-child(2), .nondirect-table th:nth-child(2), .nondirect-table td:nth-child(2), .scope3-table th:nth-child(2), .scope3-table td:nth-child(2) { width: 12%; } .emissions-table th:nth-child(3), .emissions-table td:nth-child(3), .stationary-table th:nth-child(3), .stationary-table td:nth-child(3), .fugitive-table th:nth-child(3), .fugitive-table td:nth-child(3), .other-table th:nth-child(3), .other-table td:nth-child(3), .nondirect-table th:nth-child(3), .nondirect-table td:nth-child(3), .scope3-table th:nth-child(3), .scope3-table td:nth-child(3) { width: 12%; } .emissions-table th:nth-child(4), .emissions-table td:nth-child(4), .stationary-table th:nth-child(4), .stationary-table td:nth-child(4), .fugitive-table th:nth-child(4), .fugitive-table td:nth-child(4), .other-table th:nth-child(4), .other-table td:nth-child(4), .nondirect-table th:nth-child(4), .nondirect-table td:nth-child(4), .scope3-table th:nth-child(4), .scope3-table td:nth-child(4) { width: 15%; } .emissions-table th:nth-child(5), .emissions-table td:nth-child(5), .stationary-table th:nth-child(5), .stationary-table td:nth-child(5), .fugitive-table th:nth-child(5), .fugitive-table td:nth-child(5), .other-table th:nth-child(5), .other-table td:nth-child(5), .nondirect-table th:nth-child(5), .nondirect-table td:nth-child(5), .scope3-table th:nth-child(5), .scope3-table td:nth-child(5) { width: 15%; } .emissions-table th:nth-child(6), .emissions-table td:nth-child(6), .stationary-table th:nth-child(6), .stationary-table td:nth-child(6), .fugitive-table th:nth-child(6), .fugitive-table td:nth-child(6), .other-table th:nth-child(6), .other-table td:nth-child(6), .nondirect-table th:nth-child(6), .nondirect-table td:nth-child(6), .scope3-table th:nth-child(6), .scope3-table td:nth-child(6) { width: 11%; } } /* Accordion body styling for all table types including Scope 3 */ .accordion-body .emissions-table, .accordion-body .stationary-table, .accordion-body .fugitive-table, .accordion-body .other-table, .accordion-body .nondirect-table, .accordion-body .scope3-table { margin-top: 0; margin-bottom: 1rem; } /* Button styling within accordion for all button types including Scope 3 */ .accordion-body .add-emissions-btn, .accordion-body .add-stationary-btn, .accordion-body .add-fugitive-btn, .accordion-body .add-other-btn, .accordion-body .add-nondirect-btn, .accordion-body .add-scope3-btn { margin-top: 15px; margin-bottom: 0; } /* b5 - biodiversity */ .biodiversity-site-row input[type="number"] { text-align: right; } .table tfoot th { font-weight: bold; background-color: #f8f9fa; } .table tfoot .text-muted { font-weight: normal; font-size: 0.875rem; } /* Fix for waste table dropdowns being clipped by table-responsive */ .waste-table-container.table-responsive { overflow: visible !important; } /* On smaller screens, we can use horizontal scroll but increase z-index */ @media (max-width: 768px) { .waste-table-container.table-responsive { overflow-x: auto; overflow-y: visible; } .waste-category-dropdown { z-index: 1050 !important; /* Higher than table-responsive */ } } /* Material flows table styling */ .material-flow-row input[type="text"] { border-radius: 0.375rem; } .material-flow-row select { border-radius: 0.375rem; } .material-flow-row input[type="number"] { border-radius: 0.375rem; } #material-flows-container .card { border: 1px solid #dee2e6; border-radius: 0.5rem; } /* Employee sections styling */ .employee-section { background-color: #f8f9fa; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; } .employee-section h6 { color: #495057; border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem; margin-bottom: 1rem; } /* Employee input styling */ .employee-input { text-align: right; } /* Summary card styling */ .employee-summary { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 1px solid #dee2e6; } /* Country dropdown styling */ .country-input-container { position: relative; } .country-dropdown { display: none; max-height: 200px; overflow-y: auto; z-index: 1000; border: 1px solid #ced4da; border-top: none; background-color: white; border-radius: 0 0 0.375rem 0.375rem; } .country-option { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f8f9fa; } .country-option:hover { background-color: #f8f9fa; } .country-option:last-child { border-bottom: none; } /* Fix for table responsive overflow with dropdowns */ .table-responsive { overflow: visible; } @media (max-width: 768px) { .table-responsive { overflow-x: auto; overflow-y: visible; } } /* Turnover rate styling */ .turnover-section { border-left: 4px solid #ffc107; padding-left: 1rem; background-color: #fff9e6; border-radius: 0.375rem; } /* Math formula styling in modal */ .formula-box { background-color: #f8f9fa; border: 2px solid #dee2e6; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; } .formula-fraction { display: inline-block; text-align: center; vertical-align: middle; } .formula-numerator { border-bottom: 2px solid #000; padding-bottom: 0.25rem; margin-bottom: 0.25rem; } /* Update delete button styling to match delete-emissions-btn */ .delete-btn, .btn-delete, .delete-button, .delete-emissions-btn, .delete-sustainability-btn { border: none !important; background: none !important; padding: 0 !important; cursor: pointer; transition: transform 0.2s ease; } .delete-btn:hover, .btn-delete:hover, .delete-button:hover, .delete-emissions-btn:hover, .delete-sustainability-btn:hover { transform: scale(1.1); } .delete-btn:focus, .btn-delete:focus, .delete-button:focus, .delete-emissions-btn:focus, .delete-sustainability-btn:focus { outline: none; } .delete-btn i, .btn-delete i, .delete-button i, .delete-emissions-btn i, .delete-sustainability-btn i { color: #3AD246 !important; font-size: 1.2rem; } /* dashboard charts */