diff --git a/index.html b/index.html
index a17507f..c14f6b6 100644
--- a/index.html
+++ b/index.html
@@ -19,104 +19,121 @@
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
- background: #000; /* Plain black base */
- overflow: hidden; /* Keep “single screen” if it fits */
+ background: #000; /* Plain black base */
+ }
+ body {
+ position: relative;
+ z-index: 0;
}
- /*
- STARFIELD: behind everything (z-index: -2),
- so we can layer a pink grid in front of it.
- */
+ /* STARFIELD: behind the grid (z-index: 0) */
#starfield {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
- z-index: -2;
- background: transparent; /* so black or the overlay is visible */
+ z-index: 0;
+ background: transparent;
}
/*
- PINK GRID: body::before
- - 2 repeating-linear-gradients for horizontal & vertical lines
- - 2px bright pink lines, each cell 40px tall/wide
- - Slight angle: -15deg
- - Slowly scroll upward
+ PINK GRID: body::before at z-index: 1
+ - sized at 300% so it always fully covers the screen, even when rotated.
+ - 0.5px line thickness
+ - "scrollGrid" (moves background up)
+ - "waveGrid" (gentle 3D rocking motion)
*/
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
- width: 200%;
- height: 200%;
- z-index: -1; /* in front of starfield, behind content */
- pointer-events: none; /* ignore clicks */
+ width: 300%;
+ height: 300%;
+ z-index: 1;
+ pointer-events: none;
- /*
- 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
- */
+ /* Pink lines at 0.5px thickness, spaced every 50px */
background:
- /* Horizontal lines */
repeating-linear-gradient(
0deg,
- rgba(255,0,212,1) 0px, /* line color start */
- rgba(255,0,212,1) 2px, /* line color end (2px thick) */
- transparent 2px, /* transparent gap */
- transparent 40px /* next line after 40px total */
+ rgba(255,0,212,1) 0px,
+ rgba(255,0,212,1) 0.5px,
+ transparent 0.5px,
+ transparent 50px
),
- /* Vertical lines */
repeating-linear-gradient(
90deg,
rgba(255,0,212,1) 0px,
- rgba(255,0,212,1) 2px,
- transparent 2px,
- transparent 40px
+ rgba(255,0,212,1) 0.5px,
+ transparent 0.5px,
+ transparent 50px
);
-
background-size: 100% 100%, 100% 100%;
-
- /* Slight angle + small shift so grid definitely covers the screen */
- transform: rotate(-15deg) translate(-10%, -10%);
- transform-origin: center;
- animation: scrollGrid 30s linear infinite;
+ /* We’ll rotate it a bit and shift it so the grid lines fill everything */
+ transform-origin: center center;
+
+ /* Combine two animations: upward scroll + wave rocking */
+ animation:
+ scrollGrid 30s linear infinite,
+ waveGrid 6s ease-in-out infinite;
}
- /*
- 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.
- */
+ /* Scroll upward (adjust 1200 if you want it faster/slower) */
@keyframes scrollGrid {
0% { background-position: 0 0, 0 0; }
100% { background-position: 0 -1200px, 0 -1200px; }
}
/*
- MAIN CONTAINER
- - Full viewport height
- - Evenly space out items (logo, tagline, video, contact, button)
+ Wave effect:
+ - we use perspective so the rotateX/rotateZ appear more “3D”.
+ - 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 @@
-
+
@@ -220,15 +332,22 @@
Short-form social videos that boost your brand.
-
+
-
-
Demetri Pirpiris
- (773) 440-1040
-
-
Let's Get in Touch
+
+
Let's Get In Touch
+