From cc55641edf269906eedb13f2b213d1c4073c78c3 Mon Sep 17 00:00:00 2001 From: Manuel Date: Sun, 10 May 2026 16:09:26 +0200 Subject: [PATCH] fix: mobile-first responsive improvements across all pages --- src/pages/bodas-reales.astro | 31 ++++- src/pages/contacto.astro | 17 ++- src/pages/corporativo-business.astro | 46 +++++-- src/pages/reuniones-familiares.astro | 26 ++-- src/styles/animations.css | 7 + src/styles/components.css | 196 +++++++++++++++++++++------ 6 files changed, 242 insertions(+), 81 deletions(-) diff --git a/src/pages/bodas-reales.astro b/src/pages/bodas-reales.astro index d1203e0..8f19b6e 100644 --- a/src/pages/bodas-reales.astro +++ b/src/pages/bodas-reales.astro @@ -103,7 +103,7 @@ import MainLayout from '../layouts/MainLayout.astro';

-
+
Texturas nobles @@ -112,7 +112,7 @@ import MainLayout from '../layouts/MainLayout.astro';

Linos y sedas seleccionados por su caída y tacto excepcional.

-
+
Canapés premium
@@ -120,7 +120,7 @@ import MainLayout from '../layouts/MainLayout.astro';

Detalles metálicos que aportan un brillo atemporal a su celebración.

-
+
Platos de autor
@@ -190,15 +190,28 @@ import MainLayout from '../layouts/MainLayout.astro'; diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro index d859757..84891ea 100644 --- a/src/pages/contacto.astro +++ b/src/pages/contacto.astro @@ -147,13 +147,13 @@ import MainLayout from '../layouts/MainLayout.astro'; diff --git a/src/pages/corporativo-business.astro b/src/pages/corporativo-business.astro index 76aea55..e4c3e5b 100644 --- a/src/pages/corporativo-business.astro +++ b/src/pages/corporativo-business.astro @@ -8,31 +8,32 @@ import MainLayout from '../layouts/MainLayout.astro'; activeNav="corporativo" > - -
+ +

Excelencia en Eventos

-

Corporativo
& Business

-

+

Corporativo
& Business

+

Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Desde lanzamientos de marca disruptivos hasta galas institucionales de alto nivel.

- -
- Eventos corporativos premium — MNQ +
+
+ Eventos corporativos premium — MNQ +
@@ -146,7 +147,22 @@ import MainLayout from '../layouts/MainLayout.astro'; grid-template-columns: 1fr; gap: var(--space-4); } - .corp-wide, .corp-tall { position: relative; min-height: 18rem; } + .corp-wide, .corp-tall { position: relative; min-height: 14rem; } + + /* Hero actions stack on mobile */ + .corp-hero-actions { + display: flex; + flex-direction: column; + gap: var(--space-4); + align-items: flex-start; + } + + @media (min-width: 30rem) { + .corp-hero-actions { + flex-direction: row; + align-items: center; + } + } @media (min-width: 48rem) { .corp-bento { @@ -156,7 +172,7 @@ import MainLayout from '../layouts/MainLayout.astro'; } .corp-wide { grid-column: span 2; } .corp-tall { grid-row: span 2; min-height: auto; } + .corp-wide, .corp-tall { min-height: 20rem; } [style*="grid-column:span 12"] { grid-column: span 6 !important; } - [style*="height:28rem"] { height: 36rem !important; } } diff --git a/src/pages/reuniones-familiares.astro b/src/pages/reuniones-familiares.astro index 692b749..821a5b5 100644 --- a/src/pages/reuniones-familiares.astro +++ b/src/pages/reuniones-familiares.astro @@ -241,45 +241,51 @@ import MainLayout from '../layouts/MainLayout.astro'; diff --git a/src/styles/animations.css b/src/styles/animations.css index 5612825..80af275 100644 --- a/src/styles/animations.css +++ b/src/styles/animations.css @@ -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; + } +} diff --git a/src/styles/components.css b/src/styles/components.css index 2f84a79..eab569a 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -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); + } } /* ─────────────────────────────────────────────