.homeView { width: 100%; } .locationBanner { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: rgba(45, 125, 125, 0.1); border: 1px solid rgba(45, 125, 125, 0.3); border-radius: 12px; margin-bottom: 2rem; font-size: 0.9375rem; color: var(--accent-teal, #2d7d7d); font-weight: 500; } .locationIcon { font-size: 1.25rem; color: var(--accent-teal, #2d7d7d); } .results { margin-top: 2rem; } .sectionHeader { margin-bottom: 2rem; } .sectionHeader h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-primary, #1a1612); font-family: var(--font-playfair), 'Playfair Display', serif; } /* Decorative coral bar under section headings */ .sectionHeader h2::after { content: ''; display: block; width: 60px; height: 3px; background: var(--accent-coral, #e07256); border-radius: 2px; margin-top: 0.75rem; } .sectionDescription { font-size: 1rem; color: var(--text-secondary, #5c564d); margin: 0; line-height: 1.6; } .resultsHeader { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color, #e5dfd5); } .resultsHeader h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary, #1a1612); margin: 0; display: flex; align-items: center; gap: 0.5rem; } .resultsHeader h2::before { content: ''; display: inline-block; width: 4px; height: 1.25em; background: var(--accent-coral, #e07256); border-radius: 2px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } /* Staggered grid entry animation */ .grid > * { animation: gridItemFadeIn 0.4s ease-out both; } .grid > *:nth-child(1) { animation-delay: 0ms; } .grid > *:nth-child(2) { animation-delay: 50ms; } .grid > *:nth-child(3) { animation-delay: 100ms; } .grid > *:nth-child(4) { animation-delay: 150ms; } .grid > *:nth-child(5) { animation-delay: 200ms; } .grid > *:nth-child(6) { animation-delay: 250ms; } .grid > *:nth-child(7) { animation-delay: 300ms; } .grid > *:nth-child(8) { animation-delay: 350ms; } .grid > *:nth-child(9) { animation-delay: 400ms; } .grid > *:nth-child(n+10) { animation-delay: 450ms; } @keyframes gridItemFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .emptyState { text-align: center; padding: 4rem 2rem; background: var(--bg-card, white); border: 1px solid var(--border-color, #e5dfd5); border-radius: 12px; } .emptyStateTitle { font-size: 1.5rem; font-weight: 600; color: var(--text-primary, #1a1612); margin-bottom: 0.5rem; font-family: var(--font-playfair), 'Playfair Display', serif; } .emptyStateDescription { font-size: 1rem; color: var(--text-secondary, #5c564d); max-width: 400px; margin: 0 auto; } @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } .locationBanner { padding: 0.875rem 1rem; font-size: 0.875rem; border-radius: 8px; } .emptyState { padding: 3rem 1.5rem; } }