UPCI Global Missionaries *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #0B1120; font-family: Georgia, 'Times New Roman', serif; color: #E8DCC8; min-height: 100vh; } /* HEADER */ .header { background: linear-gradient(135deg, #0B1120 0%, #1A2540 50%, #0F1E35 100%); border-bottom: 1px solid #2A3A5C; padding: 28px 32px 20px; } .header-inner { max-width: 960px; margin: 0 auto; } .header-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .cross-icon { width: 42px; height: 42px; background: radial-gradient(circle, #C8973A, #8A5E1A); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 0 18px rgba(200,151,58,0.4); flex-shrink: 0; } .header h1 { font-size: 22px; font-weight: bold; letter-spacing: 0.04em; color: #F0E6D0; } .header-sub { font-size: 12px; color: #7A8FA8; letter-spacing: 0.1em; text-transform: uppercase; } .region-badges { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .region-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8A9AB8; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* CONTROLS */ .controls { background: #111827; border-bottom: 1px solid #1F2D45; padding: 14px 32px; position: sticky; top: 0; z-index: 10; } .controls-inner { max-width: 960px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .view-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid #2A3A5C; background: #1A2540; } .view-btn { padding: 7px 16px; font-size: 13px; border: none; cursor: pointer; background: transparent; color: #6A7A94; font-family: Georgia, serif; transition: all 0.2s; } .view-btn.active { background: #2A4A7F; color: #E8DCC8; } .search-input { padding: 7px 14px; border-radius: 8px; border: 1px solid #2A3A5C; background: #1A2540; color: #E8DCC8; font-size: 13px; font-family: Georgia, serif; outline: none; flex: 1; min-width: 160px; } .search-input::placeholder { color: #4A5A72; } .region-select { padding: 7px 14px; border-radius: 8px; border: 1px solid #2A3A5C; background: #1A2540; color: #E8DCC8; font-size: 13px; font-family: Georgia, serif; cursor: pointer; outline: none; } .result-count { font-size: 12px; color: #5A6A84; margin-left: auto; } /* MAIN */ .main { max-width: 960px; margin: 0 auto; padding: 24px 32px; } /* MAP */ .map-wrap { background: #0F1E35; border: 1px solid #2A3A5C; border-radius: 12px; overflow: hidden; position: relative; } svg.world { width: 100%; display: block; background: #0A1828; } .map-tooltip { display: none; position: absolute; top: 12px; left: 12px; background: #0F1E35; border-radius: 8px; padding: 10px 14px; pointer-events: none; z-index: 5; } .tooltip-name { font-weight: bold; font-size: 13px; color: #F0E6D0; } .tooltip-region { font-size: 11px; margin-top: 2px; } .tooltip-country { font-size: 11px; color: #8A9AB8; margin-top: 1px; } .map-dot { cursor: pointer; transition: r 0.15s; } /* MAP LEGEND */ .map-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .legend-chip { display: flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; background: #111827; border: 1px solid #2A3A5C; cursor: pointer; transition: all 0.2s; font-size: 11px; color: #A0B0C8; } .legend-chip:hover { border-color: #4A6A9A; } .legend-chip.active { background: rgba(74,122,170,0.15); } .legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .legend-count { font-weight: bold; } /* LIST */ .region-section { margin-bottom: 28px; } .region-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.07); } .region-heading h2 { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-family: Georgia, serif; } .region-pill { border-radius: 12px; padding: 1px 9px; font-size: 11px; font-weight: bold; } .missionary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; } .missionary-card { background: #111827; border: 1px solid #1F2D45; border-radius: 8px; padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; transition: border-color 0.2s, background 0.2s; } .card-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .card-name { font-size: 13px; color: #E0D4B8; font-weight: bold; line-height: 1.3; } .card-country { font-size: 11px; color: #6A8AAA; margin-top: 2px; } /* FOOTER */ .footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #1F2D45; font-size: 11px; color: #4A5A72; text-align: center; } .footer a { color: #4A7AAA; } @media (max-width: 600px) { .header, .controls, .main { padding-left: 16px; padding-right: 16px; } .missionary-grid { grid-template-columns: 1fr 1fr; } .result-count { display: none; } }