:root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Safe-area insets. env() works natively on iOS; no Android WebView (Chromium) só recebe um valor real quando o código nativo (MainPage.xaml.cs) o repassa via WindowInsets, sobrescrevendo esta variável em tempo de execução. */ --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); /* 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); } } /* ── PC vertical nav transitions ────────────────────────── */ /* #page-host gets opacity-only (transform would create a containing block for position:fixed children like pc-map-panel, displacing them mid-animation). Children get the translateY slide directly — safe because the transform is on the child itself, not on an ancestor of a fixed-position element. */ #page-host[data-nav-enter="down"], #page-host[data-nav-enter="up"] { animation: navVertFade 0.38s ease both; } @media (min-width: 900px) { /* pc-filter-panel uses translateX(-100%) to stay hidden — exclude it so the nav translateY doesn't override that and flash it into view mid-animation. */ #page-host[data-nav-enter="down"] > *:not(.pc-filter-panel) { animation: navFromBottom 0.38s cubic-bezier(0.32, 0.72, 0, 1) both; } #page-host[data-nav-enter="up"] > *:not(.pc-filter-panel) { animation: navFromTop 0.38s cubic-bezier(0.32, 0.72, 0, 1) both; } } @keyframes navVertFade { from { opacity: 0; } to { opacity: 1; } } @keyframes navFromBottom { from { transform: translateY(56px); } to { transform: translateY(0); } } @keyframes navFromTop { from { transform: translateY(-56px); } to { transform: translateY(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; } .splash-logo-img { width: 100px; height: 100px; object-fit: contain; } [data-theme="dark"] .splash-logo-img { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .splash-logo-img { filter: invert(1); } } /* 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; } @media (prefers-reduced-motion: reduce) { .page-slide-forward, .page-slide-back { animation: none; } } /* Photo carousel slide transitions (Detalhe: capa, foto principal, lightbox) */ .mc-photo-slide-fwd { animation: slide-in-right 0.22s cubic-bezier(0.4, 0, 0.2, 1) both; } .mc-photo-slide-back { animation: slide-in-left 0.22s cubic-bezier(0.4, 0, 0.2, 1) both; } @media (prefers-reduced-motion: reduce) { .mc-photo-slide-fwd, .mc-photo-slide-back { animation: none; } } /* 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; } /* ── Responsive sidebar ──────────────────────────────────────── */ :root { --sidebar-w: 0px; } .side-nav { display: none; position: fixed; left: 0; top: 0; width: 240px; height: 100vh; background: var(--bg); border-right: 1px solid var(--border); flex-direction: column; z-index: 200; transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1); overflow: hidden; } .side-nav--collapsed { width: 64px; } .side-nav__header { display: flex; align-items: center; gap: 12px; padding: 20px 14px 16px; overflow: hidden; flex-shrink: 0; } .side-nav__logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; overflow: hidden; } .side-nav__brand-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; font-family: var(--font); white-space: nowrap; opacity: 1; transition: opacity 0.18s ease; } .side-nav--collapsed .side-nav__brand-name { opacity: 0; pointer-events: none; } .side-nav__items { flex: 1; padding: 4px 10px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .side-nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--r-lg); cursor: pointer; transition: background 0.14s ease; white-space: nowrap; overflow: hidden; } .side-nav__item:hover { background: var(--bg-page); } .side-nav__item--active { background: var(--brand-soft); } .side-nav__item--active .side-nav__item-icon i { color: var(--brand); } .side-nav__item--active .side-nav__item-label { color: var(--brand); font-weight: 700; } .side-nav__item--fab .side-nav__item-icon { width: 36px; height: 36px; background: var(--brand); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .side-nav__item--fab .side-nav__item-icon i { color: #fff; font-size: 14px; } .side-nav__item-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .side-nav__item-icon i { font-size: 18px; color: var(--text-3); } .side-nav__item-label { font-size: 14px; font-weight: 500; color: var(--text-2); font-family: var(--font); opacity: 1; transition: opacity 0.18s ease; } .side-nav--collapsed .side-nav__item-label { opacity: 0; pointer-events: none; } .side-nav__collapse-btn { margin: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-4); font-size: 12px; transition: background 0.14s, color 0.14s; flex-shrink: 0; } .side-nav__collapse-btn:hover { background: var(--bg-page); color: var(--text-2); } /* PC filter aside — anchored to the right edge of the list, slides LTR from behind it */ .pc-filter-panel { display: none; position: fixed; top: 0; left: calc(var(--sidebar-w) + 320px); /* flush with list's right edge */ width: 260px; height: 100vh; background: var(--bg); border-right: 1px solid var(--border); flex-direction: column; z-index: 29; /* behind pc-map-panel (30) so it emerges from behind the list */ overflow: hidden; transform: translateX(-100%); /* starts hidden behind the list */ transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .pc-filter-panel--open { transform: translateX(0); /* slides right (LTR) into view */ } /* PC map panel */ .pc-map-panel { display: none; position: fixed; top: 0; left: var(--sidebar-w); width: 320px; height: 100vh; background: var(--bg); border-right: 1px solid var(--border); flex-direction: column; z-index: 30; transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 2px 0 12px rgba(0,0,0,0.06); } /* Visibility helpers */ .mobile-only { display: block; } .perfil-right { display: none; } .perfil-resumo-label { display: none; } @media (min-width: 900px) { :root { --sidebar-w: 240px; } .side-nav { display: flex; } .bottom-nav { display: none !important; } .mobile-only { display: none !important; } .pc-filter-panel { display: flex; } .pc-map-panel { display: flex; } #page-host { margin-left: var(--sidebar-w); transition: margin-left 0.28s cubic-bezier(0.32, 0.72, 0, 1); } #page-host.no-sidebar { margin-left: 0; } /* Location button: no bottom sheet on PC, pin to bottom-right */ .location-btn { bottom: 24px !important; } /* Perfil PC 2-column layout */ .perfil-content { padding: 24px 24px 24px !important; } .perfil-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .perfil-right { display: block; } .perfil-resumo-label { display: block; } /* Lista page — 2-column card grid */ .lista-cards-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 24px 24px !important; align-items: start; } .lista-card { background: var(--bg-page) !important; box-shadow: none !important; } } /* ── Adicionar: PC 3-column layout ──────────────────────────── */ .adicionar-pc-layout { display: flex; height: 100vh; overflow: hidden; padding: 16px 20px; gap: 16px; background: var(--bg-page); box-sizing: border-box; } .adicionar-pc-col { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; min-width: 0; background: var(--bg); box-shadow: var(--shadow-sm); } .adicionar-pc-col-hdr { padding: 14px 18px 10px; border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0; } .adicionar-pc-col-body { flex: 1; overflow-y: auto; padding: 18px 16px 24px; display: flex; flex-direction: column; gap: 18px; } .adicionar-pc-map-wrap { flex: 1; position: relative; overflow: hidden; min-height: 0; } .adicionar-pc-map-wrap > div:first-child { position: absolute !important; inset: 0 !important; height: auto !important; } .adicionar-map-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px 12px; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); z-index: 500; display: flex; flex-direction: column; gap: 7px; } /* ── Adicionar: mobile step layout ───────────────────────────── */ .adicionar-mob-layout { display: flex; flex-direction: column; min-height: 100vh; } .adicionar-mob-hdr { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 16px 10px; flex-shrink: 0; } .adicionar-mob-content { flex: 1; padding-bottom: 148px; } .adicionar-mob-footer { position: fixed; bottom: 68px; left: 0; right: 0; z-index: 50; background: var(--bg); border-top: 1px solid var(--border); padding: 10px 16px; display: flex; gap: 10px; } /* ── Detalhe PC 2-column layout ──────────────────────────────── */ .mc-detail-body { padding: 20px 20px 160px; } .mc-detail-cta-pc { display: none; } @media (min-width: 900px) { .mc-detail-body { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; padding: 20px 24px 40px; } .mc-detail-left, .mc-detail-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .mc-detail-left > *, .mc-detail-right > * { margin-bottom: 0 !important; } .mc-detail-cta-pc { display: block; } .mc-detail-cta-mob { display: none; } } /* ── Mobile-only cover + carousel (hidden on PC) ────────────── */ .mc-mob-cover { display: block; } .mc-mob-carousel { display: block; } @media (min-width: 900px) { .mc-mob-cover, .mc-mob-carousel { display: none; } } /* ── Stars+address: plain on mobile, card on PC ─────────────── */ .mc-detail-stars { margin-bottom: 20px; } @media (min-width: 900px) { .mc-detail-stars { background: var(--bg); border-radius: var(--r-lg); border: 1px solid var(--border); padding: 16px; box-shadow: var(--shadow-xs); margin-bottom: 0; } } /* ── Card ordering on PC (services after acesso+veiculos) ───── */ @media (min-width: 900px) { .mc-acesso-veic { order: 0; } .mc-servicos-card { order: 1; } } /* ── Photo gallery (imagem principal + grid paginado) ────────── */ .mc-photo-main { display: none; /* shown only on PC */ position: relative; overflow: hidden; background: #111; } .mc-photo-main-inner { width: 100%; height: 260px; overflow: hidden; position: relative; } .mc-photo-grid-col { display: none; /* shown only on PC */ flex-direction: column; overflow: hidden; background: #111; } .mc-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: hidden; align-content: start; } .mc-photo-grid-item { position: relative; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: border-color 0.12s; } .mc-photo-grid-item--sel { border-color: var(--brand); } .mc-photo-grid-nav { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 0; background: rgba(0,0,0,0.35); } @media (min-width: 900px) { /* Container 9:8 = 2× a altura dos itens do grid (3:4 em 3 colunas). Imagem interna mantém 3:4 retrato, centralizada com espaços laterais. */ .mc-photo-main { aspect-ratio: 9 / 8; display: flex; justify-content: center; align-items: center; border-radius: var(--r-lg); } .mc-photo-main-inner { height: 100%; width: auto; aspect-ratio: 3 / 4; } .mc-photo-grid-col { display: flex; border-radius: var(--r-lg); overflow: hidden; } } /* ── Avaliar page ────────────────────────────────────────────── */ .mc-avaliar-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .mc-avaliar-wrapper { padding: 20px 20px 100px; } .mc-avaliar-card { /* mobile: transparent, sem borda */ } @media (min-width: 900px) { .mc-avaliar-header { display: none; } .mc-avaliar-wrapper { display: flex; justify-content: center; align-items: flex-start; padding: 48px 32px 64px; min-height: calc(100vh - 1px); } .mc-avaliar-card { width: 100%; max-width: 580px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 40px; box-shadow: var(--shadow-sm); } } /* ── 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); max-width: 300px; } .mc-popup .leaflet-popup-content { margin: 0; width: auto !important; } .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-popup .mc-pop-img { width: 100%; height: 160px; max-height: 160px; object-fit: cover; display: block; } .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); } /* ================================================================ LOGIN TRANSITION ANIMATIONS ================================================================ */ /* Hidden until phantom finishes — then animations below take over */ .lform-hidden { opacity: 0; pointer-events: none; } /* ── Entry ── */ .lform-top { animation: lformTop 0.3s cubic-bezier(0.4,0,0.2,1) both; } .lform-bottom { animation: lformBottom 0.3s cubic-bezier(0.4,0,0.2,1) both; } @keyframes lformTop { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } } @keyframes lformBottom { from { opacity:0; transform:translateY( 20px); } to { opacity:1; transform:translateY(0); } } .lcurtain { animation: lcurtain 0.32s cubic-bezier(0.4,0,0.2,1) both; } @keyframes lcurtain { from { clip-path: inset(0 100% 0 0 round 2px); } to { clip-path: inset(0 0% 0 0 round 2px); } } /* Selector (divider + Google): enter/exit */ .lselector-in { animation: lselectorIn 0.28s cubic-bezier(0.4,0,0.2,1) both; } .lselector-out { animation: lselectorOut 0.15s cubic-bezier(0.4,0,0.2,1) both; } @keyframes lselectorIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes lselectorOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(8px); } } /* "Não tem conta?" link: slide suave independente do estado acima */ .llink-in { animation: llinkIn 0.28s cubic-bezier(0.4,0,0.2,1) both; } .llink-out { animation: llinkOut 0.12s cubic-bezier(0.4,0,0.2,1) both; } @keyframes llinkIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } @keyframes llinkOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(6px); } } /* ── Exit (inverse) ── */ .lform-top-exit { animation: lformTopExit 0.25s cubic-bezier(0.4,0,0.2,1) both; } .lform-bottom-exit { animation: lformBottomExit 0.25s cubic-bezier(0.4,0,0.2,1) both; } @keyframes lformTopExit { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-20px); } } @keyframes lformBottomExit { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY( 20px); } } .lcurtain-exit { animation: lcurtainExit 0.25s cubic-bezier(0.4,0,0.2,1) both; } @keyframes lcurtainExit { from { clip-path: inset(0 0% 0 0 round 2px); } to { clip-path: inset(0 100% 0 0 round 2px); } } /* ── Tier badge shimmer ring ── */ @keyframes tier-shimmer-spin { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tier-shimmer-ring { border-radius: 50%; padding: 3px; animation: tier-shimmer-spin 2.5s linear infinite; background-size: 300% 300%; } .tier-shimmer-ring--padrao { background: linear-gradient(90deg, #16A34A, #4ADE80, #BBF7D0, #4ADE80, #16A34A); background-size: 300% 300%; animation: tier-shimmer-spin 3s linear infinite; } .tier-shimmer-ring--prata { background: linear-gradient(90deg, #6B7280, #D1D5DB, #9CA3AF, #E5E7EB, #6B7280); background-size: 300% 300%; animation: tier-shimmer-spin 2.5s linear infinite; } .tier-shimmer-ring--ouro { background: linear-gradient(90deg, #D97706, #FCD34D, #FBBF24, #FDE68A, #D97706); background-size: 300% 300%; animation: tier-shimmer-spin 2s linear infinite; } /* ── MOD badge shimmer ── */ @keyframes mod-badge-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .badge-mod { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #0891B2, #22D3EE, #67E8F9, #22D3EE, #0891B2); background-size: 300% 300%; animation: mod-badge-shimmer 2s linear infinite; font-size: 10px; font-weight: 700; color: white; letter-spacing: .1em; line-height: 1; box-shadow: 0 1px 4px rgba(6, 182, 212, .5); text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }