/* ============================================= LED62 — mobile.css Link AFTER style.css in every page ============================================= */ @media (max-width: 768px) { /* ========================================== GLOBAL ========================================== */ body { overflow-x: hidden; } .container { padding: 0 0.5rem; width: 100%; box-sizing: border-box; } img { max-width: 100%; height: auto !important; /* override ALL inline height styles */ width: auto; } .section { padding: 2rem 0; } .section-sm { padding: 1.25rem 0; } .section-lg { padding: 2.5rem 0; } h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); } h2 { font-size: 1.3rem; } p { font-size: 1.1rem; } /* ========================================== NAV — hamburger menu ========================================== */ .nav-inner { height: 64px; padding: 0 1rem; position: relative; } /* Show hamburger */ .nav-toggle { display: flex; order: 3; } .nav-toggle span { background: #ffffff; } /* Hide nav links by default, dropdown when .open */ .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #6E65AE; flex-direction: column; gap: 0; padding: 0.5rem 0 1rem; box-shadow: 0 6px 20px rgba(0,0,0,0.25); z-index: 199; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; width: 100%; padding: 0.9rem 1.5rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 1rem; } .nav-links li:last-child a { border-bottom: none; } /* Hide Shop pill on mobile — hamburger menu has Shop All link */ .nav-cart { display: none; } /* ========================================== LUMI BANNER ========================================== */ .lumi-banner { min-height: 140px; padding: 1.5rem 0; } .lumi-banner-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0 1.25rem; } .lumi-title { font-size: clamp(1.4rem, 7vw, 2rem); line-height: 1.2; } .lumi-btn { font-size: 1rem; padding: 0.5rem 1.4rem; } /* ========================================== HERO — stack image BELOW text, centered ========================================== */ .hero { padding-top: 1.5rem; } .hero-split { display: flex; flex-direction: column; gap: 1.5rem; text-align: center; } .hero-text { order: 1; } .hero-image { order: 2; width: 100%; } .hero-image img { width: 100% !important; height: auto !important; max-width: 420px; margin: 0 auto; border-radius: 8px; } .hero h1 { font-size: clamp(1.4rem, 6vw, 2rem); text-align: center; } .hero-subtitle { text-align: center; font-size: 1.15rem; line-height: 1.75; } /* "Personalized Acrylic LED Lights" subheading */ .hero-h1-sub { font-size: 0.75em; color: var(--text-mid); } .hero-ctas { justify-content: center; flex-wrap: wrap; gap: 0.75rem; } .hero-ctas .btn { min-width: 140px; text-align: center; } /* ========================================== POSSIBILITIES — 2x2 grid, centered ========================================== */ .possibilities-centered { text-align: center; align-items: center; } .possibilities-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: 100%; max-width: 360px; margin: 0 auto; } .possibilities-row img { width: 100% !important; height: auto !important; max-width: 100%; object-fit: contain; border-radius: 8px; } /* ========================================== HOW IT WORKS — steps centered, images below ========================================== */ .how-it-works-grid { display: flex !important; flex-direction: column; gap: 2rem; } /* Steps: number above text, centered */ .steps { width: 100%; } .step-item { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding-bottom: 1.75rem; margin-bottom: 1.75rem; } .step-number { margin: 0 auto; } .step-content { width: 100%; } .step-content h3 { margin-bottom: 0.35rem; } /* Before/after: sit below the steps */ .ba-stack { width: 100%; gap: 1.25rem; } .ba-pair { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; overflow: hidden; } /* FORCE override inline styles on these images */ .ba-pair img { width: calc(45vw - 1.5rem) !important; height: auto !important; max-width: 140px; object-fit: cover; border-radius: 8px; flex-shrink: 1; } .ba-arrow { font-size: 1rem; flex-shrink: 0; line-height: 1; } /* ========================================== BASE SECTION — image below text, centered ========================================== */ .base-grid { display: flex !important; flex-direction: column; gap: 1.5rem; text-align: center; } .base-text { order: 1; } .base-text h4, .base-text h2, .base-text .tagline, .base-text p { text-align: center; } .base-spec { text-align: left; } .base-images { order: 2; width: 100%; } .base-images img { width: 100% !important; height: auto !important; max-width: 380px; margin: 0 auto; display: block; } /* ========================================== FOOTER — stacked, no overflow ========================================== */ .site-footer { margin-top: 2rem; padding: 2rem 0 1rem; } .footer-inner { display: flex !important; flex-direction: column; gap: 1.75rem; margin-bottom: 1.5rem; } .footer-signup { align-items: flex-start; text-align: left; } .footer-form { flex-direction: column; width: 100%; gap: 0.5rem; } .footer-form input[type="email"] { width: 100%; min-width: unset; box-sizing: border-box; } .footer-form .btn { width: 100%; text-align: center; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* ========================================== MISC — other grids that need stacking ========================================== */ .feature-row { grid-template-columns: 1fr !important; direction: ltr !important; gap: 1.5rem; } .feature-row.reverse > * { direction: ltr; } .icon-features { grid-template-columns: 1fr !important; gap: 1rem; } .guidelines-grid { grid-template-columns: 1fr !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 2rem; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .page-hero { padding: 2rem 0 1.5rem; } .faq-item.open .faq-answer { max-height: 600px; } /* ========================================== CUSTOM PAGE — intro section ========================================== */ .custom-intro-grid { display: flex !important; flex-direction: column; gap: 1rem; text-align: center; } .custom-intro-text { order: 1; display: flex; flex-direction: column; align-items: center; } .custom-intro-text h2, .custom-intro-text p { text-align: center; } .custom-intro-image { order: 2; width: 100%; } .custom-intro-image img { width: 100% !important; height: auto !important; max-width: 400px; margin: 0 auto; display: block; border-radius: 4px; } /* Guidelines before/after images — contained, no overflow */ .guideline-images { flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .guideline-images img { width: auto !important; height: auto !important; max-width: calc(45% - 0.5rem); max-height: 130px; object-fit: contain; flex-shrink: 1; } .guide-arrow { font-size: 1.4rem; color: var(--text-light); align-self: center; flex-shrink: 0; } } /* ========================================== EXTRA SMALL (under 400px) ========================================== */ @media (max-width: 400px) { .ba-pair img { width: calc(42vw - 1rem) !important; max-width: 110px; } .possibilities-row { max-width: 280px; } .product-grid { grid-template-columns: 1fr; } .nav-cart { font-size: 0.65rem; padding: 0.35rem 0.6rem; } }