/* ===================================================================== FLYLAND — MOBILE-DESIGN LAYER (design-led refinement) --------------------------------------------------------------------- Loaded LAST in , after style.css → refinement.css → animations.css → mobile.css → polish.css → mobile-ux.css, so it has final say. Mobile-first: base craft targets phones; everything visual is scoped to <=767px so DESKTOP IS NOT TOUCHED. Builds on the existing --r-* tokens (refinement.css) + brand vars (--gold #EDB81A, --navy #0E4D70). Presentation only. Pairs with assets/js/mobile-design.js. ===================================================================== */ /* --------------------------------------------------------------------- DESIGN TOKENS — extends, does not replace, the --r-* system. --------------------------------------------------------------------- */ :root { /* Fluid, harmonious type scale (clamp) — elegant on a phone, never overflows at 360px. Floors tuned to current good renders. */ --md-fs-display: clamp(2rem, 8.5vw + 0.2rem, 2.75rem); /* hero H1 */ --md-fs-h2: clamp(1.55rem, 5.2vw + 0.4rem, 2.25rem); /* section titles */ --md-fs-h3: clamp(1.25rem, 3.4vw + 0.5rem, 1.6rem); /* card titles */ --md-fs-lead: clamp(1rem, 1.2vw + 0.92rem, 1.125rem); /* leads */ --md-fs-body: 1rem; /* >=16px */ --md-fs-eyebrow: 0.8125rem; /* Line-heights: ~1.2 headings, ~1.6 body */ --md-lh-tight: 1.18; --md-lh-snug: 1.3; --md-lh-body: 1.6; /* Letter-spacing for small caps / eyebrows */ --md-ls-eyebrow: 0.14em; /* Soft brand tints for depth + chaptering (no new brand colours) */ --md-gold-soft: rgba(237, 184, 26, .14); --md-gold-ring: rgba(237, 184, 26, .55); --md-surface: #ffffff; --md-surface-alt: #f7f6f3; /* warm off-white for alternating bands */ --md-hairline: rgba(14, 77, 112, .10); /* Resting elevation for touch (hover-lift never fires on phones) */ --md-card-rest: 0 6px 18px rgba(14, 77, 112, .10); --md-card-pop: 0 14px 34px rgba(14, 77, 112, .16); } /* ===================================================================== EVERYTHING BELOW IS PHONE-ONLY ===================================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------------------- 1. TYPOGRAPHY & HIERARCHY ------------------------------------------------------------------- */ .hero-title, .banner-title { font-size: var(--md-fs-display); line-height: var(--md-lh-tight); letter-spacing: -0.01em; overflow-wrap: anywhere; } .sec-title { font-size: var(--md-fs-h2); line-height: var(--md-lh-snug); overflow-wrap: anywhere; } .price-card h3, .why-card h5, .step h4, .svc-box h3, .blog-card-body h6, .about-card h4 { line-height: var(--md-lh-snug); } /* refined eyebrow: confident small-caps label */ .eyebrow { font-size: var(--md-fs-eyebrow); letter-spacing: var(--md-ls-eyebrow); text-transform: uppercase; font-weight: 600; } body, p, .testi-slide blockquote, .price-card .desc, .about-card p, .step p, .why .lead { line-height: var(--md-lh-body); } /* Tighter, more intentional section-header rhythm */ .about .sec-title, .steps .sec-title, .why .sec-title { margin-bottom: var(--r-space-md); } .eyebrow.center, .about .eyebrow, .steps .eyebrow, .why .eyebrow, .faq .eyebrow { margin-bottom: 14px; } .hero-left .eyebrow { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; max-width: 100%; font-size: 16px; line-height: 1.35; letter-spacing: 0; text-transform: none; font-weight: 400; white-space: normal; } .hero-left .eyebrow svg { width: 26px; height: 26px; flex: 0 0 26px; margin-right: 0; fill: var(--gold); } /* ------------------------------------------------------------------- 2. PAGE RHYTHM / CHAPTERING — subtle alternating bands so the scroll reads as a designed journey, not one flat wall. Light sections get a clean hairline top; alternates get a warm off-white band. ------------------------------------------------------------------- */ .about, .services, .steps, .why, .blog { position: relative; } .services, .why { background: var(--md-surface-alt); box-shadow: inset 0 1px 0 var(--md-hairline), inset 0 -1px 0 var(--md-hairline); } /* ------------------------------------------------------------------- 3. CARD SYSTEM — real resting depth on touch + unified radii ------------------------------------------------------------------- */ .price-card, .why-card, .blog-card, .about-card, .testi-card { border-radius: var(--r-radius-md); box-shadow: var(--md-card-rest); transition: transform var(--r-tap, .18s) var(--r-ease-out), box-shadow var(--r-tap, .18s) var(--r-ease-out); } .why-card { background: var(--md-surface); border-color: var(--md-hairline); } .blog-card { overflow: hidden; } .blog-card-body { padding: 22px 22px 26px; } /* ------------------------------------------------------------------- 4. PRICING — make "Most Popular" win the eye (conversion focus) ------------------------------------------------------------------- */ .price-card.popular { box-shadow: var(--md-card-pop); outline: 2px solid var(--md-gold-ring); outline-offset: 0; } .price-card.popular .price-features { background: var(--md-gold-soft); border-radius: var(--r-radius-sm); } /* Primary, unmistakable CTA only on the popular card */ .price-card.popular .btn { background: var(--gold); color: var(--black); box-shadow: 0 8px 20px rgba(237,184,26,.30); } .price-card.popular .btn svg { fill: var(--black); } .price-row .amount { line-height: 1; } /* ------------------------------------------------------------------- 5. "HOW IT WORKS" — left-aligned timeline with a gold connecting spine. Turns four 255px octagons + dead space into a scannable, designed sequence. (Pure CSS over existing markup.) ------------------------------------------------------------------- */ /* 2×2 grid — steps 1·2 side by side, 3·4 beneath — to cut the section height roughly in half on phones. (Pure CSS over existing markup.) */ .steps-grid { margin-top: 32px; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 32px; max-width: 440px; } .step { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; } .step-shape { height: 56px; width: 56px; margin: 0 0 14px; } .step-shape svg { width: 28px; height: 28px; } .step-shape svg.solid { width: 34px; height: 34px; } .step h4 { margin: 0; max-width: none; font-size: var(--md-fs-h3); } .step p { display: none; } /* ------------------------------------------------------------------- 6. ABOUT — frame the image + give the stat structure ------------------------------------------------------------------- */ .about-img { height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-radius-md); box-shadow: var(--md-card-rest); } /* stat sits directly on the page (no card/box) like the other elements */ .about-stat { background: none; border: none; box-shadow: none; padding: 0; } .about-stat .stat-label { margin-top: 12px; } /* ------------------------------------------------------------------- 7. STATS (Why) — intentional gold accent for punch ------------------------------------------------------------------- */ /* 2×2 grid on phones — compact cards so the four stats fit two rows */ .why-card { padding: 22px 18px; text-align: center; } .why-card .num { color: var(--navy); font-size: 32px; } .why-card h5 { margin-top: 6px; font-size: 15px; } .why-card.highlight { box-shadow: var(--md-card-pop); background: linear-gradient(155deg, #0E4D70, #0b3e5b); } .why-card.highlight .num { color: #fff; } /* ------------------------------------------------------------------- 8. BUTTONS / CTA — confident primary, comfortable thumb size ------------------------------------------------------------------- */ .btn { min-height: var(--mux-tap, 48px); border-radius: var(--r-radius-pill, 100px); } .about-right .btn, .services-head-right .btn, .pricing-head-right .btn, .blog-head-right .btn { width: 100%; } /* ------------------------------------------------------------------- 9. PARTNERS — tidy the bare marquee band ------------------------------------------------------------------- */ .partners { padding-top: 44px; padding-bottom: 40px; } .partners-title { font-size: var(--md-fs-h2); line-height: var(--md-lh-snug); } /* ------------------------------------------------------------------- 10. OFFERS / SPECIAL HOLIDAY SECTION — mobile fixes Column-stack offer cards at 767 px so 521–767 px screens never see a cramped 210 px side-image beside ~100 px of body text. The base style.css already handles <=520 px; this layer covers the 521–767 px gap. ------------------------------------------------------------------- */ .offer-card { flex-direction: column; } .offer-img { width: 100%; height: 220px; } .offer-body { padding: 22px 20px 26px; } /* Full-width primary action to match other section heads on mobile */ .offers-head-right .btn { width: 100%; justify-content: center; } /* ------------------------------------------------------------------- 12. VERTICAL RHYTHM COMPRESSION — kill the "endless scroll". Desktop section padding (70–119px top/bottom) is far too tall on a phone; it leaves big empty bands between every section. style.css only ever shrank inner grid gaps, never the section padding itself, so the home page read as one long scroll. We halve the section padding and tighten the header→grid gaps. Phone-only; desktop untouched. Loaded after style.css so these win. ------------------------------------------------------------------- */ /* hero: trim the large empty background band under the booking form. style.css reserved 192px under the active tab panel + 70px above the hero-bottom + 100px hero-inner padding — almost 360px of empty image on a phone. Keep a tasteful showcase, lose the dead space. */ .hero-inner { padding-bottom: 56px; } .hero-tab-panel.active { padding-bottom: 28px; } /* hero social proof: collapse the tall stacked block into one compact trust badge on a translucent chip so it reads cleanly over the busy hero photo and stops eating vertical space. */ .hero-bottom { margin-top: 28px; gap: 16px; } .hero-bottom p { font-size: 14.5px; line-height: 22px; max-width: 300px; } .hero-rating { width: auto; display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.16); border-radius: 100px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hero-rating .from { gap: 8px; font-size: 13.5px; margin-top: 0; } .hero-rating .from svg { width: 18px; height: 18px; } /* compact score inside the chip: star + number at chip scale */ .hero-rating .score { gap: 7px; } .hero-rating .score svg { width: 19px; height: 19px; } .hero-rating .score .num { font-size: 21px; line-height: 1; } /* contact hero: lift the form onto a neutral dark glass card (not blue) so the inputs stay legible over the busy mosque photo. */ .contact-hero .hero-form-card { margin-top: 10px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 18px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(0,0,0,.30); } .about { padding: 36px 0 40px; } .about--noheading { padding-top: 24px; } .services { padding: 40px 0; } .steps { padding: 40px 0 44px; } .pricing { padding: 44px 0; } .why { padding: 44px 0 40px; } .testimonials{ padding: 40px 0; } .faq { padding: 40px 0 44px; } .blog { padding: 40px 0 44px; } /* header → content gaps that were tuned for desktop */ .about .sec-title { margin-bottom: 28px; } .pricing-grid { margin-top: 32px; gap: 28px; } .why-grid { margin-top: 28px; } .blog-grid { margin-top: 28px; } .testimonials .container { gap: 32px; } .testi-right { position: relative; } .testi-slide-foot .quote-mark { position: static; margin-left: auto; margin-right: 8px; } .testi-slide-foot .quote-mark svg { width: 34px; height: 45px; } /* ------------------------------------------------------------------- 13. FOOTER — the client's headline complaint. 100px top padding + 71px / 58px internal margins made the footer alone a full screen. ------------------------------------------------------------------- */ .site-footer { padding: 0; background: var(--navy); } .footer-box { padding: 40px 22px 22px; background: transparent; border-radius: 0; } .footer-box::before { content: none; } /* Logo + tagline: centred header with a hairline separating it from the body, so the footer reads as a designed block, not a dump of links. */ .footer-top { flex-direction: column; align-items: center; gap: 14px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.12); } .footer-top img { display: block; height: 52px; margin-inline: auto; } .footer-top h5 { text-align: center; max-width: 300px; line-height: 1.5; opacity: .9; } .footer-socials-mobile { display: flex; justify-content: center; gap: 10px; margin-top: 10px; } .footer-tagline-separator { display: none; } .footer-tagline-tail { display: block; } /* Link area: Services | Company sit as a tidy 2-col pair; Contact and the newsletter each span the full width so nothing is stranded in a half cell. Column rule + section hairlines give clean structure. */ .footer-cols { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 0; align-items: start; } .footer-col { width: auto; } /* vertical hairline between the two link columns */ .footer-col:nth-of-type(2) { border-left: 1px solid rgba(255,255,255,.12); padding-left: 18px; } /* Contact = full-width band under the two columns, with its own hairline */ .footer-col:nth-of-type(3) { grid-column: 1 / -1; margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); } .footer-col h4 { font-size: 16px; letter-spacing: .01em; } .footer-col ul { margin-top: 14px; } .footer-col li { padding-bottom: 11px; font-size: 15px; } .footer-col li a, .footer-col li span { font-size: 15px; line-height: 1.5; } /* Newsletter + socials = full-width band with hairline */ .footer-right { grid-column: 1 / -1; width: auto; margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); align-items: center; text-align: center; } .footer-socials-desktop { display: none !important; } .footer-right h4 { margin-top: 20px; font-size: 16px; } .newsletter { margin-top: 14px; width: 100%; justify-content: flex-start; } .newsletter input { flex: 1; width: auto; min-width: 0; height: 50px; } /* Bottom bar: centred, with a final hairline */ .footer-bottom { flex-direction: column; align-items: center; text-align: center; margin-top: 26px; padding-top: 20px; gap: 12px; border-top: 1px solid rgba(255,255,255,.12); } .footer-bottom .copy { opacity: .85; font-size: 14px; } .footer-bottom ul { justify-content: center; } /* ------------------------------------------------------------------- 14. INNER-PAGE BANNERS — the hero band on every sub-page used 100px vertical padding + 320px min-height, pushing real content far down. ------------------------------------------------------------------- */ .banner-box { min-height: 240px; padding: 64px 20px; } .team-section { padding: 44px 0 52px; } /* ------------------------------------------------------------------- 15. INNER-PAGE-ONLY SECTIONS — same desktop-padding problem on the About / Packages / Detail / FAQ pages. Bring them into the same compressed rhythm as the home page. ------------------------------------------------------------------- */ .offers { padding: 40px 0 44px; } .offers-grid { margin-top: 28px; } .pkg-section { padding: 40px 0 44px; } .detail-section { padding: 40px 0 48px; } .detail-journey { margin-top: 24px; padding: 24px; gap: 18px; } /* image fills the card width with a natural ratio — no dead navy space below it */ .detail-journey img { height: auto; aspect-ratio: 16 / 10; } /* detail package tabs: single horizontal sliding strip (swipeable) rather than wrapping to multiple rows. Bleeds to the card edges and lets the last tab peek in, which signals it scrolls. */ .detail-tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 4px 20px; } .detail-tabs::-webkit-scrollbar { display: none; } .detail-tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; } .faq2 { padding: 40px 0 44px; } /* (Sticky mobile action bar removed — Call / WhatsApp / Enquire bar and its body padding reservation are no longer rendered.) */ /* ------------------------------------------------------------------- 17. "VIEW ALL" TOGGLE — paired with [data-mobile-limit] lists. ------------------------------------------------------------------- */ .mobile-viewall { display: block; width: 100%; max-width: 480px; margin: 24px auto 0; min-height: 48px; padding: 13px 24px; background: transparent; color: var(--navy); border: 1.5px solid var(--navy); border-radius: var(--r-radius-pill, 100px); font-family: var(--sys); font-size: 15px; font-weight: 600; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: background-color .2s var(--r-ease-out), color .2s var(--r-ease-out); } .mobile-viewall:active { background: var(--navy); color: #fff; } /* Package / pricing / offer grids stack vertically on mobile (matching theflyland.com) — no swipe carousel. Base style.css already collapses them to a single column at <=900/600px. */ /* ------------------------------------------------------------------- 19. HERO "PLAN YOUR TRIP" SHEET — reclaim the first screen. The inline booking form (5 fields + tabs) is hidden; a single gold button opens it as a bottom sheet. JS moves the real form in, so all its behaviour is preserved. ------------------------------------------------------------------- */ /* the hero booking form now stays visible inline on mobile (the old "Plan Your Trip" bottom-sheet has been retired). */ .hero-plan-trigger { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; min-height: 54px; padding: 15px 30px; background: var(--gold); color: var(--black); border: none; border-radius: var(--r-radius-pill, 100px); font-family: var(--sys); font-size: 16px; font-weight: 600; box-shadow: 0 12px 26px rgba(237,184,26,.36); -webkit-tap-highlight-color: transparent; transition: transform var(--r-tap, .18s) var(--r-ease-out); } .hero-plan-trigger:active { transform: scale(.97); } .hero-plan-trigger svg { stroke: currentColor; } .plan-sheet-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(8,30,44,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } body.plan-open .plan-sheet-backdrop { opacity: 1; visibility: visible; } body.plan-open { overflow: hidden; } .hero-form-card.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 401; margin: 0; max-height: 88vh; overflow-y: auto; background: var(--navy); border: none; border-radius: 22px 22px 0 0; padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -16px 40px rgba(0,0,0,.42); transform: translateY(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); /* the card carries the .reveal entrance animation, whose keyframe transform would override our slide — disable it on the sheet. */ animation: none !important; visibility: visible !important; } body.plan-open .hero-form-card.is-sheet { transform: translateY(0); } .plan-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; margin-bottom: 4px; background: var(--navy); } .plan-sheet-grip { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); } .plan-sheet-head h3 { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: #fff; } .plan-sheet-close { margin-left: auto; margin-top: 4px; width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: #fff; background: rgba(255,255,255,.12); border: none; border-radius: 50%; -webkit-tap-highlight-color: transparent; } } /* sticky bar is phone-only; hidden on tablet/desktop */ @media (min-width: 768px) { .m-cta { display: none; } } /* --------------------------------------------------------------------- 10. INTERACTION — hover (pointer) vs tap (touch), GPU-only transforms --------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .price-card:hover, .why-card:hover, .blog-card:hover, .about-card:hover { /* desktop hover handled by refinement.css — no override here */ } } @media (hover: none) { .price-card:active, .why-card:active, .blog-card:active, .step:active .step-shape { transform: scale(.99); } .price-card.popular .btn:active { transform: scale(.97); } } /* --------------------------------------------------------------------- 11. MOTION SAFETY --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .price-card, .why-card, .blog-card, .about-card, .price-card.popular .btn { transition: none; } } /* --------------------------------------------------------------------- 12. JUSTIFIED PROSE (added 2026-07-05) Justify ONLY long multi-line paragraph prose — the "About body" style block, legal documents, FAQ answers, and blog article text. Deliberately NOT applied to: hero/banner, pricing cards, packages section, footer, short leads/blurbs, headings, or centered text. Loaded last so it wins the cascade on desktop and mobile alike. To revert: delete this section (or restore from .justify-backup). --------------------------------------------------------------------- */ .about-left h5, .legal-doc > p, .legal-lead, .faq-body p, .blog-post-content p { text-align: justify; text-justify: inter-word; }