feat(ui): mobile scaling
This commit is contained in:
Cipher Vance
parent
24155bbf76
commit
6700941ba2
1 changed files with 159 additions and 22 deletions
|
|
@ -23,6 +23,7 @@
|
|||
);
|
||||
--shadow: 0 10px 30px rgba(30, 78, 156, 0.1);
|
||||
--shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15);
|
||||
--navbar-height: 64px; /* consistent fixed navbar height */
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -51,6 +52,7 @@ body {
|
|||
padding: 1rem 0;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid rgba(2, 6, 23, 0.04);
|
||||
min-height: var(--navbar-height);
|
||||
|
||||
/* Lock navbar typography (prevents subtle shifts) */
|
||||
font-size: 1rem; /* 16px baseline */
|
||||
|
|
@ -165,6 +167,9 @@ body {
|
|||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* Ensure content clears the fixed navbar on all screens */
|
||||
padding-top: calc(var(--navbar-height) + 16px);
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
|
|
@ -404,8 +409,8 @@ body {
|
|||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
|
|
@ -762,12 +767,25 @@ body {
|
|||
/* =======================
|
||||
Responsive
|
||||
======================= */
|
||||
|
||||
/* Tablet adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-container {
|
||||
gap: 3rem;
|
||||
}
|
||||
.hero-visual {
|
||||
height: 460px;
|
||||
}
|
||||
.phone-mockup {
|
||||
width: 280px;
|
||||
height: 560px;
|
||||
}
|
||||
.app-logo {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile layout and hamburger menu */
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
padding: 0 1rem;
|
||||
|
|
@ -831,6 +849,11 @@ body {
|
|||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Hero and phone scaling + ensure hero clears navbar */
|
||||
.hero {
|
||||
padding-top: calc(var(--navbar-height) + 12px);
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
|
|
@ -839,33 +862,57 @@ body {
|
|||
|
||||
.hero-visual {
|
||||
order: -1;
|
||||
height: 300px;
|
||||
height: 360px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.phone-mockup {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
width: 230px;
|
||||
height: 460px;
|
||||
padding: 16px;
|
||||
border-radius: 36px;
|
||||
transform: rotate(-5deg) translateY(0);
|
||||
}
|
||||
|
||||
.email-form {
|
||||
flex-direction: column;
|
||||
.screen {
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
.app-brand {
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
.app-brand-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 2rem;
|
||||
.app-logo {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Newsletter pages */
|
||||
.stats-grid {
|
||||
gap: 0.6rem;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 0.6rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
/* Newsletter pages spacing */
|
||||
.page-header {
|
||||
padding: 7rem 0 2rem;
|
||||
}
|
||||
|
|
@ -875,15 +922,105 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cta-section {
|
||||
padding: 1.5rem;
|
||||
margin: 0 1rem;
|
||||
/* Small phones */
|
||||
@media (max-width: 420px) {
|
||||
.hero {
|
||||
padding-top: calc(var(--navbar-height) + 6px);
|
||||
}
|
||||
|
||||
.features-container {
|
||||
padding: 0 1rem;
|
||||
.hero-visual {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.phone-mockup {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
padding: 14px;
|
||||
border-radius: 34px;
|
||||
transform: rotate(-5deg) scale(0.96);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.screen {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.app-brand-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 0.55rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very narrow devices */
|
||||
@media (max-width: 360px) {
|
||||
.hero-visual {
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
.phone-mockup {
|
||||
width: 184px;
|
||||
height: 368px;
|
||||
padding: 12px;
|
||||
border-radius: 30px;
|
||||
transform: rotate(-5deg) scale(0.94);
|
||||
}
|
||||
|
||||
.app-brand-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 0.5rem;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Anchor scroll offset so anchors are not hidden under fixed navbar */
|
||||
main,
|
||||
.section,
|
||||
.page-header,
|
||||
#features {
|
||||
scroll-margin-top: calc(var(--navbar-height) + 12px);
|
||||
}
|
||||
|
||||
/* =======================
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue