Changes for Kovok

1 files changed, 126 insertions, 32 deletions

diff --git a/static/css/styles.css b/static/css/styles.css
index 860f557..58d9675 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -34,7 +34,7 @@
   --bs-gray-700: #495057;
   --bs-gray-800: #343a40;
   --bs-gray-900: #212529;
-  --bs-primary: #64a19d;
+  --bs-primary: #cb261c;
   --bs-secondary: #7464a1;
   --bs-success: #67c29c;
   --bs-info: #1cabc4;
@@ -83,7 +83,7 @@
 
 body {
   margin: 0;
-  font-family: var(--bs-body-font-family);
+  font-family: Arial;
   font-size: var(--bs-body-font-size);
   font-weight: var(--bs-body-font-weight);
   line-height: var(--bs-body-line-height);
@@ -3000,7 +3000,7 @@ textarea.form-control-lg {
   display: inline-block;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
+  color: #cb261c;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
@@ -3035,13 +3035,13 @@ textarea.form-control-lg {
 
 .btn-primary {
   color: #fff;
-  background-color: #64a19d;
-  border-color: #64a19d;
+  background-color: #971b15;
+  border-color: #971b15;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #558985;
-  border-color: #50817e;
+  background-color: #5e110d;
+  border-color: #5e110d;
 }
 .btn-check:focus + .btn-primary, .btn-primary:focus {
   color: #fff;
@@ -4057,9 +4057,10 @@ textarea.form-control-lg {
 .nav-link {
   display: block;
   padding: 0.5rem 1rem;
-  color: #64a19d;
+  color: rgba(0, 0, 0, 1);
   text-decoration: none;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  text-transform: uppercase;
 }
 @media (prefers-reduced-motion: reduce) {
   .nav-link {
@@ -4628,7 +4629,7 @@ textarea.form-control-lg {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #6c757d;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -5648,6 +5649,10 @@ textarea.form-control-lg {
   outline: 0;
 }
 
+.logo {
+  max-height: 60px;
+}
+
 .modal-dialog {
   position: relative;
   width: auto;
@@ -7963,6 +7968,11 @@ textarea.form-control-lg {
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
+.text-white-75 {
+  --bs-text-opacity: 1;
+  color: rgba(255, 255, 255, 0.75) !important;
+}
+
 .text-reset {
   --bs-text-opacity: 1;
   color: inherit !important;
@@ -11474,8 +11484,9 @@ body {
 }
 
 #mainNav {
-  min-height: 3.5rem;
-  background-color: #000;
+  min-height: 3.0rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0) 100%);
+  padding-bottom: 2.5rem;
 }
 #mainNav .navbar-toggler {
   font-size: 80%;
@@ -11515,7 +11526,7 @@ body {
   #mainNav .nav-link {
     transition: none;
     padding: 2rem 1.5rem;
-    color: rgba(255, 255, 255, 0.5);
+    color: rgba(255, 255, 255, 0.9);
   }
   #mainNav .nav-link:hover {
     color: rgba(255, 255, 255, 0.75);
@@ -11547,6 +11558,10 @@ body {
   }
 }
 
+.main {
+  padding-bottom: 2rem;
+}
+
 .btn {
   box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
   padding: 1.25rem 2rem;
@@ -11562,13 +11577,24 @@ body {
   width: 100%;
   height: auto;
   min-height: 35rem;
-  padding: 15rem 0;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg");
+  padding: 15rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 90%, #000 100%), url("/header2.webp");
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-size: cover;
 }
+
+@media (min-width: 768px) {
+  .masthead {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.3) 90%, #000 100%), url("/header.webp");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-size: cover;
+  }
+}
+
 .masthead h1, .masthead .h1 {
   font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 2.5rem;
@@ -11589,24 +11615,31 @@ body {
     line-height: 4rem;
   }
 }
-@media (min-width: 992px) {
-  .masthead {
-    height: 100vh;
-    padding: 0;
-  }
-  .masthead h1, .masthead .h1 {
-    font-size: 6.5rem;
-    line-height: 6.5rem;
-    letter-spacing: 0.8rem;
-  }
-  .masthead h2, .masthead .h2 {
-    max-width: 30rem;
-    font-size: 1.25rem;
-  }
+
+.masthead {
+  height: 100vh;
+  padding: 0;
+}
+.masthead h1, .masthead .h1 {
+  font-size: 6.5rem;
+  line-height: 6.5rem;
+  letter-spacing: 0.8rem;
+}
+.masthead h2, .masthead .h2 {
+  max-width: 30rem;
+  font-size: 1.25rem;
 }
 
+  .musicvideo {
+    max-width: 80%;
+    text-align: justify;
+    max-width: 90%;
+    max-height: 600px;
+  }
+
 .about-section {
-  padding-top: 10rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 75%, rgba(0, 0, 0, 0.8) 100%);
 }
 .about-section p {
@@ -11660,7 +11693,7 @@ body {
 }
 
 .contact-section {
-  padding-top: 5rem;
+  padding-top: 2rem;
 }
 .contact-section .card {
   border: 0;
@@ -11673,7 +11706,7 @@ body {
   letter-spacing: 0.15rem;
 }
 .contact-section .card hr {
-  border-color: #64a19d;
+  border-color: #6c757d;
   border-width: 0.25rem;
   width: 3rem;
 }
@@ -11705,4 +11738,65 @@ body {
 .about-btn {
   margin-top: -50px;
   margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
+.about-el {
+  display: block;
+}
+
+.about-img {
+  text-align: justify;
+  max-width: 100%;
+}
+
+.column {
+  display: table-cell;
+}
+
+.about-row {
+  display: table;
+  width: 100%; /*Optional*/
+  table-layout: fixed; /*Optional*/
+}
+
+.listen-section {
+  padding-top: 0;
+  padding-bottom: 1.5rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 95%, #000 100%);
+}
+
+.listen-img {
+  text-align: justify;
+  max-width: 90%;
+  max-height: 600px;
+}
+
+.watch-section {
+  padding-top: 0;
+  padding-bottom: 1.5rem;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.social-img {
+  width: 2rem;
+  height: 2rem;
+}
+
+#menu-btn-checkbox {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .hide-in-mobile,
+  .site-nav.hide-in-mobile {
+    display: none; }
+  #menu-btn {
+    display: inline-block; }
+  label[for=menu-btn-checkbox] {
+    cursor: pointer; }
+  #menu-btn-checkbox:not(:checked) ~ #mobile-menu {
+    display: none; }
+  #mobile-menu {
+    display: inline-block;
+  }
+}