banner script

assets/css/base/_body.scss

@@ -31,6 +31,7 @@ body{
     background-color: var(--color-bg);
     width: 100vw;
     overflow-x: hidden;
+      
 }
 
 img{
@@ -48,4 +49,9 @@ img{
     // &:hover{
     //     background-color: rgba(255, 0, 0, 0.244);
     // }
+}
+
+
+body, #site-header, #site-footer{
+    transition: background-color 0.3s ease, color 0.3s ease;
 }

assets/css/base/_var.scss

@@ -48,7 +48,7 @@
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
   --dark: black;
-
+  --color-form: white;
 
 
   --border: 1px solid var(--color-txt);
@@ -87,5 +87,28 @@
     --fs-xbig: 32px;
 
     --header-h: 60px;
+
   }
-}
+}
+
+
+
+:root[data-theme="light"] {
+  --grey-100: #1f1f1f;
+  --grey-200: #2f2f2f;
+  --grey-300: #4a4a4a;
+  --grey-400: #6a6a6a;
+  --grey-600: #9a9a9a;
+  --grey-800: #cfcfcf;
+
+  --color-bg: #efefef;
+  --color-txt: #000000;
+  --color-txt-light: var(--grey-400);
+
+  --color-accent: #ff00ff;
+  --color-accent-50: #ffe9ff;
+  --color-accent-100: #fdd8fd;
+
+  --dark: white;
+  --color-form: var(--color-bg);
+}

assets/css/components/_form-newsletter.scss

@@ -14,20 +14,24 @@
         width: 100%;
         border-radius: calc(var(--h-block)*0.625);
         outline: none;
-        border: none;
+        border: 1px solid var(--color-txt);
         padding: 0 2ch;
         font-family: var(--font);
 
         font-size: var(--fs-normal);
         z-index: 40;
         padding-top: 4px;
+        background: var(--color-bg);
+        color: var(--color-txt);
         &::placeholder{
             font-family: var(--font);
             font-size: var(--fs-normal);
+            color: var(--color-txt);
         }
 
         &:focus{
-            outline: 3px solid var(--grey-400);
+            border: 1px solid var(--color-accent);
+            // outline: 3px solid var(--grey-400);
         }
 
       
@@ -35,7 +39,7 @@
 
     button[type="submit"].btn--newletter{
         position: absolute;
-        right: 2px;
+        right: 4px;
         z-index: 100;
     }
 
@@ -43,7 +47,7 @@
     button[type="submit"].btn--newletter {
 
     
-        --size: calc(var(--h-block)*1.25 - 4px);
+        --size: calc(var(--h-block)*1.25 - 8px);
         font-family: var(--font);
         font-size: var(--fs-button-bold);
         height: var(--size);

assets/css/partials/_site-footer.scss

@@ -74,7 +74,7 @@
         margin: 0 auto;
     }
 
-    .footer__socials .container{
+    .footer__socials .socials{
         max-width: 400px;
         columns: 2;
         margin-top: calc(var(--spacing)*1);

assets/css/style.css

@@ -28,6 +28,7 @@
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
   --dark: black;
+  --color-form: white;
   --border: 1px solid var(--color-txt);
   --border-medium: 1px solid var(--grey-600);
   --border-light: 1px solid var(--grey-800);
@@ -61,6 +62,23 @@
     --header-h: 60px;
   }
 }
+:root[data-theme=light] {
+  --grey-100: #1f1f1f;
+  --grey-200: #2f2f2f;
+  --grey-300: #4a4a4a;
+  --grey-400: #6a6a6a;
+  --grey-600: #9a9a9a;
+  --grey-800: #cfcfcf;
+  --color-bg: #efefef;
+  --color-txt: #000000;
+  --color-txt-light: var(--grey-400);
+  --color-accent: #ff00ff;
+  --color-accent-50: #ffe9ff;
+  --color-accent-100: #fdd8fd;
+  --dark: white;
+  --color-form: var(--color-bg);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -110,6 +128,10 @@ img {
   cursor: pointer;
 }
 
+body, #site-header, #site-footer {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
 @keyframes add-border {
   from {
     border-bottom-color: transparent;
@@ -423,31 +445,35 @@ button:disabled {
   width: 100%;
   border-radius: calc(var(--h-block) * 0.625);
   outline: none;
-  border: none;
+  border: 1px solid var(--color-txt);
   padding: 0 2ch;
   font-family: var(--font);
   font-size: var(--fs-normal);
   z-index: 40;
   padding-top: 4px;
+  background: var(--color-bg);
+  color: var(--color-txt);
 }
 .form__newsletter input[type=email]::-moz-placeholder {
   font-family: var(--font);
   font-size: var(--fs-normal);
+  color: var(--color-txt);
 }
 .form__newsletter input[type=email]::placeholder {
   font-family: var(--font);
   font-size: var(--fs-normal);
+  color: var(--color-txt);
 }
 .form__newsletter input[type=email]:focus {
-  outline: 3px solid var(--grey-400);
+  border: 1px solid var(--color-accent);
 }
 .form__newsletter button[type=submit].btn--newletter {
   position: absolute;
-  right: 2px;
+  right: 4px;
   z-index: 100;
 }
 .form__newsletter button[type=submit].btn--newletter {
-  --size: calc(var(--h-block)*1.25 - 4px);
+  --size: calc(var(--h-block)*1.25 - 8px);
   font-family: var(--font);
   font-size: var(--fs-button-bold);
   height: var(--size);
@@ -1255,7 +1281,7 @@ body.menu-open #menu-toggle .close {
     max-width: 1200px;
     margin: 0 auto;
   }
-  #site-footer .footer__socials .container {
+  #site-footer .footer__socials .socials {
     max-width: 400px;
     -moz-columns: 2;
          columns: 2;