jake/cresync-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile responsiveness

Browse Source
This commit is contained in:
Jake Shore 2026-01-26 20:28:06 -05:00
parent 7b93920ae1
commit d32077f8d7
1 changed files with 179 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
index.html
View File

@ -26,11 +26,16 @@
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
overflow-x: hidden; overflow-x: hidden;
min-width: 320px;
} }
/* Utility Classes */ /* Utility Classes */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) {
.container, .container-lg { padding: 0 1.5rem; }
}
.text-center { text-align: center; } .text-center { text-align: center; }
.font-bold { font-weight: 700; } .font-bold { font-weight: 700; }
@ -118,15 +123,19 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem 2rem; padding: 0.875rem 1.5rem;
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 0.875rem;
border-radius: 0.75rem; border-radius: 0.75rem;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
} }
@media (min-width: 640px) {
.btn { padding: 1rem 2rem; font-size: 1rem; }
}
.btn:hover { transform: translateY(-2px); } .btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); } .btn:active { transform: translateY(0); }
@ -219,11 +228,20 @@
/* Hero */ /* Hero */
.hero { .hero {
min-height: 100vh; min-height: 100vh;
padding: 8rem 0 5rem; min-height: 100dvh;
padding: 6rem 0 3rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@media (min-width: 640px) {
.hero { padding: 7rem 0 4rem; }
}
@media (min-width: 768px) {
.hero { padding: 8rem 0 5rem; }
}
.hero-bg { .hero-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -269,24 +287,29 @@
} }
.hero-title { .hero-title {
font-size: 3rem; font-size: 2.25rem;
font-weight: 900; font-weight: 900;
line-height: 1; line-height: 1.1;
letter-spacing: -0.025em; letter-spacing: -0.025em;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; } } @media (min-width: 480px) { .hero-title { font-size: 2.75rem; } }
@media (min-width: 640px) { .hero-title { font-size: 3.5rem; } }
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; line-height: 1; } }
@media (min-width: 1024px) { .hero-title { font-size: 6rem; } } @media (min-width: 1024px) { .hero-title { font-size: 6rem; } }
.hero-subtitle { .hero-subtitle {
font-size: 1.25rem; font-size: 1rem;
color: #a1a1aa; color: #a1a1aa;
max-width: 48rem; max-width: 48rem;
margin: 0 auto 2.5rem; margin: 0 auto 2rem;
line-height: 1.7; line-height: 1.6;
padding: 0 0.5rem;
} }
@media (min-width: 480px) { .hero-subtitle { font-size: 1.125rem; } }
@media (min-width: 640px) { .hero-subtitle { font-size: 1.25rem; padding: 0; margin-bottom: 2.5rem; line-height: 1.7; } }
@media (min-width: 768px) { .hero-subtitle { font-size: 1.5rem; } } @media (min-width: 768px) { .hero-subtitle { font-size: 1.5rem; } }
/* Product Mockup */ /* Product Mockup */
@ -295,18 +318,26 @@
max-width: 72rem; max-width: 72rem;
margin: 0 auto; margin: 0 auto;
padding: 2px; padding: 2px;
border-radius: 1.5rem; border-radius: 1rem;
background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6); background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
background-size: 300% 300%; background-size: 300% 300%;
animation: gradient-shift 4s ease infinite; animation: gradient-shift 4s ease infinite;
} }
@media (min-width: 640px) {
.mockup-wrapper { border-radius: 1.5rem; }
}
.mockup { .mockup {
background: #0a0a0a; background: #0a0a0a;
border-radius: calc(1.5rem - 2px); border-radius: calc(1rem - 2px);
overflow: hidden; overflow: hidden;
} }
@media (min-width: 640px) {
.mockup { border-radius: calc(1.5rem - 2px); }
}
.mockup-chrome { .mockup-chrome {
display: flex; display: flex;
align-items: center; align-items: center;
@ -344,9 +375,10 @@
.mockup-body { .mockup-body {
display: flex; display: flex;
height: 28rem; height: 22rem;
} }
@media (min-width: 480px) { .mockup-body { height: 26rem; } }
@media (min-width: 768px) { .mockup-body { height: 32rem; } } @media (min-width: 768px) { .mockup-body { height: 32rem; } }
.mockup-sidebar { .mockup-sidebar {
@ -382,21 +414,34 @@
.chat-messages { .chat-messages {
flex: 1; flex: 1;
padding: 1.5rem; padding: 0.75rem;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.625rem;
}
@media (min-width: 640px) {
.chat-messages { padding: 1.5rem; gap: 1rem; }
} }
.message { .message {
max-width: 85%; max-width: 90%;
padding: 0.875rem 1.25rem; padding: 0.625rem 0.875rem;
border-radius: 1rem; border-radius: 0.75rem;
font-size: 0.875rem; font-size: 0.75rem;
line-height: 1.5; line-height: 1.5;
} }
@media (min-width: 640px) {
.message {
max-width: 85%;
padding: 0.875rem 1.25rem;
border-radius: 1rem;
font-size: 0.875rem;
}
}
.message.user { .message.user {
align-self: flex-end; align-self: flex-end;
background: rgba(34, 197, 94, 0.15); background: rgba(34, 197, 94, 0.15);
@ -425,18 +470,30 @@
} }
.chat-input { .chat-input {
padding: 1rem; padding: 0.5rem;
border-top: 1px solid rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.05);
} }
@media (min-width: 640px) {
.chat-input { padding: 1rem; }
}
.chat-input-inner { .chat-input-inner {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
padding: 0.875rem 1rem; padding: 0.625rem 0.75rem;
background: rgba(255,255,255,0.03); background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1rem; border-radius: 0.75rem;
}
@media (min-width: 640px) {
.chat-input-inner {
gap: 0.75rem;
padding: 0.875rem 1rem;
border-radius: 1rem;
}
} }
.chat-input input { .chat-input input {
@ -445,7 +502,12 @@
border: none; border: none;
outline: none; outline: none;
color: #fff; color: #fff;
font-size: 0.875rem; font-size: 0.8125rem;
min-width: 0;
}
@media (min-width: 640px) {
.chat-input input { font-size: 0.875rem; }
} }
.chat-input input::placeholder { color: #52525b; } .chat-input input::placeholder { color: #52525b; }
@ -571,10 +633,12 @@
/* Section Styles */ /* Section Styles */
section { section {
padding: 6rem 0; padding: 3rem 0;
} }
@media (min-width: 768px) { section { padding: 8rem 0; } } @media (min-width: 640px) { section { padding: 5rem 0; } }
@media (min-width: 768px) { section { padding: 6rem 0; } }
@media (min-width: 1024px) { section { padding: 8rem 0; } }
.section-badge { .section-badge {
display: inline-flex; display: inline-flex;
@ -588,35 +652,46 @@
} }
.section-title { .section-title {
font-size: 2.25rem; font-size: 1.75rem;
font-weight: 900; font-weight: 900;
line-height: 1.1; line-height: 1.15;
margin-bottom: 1.5rem; margin-bottom: 1rem;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
@media (min-width: 480px) { .section-title { font-size: 2rem; } }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; margin-bottom: 1.5rem; } }
@media (min-width: 768px) { .section-title { font-size: 3rem; } } @media (min-width: 768px) { .section-title { font-size: 3rem; } }
@media (min-width: 1024px) { .section-title { font-size: 3.75rem; } } @media (min-width: 1024px) { .section-title { font-size: 3.75rem; } }
.section-subtitle { .section-subtitle {
font-size: 1.125rem; font-size: 1rem;
color: #a1a1aa; color: #a1a1aa;
max-width: 48rem; max-width: 48rem;
margin: 0 auto; margin: 0 auto;
line-height: 1.7; line-height: 1.6;
} }
@media (min-width: 640px) { .section-subtitle { font-size: 1.125rem; line-height: 1.7; } }
@media (min-width: 768px) { .section-subtitle { font-size: 1.25rem; } } @media (min-width: 768px) { .section-subtitle { font-size: 1.25rem; } }
/* Problem Cards */ /* Problem Cards */
.problem-card { .problem-card {
padding: 2rem; padding: 1.25rem;
border-radius: 1.5rem; border-radius: 1rem;
background: rgba(255,255,255,0.02); background: rgba(255,255,255,0.02);
border: 1px solid rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.1);
transition: border-color 0.3s, transform 0.3s; transition: border-color 0.3s, transform 0.3s;
} }
@media (min-width: 640px) {
.problem-card { padding: 1.5rem; border-radius: 1.25rem; }
}
@media (min-width: 768px) {
.problem-card { padding: 2rem; border-radius: 1.5rem; }
}
.problem-card:hover { .problem-card:hover {
border-color: rgba(248, 113, 113, 0.3); border-color: rgba(248, 113, 113, 0.3);
transform: translateY(-4px); transform: translateY(-4px);
@ -652,14 +727,22 @@
} }
.pipeline-card { .pipeline-card {
padding: 2rem; padding: 1.25rem;
border-radius: 1.5rem; border-radius: 1rem;
background: rgba(255,255,255,0.02); background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06);
position: relative; position: relative;
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
} }
@media (min-width: 640px) {
.pipeline-card { padding: 1.5rem; border-radius: 1.25rem; }
}
@media (min-width: 768px) {
.pipeline-card { padding: 2rem; border-radius: 1.5rem; }
}
.pipeline-card:hover { .pipeline-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(34, 197, 94, 0.1); box-shadow: 0 20px 40px rgba(34, 197, 94, 0.1);
@ -723,13 +806,21 @@
/* Feature Cards */ /* Feature Cards */
.feature-card { .feature-card {
padding: 2rem; padding: 1.25rem;
border-radius: 1.5rem; border-radius: 1rem;
background: rgba(255,255,255,0.02); background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06);
transition: transform 0.3s, border-color 0.3s; transition: transform 0.3s, border-color 0.3s;
} }
@media (min-width: 640px) {
.feature-card { padding: 1.5rem; border-radius: 1.25rem; }
}
@media (min-width: 768px) {
.feature-card { padding: 2rem; border-radius: 1.5rem; }
}
.feature-card:hover { .feature-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
border-color: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.2);
@ -762,54 +853,82 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1.5rem; gap: 1rem;
padding: 2.5rem; padding: 1.5rem;
border-radius: 1.5rem; border-radius: 1rem;
background: rgba(255,255,255,0.02); background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06);
text-align: center;
}
@media (min-width: 640px) {
.step-card { padding: 2rem; gap: 1.25rem; border-radius: 1.25rem; }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.step-card { .step-card {
flex-direction: row; flex-direction: row;
gap: 2.5rem; gap: 2.5rem;
padding: 2.5rem;
border-radius: 1.5rem;
text-align: left;
} }
} }
.step-number { .step-number {
width: 5rem; width: 4rem;
height: 5rem; height: 4rem;
border-radius: 1.25rem; border-radius: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2.5rem; font-size: 2rem;
font-weight: 900; font-weight: 900;
color: #000; color: #000;
flex-shrink: 0; flex-shrink: 0;
} }
@media (min-width: 640px) {
.step-number { width: 5rem; height: 5rem; font-size: 2.5rem; border-radius: 1.25rem; }
}
.step-title { .step-title {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 900; font-weight: 900;
margin-bottom: 0.75rem; margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
.step-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
} }
.step-text { .step-text {
color: #a1a1aa; color: #a1a1aa;
font-size: 1.0625rem; font-size: 0.9375rem;
line-height: 1.7; line-height: 1.6;
}
@media (min-width: 640px) {
.step-text { font-size: 1.0625rem; line-height: 1.7; }
} }
/* Pricing */ /* Pricing */
.pricing-card { .pricing-card {
padding: 2.5rem; padding: 1.5rem;
border-radius: 1.5rem; border-radius: 1rem;
background: rgba(255,255,255,0.02); background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06);
transition: transform 0.3s; transition: transform 0.3s;
} }
@media (min-width: 640px) {
.pricing-card { padding: 2rem; border-radius: 1.25rem; }
}
@media (min-width: 768px) {
.pricing-card { padding: 2.5rem; border-radius: 1.5rem; }
}
.pricing-card:hover { .pricing-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
} }
@ -850,11 +969,19 @@
} }
.pricing-price { .pricing-price {
font-size: 2.75rem; font-size: 2rem;
font-weight: 900; font-weight: 900;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@media (min-width: 640px) {
.pricing-price { font-size: 2.5rem; }
}
@media (min-width: 768px) {
.pricing-price { font-size: 2.75rem; }
}
.pricing-period { .pricing-period {
font-size: 1rem; font-size: 1rem;
color: #71717a; color: #71717a;