/** * Mobile Daily Verse Styles - Bible Teaching Program * Elite Mobile Design - Centralized CSS for daily verse pages * Updated: January 2026 * * BRAND COLORS: * Ancient Ink: #1C1D37 / 28, 29, 55 (Headers, primary dark) * Heritage Gold: #CBA378 / 203, 163, 120 (Accents, highlights) * Living Sage: #7F9A83 / 127, 154, 131 (Secondary accent) * Parchment: #F9F7F2 (Backgrounds) * * Usage: Link this file in page : * */ /* ===== CSS CUSTOM PROPERTIES ===== */ :root { --verse-color: #1C1D37; --verse-rgb: 28, 29, 55; --accent-color: #CBA378; --accent-rgb: 203, 163, 120; } /* ===== SMOOTH SCROLLING ===== */ html { scroll-behavior: smooth; } /* ===== MOBILE STYLES (max-width: 1023px) ===== */ @media (max-width: 1023px) { /* ===== HIDE SITE NAVIGATION & FOOTER ===== */ #nav-placeholder, #nav-placeholder *, #mobileFooterNav, #mobileBreadcrumbBar, #mobileNavBottomFill, .pull-handle-area, .mobile-nav-bar, .top-nav, #footer-placeholder, #footer-placeholder *, footer, .footer-content, .mobile-fab, .fab-button, [onclick*="toggleMobileNav"] { display: none !important; visibility: hidden !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* ===== HIDE ALL DESKTOP ELEMENTS ON MOBILE ===== */ /* Hide desktop hero section */ section.relative.overflow-hidden, .bg-ancient-ink, section.bg-gradient-to-r { display: none !important; } /* Hide entire desktop main content area */ main.max-w-7xl { display: none !important; } /* Hide old mobile breadcrumb bar (duplicate) */ .mobile-breadcrumb-bar { display: none !important; } /* Hide desktop breadcrumbs */ .bg-white.border-b.border-gray-100 { display: none !important; } /* ===== LAYOUT ===== */ body { padding-bottom: 100px !important; background: #F9F7F2 !important; min-height: 100vh; } /* Extra padding on last card to clear bottom nav */ .mobile-devotional-card { margin-bottom: 80px !important; } /* ===== MOBILE DAILY VERSE WRAPPER ===== */ .mobile-verse-wrapper { display: block !important; } /* ===== ELITE MOBILE HEADER (Ancient Ink) ===== */ .mobile-verse-header { background: linear-gradient(135deg, #1C1D37 0%, #12132a 100%); padding: 1rem 1.25rem; position: sticky; top: 0; z-index: 100; } .mobile-verse-header-content { display: flex; align-items: center; justify-content: space-between; } .mobile-verse-month { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.25rem; } .mobile-verse-date { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: white; } .mobile-verse-icon { width: 48px; height: 48px; background: rgba(203, 163, 120, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } /* ===== MOBILE BREADCRUMBS ===== */ .mobile-verse-breadcrumb { padding: 0.625rem 1.25rem; background: #F9F7F2; display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .mobile-verse-breadcrumb::-webkit-scrollbar { display: none; } .mobile-verse-breadcrumb a { color: #6b7280; text-decoration: none; transition: color 0.15s; } .mobile-verse-breadcrumb a:active { color: #CBA378; } .mobile-verse-breadcrumb .separator { color: #9ca3af; font-size: 0.625rem; } .mobile-verse-breadcrumb .current { color: #CBA378; font-weight: 600; } /* ===== SCRIPTURE CARD ===== */ .mobile-scripture-card { margin: 1rem; background: white; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px -4px rgba(28, 29, 55, 0.08); overflow: hidden; } .mobile-scripture-header { background: linear-gradient(135deg, rgba(203, 163, 120, 0.15) 0%, rgba(203, 163, 120, 0.05) 100%); padding: 1rem 1.25rem; border-bottom: 1px solid rgba(203, 163, 120, 0.15); } .mobile-scripture-ref { display: flex; align-items: center; gap: 0.5rem; } .mobile-scripture-badge { width: 28px; height: 28px; background: #CBA378; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; } .mobile-scripture-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 600; color: #1C1D37; } .mobile-scripture-body { padding: 1.25rem; } .mobile-scripture-quote { border-left: 3px solid #CBA378; padding-left: 1rem; margin: 0; } .mobile-scripture-text { font-size: 1rem; line-height: 1.7; color: #374151; font-style: italic; } .mobile-scripture-source { margin-top: 0.75rem; font-size: 0.8125rem; color: #CBA378; font-weight: 600; font-style: normal; } /* ===== DEVOTIONAL CONTENT ===== */ .mobile-devotional-card { margin: 0 1rem 1rem; background: white; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px -4px rgba(28, 29, 55, 0.08); padding: 1.25rem; } .mobile-devotional-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: #1C1D37; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .mobile-devotional-content { font-size: 0.9375rem; line-height: 1.8; color: #4b5563; } .mobile-devotional-content p { margin-bottom: 0.75rem; } .mobile-devotional-content p:last-child { margin-bottom: 0; } /* ===== BOTTOM NAVIGATION ===== */ .mobile-verse-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: white; border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: space-around; padding: 0 0.5rem; z-index: 1000; box-shadow: 0 -4px 20px -4px rgba(28, 29, 55, 0.1); } .mobile-verse-bottom-nav a, .mobile-verse-bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem; color: #6b7280; text-decoration: none; font-size: 0.6875rem; font-weight: 500; background: transparent; border: none; cursor: pointer; transition: color 0.15s; } .mobile-verse-bottom-nav a:active, .mobile-verse-bottom-nav button:active { color: #CBA378; } .mobile-verse-bottom-nav svg { width: 20px; height: 20px; } .mobile-verse-bottom-nav .nav-active { color: #CBA378; } } /* ===== DESKTOP HIDE MOBILE ELEMENTS ===== */ @media (min-width: 1024px) { .mobile-verse-wrapper { display: none !important; } }