7 verify responsiveness before delivery

README.md

@@ -69,3 +69,5 @@ Replace NTNU-USERNAME with your NTNU username, and use your NTNU password when p
 
 The group used AI to support areas where we had less experience, particularly setting up and writing tests and using TanStack Query. We also used AI as a discussion partner during development to explore solutions, understand concepts, and help debug code.
 AI helped us understand unfamiliar tools and debug code, but some suggestions needed simplifying and careful review.
+
+The car animation in the header is made with a lot of help from AI.

src/App.css

@@ -5,9 +5,13 @@
   font-style: italic;
 }
 
+html {
+  background-color: #D13B3B;
+}
+
 body {
   /**background-color: #272745;*/
-  background-color: #a6a09b;
+  background-color: #f5f0e6 ;
   color: white;
   font-family: "Titillium Web", sans-serif;
   margin: 0;
@@ -93,25 +97,98 @@ button:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #b5332e;
-  z-index: -1;
+  background-color: #D13B3B   ;
+  overflow: hidden;
   width: 100%;
-  height: 6vw;
+  min-height: max(72px, 6vw);
+  border-radius: 0 0 30px 30px;
 }
 
 .header {
   text-align: center;
   color: white;
-  font-size: 40px;
+  font-size: clamp(28px, 6vw, 40px);
+  animation: header-title-reveal 2.4s linear both;
+}
+
+.header-brand {
+  --car-size: max(72px, 8vw);
+  position: relative;
+  box-sizing: border-box;
+  max-width: calc(100% - 24px);
+  min-height: var(--car-size);
+  padding-right: var(--car-size);
+  display: flex;
+  align-items: center;
+}
+
+.header-car {
+  position: absolute;
+  left: calc(100% - var(--car-size));
+  top: 50%;
+  width: var(--car-size);
+  height: var(--car-size);
+  transform: translateY(-50%);
+  animation: header-drive-in 2.4s linear both;
+}
+
+.header-car::before {
+  content: "";
+  position: absolute;
+  right: 65%;
+  top: 30%;
+  width: clamp(65px, 9vw, 115px);
+  height: 55%;
+  background:
+    radial-gradient(ellipse at 88% 60%, #fffe 8%, transparent 30%),
+    radial-gradient(ellipse at 72% 30%, #fffc 6%, transparent 26%),
+    radial-gradient(ellipse at 62% 75%, #fffd 8%, transparent 30%),
+    radial-gradient(ellipse at 45% 42%, #fffb 5%, transparent 28%),
+    radial-gradient(ellipse at 28% 68%, #fff9 5%, transparent 25%),
+    radial-gradient(ellipse at 15% 30%, #fff7, transparent 22%);
+  filter: blur(2px);
+  transform-origin: right center;
+  opacity: 0;
+  animation: header-smoke 2.4s linear both;
+  pointer-events: none;
 }
 
 #header-container img {
-  height: 8vw;
+  position: relative;
+  height: var(--car-size);
   width: auto;
+  flex-shrink: 0;
   margin-right: 10px;
   transform: scaleX(-1);
 }
 
+@keyframes header-drive-in {
+  0% { left: -50vw; }
+  12% { left: 0; }
+  85%, 100% { left: calc(100% - var(--car-size)); }
+}
+
+@keyframes header-title-reveal {
+  0%, 12% { clip-path: inset(0 100% 0 0); filter: blur(3px); }
+  85% { clip-path: inset(0 -8px 0 -8px); filter: blur(1px); }
+  100% { clip-path: inset(0 -8px 0 -8px); filter: blur(0); }
+}
+
+@keyframes header-smoke {
+  0% { opacity: 0; transform: scale(0.6); }
+  15%, 80% { opacity: 1; }
+  90% { opacity: 0.5; transform: scale(1.05); }
+  100% { opacity: 0; transform: scale(1.15); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .header,
+  .header-car,
+  .header-car::before {
+    animation: none;
+  }
+}
+
 .driver-detail {
   background-color: #15151e;
   border-radius: 30px;

src/App.tsx

@@ -113,8 +113,12 @@ function App() {
   return (
     <>
       <div id="header-container">
-        <h1 className="header">F1 The Website</h1>
-        <img src={race_car_icon} alt="Race Car Icon" className="header-icon" />
+        <div className="header-brand">
+          <h1 className="header">F1 The Website</h1>
+          <div className="header-car" aria-hidden="true">
+            <img src={race_car_icon} alt="" className="header-icon" />
+          </div>
+        </div>
       </div>
       <SearchAndFilter
         showFavorites={showFavorites}