/* * orientation-fix.css — GM Car AC Service & Cool Sales & Engine Decarbonisation * ───────────────────────────────────────────────────────────────────────────── * PURPOSE: Supplementary fixes that are NOT already covered in responsive.css. * responsive.css handles breakpoints at 575px, 767px, 991px (viewport width). * This file adds: * 1. Landscape-orientation fixes for short-screen phones * 2. Touch UX improvements (tap targets, iOS font-size zoom prevention) * 3. Focus & form validation styles (accessibility / WCAG 2.5.5) * 4. Booking modal / side-panel base styles * 5. Free-callback promo block styles * 6. Print stylesheet * 7. Large-screen (≥1400px) container & type scale * * Load AFTER responsive.css in so specificity works cleanly. * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ 1. LANDSCAPE ORIENTATION — phones held sideways (short viewport height) Targets devices with max-height: 480px in landscape (e.g. iPhone SE, Moto G) responsive.css handles width breakpoints; this handles HEIGHT + orientation. ═══════════════════════════════════════════════════════════════════════════ */ @media (orientation: landscape) and (max-height: 480px) { /* Hero sections: remove forced min-height so content fits without scrolling */ .hero-2026, section[class*="hero"] { min-height: auto; padding: 2rem 0; } /* Slim the navbar to reclaim precious vertical space */ .navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Hide sticky bottom bar — it eats ~56 px of already-scarce height */ .gm-sticky-bar { display: none; } /* Ensure modals / dialogs don't overflow the short viewport */ .modal, [role="dialog"] { overflow-y: auto; max-height: 100vh; } /* Cap sliders / carousels so they don't dominate the entire screen */ .slider-section, .carousel { max-height: 50vh; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. TOUCH IMPROVEMENTS Applies globally — these are safe, additive rules not in responsive.css. ═══════════════════════════════════════════════════════════════════════════ */ /* Prevent iOS / Android from auto-scaling text on orientation change */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Remove the grey/blue flash that appears on tap in mobile WebKit / Blink */ * { -webkit-tap-highlight-color: transparent; } /* * WCAG 2.5.5 Touch Target Size — all interactive elements must be ≥ 44 × 44 px. * min-height alone is sufficient because most items are full-width or have * padding that handles horizontal reach. */ a, button, [role="button"], input[type="submit"], input[type="reset"], input[type="button"], .btn, .cta-btn, .gm-sb-call, .gm-sb-wa { min-height: 44px; } /* * Prevent iOS Safari from zooming in when a user taps a form field. * Safari zooms whenever font-size < 16px; !important overrides any * component-level overrides in style.css or Bootstrap. */ input, select, textarea { font-size: 16px !important; } /* ═══════════════════════════════════════════════════════════════════════════ 3. FORM FOCUS & VALIDATION STYLES Consistent validation feedback + keyboard-accessible focus rings. ═══════════════════════════════════════════════════════════════════════════ */ /* Invalid field border — works alongside Bootstrap's .is-invalid */ .is-invalid { border-color: #ef4444 !important; } /* Validation error message shown beneath the field */ .invalid-feedback { display: block; color: #ef4444; font-size: 0.8rem; margin-top: 0.25rem; } /* * Keyboard focus ring — visible only for keyboard navigation (:focus-visible). * Provides a clear, branded indicator without cluttering mouse interactions. */ input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 3px; } /* Suppress the default browser outline for mouse / touch clicks */ *:focus:not(:focus-visible) { outline: none; } /* ═══════════════════════════════════════════════════════════════════════════ 4. BOOKING MODAL — SIDE-PANEL (slide-in from right) Base structural styles for the multi-step booking drawer. JS toggles .gm-booking-overlay visibility via aria-hidden / hidden attr. ═══════════════════════════════════════════════════════════════════════════ */ /* Full-screen dimmed overlay that sits behind the panel */ .gm-booking-overlay { position: fixed; inset: 0; /* top/right/bottom/left: 0 */ background: rgba(0, 0, 0, 0.6); z-index: 9998; display: flex; align-items: stretch; /* panel fills full height */ justify-content: flex-end; /* panel anchors to the right edge */ } /* The actual sliding panel */ .gm-booking-panel { background: #0f172a; /* dark navy consistent with site palette */ color: #e2e8f0; width: 420px; max-width: 100vw; /* never wider than the viewport */ height: 100%; overflow-y: auto; padding: 1.5rem; animation: slideInRight 0.3s ease; border-left: 1px solid rgba(255, 255, 255, 0.1); } /* Slide-in entrance animation for the panel */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } /* On narrow phones the panel should occupy the full width */ @media (max-width: 575px) { .gm-booking-panel { width: 100vw; } } /* ── Step progress indicator (row of dots) ── */ .gm-booking-steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } /* Individual step dot */ .gm-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.2s; } /* Highlight the currently active step */ .gm-step-dot.active { background: #3b82f6; } /* ── 2-column service selection grid ── */ .gm-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 1rem 0; } /* Individual service option card */ .gm-service-option { padding: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; cursor: pointer; text-align: center; font-size: 0.8rem; transition: border-color 0.2s, background 0.2s; } /* Hover & selected states */ .gm-service-option:hover, .gm-service-option.selected { border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); } /* ═══════════════════════════════════════════════════════════════════════════ 5. FREE CALLBACK PROMO BLOCK Reusable card that promotes the "free callback" offer (e.g. inside the booking panel or on landing pages). ═══════════════════════════════════════════════════════════════════════════ */ .free-callback-block { background: linear-gradient(135deg, #1e3a5f, #0d2d5e); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; padding: 1.25rem 1.5rem; text-align: center; margin: 1.5rem 0; } /* Link inside the callback block */ .free-callback-block a { color: #60a5fa; font-weight: 600; } .free-callback-block a:hover { color: #93c5fd; } /* ═══════════════════════════════════════════════════════════════════════════ 6. PRINT STYLES Hide all chrome (nav, widgets, CTAs) and render clean content for printing estimates, receipts, or service details. ═══════════════════════════════════════════════════════════════════════════ */ @media print { /* Hide all UI elements that make no sense on paper */ .navbar, .gm-sticky-bar, .whatsapp-float, .call-float, .back-to-top, .quick-action-bar, #chatbot-widget, .gm-announce-bar, .cta-section, .ticker-strip { display: none !important; } /* Force black text on white background for readability and ink savings */ body { color: #000; background: #fff; } /* Append raw URLs after hyperlinks so readers know the destination */ a[href]::after { content: " (" attr(href) ")"; font-size: 0.7em; } /* Let the print layout use the full page width */ .container-xl { max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ 7. LARGE-SCREEN LAYOUT (≥ 1400px) responsive.css tops out at 991px; this file extends upward for wide monitors. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1400px) { /* Cap the main content column at 1320 px to prevent excessively wide lines */ .container-xl { max-width: 1320px; } /* * Fluid type scale for H1: * - Minimum: 2rem (never smaller than base heading size) * - Preferred: 3vw (scales with viewport) * - Maximum: 3.5rem (prevents gigantic headlines on ultra-wide screens) */ h1 { font-size: clamp(2rem, 3vw, 3.5rem); } }