/* ============================================================ SILVER LINING XP — COMPLETE MOBILE FIX Add this as the LAST line in header.php : ============================================================ */ /* ══════════════════════════════════════════ BASE — applies to all sizes ══════════════════════════════════════════ */ /* Prevent horizontal scroll everywhere */ html, body { overflow-x: clip; max-width: 100%; } /* All images safe */ img { max-width: 100%; height: auto; display: block; } /* Logo image */ .site-logo-img { height: 42px; width: auto; object-fit: contain; display: block; transition: all 0.3s ease; } .site-header.scrolled .site-logo-img { height: 34px; } .footer-logo-img { height: 38px; width: auto; object-fit: contain; display: block; margin-bottom: 4px; } /* Nav toggle open → X */ .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); } .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile overlay nav */ .nav-mobile { position: fixed; inset: 0; background: rgba(8, 14, 36, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; } .nav-mobile.open { opacity: 1; visibility: visible; pointer-events: auto; } .nav-mobile a { font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; color: rgba(255,255,255,0.75); padding: 10px 32px; transition: color 0.3s; text-align: center; } .nav-mobile a:hover { color: #fff; } .nav-mobile-close { position: absolute; top: 22px; right: 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 1.1rem; } /* Touch devices — disable custom cursor */ @media (hover: none) and (pointer: coarse) { body { cursor: auto !important; } .cursor-glow { display: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ══════════════════════════════════════════ ≤ 1100px LARGE TABLET ══════════════════════════════════════════ */ @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; } .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; } .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1) !important; } .stat-item:nth-last-child(1), .stat-item:nth-last-child(2) { border-bottom: none !important; } } /* ══════════════════════════════════════════ ≤ 960px TABLET — show hamburger ══════════════════════════════════════════ */ @media (max-width: 960px) { .nav-links, .nav-cta { display: none !important; } .nav-toggle { display: flex !important; } .nav-container { gap: 12px !important; padding: 0 24px !important; } } /* ══════════════════════════════════════════ ≤ 1024px STACK ALL TWO-COLUMN LAYOUTS ══════════════════════════════════════════ */ @media (max-width: 1024px) { .container { padding: 0 28px !important; } section { padding: 72px 0 !important; } /* Kill ALL inline two-column grids — about, why, art n soul */ [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"], .responsive-two-col { grid-template-columns: 1fr !important; gap: 40px !important; } /* Service / gallery grids */ .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Stats */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; } .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 36px 20px !important; } .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1) !important; } .stat-item:nth-last-child(1), .stat-item:nth-last-child(2) { border-bottom: none !important; } /* Hero: stack, centre */ .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; text-align: center !important; } .hero-right { display: none !important; } /* hide card stack on tablet */ .hero-stats { justify-content: center !important; } .hero-stat-div { display: none !important; } .hero-stat-item { text-align: center !important; } .hero-left .badge { margin-left: auto !important; margin-right: auto !important; } .hero-sub-animate, [class*="hero"] p { margin-left: auto !important; margin-right: auto !important; } .hero-btns-animate { justify-content: center !important; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; } .site-logo-img { height: 36px !important; } } /* ══════════════════════════════════════════ ≤ 768px MOBILE ══════════════════════════════════════════ */ @media (max-width: 768px) { /* Spacing */ .container { padding: 0 18px !important; } .nav-container { padding: 0 18px !important; } section { padding: 60px 0 !important; } /* Logo */ .site-logo-img { height: 30px !important; } /* Typography */ .section-title { font-size: clamp(1.85rem, 7vw, 2.6rem) !important; line-height: 1.2 !important; } .section-subtitle { font-size: 0.95rem !important; } .section-header { margin-bottom: 40px !important; } .page-hero-title { font-size: clamp(2rem, 8vw, 3.2rem) !important; } .page-hero { padding: 115px 0 56px !important; min-height: 44vh !important; } /* All grids → single column */ .grid-2, .grid-3 { grid-template-columns: 1fr !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .gallery-grid { grid-template-columns: 1fr !important; } /* Stats */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .stat-item { padding: 28px 14px !important; } .stat-number { font-size: 2.8rem !important; } /* Cards */ .glass-card { padding: 24px 20px !important; } .testimonial-card { padding: 22px 18px !important; } .testimonial-text { font-size: 0.9rem !important; } .service-icon { width: 50px !important; height: 50px !important; font-size: 1.25rem !important; margin-bottom: 18px !important; margin-left: auto !important; margin-right: auto !important; } .service-title { font-size: 1.25rem !important; text-align: center !important; } .service-desc { text-align: center !important; } /* Buttons */ .btn { padding: 12px 22px !important; font-size: 0.875rem !important; } .cta-btns { flex-direction: column !important; align-items: center !important; gap: 12px !important; } .cta-section { padding: 68px 0 !important; } .cta-section .section-title { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; } /* Hero stats */ .hero-stats { gap: 14px !important; flex-wrap: wrap !important; justify-content: center !important; } .hero-stat-num { font-size: 1.9rem !important; } /* Hero section padding */ .hero-section .container { padding-top: 110px !important; padding-bottom: 60px !important; } /* Marquee */ .marquee-track { animation-duration: 60s !important; } .marquee-item { font-size: 0.9rem !important; letter-spacing: 2px !important; } /* Filter tabs */ .filter-tabs { gap: 8px !important; margin-bottom: 32px !important; } .filter-btn { padding: 8px 16px !important; font-size: 0.8rem !important; } /* Products */ .product-body { padding: 20px !important; } .product-actions { flex-direction: column !important; padding: 0 20px 20px !important; gap: 8px !important; } /* Contact page */ .contact-info-item { padding: 20px 18px !important; gap: 14px !important; } /* Footer */ .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .footer-top { padding: 48px 0 36px !important; } .footer-tagline { font-size: 0.88rem !important; } .footer-glow { width: 100% !important; left: 0 !important; transform: none !important; } .footer-socials { gap: 8px !important; } .footer-bottom { font-size: 0.74rem !important; padding: 16px 0 !important; } /* Scroll to top */ .scroll-top { bottom: 18px !important; right: 18px !important; width: 40px !important; height: 40px !important; } /* About pillars — 2 columns on mobile is fine */ [style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"], [style*="grid-template-columns:1fr 1fr"][style*="gap:20px"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } } /* ══════════════════════════════════════════ ≤ 560px SMALL MOBILE ══════════════════════════════════════════ */ @media (max-width: 560px) { .container { padding: 0 14px !important; } .nav-container { padding: 0 14px !important; } /* Typography */ .section-title { font-size: 1.75rem !important; } .section-label { font-size: 0.67rem !important; letter-spacing: 3px !important; } /* Stats */ .stats-grid { grid-template-columns: 1fr 1fr !important; } .stat-item { padding: 24px 10px !important; } .stat-number { font-size: 2.4rem !important; } /* Cards */ .glass-card { padding: 18px 14px !important; border-radius: 14px !important; } .service-title { font-size: 1.15rem !important; } .service-desc { font-size: 0.84rem !important; } /* Testimonial */ .testimonial-card { padding: 18px 14px !important; } .testimonial-quote { font-size: 2.2rem !important; } .testimonial-text { font-size: 0.86rem !important; } .testimonial-avatar { width: 40px !important; height: 40px !important; font-size: 1rem !important; } /* Hero */ .hero-stats { gap: 16px !important; } .hero-stat-num { font-size: 1.7rem !important; } .hero-section .container { padding-top: 100px !important; } h1[style] { font-size: clamp(2.6rem, 10vw, 4rem) !important; } /* Buttons — full width in CTA */ .cta-btns .btn { width: 100% !important; justify-content: center !important; max-width: 320px !important; } /* Footer */ .footer-grid { grid-template-columns: 1fr !important; } .footer-top { padding: 40px 0 30px !important; } /* Pillar grid stays 2-col but compact */ [style*="gap: 20px"][style*="1fr 1fr"], [style*="gap:20px"][style*="1fr 1fr"] { gap: 10px !important; } /* Page hero */ .page-hero { padding: 100px 0 48px !important; } .page-hero-title { font-size: clamp(1.8rem, 9vw, 2.6rem) !important; } .page-hero-sub { font-size: 0.9rem !important; } /* Form */ .form-control { padding: 13px 15px !important; font-size: 0.88rem !important; } /* Modal */ .modal-overlay { padding: 16px !important; } /* Product */ .product-title { font-size: 1.1rem !important; } .product-desc { font-size: 0.82rem !important; } .product-actions .btn { width: 100% !important; justify-content: center !important; } /* Art N Soul card */ .glass-card[style*="padding:50px"], .glass-card[style*="padding: 50px"] { padding: 32px 20px !important; } /* Scroll hint — hide on very small */ .hero-scroll-hint { display: none !important; } } /* ══════════════════════════════════════════ ≤ 380px TINY PHONES ══════════════════════════════════════════ */ @media (max-width: 380px) { .container { padding: 0 12px !important; } .nav-container { padding: 0 12px !important; } .section-title { font-size: 1.6rem !important; } .stat-number { font-size: 2rem !important; } .glass-card { padding: 16px 12px !important; } .btn { padding: 11px 18px !important; font-size: 0.82rem !important; } .site-logo-img { height: 26px !important; } .footer-logo-img { height: 30px !important; } .scroll-top { width: 36px !important; height: 36px !important; bottom: 14px !important; right: 14px !important; } .nav-mobile a { font-size: 1.4rem !important; padding: 8px 24px !important; } } /* ══════════════════════════════════════════ PATCH v2 — PAGE-SPECIFIC MOBILE FIXES All inline-style grids not caught by v1 ══════════════════════════════════════════ */ /* ── GLOBAL: any bare inline grid not using a class ── */ @media (max-width: 1024px) { /* About, Contact, Services, Art N Soul, Service-Detail all use inline style="display:grid;grid-template-columns:1fr 1fr …" We catch the parent containers by targeting display:grid children */ /* About page — intro two-col & "Our Journey" two-col */ .about-intro-grid, section > .container > [style*="grid-template-columns:1fr 1fr"], section > .container > [style*="grid-template-columns: 1fr 1fr"], section > .container > [style*="grid-template-columns:1.2fr 1fr"], section > .container > [style*="grid-template-columns: 1.2fr 1fr"], section > .container > [style*="grid-template-columns:1fr 1.2fr"], section > .container > [style*="grid-template-columns: 1fr 1.2fr"] { grid-template-columns: 1fr !important; gap: 40px !important; } /* Services page alternating two-col layout */ .container > [style*="grid-template-columns"] .reveal-left, .container > [style*="grid-template-columns"] .reveal-right { width: 100% !important; } /* About page — differentiators 5-col strip */ [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5,1fr)"], [style*="grid-template-columns:repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 2px !important; } /* Service-detail — 4-col "What's Included" grid */ [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4,1fr)"], [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Large padding on service/about glass cards — reduce on tablet */ .glass-card[style*="padding:60px"], .glass-card[style*="padding: 60px"], .glass-card[style*="padding:50px"], .glass-card[style*="padding: 50px"] { padding: 36px !important; } } @media (max-width: 768px) { /* ── Contact page two-col → single ── */ section > .container > [style*="grid-template-columns:1.2fr 1fr"], section > .container > [style*="grid-template-columns: 1.2fr 1fr"], section > .container > [style*="grid-template-columns:1fr 1.2fr"], section > .container > [style*="grid-template-columns: 1fr 1.2fr"], section > .container > [style*="grid-template-columns:1fr 1fr"], section > .container > [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; } /* Contact — form grid-2 stays 1 col */ .container .grid-2[style*="gap:20px"], .container .grid-2[style*="gap: 20px"] { grid-template-columns: 1fr !important; } /* About — differentiators 5-col → 1-col */ [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5,1fr)"], [style*="grid-template-columns:repeat(5, 1fr)"] { grid-template-columns: 1fr !important; } /* Service-detail — 4-col → 1-col on mobile */ [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4,1fr)"], [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: 1fr !important; } /* Reduce huge card padding on mobile */ .glass-card[style*="padding:60px"], .glass-card[style*="padding: 60px"], .glass-card[style*="padding:50px"], .glass-card[style*="padding: 50px"], .glass-card[style*="padding:32px"], .glass-card[style*="padding: 32px"] { padding: 24px 18px !important; } /* Services page — service rows with alternating icons */ .container .reveal[style*="margin-bottom:100px"], .container .reveal[style*="margin-bottom: 100px"] { margin-bottom: 48px !important; } /* Art N Soul hero title — very large clamp, help on small screens */ [style*="font-size:clamp(4rem"] { font-size: clamp(2.4rem, 10vw, 5rem) !important; } /* Art N Soul — stats row inside two-col */ .glass-card[style*="display:flex"][style*="align-items:center"][style*="gap:24px"] { gap: 14px !important; padding: 20px 16px !important; } /* Why-choose grid — flex cards with big gap */ .glass-card[style*="display:flex;align-items:flex-start;gap:24px;padding:32px"], .glass-card[style*="display:flex; align-items:flex-start; gap:24px; padding:32px"] { gap: 16px !important; padding: 20px 16px !important; } /* Index.php — hero title white-space:nowrap causes overflow on small screens */ .hero-title-line [style*="white-space:nowrap"], .hero-title-line [style*="white-space: nowrap"] { white-space: normal !important; } /* Service detail — icon card huge padding */ .glass-card[style*="padding:60px;text-align:center"], .glass-card[style*="padding: 60px; text-align:center"] { padding: 32px 20px !important; } .glass-card[style*="padding:60px;text-align:center"] i, .glass-card[style*="padding: 60px; text-align:center"] i { font-size: 3.5rem !important; } } @media (max-width: 560px) { /* Contact info section stack */ .contact-info-grid { grid-template-columns: 1fr !important; } /* Art N Soul hero huge font */ [style*="font-size:clamp(4rem"] { font-size: clamp(2rem, 9vw, 3.5rem) !important; } /* About differentiators — completely collapse */ [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5,1fr)"] { grid-template-columns: 1fr !important; border-radius: var(--radius-lg) !important; } /* Remove right borders from differentiator cells */ [style*="border-right:var(--border-glass)"] { border-right: none !important; border-bottom: var(--border-glass) !important; } /* Hero title — prevent overflow */ .hero-title, .hero-title * { white-space: normal !important; overflow: visible !important; } .hero-title { font-size: clamp(1.7rem, 8vw, 3rem) !important; } /* Hero subtitle font-size line */ .hero-title-line [style*="font-size:0.38em"] { font-size: clamp(0.85rem, 3vw, 1.1rem) !important; } /* Services — icon visual cards */ .glass-card[style*="padding:60px"], .glass-card[style*="padding: 60px"] { padding: 28px 16px !important; } /* grid-3 on index (core services) → 1 col */ .grid-3[style*="grid-template-columns:repeat(3,1fr)"], .grid-3[style*="grid-template-columns: repeat(3,1fr)"] { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════ VIDEO PAGE — responsive iframe/embed ══════════════════════════════════════════ */ .video-embed-wrap, [class*="video"] iframe, iframe[src*="youtube"], iframe[src*="vimeo"] { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; border: none; } /* ══════════════════════════════════════════ TESTIMONIALS / CLIENTS ══════════════════════════════════════════ */ @media (max-width: 768px) { /* Clients logo grid */ .clients-grid, [class*="client"][style*="grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } } @media (max-width: 480px) { .clients-grid, [class*="client"][style*="grid"] { grid-template-columns: repeat(2, 1fr) !important; } } /* ══════════════════════════════════════════ POPUP ENQUIRY — full screen on mobile ══════════════════════════════════════════ */ @media (max-width: 600px) { .modal-inner, .popup-inner, [class*="modal"][style*="max-width"], [class*="popup"][style*="max-width"] { max-width: 100% !important; width: calc(100vw - 28px) !important; margin: 14px !important; padding: 24px 16px !important; border-radius: 16px !important; } } /* ══════════════════════════════════════════ NAVIGATION DROPDOWN — mobile accessibility ══════════════════════════════════════════ */ @media (max-width: 960px) { /* Ensure dropdowns don't leak on tablet when hamburger is shown */ .has-dropdown .dropdown { display: none !important; } /* Mobile nav gets Videos & Products too (they're missing from some pages) */ .nav-mobile a { width: 100%; text-align: center; display: block; } } /* ══════════════════════════════════════════ DIFFERENTIATORS 5-COL (about.php) ══════════════════════════════════════════ */ @media (max-width: 1024px) { .differentiators-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .differentiators-grid { grid-template-columns: repeat(2, 1fr) !important; } .differentiators-grid > div[style*="border-right"] { border-right: none !important; border-bottom: var(--border-glass) !important; } .differentiators-grid > div { padding: 28px 16px !important; } } @media (max-width: 480px) { .differentiators-grid { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════ SERVICE-DETAIL — 4-col "What's Included" ══════════════════════════════════════════ */ @media (max-width: 1024px) { [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; } }