From c40bab70ac95be9fd5cdd5c3fe172564f3f75b52 Mon Sep 17 00:00:00 2001
From: gssi962 <gs28122004@rediffmail.com>
Date: Fri, 3 Oct 2025 22:08:52 +0530
Subject: [PATCH] Fix css/style.css: background-size, SVG filter, font path &
 chatbot mobile layout

---
 css/style.css | 246 ++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 196 insertions(+), 50 deletions(-)

diff --git a/css/style.css b/css/style.css
index 88da347..c218b3f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,10 +2,15 @@
 
 @font-face {
   font-family: "Netflix Sans Bolder";
-  src: url("fonts/NetflixSans-Bold.otf") format("opentype");
+  src: url("../fonts/NetflixSans-Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }
 
+/* Theme variables */
 :root {
+  --accent-color: #e50914; /* default (dark theme accent) */
   --main-page-bg: black;
   --main-text-color: white;
   --box-opacity: 0.69;
@@ -14,13 +19,13 @@
   --section-text-color: white;
   --faq-box-bg: #2d2d2d;
   --faq-box-hover-bg: #414141;
-  --faq-svg-filter: white;
   --input-bg-color: rgba(23, 23, 23, 0.7);
   --input-border-color: rgba(246, 238, 238, 0.5);
   --footer-text-color: rgba(255, 255, 255, 0.7);
 }
 
 body[data-theme="light"] {
+  --accent-color: #0a66c2;
   --main-page-bg: white;
   --main-text-color: black;
   --box-opacity: 0.2;
@@ -29,7 +34,6 @@ body[data-theme="light"] {
   --section-text-color: black;
   --faq-box-bg: #f9f9f9;
   --faq-box-hover-bg: #e9e9e9;
-  --faq-svg-filter: black;
   --input-bg-color: rgba(255, 255, 255, 0.8);
   --input-border-color: rgba(0, 0, 0, 0.3);
   --footer-text-color: #555;
@@ -48,10 +52,11 @@ body {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+/* HERO / BACKGROUND */
 .main {
   background-image: url("../assets/images/home_page_background_image.jpg");
   background-position: center center;
-  background-size: max(1200px, 100vw);
+  background-size: cover;
   background-repeat: no-repeat;
   height: 70vh;
   position: relative;
@@ -63,9 +68,11 @@ body {
   opacity: var(--box-opacity);
   position: absolute;
   top: 0;
+  left: 0;
   background-color: black;
 }
 
+/* NAV */
 nav {
   max-width: 80vw;
   margin: auto;
@@ -78,8 +85,11 @@ nav {
 nav img {
   position: relative;
   z-index: 10;
+  max-width: 160px;
+  height: auto;
 }
 
+/* NAV BUTTONS */
 .nav-buttons {
   display: flex;
   align-items: center;
@@ -88,6 +98,7 @@ nav img {
   z-index: 10;
 }
 
+/* HERO TEXT */
 .hero {
   font-family: "Martel Sans", sans-serif;
   height: calc(100% - 92px);
@@ -95,7 +106,7 @@ nav img {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  color: white;
+  color: var(--main-text-color);
   position: relative;
   gap: 23px;
   padding: 0 30px;
@@ -123,6 +134,7 @@ nav img {
   background-color: var(--separation-color);
 }
 
+/* GENERIC BUTTON */
 .btn {
   padding: 3px 8px;
   font-weight: 400;
@@ -136,32 +148,34 @@ nav img {
 }
 
 body[data-theme="light"] .btn {
-    border-color: rgba(0,0,0,0.5);
+  border-color: rgba(0, 0, 0, 0.5);
 }
 
-
-.btn-red {
-  background-color: #e50914;
+/* ACCENTED BUTTON (uses variable) */
+.btn-red, .btn-accent {
+  background-color: var(--accent-color);
   color: white;
   padding: 12px 24px;
   font-size: 20px;
   border-radius: 4px;
   font-weight: 500;
   border: none;
+  cursor: pointer;
 }
 
-.btn-red:hover, .btn-red-sm:hover{
+.btn-red:hover, .btn-accent:hover, .btn-red-sm:hover {
   transform: scale(1.05);
   transition: 0.1s ease-in-out;
 }
 
-.btn-red-sm {
-  background-color: #e50914;
+.btn-red-sm, .btn-accent-sm {
+  background-color: var(--accent-color);
   color: white;
   border: none;
   padding: 8px 16px;
 }
 
+/* HERO BUTTONS */
 .hero-buttons {
   display: flex;
   align-items: center;
@@ -170,15 +184,18 @@ body[data-theme="light"] .btn {
   flex-wrap: wrap;
 }
 
+/* INPUT */
 .main input {
-  padding: 12px 100px 12px 14px;
+  padding: 12px 14px;
   color: var(--main-text-color);
   font-size: 1rem;
   border-radius: 4px;
   background-color: var(--input-bg-color);
   border: 1px solid var(--input-border-color);
+  min-width: 200px;
 }
 
+/* SECTIONS */
 .first {
   display: flex;
   justify-content: center;
@@ -200,6 +217,8 @@ body[data-theme="light"] .btn {
   position: relative;
   z-index: 10;
   border-radius: 40px;
+  display: block;
+  height: auto;
 }
 
 .secImg video {
@@ -207,12 +226,13 @@ body[data-theme="light"] .btn {
   width: 410px;
   top: 87px;
   right: 75px;
+  max-width: 100%;
 }
 
 section.first.third .secImg video {
-    width: 345px;
-    top: 44px;
-    right: 106px;
+  width: 345px;
+  top: 44px;
+  right: 106px;
 }
 
 section.first > div {
@@ -235,6 +255,7 @@ section.first > div :nth-child(2) {
   flex-direction: row-reverse;
 }
 
+/* FAQ */
 .faq {
   background-color: var(--section-bg);
   color: var(--section-text-color);
@@ -271,9 +292,13 @@ section.first > div :nth-child(2) {
   align-items: center;
 }
 
+/* SVG filter fixed using valid CSS; do not hardcode color */
 .faqbox svg {
-  filter: var(--faq-svg-filter);
+  filter: invert(100%);
   transition: transform 0.2s ease-in-out;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
 }
 
 .faqbox.active svg {
@@ -293,6 +318,7 @@ section.first > div :nth-child(2) {
   padding-top: 24px;
 }
 
+/* FOOTER */
 footer {
   color: var(--footer-text-color);
   max-width: 70vw;
@@ -309,8 +335,9 @@ footer a {
   color: var(--footer-text-color);
   text-decoration: none;
 }
+
 footer a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .footer-links {
@@ -327,19 +354,20 @@ footer a:hover {
 }
 
 .netflix-india {
-    margin-top: 24px;
-    font-size: 14px;
+  margin-top: 24px;
+  font-size: 14px;
 }
 
-/* Chatbot styles */
+/* Chatbot styles - header uses accent color variable */
 #chatbot-widget {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1000;
 }
+
 #chatbot-toggle {
-  background: #e50914;
+  background: var(--accent-color);
   color: #fff;
   border: none;
   border-radius: 50%;
@@ -349,6 +377,7 @@ footer a:hover {
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
+
 #chatbot-window {
   width: 340px;
   max-height: 70vh;
@@ -360,19 +389,23 @@ footer a:hover {
   right: 0;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
+
 #chatbot-header {
-  background: #e50914;
+  background: var(--accent-color);
   padding: 12px 16px;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 #chatbot-close {
   cursor: pointer;
   font-size: 1.4rem;
 }
+
 #chatbot-messages {
   flex: 1;
   padding: 16px 12px;
@@ -382,42 +415,155 @@ footer a:hover {
   flex-direction: column;
   gap: 10px;
 }
-.chat-message { display: flex; flex-direction: column; }
-.chat-message.user { align-items: flex-end; }
+
+.chat-message {
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-message.user {
+  align-items: flex-end;
+}
+
 .bubble {
   max-width: 85%;
   padding: 10px 14px;
   border-radius: 16px;
   line-height: 1.5;
+  word-break: break-word;
+}
+
+.chat-message.user .bubble {
+  background: var(--accent-color);
+  border-bottom-right-radius: 4px;
 }
-.chat-message.user .bubble { background: #e50914; border-bottom-right-radius: 4px; }
-.chat-message.bot .bubble { background: #333; border-bottom-left-radius: 4px; }
-#chatbot-loading { display: flex; justify-content: center; padding: 10px 0; }
-.spinner { border: 3px solid #444; border-top: 3px solid #e50914; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
-@keyframes spin { 100% { transform: rotate(360deg); } }
-#chatbot-form { display: flex; border-top: 1px solid #333; padding: 8px; gap: 8px; }
-#chatbot-input { flex: 1; padding: 10px; border: none; background: #222; color: #fff; border-radius: 8px; outline: none; }
-#chatbot-form button { background: #e50914; color: #fff; border: none; padding: 0 16px; border-radius: 8px; cursor: pointer; }
 
+.chat-message.bot .bubble {
+  background: #333;
+  border-bottom-left-radius: 4px;
+}
+
+#chatbot-loading {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+}
+
+.spinner {
+  border: 3px solid #444;
+  border-top: 3px solid var(--accent-color);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#chatbot-form {
+  display: flex;
+  border-top: 1px solid #333;
+  padding: 8px;
+  gap: 8px;
+}
+
+#chatbot-input {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  background: #222;
+  color: #fff;
+  border-radius: 8px;
+  outline: none;
+}
+
+#chatbot-form button {
+  background: var(--accent-color);
+  color: #fff;
+  border: none;
+  padding: 0 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+/* Responsive adjustments */
 @media screen and (max-width: 960px) {
-  .hero > :nth-child(1) { font-size: 32px; }
-  .hero > :nth-child(2), .hero > :nth-child(3) { font-size: 18px; }
-  .first { flex-wrap: wrap; text-align: center; }
-  .second { flex-direction: row; }
-  .secImg img { width: 100%; max-width: 400px; }
-  .secImg video { position: absolute; width: 73%; top: 20.5%; right: 13.5%; }
-  section.first.third .secImg video { width: 63%; top: 9.5%; right: 18%; }
-  section.first > div :nth-child(1) { font-size: 32px; }
-  section.first > div :nth-child(2) { font-size: 18px; }
-  .faq h2 { font-size: 32px; }
-  .footer-links { grid-template-columns: 1fr 1fr; }
+  .hero > :nth-child(1) {
+    font-size: 32px;
+  }
+  .hero > :nth-child(2),
+  .hero > :nth-child(3) {
+    font-size: 18px;
+  }
+  .first {
+    flex-wrap: wrap;
+    text-align: center;
+  }
+  .second {
+    flex-direction: row;
+  }
+  .secImg img {
+    width: 100%;
+    max-width: 400px;
+  }
+  .secImg video {
+    position: absolute;
+    width: 73%;
+    top: 20.5%;
+    right: 13.5%;
+  }
+  section.first.third .secImg video {
+    width: 63%;
+    top: 9.5%;
+    right: 18%;
+  }
+  section.first > div :nth-child(1) {
+    font-size: 32px;
+  }
+  section.first > div :nth-child(2) {
+    font-size: 18px;
+  }
+  .faq h2 {
+    font-size: 32px;
+  }
+  .footer-links {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  /* Chatbot safer mobile placement */
+  #chatbot-window {
+    width: 90vw;
+    right: 5vw;
+    bottom: 80px;
+  }
 }
 
 @media screen and (max-width: 600px) {
-    nav { max-width: 90vw; height: 80px; }
-    nav img { width: 90px; }
-    .hero-buttons { flex-direction: column; }
-    .main input { width: 100%; }
-    .btn-red { font-size: 1rem; padding: 10px 16px; }
-    .faqbox { font-size: 18px; }
+  nav {
+    max-width: 90vw;
+    height: 80px;
+  }
+  nav img {
+    width: 90px;
+  }
+  .hero-buttons {
+    flex-direction: column;
+  }
+  .main input {
+    width: 100%;
+  }
+  .btn-red {
+    font-size: 1rem;
+    padding: 10px 16px;
+  }
+  .faqbox {
+    font-size: 18px;
+    padding: 16px;
+    max-width: 92vw;
+  }
 }
+