/* * Skyline Theme Mobile Fix * * Mobile-specific overrides to ensure the skyline background and color palette * display correctly on small screens and handle dark mode preferences. * * USAGE: * Add this link tag in your HTML AFTER css/skyline-fix.css: * * * This file ensures: * - Skyline image displays properly on mobile devices * - Content remains readable with proper contrast * - Dark mode users get appropriate adjustments */ /* Mobile screen adjustments */ @media (max-width: 760px) { /* Ensure skyline background displays on mobile */ .hero, .hero--skyline, .hero.hero--skyline { background-image: var(--skyline-image, url('../images/skyline.jpg')) !important; background-size: cover !important; background-position: center top !important; min-height: 300px !important; color: #ffffff !important; } /* Mobile overlay adjustment for better visibility */ .hero::before, .hero--skyline::before, .hero.hero--skyline::before { background: linear-gradient( 180deg, rgba(15, 137, 255, 0.15) 0%, rgba(241, 230, 214, 0.35) 60%, rgba(255, 255, 255, 0.55) 100% ) !important; } /* Container spacing for mobile */ .hero .container, .hero--skyline .container, .hero.hero--skyline .container { padding: 28px 12px 18px !important; position: relative !important; z-index: 2 !important; } /* Memo viewport styling for mobile readability */ .memo-viewport { background: rgba(255, 255, 255, 0.94) !important; color: #102a3a !important; padding: 12px 14px !important; border-radius: 10px !important; box-shadow: 0 8px 20px rgba(16, 42, 58, 0.08) !important; } .memo-viewport .memo, .memos-carousel .memo { color: #102a3a !important; background: transparent !important; font-weight: 600 !important; } /* Mobile memo carousel buttons */ .memo-prev, .memo-next, .memos-carousel .memo-prev, .memos-carousel .memo-next { background: rgba(255, 255, 255, 0.96) !important; color: #102a3a !important; border: 1px solid rgba(16, 42, 58, 0.06) !important; box-shadow: 0 6px 14px rgba(16, 42, 58, 0.06) !important; } /* Header adjustments for mobile */ .site-header { background: rgba(255, 255, 255, 0.98) !important; color: #102a3a !important; border-bottom: 1px solid rgba(230, 234, 240, 0.9) !important; } /* Mobile header/logo override - ensure logo stays truly transparent on small screens */ .site-header .brand .brand-logo { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; width: 70px !important; height: auto !important; display: inline-block !important; } /* Prevent the brand container from producing a pill */ .brand, .site-header .brand, .uc-brand, .uc-card .brand { background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* Ensure the header itself doesn't create backgrounds */ .site-header { background: rgba(255, 255, 255, 0.98) !important; z-index: 50 !important; } /* Ensure no z-index issues place cards above header */ .uc-card, .uc-overlay { z-index: 9999 !important; } /* Mobile search inputs/buttons and tab/nav alignment fixes */ .search input, .search button { font-size: 16px !important; line-height: 1.4 !important; letter-spacing: normal !important; color: #102a3a !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .search input { background: #fff !important; border: 1px solid rgba(16,42,58,0.08) !important; border-radius: 8px !important; padding: 12px 14px !important; } .search input::placeholder { font-size: 16px !important; line-height: 1.4 !important; vertical-align: middle !important; } .search button { min-height: 44px !important; padding: 12px 16px !important; border-radius: 8px !important; } /* Tabs and nav links should have centered text and correct padding */ .tab, .nav-link, .menu-panel a, button[role="tab"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 12px !important; line-height: 1.2 !important; vertical-align: middle !important; box-sizing: border-box !important; font-size: 16px !important; text-align: center !important; } /* Tiles should center text properly */ .tile .tile-title { font-size: 16px !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Defensive: ensure memo buttons keep text inside their box */ .memo-prev, .memo-next { padding: 8px 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Fix checkbox label containers in search form */ .checks label, .question-option { box-sizing: border-box !important; padding-right: 8px !important; word-break: break-word !important; overflow-wrap: break-word !important; display: flex !important; align-items: center !important; } .question-option .option-text { word-break: break-word !important; overflow-wrap: break-word !important; } /* Mobile link colors */ a, .nav-link { color: #7fb8ff !important; } a:hover, .nav-link:hover { color: #4a93e6 !important; } /* Tile grid adjustments for mobile */ .tiles { gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Under-construction modal on mobile */ .uc-card { width: min(96vw, 420px) !important; padding: 18px !important; } .uc-brand img { height: 34px !important; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { /* Adjust overlay for dark mode to keep skyline visible */ .hero::before, .hero--skyline::before, .hero.hero--skyline::before { background: linear-gradient( 180deg, rgba(17, 24, 39, 0.18) 0%, rgba(17, 24, 39, 0.06) 100% ) !important; } /* Keep memo cards light for readability in dark mode */ .memo-viewport, .memo-prev, .memo-next, .memos-carousel .memo-viewport, .memos-carousel .memo-prev, .memos-carousel .memo-next { background: rgba(255, 255, 255, 0.95) !important; color: #102a3a !important; } } /* Extra small devices (portrait phones) */ @media (max-width: 480px) { .hero, .hero--skyline, .hero.hero--skyline { min-height: 260px !important; } .hero .container, .hero--skyline .container, .hero.hero--skyline .container { padding: 20px 10px 16px !important; } }