/* ===================================================================== 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; } /* ------------------------------------------------------------------- 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.) ------------------------------------------------------------------- */ .steps-grid { margin-top: 36px; gap: 0; max-width: 520px; } .step { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 18px; text-align: left; position: relative; padding-bottom: 30px; } .step:last-child { padding-bottom: 0; } /* explicit placement: icon col 1 / title + body stacked in col 2 (auto-flow would otherwise drop

into the narrow icon column) */ .step-shape { grid-column: 1; grid-row: 1; align-self: start; } .step h4 { grid-column: 2; grid-row: 1; align-self: center; } .step p { grid-column: 2; grid-row: 2; } /* the connecting spine, behind the icons */ .step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: 6px; width: 2px; background: linear-gradient(var(--md-gold-ring), rgba(237,184,26,.12)); transform-origin: top; } /* spine draws downward when the section scrolls into view (JS-gated) */ html.js .steps .step:not(:last-child)::before { transform: scaleY(0); } html.js .steps.md-inview .step:not(:last-child)::before { transform: scaleY(1); transition: transform .6s var(--r-ease-out); } .step-shape { height: 56px; width: 56px; margin: 0; position: relative; z-index: 1; } .step-shape svg { width: 28px; height: 28px; } .step-shape svg.solid { width: 34px; height: 34px; } .step h4 { margin: 4px 0 0; max-width: none; font-size: var(--md-fs-h3); } .step p { margin-top: 8px; } /* ------------------------------------------------------------------- 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); } .about-stat { background: var(--md-surface); border: 1px solid var(--md-hairline); border-radius: var(--r-radius-md); box-shadow: var(--md-card-rest); padding: 18px 20px; } .about-stat .stat-label { margin-top: 12px; } /* ------------------------------------------------------------------- 7. STATS (Why) — intentional gold accent for punch ------------------------------------------------------------------- */ .why-card { padding: 34px 26px; } .why-card .num { color: var(--navy); } .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; } } /* --------------------------------------------------------------------- 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; } }