/** * Mobile polish – loaded last in so it overrides page inline styles. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--header-height) + 0.75rem); } body { overflow-x: clip; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } body.nav-open { overflow: hidden; touch-action: none; } @media (max-width: 768px) { header { padding-top: env(safe-area-inset-top); } footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); } /* Navigation – compact hamburger & dropdown (not full screen) */ .hamburger { min-width: 32px; min-height: 32px; width: 32px; height: 32px; padding: 0; justify-content: center; align-items: center; gap: 0.22rem; -webkit-tap-highlight-color: transparent; margin-right: 0; } .hamburger span { width: 18px; height: 2px; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } nav.nav-menu { position: fixed; top: var(--header-height); left: 0.75rem; right: 0.75rem; bottom: auto; width: auto; max-height: 0; height: auto; overflow: hidden; transition: max-height 0.22s ease; z-index: 999; border: 1px solid transparent; border-top: none; border-radius: 0 0 12px 12px; box-shadow: none; background: var(--card-bg); } nav.nav-menu.active { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; border-color: var(--border-color); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } nav.nav-menu ul { padding: 0.35rem 0; } nav.nav-menu a { min-height: 40px; padding: 0.625rem 1rem; font-size: 0.9rem; display: flex; align-items: center; } /* Prevent iOS zoom on input focus */ input, select, textarea { font-size: 16px !important; } /* Search (first on homepage) */ .search-section-first { padding: 1.25rem 0 1.75rem; } .search-box { padding: 1.25rem; } .search-section-first .search-box h3 { font-size: 1.3rem; } .search-hint { font-size: 0.9rem; margin-bottom: 1.25rem; } /* Hero */ .hero { padding: 0.5rem 0 2.5rem; } .hero-stats { width: 100%; gap: 0.65rem; } .hero-stat { flex: 1 1 calc(33.333% - 0.5rem); min-width: 0; padding: 0.875rem 0.5rem; } .hero-stat strong { font-size: 1.45rem; } /* News */ .news-grid { grid-template-columns: 1fr; gap: 1.25rem; } .news-card h3 { font-size: 1.05rem; } .news-section-header .view-all-news { width: 100%; justify-content: center; } /* Forms */ .vehicle-check-box { padding: 1.5rem; } .check-button, .service-button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; } button:not(.pagination-btn):not(.toggle-arrow):not(.slideshow-btn):not(.hamburger) { min-height: 48px; } /* News articles */ .news-article-page { padding: 1.5rem 0 2rem; } .news-article-meta { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .news-article-content { overflow-wrap: anywhere; word-break: break-word; } .news-article-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.85rem; } .news-article-content th, .news-article-content td { padding: 0.625rem 0.5rem; } .internal-links-box { padding: 1.25rem; margin-top: 1.5rem; } .internal-links-columns { grid-template-columns: 1fr; gap: 1.25rem; } .internal-links-section { padding: 1.25rem; } /* News archive */ .news-archive-hero { padding: 2rem 0; } .news-filter-bar input { max-width: none; } .pagination { gap: 0.35rem; margin-top: 2rem; padding-bottom: 1rem; } .pagination-btn { min-height: 44px; min-width: 44px; padding: 0.5rem 0.75rem; font-size: 0.9rem; } /* Databank */ .manufacturer-header-container { flex-wrap: wrap; gap: 0.75rem; } .brand-name { font-size: 1.25rem !important; } .toggle-arrow { min-width: 44px; min-height: 44px; } /* Transmission detail pages */ .transmission-header { padding: 2rem 1rem !important; } .transmission-header h1, .transmission-header h2 { font-size: clamp(1.45rem, 6vw, 2rem) !important; line-height: 1.25 !important; } .transmission-content { padding: 1.5rem 16px 2rem !important; } .transmission-content .section { margin: 2rem 0 !important; } .transmission-content .section h3 { font-size: 1.25rem !important; } .specs-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .spec-card { padding: 1rem !important; } .slideshow-wrapper { height: 220px !important; } .slideshow-btn { min-width: 44px; min-height: 44px; padding: 0.75rem !important; } .transmission-content ul { padding-left: 1.25rem !important; word-break: break-word; } .back-to-news-button { width: 100%; max-width: none; min-height: 48px; display: flex; align-items: center; justify-content: center; } .back-link { min-height: 44px; display: inline-flex; align-items: center; } .disclaimer-box { margin-left: 0; margin-right: 0; padding: 1.25rem; } } @media (max-width: 480px) { :root { --header-height: 56px; } header .container { min-height: var(--header-height); } .logo h1 { font-size: 1rem; line-height: 1.2; } .logo-icon { width: 32px; height: 32px; font-size: 0.95rem; } .container { padding: 0 16px; } header .container { padding: 0 16px; } .hero h2 br { display: none; } .hero-stat span { font-size: 0.68rem; letter-spacing: 0.03em; } .news-article-header h1 { font-size: 1.45rem; } .news-image { height: 160px; } .news-count-badge { display: block; margin-top: 0.35rem; font-size: 0.65em; } .news-section, .databank-section, .vehicle-check-section, .about-section { padding: 2.5rem 0; } } @media (hover: none) and (pointer: coarse) { .news-card:hover, .transmission-card:hover, .hero-stat:hover, .service-button:hover, .search-box:hover { transform: none; } .news-card:active { opacity: 0.95; } .pagination-btn:active:not(:disabled), .service-button:active, button:active:not(:disabled) { transform: scale(0.98); } }