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