page popsu couleur et logo

web/themes/custom/popsu/css/styles.css

@@ -999,90 +999,6 @@ table {
 .slick-arrow.slick-hidden {
   display: none; }
 
-.programme-1 .views-field-field-programme .field-content {
-  background: #4dabc1; }
-
-.programme-1 .views-field {
-  color: #4dabc1; }
-
-.programme-1 .views-field-title {
-  color: #4dabc1; }
-  .programme-1 .views-field-title:hover {
-    background: #4dabc1;
-    color: white; }
-
-.programme-2 .views-field-field-programme .field-content {
-  background: #61ab32; }
-
-.programme-2 .views-field {
-  color: #61ab32; }
-
-.programme-2 .views-field-title {
-  color: #61ab32; }
-  .programme-2 .views-field-title:hover {
-    background: #61ab32;
-    color: white; }
-
-.programme-3 .views-field-field-programme .field-content {
-  background: #646578; }
-
-.programme-3 .views-field {
-  color: #646578; }
-
-.programme-3 .views-field-title {
-  color: #646578; }
-  .programme-3 .views-field-title:hover {
-    background: #646578;
-    color: white; }
-
-.programme-4 .views-field-field-programme .field-content {
-  background: #61ab32; }
-
-.programme-4 .views-field {
-  color: #61ab32; }
-
-.programme-4 .views-field-title {
-  color: #61ab32; }
-  .programme-4 .views-field-title:hover {
-    background: #61ab32;
-    color: white; }
-
-.programme-5 .views-field-field-programme .field-content {
-  background: #ab9569; }
-
-.programme-5 .views-field {
-  color: #ab9569; }
-
-.programme-5 .views-field-title {
-  color: #ab9569; }
-  .programme-5 .views-field-title:hover {
-    background: #ab9569;
-    color: white; }
-
-.programme-7 .views-field-field-programme .field-content {
-  background: #28429f; }
-
-.programme-7 .views-field {
-  color: #28429f; }
-
-.programme-7 .views-field-title {
-  color: #28429f; }
-  .programme-7 .views-field-title:hover {
-    background: #28429f;
-    color: white; }
-
-.programme-6 .views-field-field-programme .field-content {
-  background: #e01a35; }
-
-.programme-6 .views-field {
-  color: #e01a35; }
-
-.programme-6 .views-field-title {
-  color: #e01a35; }
-  .programme-6 .views-field-title:hover {
-    background: #e01a35;
-    color: white; }
-
 @media (min-width: 48rem) {
   :root {
     font-size: calc(1rem + ((1vw - .48rem) * 1.389));
@@ -1278,6 +1194,90 @@ iframe {
   grid-column: 1 /span 3; }
 
 /*pages*/
+.header_top_middle_container .programme-1 .views-field-field-programme .field-content {
+  background: #4dabc1; }
+
+.header_top_middle_container .programme-1 .views-field {
+  color: #4dabc1; }
+
+.header_top_middle_container .programme-1 .views-field-title {
+  color: #4dabc1; }
+  .header_top_middle_container .programme-1 .views-field-title:hover {
+    background: #4dabc1;
+    color: white; }
+
+.header_top_middle_container .programme-2 .views-field-field-programme .field-content {
+  background: #61ab32; }
+
+.header_top_middle_container .programme-2 .views-field {
+  color: #61ab32; }
+
+.header_top_middle_container .programme-2 .views-field-title {
+  color: #61ab32; }
+  .header_top_middle_container .programme-2 .views-field-title:hover {
+    background: #61ab32;
+    color: white; }
+
+.header_top_middle_container .programme-3 .views-field-field-programme .field-content {
+  background: #646578; }
+
+.header_top_middle_container .programme-3 .views-field {
+  color: #646578; }
+
+.header_top_middle_container .programme-3 .views-field-title {
+  color: #646578; }
+  .header_top_middle_container .programme-3 .views-field-title:hover {
+    background: #646578;
+    color: white; }
+
+.header_top_middle_container .programme-4 .views-field-field-programme .field-content {
+  background: #61ab32; }
+
+.header_top_middle_container .programme-4 .views-field {
+  color: #61ab32; }
+
+.header_top_middle_container .programme-4 .views-field-title {
+  color: #61ab32; }
+  .header_top_middle_container .programme-4 .views-field-title:hover {
+    background: #61ab32;
+    color: white; }
+
+.header_top_middle_container .programme-5 .views-field-field-programme .field-content {
+  background: #ab9569; }
+
+.header_top_middle_container .programme-5 .views-field {
+  color: #ab9569; }
+
+.header_top_middle_container .programme-5 .views-field-title {
+  color: #ab9569; }
+  .header_top_middle_container .programme-5 .views-field-title:hover {
+    background: #ab9569;
+    color: white; }
+
+.header_top_middle_container .programme-6 .views-field-field-programme .field-content {
+  background: #e01a35; }
+
+.header_top_middle_container .programme-6 .views-field {
+  color: #e01a35; }
+
+.header_top_middle_container .programme-6 .views-field-title {
+  color: #e01a35; }
+  .header_top_middle_container .programme-6 .views-field-title:hover {
+    background: #e01a35;
+    color: white; }
+
+.header_top_middle_container .programme-7 .views-field-field-programme .field-content {
+  background: #28429f; }
+
+.header_top_middle_container .programme-7 .views-field {
+  color: #28429f; }
+
+.header_top_middle_container .programme-7 .views-field-title {
+  color: #28429f; }
+  .header_top_middle_container .programme-7 .views-field-title:hover {
+    background: #28429f;
+    color: white; }
+
 #header-top {
   height: 5rem;
   background: white;
@@ -1598,7 +1598,7 @@ footer {
   font-size: 0.8rem;
   text-align: center;
   padding: 18rem 0 3rem 0;
-  margin-top: -15rem; }
+  margin-top: -20rem; }
   .about .views-row .views-field-title {
     font-family: "duke" !important;
     font-size: 1.6rem;
@@ -1993,7 +1993,7 @@ article p, .paragraph p {
   font-size: 1rem;
   background-color: black;
   color: white;
-  padding: .3rem .5rem; }
+  padding: .3rem 1rem; }
 
 .block-region-first {
   background-color: black;
@@ -2134,6 +2134,58 @@ article p, .paragraph p {
   right: 0;
   top: 0; }
 
+.page-node-type-programme #projets-block_2 {
+  position: relative; }
+  .page-node-type-programme #projets-block_2 .main_logo {
+    z-index: 10;
+    height: 7rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.page-node-type-programme.programme-1 h2, .page-node-type-programme.programme-1 h3, .page-node-type-programme.programme-1 h4, .page-node-type-programme.programme-1 h5, .page-node-type-programme.programme-1 h6 {
+  color: #4dabc1; }
+
+.page-node-type-programme.programme-1 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_1.svg); }
+
+.page-node-type-programme.programme-2 h2, .page-node-type-programme.programme-2 h3, .page-node-type-programme.programme-2 h4, .page-node-type-programme.programme-2 h5, .page-node-type-programme.programme-2 h6 {
+  color: #61ab32; }
+
+.page-node-type-programme.programme-2 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_2.svg); }
+
+.page-node-type-programme.programme-3 h2, .page-node-type-programme.programme-3 h3, .page-node-type-programme.programme-3 h4, .page-node-type-programme.programme-3 h5, .page-node-type-programme.programme-3 h6 {
+  color: #646578; }
+
+.page-node-type-programme.programme-3 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_Europe.svg); }
+
+.page-node-type-programme.programme-4 h2, .page-node-type-programme.programme-4 h3, .page-node-type-programme.programme-4 h4, .page-node-type-programme.programme-4 h5, .page-node-type-programme.programme-4 h6 {
+  color: #28429f; }
+
+.page-node-type-programme.programme-4 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_logo.svg); }
+
+.page-node-type-programme.programme-5 h2, .page-node-type-programme.programme-5 h3, .page-node-type-programme.programme-5 h4, .page-node-type-programme.programme-5 h5, .page-node-type-programme.programme-5 h6 {
+  color: #ab9569; }
+
+.page-node-type-programme.programme-5 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_monde.svg); }
+
+.page-node-type-programme.programme-6 h2, .page-node-type-programme.programme-6 h3, .page-node-type-programme.programme-6 h4, .page-node-type-programme.programme-6 h5, .page-node-type-programme.programme-6 h6 {
+  color: #e01a35; }
+
+.page-node-type-programme.programme-6 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_territoires.svg); }
+
+.page-node-type-programme.programme-7 h2, .page-node-type-programme.programme-7 h3, .page-node-type-programme.programme-7 h4, .page-node-type-programme.programme-7 h5, .page-node-type-programme.programme-7 h6 {
+  color: #28429f; }
+
+.page-node-type-programme.programme-7 .main_logo {
+  background: center/contain no-repeat url(../images/POPSU_metropoles.svg); }
+
 .page-node-type-programme .layout-content {
   position: relative; }
 
@@ -2179,24 +2231,41 @@ article p, .paragraph p {
   .page-node-type-programme .block-region-third #evenements-block_1 {
     background-color: black;
     margin-bottom: 3rem; }
-  .page-node-type-programme .block-region-third .item-list {
-    background-color: white;
-    color: black;
+    .page-node-type-programme .block-region-third #evenements-block_1 h2 {
+      color: white; }
+  .page-node-type-programme .block-region-third .programme-1 {
+    background: #4dabc1; }
+  .page-node-type-programme .block-region-third .programme-2 {
+    background: #61ab32; }
+  .page-node-type-programme .block-region-third .programme-3 {
+    background: #646578; }
+  .page-node-type-programme .block-region-third .programme-4 {
+    background: #28429f; }
+  .page-node-type-programme .block-region-third .programme-5 {
+    background: #ab9569; }
+  .page-node-type-programme .block-region-third .programme-6 {
+    background: #e01a35; }
+  .page-node-type-programme .block-region-third .programme-7 {
+    background: #28429f; }
+  .page-node-type-programme .block-region-third .views-row {
     padding: 1rem 0; }
-    .page-node-type-programme .block-region-third .item-list li {
-      margin-bottom: 1rem;
-      font-weight: 500; }
-      .page-node-type-programme .block-region-third .item-list li .views-field-field-type-de-ressource {
-        text-transform: uppercase;
-        margin-bottom: .2rem; }
-      .page-node-type-programme .block-region-third .item-list li .views-field-title {
-        font-style: italic; }
-        .page-node-type-programme .block-region-third .item-list li .views-field-title a {
-          text-decoration: none; }
-          .page-node-type-programme .block-region-third .item-list li .views-field-title a:hover {
-            text-decoration: underline; }
-      .page-node-type-programme .block-region-third .item-list li .views-field-field-sous-titre {
-        font-weight: 400; }
+    .page-node-type-programme .block-region-third .views-row:last-of-type {
+      margin-bottom: 1rem; }
+  .page-node-type-programme .block-region-third .views-field {
+    color: white;
+    padding: 0 1rem;
+    font-weight: 500; }
+    .page-node-type-programme .block-region-third .views-field .views-field-field-type-de-ressource {
+      text-transform: uppercase;
+      margin-bottom: .2rem; }
+    .page-node-type-programme .block-region-third .views-field .views-field-title {
+      font-style: italic; }
+    .page-node-type-programme .block-region-third .views-field .views-field-field-sous-titre {
+      font-weight: 400; }
+    .page-node-type-programme .block-region-third .views-field a {
+      text-decoration: none; }
+      .page-node-type-programme .block-region-third .views-field a:hover {
+        text-decoration: underline; }
 
 .page-node-type-programme .block-region-bottom {
   background: url(../images/motif_croix.svg); }

web/themes/custom/popsu/lib/script.js

@@ -17,6 +17,16 @@ $(function(){
 			infinite: false,
 		});
 	}
+
+	if($("#programme_toc-block_5").length > 0){
+		$('#programme_toc-block_5>div>div').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			centerMode: true,
+			centerPadding: '60px',
+		});
+	}
+	
 	$('#centre_de_ressources-block_2 .item-list ul').slick({
 		slidesToShow: 3,
   		slidesToScroll: 1,
@@ -118,11 +128,7 @@ $(function(){
 
 	// HOME PAGE 
 	if($(".path-frontpage").length > 0){
-
-
-
-		let elem = "<div class='main_logo'></div>"
-		console.log(elem);
+		let elem = "<div class='main_logo'></div>";
 		$(".about .views-row").prepend(elem);
 
 		//reconstruction header 
@@ -152,11 +158,7 @@ $(function(){
 		 $('#programmes-block_4 header').append('<span class="arrow"><br>▼</span>').addClass("active");
 		 
 		 let map = $('#villes-block_1').find("#leaflet-map-view-villes-block-1").clone();
-		 $("#home_map_container").empty().append(map);
-
-
-		 
-		 
+		 $("#home_map_container").empty().append(map);	 
 	}
 	
 	//ajout header motif in page static
@@ -174,6 +176,14 @@ $(function(){
 		  
 	});
 	
+//// PAGE POPSU ////
+// projets-block_2
+if($(".page-node-type-programme").length > 0){
+
+	let elem = "<div class='main_logo'></div>"
+	$('#projets-block_2').prepend(elem);
+
+}
 	
 });
 

web/themes/custom/popsu/popsu.theme

@@ -7,7 +7,31 @@
 use Drupal\Core\Template\Attribute;
 
 
-/* implements template_preprocess_views_view_unformatted() */
+// /* implements template_preprocess_html() */
+// function popsu_preprocess_page(&$variables) {
+//   //var_dump($variables);
+//   // $variables['attributes']['class'][] = 'pouette';
+//   //pour page popsu : 
+//   $nid = $variables['node']->nid->getString();
+//   //$variables['attributes']['class'][] = 'programme-'.$nid;
+//   //kint($nid);
+
+//   //pour popsu : - fetch nid
+// }
+
+function popsu_preprocess_html(&$variables) {
+  $node = \Drupal::routeMatch()->getParameter('node');
+  if ($node){
+    if($node->hasField('field_programme') && $node->get('field_programme')->getString() != ""){
+      $variables['attributes']['class'][] = 'programme-' . $node->get('field_programme')->getString();
+    }else{
+      if ($node->id()){
+        $variables['attributes']['class'][] = 'programme-' . $node->id();
+      }
+      
+    }
+  }
+}
 
 function popsu_preprocess_views_view_unformatted(&$variables) {
 

web/themes/custom/popsu/sass/pages/_default.scss

@@ -17,7 +17,7 @@ article, .paragraph{
         font-size: $font-big;
         background-color: black;
         color: white;
-        padding: .3rem .5rem;
+        padding: .3rem 1rem;
     }
 }
 

web/themes/custom/popsu/sass/pages/_home.scss

@@ -243,7 +243,7 @@
 	font-size: $font-medium;
 	text-align: center;	
 	padding: 18rem 0 3rem 0;
-	margin-top: -15rem;
+	margin-top: -20rem;
 	.views-row{
 		.views-field-title{
 			font-family: "duke" !important;

web/themes/custom/popsu/sass/pages/_programme.scss

@@ -1,4 +1,77 @@
 .page-node-type-programme{
+    #projets-block_2{
+        position: relative;
+        .main_logo{
+            z-index: 10;
+            height: 7rem;
+            width: 100%;
+            position: absolute;
+            // background: red;
+           
+            // margin: -5rem 0 3rem 0;
+            top:0;
+            left: 0;
+        }
+    }
+    
+
+
+    &.programme-1{
+        h2,h3,h4,h5,h6{
+            color: $col-1;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_1.svg);
+        }
+    }
+    &.programme-2{
+        h2,h3,h4,h5,h6{
+            color: $col-2;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_2.svg);
+        }
+    }
+    &.programme-3{
+        h2,h3,h4,h5,h6{
+            color: $col-eur;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_Europe.svg);
+        }
+    }
+    &.programme-4{
+        h2,h3,h4,h5,h6{
+            color: $col-met;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_logo.svg);
+        }
+    }
+    &.programme-5{
+        h2,h3,h4,h5,h6{
+            color: $col-mond;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_monde.svg);
+        }
+    }
+    &.programme-6{
+        h2,h3,h4,h5,h6{
+            color: $col-ter;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_territoires.svg);
+        }
+    }
+    &.programme-7{
+        h2,h3,h4,h5,h6{
+            color: $col-met;
+        }
+        .main_logo{
+            background: center / contain no-repeat url(../images/POPSU_metropoles.svg);
+        }
+    }
     .layout-content{
         position: relative;
     }
@@ -59,33 +132,70 @@
         #evenements-block_1{
             background-color: black;
             margin-bottom: 3rem;
+            h2{
+                color: white;
+            }
         }
-       
-        .item-list{
-            background-color:white;
-            color: black;
+        .programme-1{
+            
+            background: $col-1;
+        }
+        .programme-2{
+           
+            background: $col-2;
+        }
+        .programme-3{
+           
+            background: $col-eur;
+        }
+        .programme-4{
+            
+            background: $col-met;
+        }
+        .programme-5{
+           
+            background: $col-mond;
+        }
+        .programme-6{
+           
+            background: $col-ter;
+        }
+        .programme-7{
+           
+            background: $col-met;
+        }
+        .views-row{
             padding: 1rem 0;
-            li{
+            &:last-of-type{
                 margin-bottom: 1rem;
-                font-weight: 500;
-                .views-field-field-type-de-ressource{
-                    text-transform: uppercase;
-                    margin-bottom: .2rem;
-                }
-                .views-field-title{
-                    font-style: italic;
-                    a{
-                        text-decoration: none;
-                        &:hover{
-                            text-decoration: underline;
-                        }
-                    }
-                }
-                .views-field-field-sous-titre{
+            }
+        }
+        .views-field{
+
+            color: white;
+            padding: 0 1rem;
+            font-weight: 500;
+
+            // &:last-of-type{
+            //     margin-bottom: 1rem;
+            // }
+            .views-field-field-type-de-ressource{
+                text-transform: uppercase;
+                margin-bottom: .2rem;
+            }
+            .views-field-title{
+                font-style: italic;
+               
+            }
+            .views-field-field-sous-titre{
                    
-                    font-weight: 400;
+                font-weight: 400;
+            }
+            a{
+                text-decoration: none;
+                &:hover{
+                    text-decoration: underline;
                 }
-
             }
         }
     }

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -1,4 +1,134 @@
 //header
+.header_top_middle_container{
+	.programme-1{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-1;
+			}
+			
+		}
+		.views-field{
+				color: $col-1;
+		}
+		.views-field-title{
+			color: $col-1;
+			&:hover{
+				background: $col-1;
+				color:white;
+			}
+		}
+	}
+
+	.programme-2{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-2;
+			}
+			
+		}
+		.views-field{
+				color: $col-2;
+		}
+		.views-field-title{
+			color: $col-2;
+			&:hover{
+				background: $col-2;
+				color:white;
+			}
+		}
+	}
+
+	.programme-3{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-eur;
+			}
+		}
+		.views-field{
+			color: $col-eur;
+		}
+		.views-field-title{
+			color: $col-eur;
+			&:hover{
+				background: $col-eur;
+				color:white;
+			}
+		}
+	}
+
+	.programme-4{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-2;
+			}
+		}
+		.views-field{
+			color: $col-2;
+		}
+		.views-field-title{
+			color: $col-2;
+			&:hover{
+				background: $col-2;
+				color:white;
+			}
+		}
+	}
+
+	.programme-5{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-mond;
+			}
+		}
+		.views-field{
+			color: $col-mond;
+		}
+		.views-field-title{
+			color: $col-mond;
+			&:hover{
+				background: $col-mond;
+				color:white;
+			}
+		}
+	}
+	.programme-6{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-ter;
+			}
+		}
+		.views-field{
+			color: $col-ter;
+		}
+		.views-field-title{
+			color: $col-ter;
+			&:hover{
+				background: $col-ter;
+				color:white;
+			}
+		}
+	}
+	.programme-7{
+		.views-field-field-programme{
+			.field-content{
+				background: $col-met;
+			}
+		}
+		.views-field{
+			color: $col-met;
+		}
+		.views-field-title{
+			color: $col-met;
+			&:hover{
+				background: $col-met;
+				color:white;
+			}
+		}
+	}
+}
+
+////////////////////////////////////////@at-root
+
 
 #header-top{
 	height: 5rem;
@@ -56,33 +186,7 @@
         }
         
 	}
-    // .programme-3{
-    //     .views-field-title{
-    //         color: $col-eur;
-    //         &:hover{
-    //             background: $col-eur;
-    //             color:white;
-    //         }
-    //     }
-    // }
-    // .programme-5{
-    //     .views-field-title{
-    //         color: $col-mond;
-    //         &:hover{
-    //             background: $col-mond;
-    //             color:white;
-    //         }
-    //     }
-    // }
-    // .programme-7{
-    //     .views-field-title{
-    //         color: $col-met;
-    //         &:hover{
-    //             background: $col-met;
-    //             color:white;
-    //         }
-    //     }
-    // }
+
 }
 .close-block, .open-block{
 	// background: red;

web/themes/custom/popsu/sass/setup/_variables.scss

@@ -16,132 +16,6 @@ $bck-col: #eff2f9;
 $lightblue: #98d0d9;
 $trame: url(../images/motif_croix.svg);
 
-//programmes values
-.programme-1{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-1;
-		}
-		
-	}
-	.views-field{
-			color: $col-1;
-	}
-	.views-field-title{
-		color: $col-1;
-		&:hover{
-			background: $col-1;
-			color:white;
-		}
-	}
-}
-
-.programme-2{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-2;
-		}
-		
-	}
-	.views-field{
-			color: $col-2;
-	}
-	.views-field-title{
-		color: $col-2;
-		&:hover{
-			background: $col-2;
-			color:white;
-		}
-	}
-}
-
-.programme-3{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-eur;
-		}
-	}
-	.views-field{
-		color: $col-eur;
-	}
-	.views-field-title{
-		color: $col-eur;
-		&:hover{
-			background: $col-eur;
-			color:white;
-		}
-	}
-}
-
-.programme-4{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-2;
-		}
-	}
-	.views-field{
-		color: $col-2;
-	}
-	.views-field-title{
-		color: $col-2;
-		&:hover{
-			background: $col-2;
-			color:white;
-		}
-	}
-}
-
-.programme-5{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-mond;
-		}
-	}
-	.views-field{
-		color: $col-mond;
-	}
-	.views-field-title{
-		color: $col-mond;
-		&:hover{
-			background: $col-mond;
-			color:white;
-		}
-	}
-}
-.programme-7{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-met;
-		}
-	}
-	.views-field{
-		color: $col-met;
-	}
-	.views-field-title{
-		color: $col-met;
-		&:hover{
-			background: $col-met;
-			color:white;
-		}
-	}
-}
-.programme-6{
-	.views-field-field-programme{
-		.field-content{
-			background: $col-ter;
-		}
-	}
-	.views-field{
-		color: $col-ter;
-	}
-	.views-field-title{
-		color: $col-ter;
-		&:hover{
-			background: $col-ter;
-			color:white;
-		}
-	}
-}
 
 @media (min-width: 48rem) {
 	:root {