fix: mobile-first responsive improvements across all pages
This commit is contained in:
Manuel
@@ -285,3 +285,10 @@ body.page-ready {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide on very small screens to save space */
|
||||
@media (max-width: 23rem) {
|
||||
.scroll-progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
+152
-44
@@ -462,6 +462,8 @@
|
||||
transition: border-color 200ms;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
/* Ensure min touch target */
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
@@ -478,16 +480,19 @@
|
||||
|
||||
.form-textarea {
|
||||
resize: none;
|
||||
/* Taller on mobile for easier typing */
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
}
|
||||
|
||||
.form-span-full {
|
||||
@@ -501,24 +506,27 @@
|
||||
|
||||
.whatsapp-float {
|
||||
position: fixed;
|
||||
right: var(--space-4);
|
||||
bottom: var(--space-4);
|
||||
z-index: 60;
|
||||
right: var(--space-3);
|
||||
bottom: var(--space-3);
|
||||
z-index: 55;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
box-shadow: var(--shadow-lg);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.65rem;
|
||||
font-size: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: transform 200ms, box-shadow 200ms;
|
||||
/* Ensure minimum 44px touch target */
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.whatsapp-float:hover {
|
||||
@@ -541,6 +549,32 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.whatsapp-float span:first-child {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
@media (min-width: 30rem) {
|
||||
.whatsapp-float {
|
||||
font-size: 0.65rem;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
min-width: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
.whatsapp-float span:first-child {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.whatsapp-float {
|
||||
right: var(--space-8);
|
||||
@@ -568,43 +602,49 @@
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
padding-block: var(--space-section);
|
||||
gap: var(--space-6);
|
||||
padding-block: var(--space-12);
|
||||
}
|
||||
|
||||
.footer-brand h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-headline-lg);
|
||||
color: var(--color-on-surface);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.footer-brand img {
|
||||
height: 2.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
max-width: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.footer-col-title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-2);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
@@ -626,11 +666,44 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
opacity: 0.6;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.footer-inner {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-16);
|
||||
padding-block: var(--space-section);
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.footer-brand img {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.footer-col-title {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
@@ -648,30 +721,65 @@
|
||||
background: var(--color-inverse-surface);
|
||||
color: var(--color-inverse-on-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-16) var(--space-8);
|
||||
padding: var(--space-10) var(--space-6);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Reduce ring sizes on mobile */
|
||||
.cta-dark-ring {
|
||||
position: absolute;
|
||||
border: 1px solid rgb(255 224 136 / 8%);
|
||||
border-radius: var(--radius-full);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cta-dark-ring:first-child {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
top: -2rem;
|
||||
left: -2rem;
|
||||
}
|
||||
|
||||
.cta-dark-ring:last-child {
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
bottom: -3rem;
|
||||
right: -3rem;
|
||||
}
|
||||
|
||||
.cta-gold {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: var(--space-10) var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.cta-dark {
|
||||
padding: var(--space-24) var(--space-20);
|
||||
}
|
||||
}
|
||||
|
||||
.cta-dark-ring {
|
||||
position: absolute;
|
||||
border: 2px solid rgb(255 224 136 / 10%);
|
||||
border-radius: var(--radius-full);
|
||||
pointer-events: none;
|
||||
}
|
||||
.cta-dark-ring:first-child {
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
top: -4rem;
|
||||
left: -4rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.cta-gold {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: var(--space-16) var(--space-8);
|
||||
text-align: center;
|
||||
.cta-dark-ring:last-child {
|
||||
width: 24rem;
|
||||
height: 24rem;
|
||||
bottom: -6rem;
|
||||
right: -6rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.cta-gold {
|
||||
padding: var(--space-16) var(--space-8);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user