docs(colors): visited link update

website/docs/webdev/3-Guidelines/2-colours.mdx

@@ -31,7 +31,10 @@ You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">h
 
 ## Brand Colors
 
+<div className="thematicLogoWrapperColour">
+
 ![](../md_components/static/newEEAlogo.png)
+</div>
 
 This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary color is the color displayed most frequently across your screens and components. Brand colors are extracted from the EEA logo in order to help users to easily identify the brand.
 <div style={{width:'100%',float:'left'}}>
@@ -56,6 +59,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 </div>
 <div style={{width:'100%',float:'left'}}>
+    <br/>
     <h4>Shades</h4>    
     <table style={{float:'left'}}>
         <tbody>
@@ -240,12 +244,11 @@ All thematic platforms use EEA Supplementary **colors, state colors, link colors
 
 :::
 
-<br/>
 <br/>
 
 ### Biodiversity
 
-<div className="thematicLogos">
+<div className="thematicLogoWrapperColour">
 
 ![](../md_components/static/BISE.png)
 
@@ -278,6 +281,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 </div>
 <div style={{width:'100%',float:'left'}}>
+    <br/>
     <h4>Shades</h4>    
     <table style={{float:'left'}} >
         <tbody>
@@ -436,7 +440,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 ### Forest Information System
 
-<div className="thematicLogos">
+<div className="thematicLogoWrapperColour">
 
 ![](../md_components/static/FISE.png)
 
@@ -562,9 +566,9 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 ### Wise Freshwater
 
-<div className="thematicLogosSmall">
+<div className="thematicLogoWrapperColour">
 
-![](../md_components/static/WISEF.png)
+![](../md_components/static/WiseF.png)
 
 </div>
 
@@ -690,9 +694,9 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 ### Wise Marine
 
-<div className="thematicLogos">
+<div className="thematicLogoWrapperColour">
 
-![](../md_components/static/WISEM.png)
+![](../md_components/static/WiseM.png)
 
 </div>
 

website/docs/webdev/3-Guidelines/_partials/_markdown-eea-color-palette.mdx

@@ -112,7 +112,7 @@ Not all colors have to be used - sometimes a simple color scheme works best. Acc
         <tbody>
             <tr>
             <td style={{backgroundColor:'var(--purple-4)'}} className="small-color-box-td">
-                    <div style={{color:'white'}} className="small-color-box">#7D5B9D<br/>purple-4<br/></div>
+                    <div style={{color:'white'}} className="small-color-box">#753AAD<br/>purple-4<br/></div>
                 </td>            
             </tr>
         </tbody>

website/docs/webdev/3-Guidelines/_partials/_markdown-link-colors.mdx

@@ -9,8 +9,8 @@
                 <td style={{backgroundColor:'#004B7F'}} className="large-color-box-td">
                 <div style={{color:'white'}} className="large-color-box">#004B7F<br/>Hover</div>
             </td>
-            <td style={{backgroundColor:'#5C3285'}} className="large-color-box-td">
-                <div style={{color:'white'}} className="large-color-box">#5C3285<br/>Visited</div>
+            <td style={{backgroundColor:'#753AAD'}} className="large-color-box-td">
+                <div style={{color:'white'}} className="large-color-box">#753AAD<br/>Visited</div>
             </td>
             <td style={{backgroundColor:'#003052'}} className="large-color-box-td">
                 <div style={{color:'white'}} className="large-color-box">#003052<br/>Active</div>

website/src/css/custom.css

@@ -167,7 +167,7 @@
   --purple-1: #DFD6E7;
   --purple-2: #BEADCE;
   --purple-3: #9E84B6;
-  --purple-4: #7D5B9D;
+  --purple-4: #753AAD;
   --purple-5: #5C3285;
   --purple-6: #3C096C;
   --red-0: #FBEEF8;
@@ -305,10 +305,16 @@ iframe {
   width: fit-content;
 }
 
+.thematicLogoWrapperColour {
+  padding: 1rem;
+  width: 400px;
+}
+
 .thematicLogoWrapper.dark {
   background-color: black;
 }
 
+
 .large-color-box-td{
   width: 200px;
   height: 150px;