update styling

_inc/_sectionArticleNewTextIcon.php

@@ -1,5 +1,5 @@
 <a href="#" class="ch-ggs-web-suite-article-landing">
-	<img src="assets/img/logo-hazmat-suite.png" alt="Logo HazmatSuite" width="297" height="60" class="img-fluid ch-ggs-web-suite-article-landing-image">
+	<img src="assets/img/SmartIdentify.svg" alt="Logo HazmatSuite"  class="img-fluid ch-ggs-web-suite-article-landing-image">
 	<div class="row">
 		<div class="col-md-7">
 			<div class="ch-ggs-web-suite-landing-article-content">

_inc/_sectionCardsNew.php

@@ -1,17 +1,19 @@
 <?php 
+
+	$path = 'assets/img/SmartIdentify.svg';
 	$box = array(
 			'SmartIdentify' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ',
-					'ifc ifc-frontal-truck'),
+					$path),
 			'SmartLabel' => array('Aenean commodo ligula eget dolor. Aenean massa.',
-					'ifc ifc-train-front'),
+					$path),
 			'SmartPackage' => array('Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
-					'ifc ifc-sea-ship-with-containers'),
+					$path),
 			'EasyDGD' => array('Cconsectetuer adipiscing elit.',
-					'ifc ifc-air-transport'),
+					$path),
 			'BatteryGuide' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
-					'ifc ifc-train-front'),
+					$path),
 			'ADR-Check' => array('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
-					'ifc ifc-frontal-truck')
+					$path)
 			
 	)
 ?>
@@ -25,8 +27,8 @@
 				<div class="col-md-6 col-lg-4 d-flex">
 					<a href="<?php echo ($key === 'SmartIdentify' ? 'index-smartify.php' : '#') ?>" class="ch-ggs-web-suite-card-hover">
 						<div class="ch-ggs-web-suite-card-hover-main">
-							<h2 class="ch-ggs-web-suite-card-hover-title">
-								<i class="<?php echo $value[1] ?> ch-ggs-web-suite-card-hover-icon"></i>
+							<img src="<?php echo $value[1] ?>" class="img-fluid ch-ggs-web-suite-card-hover-logo" alt="Tool Logo Name">
+							<h2 class="ch-ggs-web-suite-card-hover-title sr-only">
 								<?php echo $key ?>
 							</h2>
 							<p class="ch-ggs-web-suite-card-hover-text"><?php echo $value[0] ?></p>

assets/css/style.css

@@ -7,8 +7,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?u6kl0n4");
-  src: url("../fonts/icomoon.eot?u6kl0n4#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?u6kl0n4") format("truetype"), url("../fonts/icomoon.woff?u6kl0n4") format("woff"), url("../fonts/icomoon.svg?u6kl0n4#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?usf3rfn");
+  src: url("../fonts/icomoon.eot?usf3rfn#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?usf3rfn") format("truetype"), url("../fonts/icomoon.woff?usf3rfn") format("woff"), url("../fonts/icomoon.svg?usf3rfn#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -6006,6 +6006,7 @@ button.bg-dark:focus {
 }
 
 .position-sticky {
+  position: -webkit-sticky !important;
   position: sticky !important;
 }
 
@@ -6025,8 +6026,9 @@ button.bg-dark:focus {
   z-index: 1030;
 }
 
-@supports (position: sticky) {
+@supports ((position: -webkit-sticky) or (position: sticky)) {
   .sticky-top {
+    position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 1020;
@@ -9608,6 +9610,16 @@ body {
   color: #fff;
 }
 
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-suite-logo-name {
+  fill: white;
+}
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-suite-logo-name > *:first-child {
+  fill: inherit;
+}
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-suite-logo-name > *:nth-child(2) {
+  fill: #C955D9;
+}
+
 h1, h2 {
   font-weight: 300;
 }
@@ -9686,7 +9698,8 @@ footer h2 {
 }
 
 @media (max-width: 991.98px) {
-  .navbar-brand img {
+  .navbar-brand svg,
+.navbar-brand img {
     max-width: 180px;
   }
 
@@ -10473,8 +10486,8 @@ a.ch-ggs-web-suite-card-plain, a.ch-ggs-web-suite-card-plain:hover, a.ch-ggs-web
   margin-bottom: 0.75em;
 }
 
-.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-simple-title,
-.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-simple-title {
+.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-plain-title,
+.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-plain-title {
   color: #5C005C;
 }
 
@@ -10694,6 +10707,7 @@ a.ch-ggs-web-suite-icon-link {
 }
 
 .ch-ggs-web-suite-aside-box {
+  position: -webkit-sticky;
   position: sticky;
   top: 30px;
 }
@@ -11063,6 +11077,12 @@ a.ch-ggs-web-suite-icon-link {
   transform: scale(1.025);
 }
 
+.ch-ggs-web-suite-card-hover-logo {
+  max-height: 40px;
+  align-self: start;
+  margin-bottom: 20px;
+}
+
 .ch-ggs-web-suite-card-hover-main {
   display: flex;
   flex-direction: column;
@@ -11186,6 +11206,7 @@ a.ch-ggs-web-suite-cta-box {
   }
 
   .ch-ggs-web-suite-landing-nav {
+    position: -webkit-sticky;
     position: sticky;
     z-index: 1;
     overflow: hidden;

assets/img/SmartIdentify.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="304px" height="70px" viewBox="0 0 304 70" enable-background="new 0 0 304 70" xml:space="preserve">
+<g id="Wortmarke">
+	<path fill="#424244" d="M88.3,46.7c6.1,0,9.6-3.2,9.6-7.7s-2.6-6.4-7.2-7.8C86.9,30,86,29.3,86,27.8s1.3-2.4,3.3-2.4s3.6,0.7,5.3,2
+		l2.7-3.1c-2.1-2-4.7-3.1-8.4-3.1c-5,0-8.8,2.7-8.8,7c0,3.6,2,5.8,7.4,7.5c3.5,1.1,4.4,1.9,4.4,3.7c0,1.9-1.5,3-3.8,3
+		c-2.4,0-4.3-0.9-6.1-2.4l-2.9,3.2C81.1,45.1,84.1,46.7,88.3,46.7z M106.5,46.1V33.4c0.8-1.5,1.7-2.4,2.8-2.4c0.8,0,1.6,0.5,1.6,2.5
+		v12.6h5.5V33.4c0.8-1.5,1.6-2.4,2.8-2.4c0.8,0,1.6,0.5,1.6,2.5v12.6h5.5V32.5c0-3.5-2-5.6-4.9-5.6c-2.4,0-4.1,1-5.6,2.9
+		c-0.7-1.9-2.3-2.9-4.4-2.9c-2.3,0-4,0.9-5.4,2.8l-0.4-2.2h-4.8v18.6H106.5z M135.3,46.7c2.2,0,4.3-0.7,5.6-2.8
+		c0.9,1.8,2.3,2.5,4.5,2.7l1.2-3.6c-0.9-0.3-1.3-0.8-1.3-2.3v-7.2c0-4.3-2.3-6.6-7.7-6.6c-2.1,0-4.7,0.5-7,1.4l1.3,3.6
+		c1.9-0.6,3.7-1,4.9-1c2.3,0,3.1,0.7,3.1,2.9v0.8H138c-5.6,0-8.7,2.2-8.7,6.3C129.3,44.3,131.6,46.7,135.3,46.7z M136.9,42.7
+		c-1.4,0-2.2-0.9-2.2-2.3c0-1.9,1.2-2.7,3.7-2.7h1.4V41C139.2,42.1,138.2,42.7,136.9,42.7z M155.2,46.1v-9.3
+		c0.6-2.8,1.6-4.5,3.9-4.5c0.6,0,1.1,0.1,1.7,0.2l0.9-5.4c-0.6-0.2-1.2-0.2-1.9-0.2c-2.1,0-4,1.5-4.8,4.1l-0.5-3.6h-4.8V46
+		L155.2,46.1L155.2,46.1z M171,46.7c1.7,0,3.6-0.5,5-1.5l-1.9-3.5c-0.7,0.5-1.4,0.6-2,0.6c-1.2,0-1.8-0.6-1.8-2.4v-8.5h3.7l0.6-3.8
+		h-4.3v-4.7l-5.5,0.6v4h-2.6v3.8h2.6V40C165,44.3,167,46.6,171,46.7z"/>
+	<path fill="#990099" d="M186.5,46.1V21.8h-5.7v24.3H186.5z M197.1,46.7c2.5,0,4.2-1.2,5.3-2.8l0.3,2.2h4.9v-26l-5.5-0.6v9.1
+		c-1.1-1.1-2.6-1.8-4.3-1.8c-4.8,0-7.7,4.1-7.7,9.8C190,42.8,192.4,46.7,197.1,46.7z M198.9,42.6c-1.8,0-3.1-1.2-3.1-5.8
+		c0-4.2,1.4-5.8,3.4-5.8c1.2,0,2,0.6,2.9,1.6v8C201.2,41.9,200.2,42.6,198.9,42.6z M220.2,46.7c3,0,5.4-1.1,7.2-2.6l-2.3-3.1
+		c-1.6,1.1-2.9,1.6-4.4,1.6c-2.3,0-3.9-0.9-4.2-4.2H228c0.1-0.6,0.1-1.4,0.1-2c0-6-3.3-9.5-8.6-9.5c-5.6,0-8.7,4.4-8.7,10
+		C210.9,42.7,214,46.7,220.2,46.7z M222.7,35.1h-6.2c0.3-3.4,1.3-4.5,3.2-4.5c2.2,0,3,1.7,3,4.3V35.1L222.7,35.1z M236.8,46.1V33.4
+		c1-1.5,2-2.4,3.2-2.4c1.1,0,1.8,0.5,1.8,2.5v12.6h5.5V32.5c0-3.5-1.9-5.6-5.1-5.6c-2.3,0-4.1,1-5.7,2.8l-0.4-2.2h-4.8v18.6H236.8z
+		 M258.1,46.7c1.7,0,3.6-0.5,5-1.5l-1.9-3.5c-0.7,0.5-1.4,0.6-2,0.6c-1.2,0-1.8-0.6-1.8-2.4v-8.5h3.7l0.6-3.8h-4.3v-4.7l-5.5,0.6v4
+		h-2.6v3.8h2.6V40C252,44.3,254,46.6,258.1,46.7z M267.8,24c1.9,0,3.3-1.4,3.3-3.2c0-1.8-1.4-3.1-3.3-3.1s-3.3,1.4-3.3,3.1
+		C264.5,22.6,265.8,24,267.8,24z M270.5,46.1V27.5H265v18.6H270.5z M281.2,46.1V31.4h3.8l0.6-3.8h-4.4v-1.4c0-1.8,0.6-2.5,2.2-2.5
+		c0.8,0,1.9,0.2,2.9,0.7l1.5-3.6c-1.4-0.7-3.1-1.2-5.1-1.2c-4.8,0-7.1,2.8-7.1,6.3v1.6h-2.8v3.8h2.8V46L281.2,46.1L281.2,46.1z
+		 M287.1,53.9c5.8-0.3,9-3,10.5-7.7l5.9-18.6h-5.7l-3.6,15l-3.3-15H285l5.7,18.6h1.9c-1,2.4-2.3,3.4-6,3.9L287.1,53.9z"/>
+</g>
+<g id="Bildmarke">
+	<polygon fill="#82368C" points="10.9,45.9 10.9,24.1 0,17.5 0,52.5 18.2,63.4 29.2,56.9 	"/>
+	<polygon fill="#C955D9" points="29.2,13.1 18.2,6.6 0,17.5 10.9,24.1 	"/>
+	<polygon fill="#C955D9" points="47.4,45.9 29.2,56.9 18.2,63.4 29.2,70 58.3,52.5 58.3,31.5 47.4,38.1 	"/>
+	<polygon fill="#532359" points="29.2,13.1 47.4,24.1 58.3,17.5 29.2,0 18.2,6.6 	"/>
+	<g id="Icon" transform="translate(126 167)">
+		<path fill="#532359" d="M-101-140.5c-2.2,0.5-4,2.2-4.4,4.5c0,0.3,0.1,0.6,0.4,0.6h0.1c0.2,0,0.5-0.2,0.5-0.4
+			c0.3-1.8,1.8-3.3,3.6-3.7c0.3-0.1,0.5-0.3,0.4-0.6S-100.8-140.5-101-140.5z"/>
+		<path fill="#532359" d="M-86.4-124.2l-5.1-5.1c-0.5-0.5-1.2-0.6-1.8-0.3l-0.5-0.5c1.1-1.3,1.7-3,1.7-4.8c0-4.3-3.5-7.7-7.7-7.7
+			c-4.3,0-7.7,3.5-7.7,7.7s3.5,7.7,7.7,7.7c2.1,0,4-0.8,5.4-2.2l0.4,0.4c-0.3,0.6-0.2,1.3,0.3,1.8l5.1,5.1c0.3,0.3,0.7,0.5,1.2,0.5
+			s0.8-0.2,1.2-0.5C-85.8-122.5-85.8-123.6-86.4-124.2z M-99.9-128.2c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7
+			C-93.2-131.2-96.2-128.2-99.9-128.2z M-87.1-122.6c-0.2,0.2-0.6,0.2-0.8,0l-5.1-5.1c-0.2-0.2-0.2-0.6,0-0.8
+			c0.1-0.1,0.3-0.2,0.4-0.2s0.3,0.1,0.4,0.2l5.1,5.1C-86.9-123.2-86.9-122.9-87.1-122.6z"/>
+	</g>
+</g>
+</svg>

assets/scss/_layout.scss

@@ -22,7 +22,6 @@ body {
 .ch-ggs-web-suite-section-gray {
 	background: $antrazit05;
 }
-
 .ch-ggs-web-suite-section-dark {
 	background: $primary-d-200;
 	&,
@@ -31,6 +30,20 @@ body {
 	}
 }
 
+.ch-ggs-web-suite-landing-section-dark {
+	.ch-ggs-web-suite-suite-logo-name {
+		fill: white;
+	}
+
+	.ch-ggs-web-suite-suite-logo-name > *:first-child {
+		fill: inherit;
+	}
+
+	.ch-ggs-web-suite-suite-logo-name > *:nth-child(2) {
+		fill: #C955D9;
+	}
+}
+
 
 h1, h2 {
 	font-weight: 300;
@@ -124,6 +137,7 @@ footer h2 {
 }
 
 @include media-breakpoint-down(md) {
+	.navbar-brand svg,
 	.navbar-brand img {
 		max-width: 180px;
 	}
@@ -148,7 +162,6 @@ footer h2 {
 			display: inline-block;
 		}
 	}
-
 }
 
 @include media-breakpoint-up(lg) {

assets/scss/_project.scss

@@ -565,6 +565,8 @@ a.ch-ggs-web-suite-card {
 	text-decoration: none;
 }
 
+
+
 .ch-ggs-web-suite-card-img-fake {
 	background: $antrazit08;
 	color: $primary;
@@ -715,8 +717,8 @@ a.ch-ggs-web-suite-card-plain {
 	margin-bottom: 0.75em;
 }
 
-.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-simple-title,
-.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-simple-title {
+.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-plain-title,
+.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-plain-title {
 	color: $primary-d-100;
 }
 
@@ -1316,6 +1318,12 @@ a.ch-ggs-web-suite-icon-link {
 	}
 }
 
+.ch-ggs-web-suite-card-hover-logo {
+	max-height: 40px;
+	align-self: start;
+	margin-bottom: 20px;
+}
+
 .ch-ggs-web-suite-card-hover-main {
 	display: flex;
 	flex-direction: column;