feat: contact form and more edits
This commit is contained in:
mohamad
+494
-6
@@ -560,6 +560,59 @@ h1, h2, h3, h4, h5, h6 {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SVG Blob Image Decorations
|
||||
============================================================ */
|
||||
.blob-img {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.blob-img--hero-left {
|
||||
width: 420px;
|
||||
top: 5%;
|
||||
left: -80px;
|
||||
opacity: 0.18;
|
||||
filter: blur(2px);
|
||||
animation: blob-morph 16s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.blob-img--hero-right {
|
||||
width: 380px;
|
||||
top: 15%;
|
||||
right: -60px;
|
||||
opacity: 0.13;
|
||||
filter: blur(1px);
|
||||
animation: blob-morph 20s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.blob-img--page-hero {
|
||||
width: 500px;
|
||||
top: -50px;
|
||||
right: -100px;
|
||||
opacity: 0.15;
|
||||
filter: blur(3px);
|
||||
animation: blob-morph 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.blob-img--page-corner {
|
||||
width: 280px;
|
||||
bottom: -30px;
|
||||
left: 5%;
|
||||
opacity: 0.1;
|
||||
filter: blur(2px);
|
||||
animation: blob-morph 22s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
.blob-img--downloads {
|
||||
width: 600px;
|
||||
top: -80px;
|
||||
right: -120px;
|
||||
opacity: 0.12;
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Hero
|
||||
============================================================ */
|
||||
@@ -583,8 +636,17 @@ h1, h2, h3, h4, h5, h6 {
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 780px;
|
||||
width: 100%;
|
||||
max-width: var(--container-max);
|
||||
padding-top: var(--spacing-2xl);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
@@ -603,10 +665,10 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.8rem, 7vw, 5.5rem);
|
||||
font-size: clamp(2rem, 4.5vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 1.25rem;
|
||||
animation: fade-slide-up 0.8s ease-out 0.2s both;
|
||||
}
|
||||
@@ -1578,6 +1640,129 @@ h1, h2, h3, h4, h5, h6 {
|
||||
/* ============================================================
|
||||
Contact Page
|
||||
============================================================ */
|
||||
.contact-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 2.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.contact-form-wrap {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.contact-form-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.required-star {
|
||||
color: var(--accent-blue-light);
|
||||
}
|
||||
|
||||
.optional-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-muted, var(--text-secondary));
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.72rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--glass-border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: rgba(79, 142, 247, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.1);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-group.has-error input,
|
||||
.form-group.has-error textarea {
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.form-field-error {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: rgb(252, 165, 165);
|
||||
margin-top: 0.3rem;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.form-group--captcha {
|
||||
background: rgba(79, 142, 247, 0.04);
|
||||
border: 1px solid rgba(79, 142, 247, 0.15);
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.captcha-input {
|
||||
max-width: 130px !important;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-spinner svg {
|
||||
animation: spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
padding: 0.45rem 1.1rem !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.contact-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
@@ -1585,7 +1770,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
padding: 2.25rem;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
@@ -1620,6 +1805,84 @@ h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Modal
|
||||
============================================================ */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-overlay[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
max-width: 460px;
|
||||
width: 100%;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
animation: modal-pop 0.22s ease-out both;
|
||||
}
|
||||
|
||||
@keyframes modal-pop {
|
||||
from { opacity: 0; transform: scale(0.92) translateY(10px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.modal-icon-wrap {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: rgba(79, 142, 247, 0.12);
|
||||
border: 1px solid rgba(79, 142, 247, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
color: var(--accent-blue-light);
|
||||
}
|
||||
|
||||
.modal-icon-wrap--success {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
color: rgb(134, 239, 172);
|
||||
}
|
||||
|
||||
.modal-icon-wrap--error {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
color: rgb(252, 165, 165);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
font-size: 0.93rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.65;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Footer
|
||||
============================================================ */
|
||||
@@ -1902,7 +2165,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.2rem, 8vw, 3rem);
|
||||
font-size: clamp(1.7rem, 6vw, 2.4rem);
|
||||
}
|
||||
|
||||
.about-strip-inner {
|
||||
@@ -1918,6 +2181,219 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Hero App Preview (Screenshot)
|
||||
============================================================ */
|
||||
.hero-app-preview {
|
||||
position: relative;
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 32px 90px rgba(0, 0, 0, 0.65),
|
||||
0 0 80px rgba(79, 142, 247, 0.22),
|
||||
0 0 0 1px rgba(79, 142, 247, 0.12);
|
||||
animation: hero-preview-in 1.1s ease-out 0.6s both;
|
||||
align-self: center;
|
||||
transform: perspective(1400px) rotateY(-14deg) rotateX(3deg);
|
||||
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
box-shadow 0.7s ease;
|
||||
}
|
||||
|
||||
.hero-app-preview:hover {
|
||||
transform: perspective(1400px) rotateY(-5deg) rotateX(1deg);
|
||||
box-shadow:
|
||||
0 40px 120px rgba(0, 0, 0, 0.7),
|
||||
0 0 100px rgba(79, 142, 247, 0.32),
|
||||
0 0 0 1px rgba(79, 142, 247, 0.2);
|
||||
}
|
||||
|
||||
@keyframes hero-preview-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: perspective(1400px) rotateY(-20deg) rotateX(4deg) translateX(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: perspective(1400px) rotateY(-14deg) rotateX(3deg) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-app-preview-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(7, 7, 19, 0.88) 0%,
|
||||
rgba(7, 7, 19, 0.45) 28%,
|
||||
transparent 62%
|
||||
);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-app-preview img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
opacity: 0.15;
|
||||
border-radius: var(--radius-xl);
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.hero-app-preview:hover img {
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Screenshots Gallery
|
||||
============================================================ */
|
||||
.screenshots-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.screenshots-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 70% 50% at 50% 50%, rgba(79, 142, 247, 0.06) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.screenshots-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.screenshot-item {
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
|
||||
transition: var(--transition-smooth);
|
||||
background: var(--bg-secondary);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.screenshot-item img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
opacity: 0.82;
|
||||
transition: opacity 0.35s ease, transform 0.45s ease;
|
||||
aspect-ratio: 16/10;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.screenshot-item:hover {
|
||||
border-color: rgba(79, 142, 247, 0.3);
|
||||
box-shadow:
|
||||
0 16px 60px rgba(0, 0, 0, 0.6),
|
||||
0 0 20px rgba(79, 142, 247, 0.12);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.screenshot-item:hover img {
|
||||
opacity: 1;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* About page screenshots */
|
||||
.about-screenshots-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr 1fr;
|
||||
gap: 1.25rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.about-screenshots-grid .screenshot-item img {
|
||||
aspect-ratio: 16/10;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Platform Icons (Downloads)
|
||||
============================================================ */
|
||||
.platform-icon {
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.85;
|
||||
transition: var(--transition-smooth);
|
||||
}
|
||||
|
||||
.download-card:hover .platform-icon {
|
||||
opacity: 1;
|
||||
filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(79, 142, 247, 0.6));
|
||||
}
|
||||
|
||||
.download-card--unavailable .platform-icon {
|
||||
opacity: 0.35;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.btn-icon-img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Product Logo Image (fallback on product detail)
|
||||
============================================================ */
|
||||
.product-logo-img {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
opacity: 0.9;
|
||||
filter: drop-shadow(0 4px 20px rgba(79, 142, 247, 0.3));
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive — Images
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-app-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-screenshots-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.about-screenshots-grid .screenshot-item--featured {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blob-img--hero-left,
|
||||
.blob-img--hero-right,
|
||||
.blob-img--page-hero,
|
||||
.blob-img--page-corner,
|
||||
.blob-img--downloads {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.about-screenshots-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root {
|
||||
--container-padding: 1rem;
|
||||
@@ -1939,4 +2415,16 @@ h1, h2, h3, h4, h5, h6 {
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.screenshots-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
padding: 1.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user