diff --git a/css/style.css b/css/style.css index e1cc116..3585c34 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,99 @@ @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); +/* Hero Section Typewriter Styles - Compressed for Desktop */ +.hero-typewriter-section { + margin: 1.2rem 0; +} + +.hero-subheading { + font-size: 1.4rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 0.6rem; + font-weight: 500; + text-align: center; +} + +.typewriter-container { + font-size: 1.8rem; + color: #52eef5; + font-weight: 600; + text-align: center; + min-height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.8rem; +} + +.hero-supporting-text { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); + line-height: 1.5; + margin: 1.5rem auto; + max-width: 600px; + text-align: center; +} + +/* Hero CTA Buttons - Compact Layout */ +.hero-cta-buttons { + display: flex; + gap: 1.2rem; + justify-content: center; + align-items: center; + margin-top: 1.8rem; + flex-wrap: wrap; +} + +.primary-cta { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + border: 2px solid rgba(255, 255, 255, 0.2); + color: #ffffff; + padding: 0.8rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 10px; + text-decoration: none; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + backdrop-filter: blur(8px); + box-shadow: + 0 6px 24px rgba(109, 40, 217, 0.4), + 0 3px 12px rgba(147, 51, 234, 0.3); +} + +.primary-cta:hover { + transform: translateY(-2px) scale(1.03); + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); + border-color: rgba(255, 255, 255, 0.5); + box-shadow: + 0 10px 32px rgba(109, 40, 217, 0.6), + 0 5px 16px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3); + text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); +} + +.secondary-cta { + background: transparent; + border: 2px solid #52eef5; + color: #52eef5; + padding: 0.8rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 10px; + text-decoration: none; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.secondary-cta:hover { + background: rgba(82, 238, 245, 0.1); + color: #ffffff; + border-color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3); +} + /* Page loading transitions & FOUC prevention */ html.no-js { visibility: hidden; @@ -1234,8 +1328,8 @@ section h2 { width: 100%; margin: 0; overflow: hidden; - height: 80vh; - min-height: 600px; + height: 70vh; + min-height: 500px; background: none; /* Ensure visible during page load */ visibility: visible !important; @@ -1250,7 +1344,7 @@ section h2 { height: 100%; align-items: center; justify-content: center; - padding: 10rem 4% 2rem 4%; + padding: 8rem 4% 1.5rem 4%; /* Ensure consistent display */ visibility: visible !important; } @@ -1273,10 +1367,10 @@ section h2 { } .hero-content h1 { - font-size: 6rem; + font-size: 4.5rem; line-height: 1.1; - margin-bottom: 1.5rem; - letter-spacing: 2px; + margin-bottom: 1rem; + letter-spacing: 1.5px; font-weight: 20; position: relative; text-shadow: none !important; diff --git a/index.html b/index.html index e262a4a..4c2d02d 100644 --- a/index.html +++ b/index.html @@ -241,9 +241,18 @@
Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.
- Get Started +We deliver:
+Your partner in building intelligent, scalable AI systems that drive innovation and growth.
+