fixed background, added call and email button

index.html

@@ -19,104 +19,121 @@
       height: 100%;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       color: #fff;
-      background: #000;    /* Plain black base */
+      background: #000; /* Plain black base */
-      overflow: hidden;    /* Keep “single screen” if it fits */
+    }
+    body {
+      position: relative;
+      z-index: 0;
     }
 
-    /*
+    /* STARFIELD: behind the grid (z-index: 0) */
-      STARFIELD: behind everything (z-index: -2),
-      so we can layer a pink grid in front of it.
-    */
     #starfield {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: -2;
+      z-index: 0;
-      background: transparent; /* so black or the overlay is visible */
+      background: transparent;
     }
 
     /*
-      PINK GRID: body::before 
+      PINK GRID: body::before at z-index: 1
-      - 2 repeating-linear-gradients for horizontal & vertical lines
+      - sized at 300% so it always fully covers the screen, even when rotated.
-      - 2px bright pink lines, each cell 40px tall/wide
+      - 0.5px line thickness
-      - Slight angle: -15deg
+      - "scrollGrid" (moves background up)
-      - Slowly scroll upward
+      - "waveGrid" (gentle 3D rocking motion)
     */
     body::before {
       content: "";
       position: fixed;
       top: 0;
       left: 0;
-      width: 200%;
+      width: 300%;
-      height: 200%;
+      height: 300%;
-      z-index: -1;          /* in front of starfield, behind content */
+      z-index: 1;
-      pointer-events: none; /* ignore clicks */
+      pointer-events: none;
       
-      /* 
+      /* Pink lines at 0.5px thickness, spaced every 50px */
-         We'll do each set of lines in bright pink:
-         - (A) horizontal lines repeating every 40px, with a 2px thick line 
-         - (B) vertical lines similarly
-      */
       background:
-        /* Horizontal lines */
         repeating-linear-gradient(
           0deg,
-          rgba(255,0,212,1) 0px,      /* line color start */
+          rgba(255,0,212,1) 0px,
-          rgba(255,0,212,1) 2px,      /* line color end (2px thick) */
+          rgba(255,0,212,1) 0.5px,
-          transparent 2px,            /* transparent gap */
+          transparent 0.5px,
-          transparent 40px            /* next line after 40px total */
+          transparent 50px
         ),
-        /* Vertical lines */
         repeating-linear-gradient(
           90deg,
           rgba(255,0,212,1) 0px,
-          rgba(255,0,212,1) 2px,
+          rgba(255,0,212,1) 0.5px,
-          transparent 2px,
+          transparent 0.5px,
-          transparent 40px
+          transparent 50px
         );
-
       background-size: 100% 100%, 100% 100%;
 
-      /* Slight angle + small shift so grid definitely covers the screen */
+      /* We’ll rotate it a bit and shift it so the grid lines fill everything */
-      transform: rotate(-15deg) translate(-10%, -10%);
+      transform-origin: center center;
-      transform-origin: center;
 
-      animation: scrollGrid 30s linear infinite;
+      /* Combine two animations: upward scroll + wave rocking */
+      animation:
+        scrollGrid 30s linear infinite,
+        waveGrid   6s  ease-in-out infinite;
     }
 
-    /*
+    /* Scroll upward (adjust 1200 if you want it faster/slower) */
-      Animate background-position to scroll upward:
-      We'll shift it from top (0) to -1200px over 30s, then repeat. 
-      Increase or decrease 1200 if you want slower/faster or more noticeable movement.
-    */
     @keyframes scrollGrid {
       0%   { background-position: 0 0, 0 0; }
       100% { background-position: 0 -1200px, 0 -1200px; }
     }
 
     /*
-      MAIN CONTAINER 
+      Wave effect: 
-      - Full viewport height
+        - we use perspective so the rotateX/rotateZ appear more “3D”.
-      - Evenly space out items (logo, tagline, video, contact, button)
+        - at 50% we tilt the grid more aggressively, then return at 100%.
     */
+    @keyframes waveGrid {
+      0% {
+        transform: perspective(800px) 
+                   rotate(-15deg)
+                   translate(-50%, -50%)
+                   rotateX(0deg)
+                   rotateZ(0deg);
+      }
+      50% {
+        transform: perspective(800px)
+                   rotate(-15deg)
+                   translate(-50%, -50%)
+                   rotateX(15deg)
+                   rotateZ(12deg);
+      }
+      100% {
+        transform: perspective(800px) 
+                   rotate(-15deg)
+                   translate(-50%, -50%)
+                   rotateX(0deg)
+                   rotateZ(0deg);
+      }
+    }
+
+    /* MAIN CONTAINER on top of everything */
     .container {
+      position: relative;
+      z-index: 2;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       align-items: center;
       width: 100%;
-      height: 100vh;
+      height: 100vh;  /* Full viewport */
       text-align: center;
       padding: 1rem;
-      /* z-index: auto (in front of grid), so content is visible over the grid */
     }
 
     /* LOGO */
     .logo {
       max-width: 90%;
-      max-height: 150px;
+      max-height: 200px;
       transition: transform 0.4s ease;
       filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
     }
@@ -124,7 +141,7 @@
       transform: scale(1.05);
     }
 
-    /* TAGLINE (Hero Statement) */
+    /* TAGLINE */
     .tagline {
       font-size: 2rem;
       font-weight: 700;
@@ -146,11 +163,11 @@
       100% { opacity: 1; }
     }
 
-    /* MAIN VIDEO */
+    /* VIDEO */
     .video-container {
       width: 80%;
       max-width: 800px;
-      max-height: 50vh; /* keep it from dominating small screens */
+      max-height: 50vh;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 10px rgba(255,255,255,0.2);
@@ -173,7 +190,7 @@
       text-shadow: 0 0 3px #fff, 0 0 5px magenta;
     }
 
-    /* CALL TO ACTION (CTA) */
+    /* CTA BUTTON */
     .cta-btn {
       display: inline-block;
       text-decoration: none;
@@ -194,6 +211,101 @@
       opacity: 0.9;
     }
 
+    /* CTA SECTION HEADING */
+    .cta-heading {
+      font-size: 1.5rem;
+      margin: 1.5rem 0 0.5rem;
+      text-shadow: 0 0 5px #fff, 0 0 10px magenta;
+    }
+
+    /*
+      CTA BUTTONS
+      - .cta-btn is the shared style
+      - .call-btn has the phone shape
+      - .mail-btn has the circle+envelope shape
+    */
+    .cta-buttons {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap; /* so they wrap on small screens */
+      justify-content: center;
+      align-items: center;
+    }
+    .cta-btn {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+      color: #fff;
+      background: linear-gradient(45deg, #ff00d4, #00f0ff);
+      border: none;
+      padding: 1rem 2.5rem 1rem 3rem;  /* extra left padding for icon space */
+      font-size: 1rem;
+      font-weight: 600;
+      border-radius: 30px;
+      cursor: pointer;
+      box-shadow: 0 0 10px rgba(255,0,212,0.7), 0 0 20px rgba(0,240,255,0.5);
+      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
+    }
+    .cta-btn:hover {
+      transform: scale(1.05);
+      box-shadow: 0 0 15px rgba(255,0,212,1), 0 0 30px rgba(0,240,255,0.8);
+      opacity: 0.9;
+    }
+
+    /* PHONE BUTTON: add a phone icon via the :before pseudo-element */
+    .call-btn::before {
+      content: "";
+      position: absolute;
+      left: 1rem;         /* place icon near left padding */
+      width: 16px;
+      height: 16px;
+      background: transparent;
+      border: 2px solid #fff;
+      border-radius: 2px 2px 12px 2px;  /* shape the handset corners */
+      transform: rotate(-45deg);
+      box-shadow:
+         0 4px 0 0 #fff,     /* mouthpiece & earpiece lumps via shadow */
+         0 -4px 0 0 #fff;
+    }
+
+    /* EMAIL BUTTON: circle with envelope inside */
+    .mail-btn::before {
+      /* Circle (black fill + white border) */
+      content: "";
+      position: absolute;
+      left: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      background: #000;           /* black interior */
+      border-radius: 50%;
+      border: 2px solid #fff;     /* white ring */
+    }
+    .mail-btn::after {
+      /* White envelope drawn inside the black circle */
+      content: "";
+      position: absolute;
+      left: calc(1rem + 4px);     /* a bit right of circle edge */
+      top: calc(50% - 4px);       /* roughly center the envelope vertically */
+      width: 12px;
+      height: 8px;
+      background: transparent;
+      border: 2px solid #fff;
+      border-radius: 2px;
+      box-sizing: border-box;
+      /*
+        Use two inset shadows to draw the diagonal lines from the top corners
+        down to the bottom center, forming an envelope "flap."
+      */
+      box-shadow:
+        inset -5px -3px 0 0 #fff, /* left diagonal */
+        inset  5px -3px 0 0 #fff; /* right diagonal */
+    }
+
+
     /* MOBILE TWEAKS */
     @media (max-width: 480px) {
       .tagline {
@@ -212,7 +324,7 @@
 </head>
 <body>
 
-  <!-- STARFIELD behind the grid (z-index: -2) -->
+  <!-- STARFIELD (z-index: 0) -->
   <canvas id="starfield"></canvas>
 
   <div class="container">
@@ -220,15 +332,22 @@
     <h1 class="tagline">Short-form social videos that boost your brand.</h1>
 
     <div class="video-container">
-      <video src="https://storage.googleapis.com/rawreelsocial-videos/teaser.mp4" controls></video>
+      <video 
+        src="https://storage.googleapis.com/rawreelsocial-videos/teaser.mp4"
+        controls>
+      </video>
     </div>
 
-    <div class="contact-info">
-      <h2>Demetri Pirpiris</h2>
-      <h3>(773) 440-1040</h3>
-    </div>
 
-    <a href="mailto:rawreelsocial@gmail.com" class="cta-btn">Let's Get in Touch</a>
+    <!-- CTA Heading and Buttons -->
+    <h2 class="cta-heading">Let's Get In Touch</h2>
+    <div class="cta-buttons">
+      <!-- Phone Button: "tel:" link -->
+      <a href="tel:+17734401040" class="cta-btn call-btn">Call Me</a>
+
+      <!-- Email Button: "mailto:" link -->
+      <a href="mailto:rawreelsocial@gmail.com" class="cta-btn mail-btn">Email Me</a>
+    </div>
   </div>
 
   <script>
@@ -236,7 +355,7 @@
     const canvas = document.getElementById('starfield');
     const ctx = canvas.getContext('2d');
     let stars = [];
-    const STAR_COUNT = 120; // tweak for more or fewer stars
+    const STAR_COUNT = 120;
     let w, h;
 
     function initStarfield() {
@@ -258,19 +377,17 @@
     }
 
     function update() {
-      // Clear to transparent so we see black + pink grid behind.
+      // Clear to transparent so the pink grid behind is visible
       ctx.clearRect(0, 0, w, h);
 
       // Move & redraw stars
-      for (let i = 0; i < STAR_COUNT; i++) {
+      for (const s of stars) {
-        const s = stars[i];
         s.y += s.speed;
-        // If star goes off bottom, respawn at random top position
+        // If star goes off bottom, respawn at a random top position
         if (s.y > h) {
           s.y = 0;
           s.x = Math.random() * w;
         }
-        // Draw star
         ctx.beginPath();
         ctx.arc(s.x, s.y, s.size, 0, 2 * Math.PI);
         ctx.fillStyle = "#fff";