:root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Surfaces */ --bg: #FFFFFF; --bg-page: #F2F2F7; --bg-2: #F8F8FA; --bg-input: #F5F5F8; /* Brand */ --brand: #7D1128; --brand-mid: #9B2040; --brand-soft: #FDF2F4; --brand-dark: #5E0D1E; /* Text */ --text: #111827; --text-2: #374151; --text-3: #6B7280; --text-4: #9CA3AF; /* Borders */ --border: #E5E7EB; --border-2: #D1D5DB; /* Semantic */ --green: #15803D; --green-bg: #F0FDF4; --gold: #C4920A; --gold-bg: #FFFBEB; --red: #DC2626; --red-bg: #FEF2F2; --red-border: #FECACA; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); --shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06); --shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.07); /* Radii */ --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-3xl: 36px; --r-full: 999px; /* Component tokens */ --nav-bg: rgba(255,255,255,0.97); --toast-bg: #111827; --toast-fg: #FFFFFF; --img-ph-from: #E8E4DF; --img-ph-to: #D8D4CF; } /* ================================================================ DARK MODE — apply [data-theme="dark"] on for explicit control, or leave OS preference via prefers-color-scheme. Use [data-theme="light"] to force light theme. What changes: · Backgrounds — inverted hierarchy, dark surfaces · Foregrounds — light text on dark background · --brand — lightened burgundy (#E85870) for text/icons/links · Soft tints — darkened washes of brand · Semantic — more vivid success/warning/danger for dark reading · Shadows — pure black at higher opacity (no warm tint) ================================================================ */ [data-theme="dark"] { --bg: #1E1E1E; --bg-page: #121212; --bg-2: #181818; --bg-input: #1A1A1A; --brand: #E85870; --brand-mid: #E85870; --brand-soft: #2A1318; --brand-dark: #F08898; --text: #F0F0F0; --text-2: #9A9A9A; --text-3: #9A9A9A; --text-4: #5C5C5C; --border: #2A2A2A; --border-2: #3A3A3A; --green: #52C457; --green-bg: #162318; --gold: #FFBF4D; --gold-bg: #231D0E; --red: #F05656; --red-bg: #2A1414; --red-border: #5A2020; --shadow-xs: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 4px 14px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30); --shadow: 0 12px 30px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 12px 30px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35); --shadow-xl: 0 24px 60px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.45); --nav-bg: rgba(30,30,30,0.95); --toast-bg: #F0F0F0; --toast-fg: #111827; --img-ph-from: #2A2A2A; --img-ph-to: #222222; } [data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.72) saturate(0.6) contrast(1.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(0.72) saturate(0.6) contrast(1.08); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1E1E1E; --bg-page: #121212; --bg-2: #181818; --bg-input: #1A1A1A; --brand: #E85870; --brand-mid: #E85870; --brand-soft: #2A1318; --brand-dark: #F08898; --text: #F0F0F0; --text-2: #9A9A9A; --text-3: #9A9A9A; --text-4: #5C5C5C; --border: #2A2A2A; --border-2: #3A3A3A; --green: #52C457; --green-bg: #162318; --gold: #FFBF4D; --gold-bg: #231D0E; --red: #F05656; --red-bg: #2A1414; --red-border: #5A2020; --shadow-xs: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 4px 14px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30); --shadow: 0 12px 30px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 12px 30px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35); --shadow-xl: 0 24px 60px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.45); --nav-bg: rgba(30,30,30,0.95); --toast-bg: #F0F0F0; --toast-fg: #111827; --img-ph-from: #2A2A2A; --img-ph-to: #222222; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow-x: hidden; background: var(--bg-page); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } #app { position: relative; min-height: 100vh; background: var(--bg-page); overflow: hidden; } /* ── Navbar page transitions ─────────────────────────────── */ #page-host[data-nav-enter="rtl"] { animation: navFromRight 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; } #page-host[data-nav-enter="ltr"] { animation: navFromLeft 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; } @keyframes navFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes navFromLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* ── Back-to-map collapse / grow ─────────────────────────── */ #page-host[data-nav-collapse] { animation: navCollapse 0.42s cubic-bezier(0.4, 0, 0.6, 1) both; transform-origin: 50% 50%; } #page-host[data-nav-grow-in] { animation: navGrowIn 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; } @keyframes navCollapse { from { clip-path: circle(150% at 50% 50%); opacity: 1; transform: scale(1); } to { clip-path: circle(0% at 50% 50%); opacity: 0.5; transform: scale(0.9); } } @keyframes navGrowIn { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(140% at 50% 50%); } } @media (prefers-reduced-motion: reduce) { #page-host[data-nav-collapse], #page-host[data-nav-grow-in] { animation: none; } } /* ── Popup → detail expand transition ────────────────────── */ .mc-expand { position: fixed; z-index: 9999; background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-xl); overflow: hidden; will-change: top, left, width, height; transition: top 0.36s cubic-bezier(0.32, 0.72, 0, 1), left 0.36s cubic-bezier(0.32, 0.72, 0, 1), width 0.36s cubic-bezier(0.32, 0.72, 0, 1), height 0.36s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.36s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease; } .mc-expand--fade { opacity: 0; } /* ── Detail page staggered entrance ──────────────────────── */ .mc-detail-rise, .mc-detail-body > * { animation: detailRise 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .mc-detail-rise { animation-delay: 0s; } .mc-detail-body > *:nth-child(1) { animation-delay: 0.04s; } .mc-detail-body > *:nth-child(2) { animation-delay: 0.09s; } .mc-detail-body > *:nth-child(3) { animation-delay: 0.14s; } .mc-detail-body > *:nth-child(4) { animation-delay: 0.19s; } .mc-detail-body > *:nth-child(5) { animation-delay: 0.24s; } .mc-detail-body > *:nth-child(6) { animation-delay: 0.29s; } .mc-detail-body > *:nth-child(7) { animation-delay: 0.34s; } .mc-detail-body > *:nth-child(n+8) { animation-delay: 0.38s; } @keyframes detailRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mc-expand { transition: opacity 0.2s ease; } .mc-detail-rise, .mc-detail-body > * { animation: none; } } /* Splash */ .splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100vh; background: var(--bg); } .splash-logo { width: 68px; height: 68px; background: var(--brand); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: white; font-size: 30px; box-shadow: 0 8px 28px rgba(125,17,40,0.35); } .splash-name { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; } /* Inputs */ input, textarea { font-family: var(--font); -webkit-appearance: none; appearance: none; } input:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(125,17,40,0.12) !important; outline: none; } /* Scrollbar */ ::-webkit-scrollbar { width: 0; display: none; } * { -ms-overflow-style: none; scrollbar-width: none; } /* Error UI */ #blazor-error-ui { background: var(--gold-bg, #fff3cd); bottom: 0; left: 0; box-shadow: 0 -2px 12px rgba(0,0,0,0.1); display: none; padding: 12px 20px; position: fixed; width: 100%; z-index: 9999; font-size: 14px; font-family: var(--font); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 10px; } /* Loading progress (fallback) */ .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; } .loading-progress circle { fill: none; stroke: var(--border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--brand); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: 600; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; font-family: var(--font); color: var(--brand); font-size: 14px; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregando"); } /* Wizard step slide transitions */ @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } .page-slide-forward { animation: slide-in-right 0.28s cubic-bezier(0.4, 0, 0.2, 1) both; } .page-slide-back { animation: slide-in-left 0.28s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Toast */ @keyframes toast-drop { from { transform: translateX(-50%) translateY(-64px); } to { transform: translateX(-50%) translateY(0); } } @keyframes toast-expand { from { width: 48px; } to { width: 340px; } } @keyframes toast-reveal { from { opacity: 0; } to { opacity: 1; } } @keyframes toast-hide { from { opacity: 1; } to { opacity: 0; } } @keyframes toast-collapse { from { width: 340px; } to { width: 48px; } } @keyframes toast-rise { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-64px); } } .toast-enter { animation: toast-drop 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, toast-expand 0.38s 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both; } .toast-enter > div { animation: toast-reveal 0.3s 0.34s ease-out both; } .toast-exit { animation: toast-collapse 0.28s ease-in both, toast-rise 0.26s 0.28s ease-in both; } .toast-exit > div { animation: toast-hide 0.18s ease-in both; } /* ── Map markers ─────────────────────────────────────────────── */ .mc-pin { background: none; border: none; } .mc-pin-dot { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--brand); transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.30); display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease; } .mc-pin-dot > i { transform: rotate(45deg); color: #fff; font-size: 13px; } .mc-pin-dot--accent { background: var(--gold); } .mc-pin:hover .mc-pin-dot { transform: rotate(-45deg) scale(1.12); } /* ── Map popups ──────────────────────────────────────────────── */ .mc-popup .leaflet-popup-content-wrapper { border-radius: 18px; box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; background: var(--bg); } .mc-popup .leaflet-popup-content { margin: 0; } .mc-popup .leaflet-popup-tip { box-shadow: var(--shadow-lg); background: var(--bg); } .mc-popup a.leaflet-popup-close-button { top: 14px; right: 14px; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; color: var(--text-4); border-radius: var(--r-full); transition: background 0.12s, color 0.12s; } .mc-popup a.leaflet-popup-close-button:hover { background: var(--bg-page); color: var(--text-2); } .mc-pop { font-family: var(--font); padding: 18px 18px 16px; } .mc-pop-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin: 0 26px 7px 0; line-height: 1.3; } .mc-pop-status { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; font-family: var(--font); letter-spacing: 0.02em; } .mc-pop-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; } .mc-pop-stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; } .mc-pop-rating-txt { font-size: 12px; font-weight: 500; color: var(--text-4, #9CA3AF); } .mc-pop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .mc-pop-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full); background: var(--bg-page, #F3F4F6); color: var(--text-3, #4B5563); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .mc-pop-chip i { font-size: 10px; color: var(--text-4); } .mc-pop-link { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 600; padding: 11px 14px; border-radius: 12px; width: 100%; box-sizing: border-box; white-space: nowrap; } .mc-pop-link:hover { background: var(--brand-dark); }