/* * Geek Weather — place-info section * * Styles the descriptive content section that render.php injects after *
on every location page. Lives outside the React tree * (sibling of #root), so it picks up :root CSS variables for theming * without any JS coordination — the data-theme attribute on * cascades to it the same way it cascades to React-rendered content. * * On first paint (before React hydrates) the light-theme defaults are * shown. When SettingsContext applies dark mode by setting * data-theme="dark" on , this section transitions seamlessly. */ .place-info { max-width: 900px; margin: 0 auto 32px; padding: 20px 20px 24px; border-top: 1px solid var(--border); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-secondary); line-height: 1.65; } .place-info-heading { margin: 0 0 16px; color: var(--text-primary); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .place-info-paragraph { margin: 0 0 16px; font-size: 15px; color: var(--text-secondary); } .place-info-paragraph:last-of-type { margin-bottom: 12px; } .place-info-links { margin: 24px 0 0; font-size: 14px; color: var(--text-tertiary); } .place-info-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; } .place-info-link:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); } @media (max-width: 768px) { .place-info { margin: 0 auto 24px; padding: 16px 16px 16px; } .place-info-heading { font-size: 19px; } .place-info-paragraph { font-size: 14px; } .place-info-links { font-size: 13px; } }