/* === MOBILE OPTIMIZATION === */ /* ============================================ MOBILE OPTIMIZATION v1 Optimized for Android & iOS ============================================ */ /* === CORE VIEWPORT === */ html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; } body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === PREVENT HORIZONTAL SCROLL === */ *, *::before, *::after { box-sizing: border-box; max-width: 100vw; } .gh-viewport { overflow-x: hidden; } /* === TOUCH TARGETS (WCAG 2.5.5) === */ a, button, input, select, textarea, label { min-height: 44px; min-width: 44px; } .gh-navigation-menu a, .gh-navigation-actions a, .gh-icon-button, button { padding: 10px 12px; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } /* === NAVIGATION MOBILE === */ .gh-navigation-inner { padding: 0 1rem; flex-wrap: nowrap; gap: 0.5rem; } .gh-navigation-brand { flex-shrink: 0; min-width: unset; } .gh-navigation-logo { font-size: 1.25rem; } .gh-burger { display: flex !important; width: 44px; height: 44px; flex-shrink: 0; } .gh-burger svg { width: 24px; height: 24px; } /* === TYPOGRAPHY SCALE (MOBILE) === */ h1 { font-size: clamp(1.75rem, 6vw, 3rem) !important; } h2 { font-size: clamp(1.4rem, 5vw, 2.25rem) !important; } h3 { font-size: clamp(1.2rem, 4vw, 1.5rem) !important; } .article-title, .gh-article-title { font-size: clamp(1.5rem, 7vw, 2.5rem) !important; letter-spacing: -0.02em; } .gh-container-title h1 { font-size: clamp(1.75rem, 8vw, 3rem) !important; } /* === FEED / CARDS MOBILE === */ .gh-feed { grid-template-columns: 1fr !important; gap: 1.25rem !important; padding: 1rem 0 !important; } .gh-card { border-radius: 12px; flex-direction: column; } .gh-card-wrapper { padding: 1.25rem !important; } .gh-card-title { font-size: 1.125rem !important; line-height: 1.35; } .gh-card-excerpt { font-size: 0.875rem !important; -webkit-line-clamp: 2 !important; } .gh-card-meta { flex-wrap: wrap; gap: 0.5rem; } /* === SINGLE POST MOBILE === */ .gh-article-header { padding: 2.5rem 0 1.5rem !important; } .article { padding: 1.5rem 1rem 3rem !important; } .gh-article-excerpt { font-size: 1rem !important; } .gh-article-meta { flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; } .gh-content p { font-size: 1rem !important; line-height: 1.75 !important; } .gh-content h2 { font-size: 1.375rem !important; margin: 2rem 0 0.75rem !important; } .gh-content h3 { font-size: 1.125rem !important; margin: 1.5rem 0 0.5rem !important; } .gh-content blockquote { padding-left: 1rem !important; font-size: 1.0625rem !important; } .gh-content pre { padding: 1rem !important; font-size: 0.8125rem !important; border-radius: 8px !important; margin: 1.5rem -0.5rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .gh-content code { font-size: 0.8125rem !important; } .gh-content ul, .gh-content ol { padding-left: 1.25rem !important; } .gh-content li { font-size: 1rem !important; line-height: 1.65 !important; margin-bottom: 0.5rem !important; } /* === CONTAINERS === */ .gh-container { padding: 0 1rem !important; } .gh-outer { padding: 1.5rem 0 !important; } /* === FOOTER MOBILE === */ .gh-footer-inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; padding: 0 1rem !important; } .gh-footer-menu { flex-wrap: wrap !important; gap: 1rem !important; } .gh-footer-bar { flex-direction: column !important; gap: 0.75rem !important; text-align: center !important; } /* === NEWSLETTER MOBILE === */ .newsletter-cta { padding: 1.5rem 1rem !important; border-radius: 12px !important; margin: 1.5rem 0 !important; } .newsletter-cta h3 { font-size: 1.375rem !important; } .newsletter-form { flex-direction: column !important; gap: 0.75rem !important; } .newsletter-form input, .newsletter-form button { width: 100% !important; font-size: 1rem !important; } /* === DARK MODE TOGGLE MOBILE === */ .dark-mode-toggle { bottom: 1.5rem !important; right: 1.5rem !important; width: 44px !important; height: 44px !important; } /* === IMAGES MOBILE === */ .gh-content img, .article img { max-width: 100vw !important; height: auto !important; border-radius: 8px !important; margin: 1.5rem -1rem !important; } /* === PREVENT OVERSCROLL === */ html, body { overscroll-behavior: none; } /* === CONTAINER TITLE MOBILE === */ .gh-container-title { padding: 2rem 0 1.5rem !important; } .gh-container-title h1 { font-size: 1.75rem !important; line-height: 1.2 !important; } /* === LISTS MOBILE === */ .gh-article .gh-canvas + .gh-content ul, .gh-article .gh-canvas + .gh-content ol, article.gh-article .gh-content ul, article.gh-article .gh-content ol { padding-left: 1.25rem !important; margin: 1rem 0 !important; } .gh-article .gh-canvas + .gh-content li, article.gh-article .gh-content li { font-size: 1rem !important; line-height: 1.65 !important; margin-bottom: 0.5rem !important; } .gh-article .gh-canvas + .gh-content > li, article.gh-article .gh-content > li { font-size: 1rem !important; padding-left: 1.25rem !important; } /* === ARTICLE TITLE (SINGLE) === */ .gh-article-title.is-title { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; } /* Tablet */ @media (min-width: 600px) and (max-width: 900px) { .gh-feed { grid-template-columns: repeat(2, 1fr) !important; } } /* Small screens */ @media (max-width: 380px) { h1 { font-size: 1.5rem !important; } .gh-card-title { font-size: 1rem !important; } .gh-card-excerpt { font-size: 0.8125rem !important; } .gh-content p { font-size: 0.9375rem !important; } .newsletter-cta h3 { font-size: 1.25rem !important; } .dark-mode-toggle { width: 40px !important; height: 40px !important; } } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

Fernando Luis