/* ===================================================================== FLYLAND — MOBILE-UX REFINEMENT LAYER --------------------------------------------------------------------- Loaded LAST in (after style.css, refinement.css, animations.css, mobile.css, polish.css) so these overrides win. Mobile-first: base rules target phones, min-width queries layer desktop back in. Presentation + additive interaction only — no layout restructure, no branding changes. Pairs with assets/js/mobile-ux.js. ===================================================================== */ /* --------------------------------------------------------------------- DESIGN TOKENS (built on the existing brand vars in style.css :root — --navy #0E4D70, --gold #EDB81A, --black, --white, --text #333) --------------------------------------------------------------------- */ :root { /* 4 / 8 pt spacing scale */ --mux-space-1: 4px; --mux-space-2: 8px; --mux-space-3: 12px; --mux-space-4: 16px; /* standard side gutter */ --mux-space-5: 24px; --mux-space-6: 32px; --mux-space-7: 48px; /* Fluid type scale — clamp() so headings scale smoothly and never overflow at 360px. Floors chosen to match current good 360 renders. */ --mux-fs-h1: clamp(1.85rem, 6.5vw + 0.4rem, 3.8rem); /* hero / banner */ --mux-fs-h2: clamp(1.5rem, 4.5vw + 0.5rem, 2.6rem); /* section titles */ --mux-fs-body: clamp(1rem, 0.4vw + 0.95rem, 1.0625rem); /* >=16px floor */ /* Radii — matches existing 15px field/cards */ --mux-radius-sm: 10px; --mux-radius: 15px; /* Shadows */ --mux-shadow-1: 0 2px 8px rgba(14,77,112,.08); --mux-shadow-2: 0 8px 24px rgba(14,77,112,.14); /* Brand gold convenience alias (so this layer is self-documenting) */ --mux-gold: var(--gold); /* Motion */ --mux-ease: cubic-bezier(.4, 0, .2, 1); --mux-t-fast: .15s; --mux-t: .25s; /* Tap-target minimum */ --mux-tap: 48px; } /* --------------------------------------------------------------------- 1. OVERFLOW + GUTTER SAFETY (belt-and-braces; mobile.css already guards) --------------------------------------------------------------------- */ html, body { overflow-x: hidden; } /* NOTE: do NOT force `height:auto` globally — components in style.css set explicit img width/height (e.g. .svc-box img, .blog-card img) and an auto-height override blows those layouts out on desktop. style.css already provides `img { max-width:100%; display:block }`, which is sufficient. */ @media (max-width: 767px) { /* Consistent 16px side gutter wherever a container would otherwise be flush */ .container { padding-left: var(--mux-space-4); padding-right: var(--mux-space-4); } } /* --------------------------------------------------------------------- 2. TYPE-SCALE OVERFLOW SAFETY (fluid floor; does not shrink desktop) Applied only on phones so the tuned desktop sizes in style.css stay intact. --------------------------------------------------------------------- */ @media (max-width: 767px) { .hero-title, .banner-title { font-size: var(--mux-fs-h1); line-height: 1.08; } .sec-title { font-size: var(--mux-fs-h2); line-height: 1.15; } /* never let a long word punch out of its box */ .hero-title, .sec-title, .banner-title { overflow-wrap: anywhere; } } /* --------------------------------------------------------------------- 3. FORM UX — the conversion core Sizing already good (~56px fields, full-width submit). This adds the interaction feedback + validation affordances that were missing. --------------------------------------------------------------------- */ /* Guarantee >=48px touch height on every field even if a future style shifts */ .hf-field, .cf-field { min-height: var(--mux-tap); } .hf-field input, .hf-field select, .cf-field input, .cf-field select { font-size: 16px; } /* kill iOS zoom-on-focus */ /* Submit: unmistakable primary action + pressed + loading feedback */ .hf-submit { transition: background-color var(--mux-t) var(--mux-ease), color var(--mux-t) var(--mux-ease), transform var(--mux-t-fast) var(--mux-ease), opacity var(--mux-t) var(--mux-ease); } @media (hover: none) { .hf-submit:active { transform: scale(.985); } } .hf-submit[data-loading="true"] { opacity: .7; pointer-events: none; cursor: progress; } .hf-submit[data-loading="true"] svg { animation: mux-spin .7s linear infinite; } @keyframes mux-spin { to { transform: rotate(360deg); } } /* Inline validation states (set by mobile-ux.js, only after a blur/submit) */ .hf-field.mux-invalid, .cf-field.mux-invalid { outline: 2px solid #e5534b; outline-offset: 1px; } .mux-field-error { display: block; color: #ffd9d6; font-size: .8125rem; margin: 6px 2px 0; line-height: 1.35; } /* Contact form sits on a light card — use a readable red there */ .contact-form .mux-field-error { color: #c0392b; } /* --------------------------------------------------------------------- 4. TAP / FEEDBACK STATES (touch-only; refinement.css covers hover) --------------------------------------------------------------------- */ @media (hover: none) { .btn:active, .menu-link:active, .svc-tab-btn:active, .hero-tab-btn:active, .faq-head:active, .price-card .btn:active { transform: scale(.98); } .btn, .menu-link, .faq-head, .svc-tab-btn, .hero-tab-btn { transition: transform var(--mux-t-fast) var(--mux-ease); } } /* --------------------------------------------------------------------- 5. PERCEIVED PERFORMANCE Lazy images already have intrinsic width/height attributes (added in markup) which reserve aspect-ratio and prevent layout shift. style.css sets explicit box sizes for .svc-box img / .blog-card img on both desktop and mobile, so no extra sizing rules are needed (or wanted) here. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 6. ACCESSIBILITY — honor reduced motion for the bits this layer adds --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hf-submit[data-loading="true"] svg { animation: none; } .btn:active, .menu-link:active, .hf-submit:active, .svc-tab-btn:active, .hero-tab-btn:active, .faq-head:active { transform: none; } }