/* ═══════════════════════════════════════════════════════════════ Al Safar & Partners — Mobile & Tablet Responsive Fixes Applies to all service / generated pages (54 pages). Loaded via in each page's . Companion to theme-bw.css (covers Odoo/blog pages separately). Breakpoints: tablet ≤1024px mobile ≤767px small ≤480px Font sizes +20% on mobile vs desktop values. ═══════════════════════════════════════════════════════════════ */ /* ── TABLET (≤1024px) ───────────────────────────────────────── */ @media (max-width: 1024px) { /* Nav */ .nav { padding: 0 24px !important; min-height: 64px; position: relative; z-index: 10000; } .nav-logo { height: 44px; } .nav-cta { display: none !important; } .nav-burger { display: block !important; position: relative; z-index: 10001 !important; } /* ── SLIDE DRAWER ── */ .nav-links { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; width: 80% !important; max-width: 380px !important; background: #1A1A1A !important; z-index: 10000 !important; transform: translateX(-100%) !important; transition: transform .32s cubic-bezier(.4,0,.2,1) !important; padding: 96px 36px 48px !important; gap: 0 !important; overflow-y: auto !important; box-shadow: 4px 0 40px rgba(0,0,0,.45) !important; } .nav-links.open { transform: translateX(0) !important; } .nav-links li { list-style: none !important; } .nav-links a { display: block !important; font-size: 22px !important; font-weight: 600 !important; padding: 18px 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; color: rgba(255,255,255,.72) !important; white-space: normal !important; letter-spacing: -.01em !important; background: transparent !important; } .nav-links a:hover { color: #fff !important; } /* CTA pill at bottom of drawer */ .nav-links.open::after { content: 'Free Consultation' !important; display: block !important; margin-top: 32px !important; padding: 16px 0 !important; text-align: center !important; background: #fff !important; color: #1A1A1A !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .05em !important; border-radius: 50px !important; flex-shrink: 0 !important; } /* Hero — +20% font sizes */ .pg-hero { min-height: 52vh !important; padding: 80px 0 52px !important; } .hero-h1 { font-size: clamp(36px, 6vw, 62px) !important; } .hero-desc { font-size: 17px !important; max-width: 100% !important; } .hero-eye { font-size: 12px !important; } .hero-wm { display: none !important; } /* Section padding */ .content-sec { padding: 64px 0 !important; } .svc-sec { padding: 56px 0 !important; } .why-sec { padding: 64px 0 !important; } .related-sec { padding: 48px 0 !important; } .cta-sec { padding: 80px 0 !important; } .cta-bg { display: none !important; } /* Section text +20% */ .sec-h2 { font-size: clamp(26px, 4.8vw, 50px) !important; } .sec-label { font-size: 12px !important; } /* Footer */ footer { padding: 56px 0 24px !important; } } /* ── MOBILE (≤767px) — all fonts +20% ──────────────────────── */ @media (max-width: 767px) { /* Nav */ .nav { padding: 0 16px !important; } .nav-logo { height: 40px; } /* Hero */ .pg-hero { min-height: auto !important; padding: 72px 0 44px !important; } .hero-h1 { font-size: clamp(34px, 9vw, 53px) !important; } .hero-eye { font-size: 11px !important; letter-spacing: .18em !important; } .hero-desc { font-size: 17px !important; line-height: 1.75 !important; } .hero-scan { display: none !important; } .hero-stage { display: none !important; } /* Breadcrumb */ .bc { padding: 10px 16px !important; font-size: 12px !important; } /* Content — +20% from desktop 15px base */ .content-sec { padding: 48px 0 !important; } .content-sec p { font-size: 17px !important; line-height: 1.8 !important; } .content-sec h2 { font-size: clamp(24px, 7.2vw, 36px) !important; margin-top: 32px !important; } .content-sec h3 { font-size: clamp(19px, 6vw, 26px) !important; } .content-sec ul li { font-size: 16px !important; } /* Services grid */ .svc-sec { padding: 44px 0 !important; } .svc-sec-hd { margin-bottom: 20px !important; font-size: 12px !important; } .svc-card { padding: 16px !important; gap: 12px !important; } .svc-card-name { font-size: 16px !important; } .svc-card-sub { font-size: 13px !important; } /* Why section */ .why-sec { padding: 48px 0 !important; } .why-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 28px !important; } .why-item { padding: 22px 20px !important; } .why-num { font-size: 31px !important; margin-bottom: 8px !important; } .why-title { font-size: 16px !important; } .why-text { font-size: 14px !important; line-height: 1.7 !important; } /* Related tags */ .related-sec { padding: 40px 0 !important; } .related-list { gap: 8px !important; } .related-tag { font-size: 13px !important; padding: 10px 16px !important; } /* CTA */ .cta-sec { padding: 60px 0 !important; } .cta-eye { font-size: 11px !important; } .cta-h2 { font-size: clamp(29px, 8.4vw, 48px) !important; } .cta-p { font-size: 16px !important; margin-bottom: 28px !important; } .btns { flex-direction: column !important; align-items: center !important; gap: 10px !important; } .btn { width: 100% !important; max-width: 320px !important; justify-content: center !important; font-size: 14px !important; padding: 14px 20px !important; } /* Sec labels */ .sec-label { font-size: 11px !important; } .sec-h2 { font-size: clamp(26px, 7.8vw, 43px) !important; } /* Footer */ footer { padding: 44px 0 20px !important; } .ft-brand { font-size: 16px !important; } .ft-sub { max-width: 100% !important; font-size: 14px !important; } .ft-hd { font-size: 12px !important; } .ft-a { font-size: 14px !important; } .ft-ci { font-size: 14px !important; } .ft-copy { font-size: 13px !important; } .ft-bar a { font-size: 13px !important; } .ft-bar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .ft-bar a { margin-left: 0 !important; margin-right: 18px !important; } } /* ── SMALL MOBILE (≤480px) ──────────────────────────────────── */ @media (max-width: 480px) { .pg-hero { padding: 60px 0 36px !important; } .hero-h1 { font-size: clamp(31px, 9.6vw, 46px) !important; line-height: 1.1 !important; } .hero-eye { font-size: 11px !important; letter-spacing: .16em !important; } .hero-desc { font-size: 16px !important; line-height: 1.75 !important; } /* Prevent long words from breaking layout */ .content-sec h2, .content-sec h3, .sec-h2, .cta-h2, .hero-h1 { word-break: break-word; overflow-wrap: break-word; } /* Single-column cards on small phones */ .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; } /* Why items always single column */ .why-grid { grid-template-columns: 1fr !important; } /* Content padding tighter */ .content-sec { padding: 40px 0 !important; } .cta-sec { padding: 48px 0 !important; } .svc-sec { padding: 36px 0 !important; } .why-sec { padding: 40px 0 !important; } footer { padding: 40px 0 18px !important; } /* Buttons full-width */ .btn { font-size: 13px !important; padding: 14px 20px !important; } /* Content text stays large */ .content-sec p { font-size: 16px !important; } .svc-card-name { font-size: 15px !important; } .cta-h2 { font-size: clamp(26px, 8.4vw, 40px) !important; } .cta-p { font-size: 15px !important; } }