/* Youpi — identidade visual (logo do dono: “Y” com o braço direito em seta para cima e pino no “i”; paleta violeta → índigo → marinho). * A interface mantém a primária violeta da v144 (#6d28d9), que fica entre o violeta vivo e o índigo do logo. * Carregar por ÚLTIMO no . Só redefine tokens e poucas cores fixas das folhas antigas; * não muda layout. Os nomes --l360-* ficam (só os valores mudaram). Gerador: tools/brand-youpi/gen-youpi.mjs. * Coral deixou de ser cor de marca: fica só como cor funcional (alerta/aviso), nunca em logo, botão ou destaque. */ /* ---------- 1. Tokens da marca (claro) ---------- */ :root { --l360-blue: #6d28d9; /* Violeta da marca — primária (branco sobre ela 7.10:1; ela sobre o fundo 6.52:1) */ --l360-blue-strong: #5b21b6; /* hover/pressionado, texto sobre tons claros (6.82:1 sobre o tom 2) */ --l360-blue-bright: #7c3aed; /* início dos gradientes de interface (branco 5.70:1) */ --l360-blue-deep: #4517ae; /* fim dos gradientes (violeta profundo do pino; branco 10.57:1) */ --l360-blue-soft: #f3edff; /* tom lavanda (primária sobre ele 6.21:1) */ --l360-blue-soft-2: #e6dbff; --l360-coral: #ff6a4a; /* só funcional (alerta gráfico); não é mais cor de marca */ --l360-coral-strong: #c4381f; /* alerta em texto/botões (4.94:1 no fundo; branco sobre ela 5.3:1) */ --l360-coral-soft: #fff0eb; --l360-live: #12b76a; /* ponto "ao vivo" (gráfico) */ --l360-live-strong: #067647; /* texto "ao vivo"/sucesso */ --l360-live-soft: #e7f8ef; --l360-warning: #f79009; --l360-warning-strong: #b54708; --l360-warning-soft: #fff4e0; --l360-danger: #c4261b; --l360-danger-soft: #feedeb; --l360-ink: #0f1a2e; --l360-muted: #56637a; --l360-line: rgba(28, 52, 110, .13); --l360-bg: #f6f4fc; /* fundo com um toque de lavanda (tinta 15.95:1, apoio 5.57:1) */ --l360-paper: #ffffff; --l360-on-primary: #ffffff; --l360-gradient: linear-gradient(135deg, var(--l360-blue-bright), var(--l360-blue-deep)); /* Aliases das folhas antigas (styles.css, product.css, travel.css, theme.css) */ --ink: var(--l360-ink); --muted: var(--l360-muted); --navy: var(--l360-blue); --navy-2: var(--l360-blue-strong); --orange: var(--l360-blue-bright); /* acento das folhas antigas (rótulos, selos, estado ativo): era coral, agora violeta */ --orange-soft: var(--l360-blue-soft); --cream: var(--l360-bg); --paper: var(--l360-paper); --mint: #5fe3a1; --teal: var(--l360-live-strong); --line: var(--l360-line); --green: var(--l360-live-strong); --green-2: var(--l360-live); --green-soft: var(--l360-live-soft); --gold: var(--l360-warning); --gold-soft: var(--l360-warning-soft); --danger: var(--l360-danger); --admin-bg: var(--l360-bg); --shadow: 0 24px 68px rgba(15, 26, 46, .12); --travel-paper: var(--l360-paper); --travel-soft: #eef2fa; --travel-ink: var(--l360-ink); --travel-muted: var(--l360-muted); --travel-line: #dfe5ef; --blue: var(--l360-blue); --blue-soft: var(--l360-blue-soft); /* v139 Comunidade/Bate-papo */ --pp-accent: var(--l360-blue); --pp-accent-ink: #fff; --pp-soft: var(--l360-blue-soft); --pp-surface: var(--l360-paper); --pp-page: var(--l360-bg); --pp-sunken: #eef1f7; --pp-bubble: #eef1f7; --pp-bubble-own: var(--l360-blue); --pp-bubble-own-ink: #fff; --pp-warn: var(--l360-coral-strong); --pp-warn-soft: var(--l360-coral-soft); --pp-ok: var(--l360-live-strong); --pp-ok-soft: var(--l360-live-soft); --pp-shadow: 0 1px 2px #0f1a2e0d, 0 4px 18px #0f1a2e0f; } /* ---------- 2. Tokens da marca (escuro) ---------- * Mesma especificidade de theme.css (dark) e carregado depois, então prevalece. */ :root[data-theme=dark], :root[data-theme=dark] body.night-reading { --l360-bg: #0b1220; --l360-paper: #131c31; --l360-raised: #1b2640; --l360-input: #0f1729; --l360-selected: #2e2352; /* item selecionado no escuro, com o violeta da marca */ --l360-line: #2c3854; --l360-ink: #eef2fa; --l360-muted: #a3b0c7; --l360-link: #b794ff; /* lavanda: 7.02:1 sobre #131c31, 7.75:1 sobre #0b1220, 5.88:1 sobre o selecionado */ --l360-button: #6d28d9; /* botão primário no escuro (branco 7.10:1) */ --l360-coral-text: #ff8a73; --l360-live-text: #5fe3a1; --cream: var(--l360-bg); --paper: var(--l360-paper); --ink: var(--l360-ink); --muted: var(--l360-muted); --line: var(--l360-line); --orange: var(--l360-link); --orange-soft: var(--l360-selected); --l360-coral-soft-dark: #3a2320; --green: var(--l360-live-text); --green-soft: #12352a; --teal: var(--l360-live-text); --gold-soft: #3a2f1c; --danger: #ff9b89; --admin-bg: var(--l360-bg); --shadow: 0 20px 60px #0006; --travel-paper: var(--l360-paper); --travel-soft: var(--l360-raised); --travel-ink: var(--l360-ink); --travel-muted: var(--l360-muted); --travel-line: var(--l360-line); --night-raised: var(--l360-raised); --night-input: var(--l360-input); --night-link: var(--l360-link); --night-selected: var(--l360-selected); --reading-ink: var(--l360-ink); --reading-muted: var(--l360-muted); --reading-line: var(--l360-line); --pp-accent: var(--l360-link); --pp-accent-ink: #0b1220; --pp-soft: var(--l360-selected); --pp-sunken: var(--l360-input); --pp-bubble: var(--l360-raised); --pp-bubble-own: var(--l360-button); --pp-bubble-own-ink: #fff; --pp-page: var(--l360-bg); --pp-surface: var(--l360-paper); } :root[data-theme=dark] body.night-reading, :root[data-theme=dark] body { background: var(--l360-bg); } /* ---------- 3. Tokens de áreas com escopo próprio ---------- */ .admin-app, #exemption-dialog, #feedback-admin-dialog, #growth-admin-dialog, #wa-admin, #wa-button-test-panel { --adm-bg: #f6f4fc; --adm-surface: #fff; --adm-soft: #f1eefa; --adm-line: #e2ddef; --adm-ink: #0f1a2e; --adm-muted: #56637a; --adm-accent: #6d28d9; --adm-accent-soft: #f3edff; --adm-on-accent: #fff; --adm-focus: #7c3aed; --adm-ok: #067647; --adm-ok-soft: #e7f8ef; --adm-warn: #b54708; --adm-warn-soft: #fff4e0; --adm-danger: #c4261b; --adm-danger-soft: #feedeb; --adm-side-bg: #241060; --adm-side-active: rgba(255, 255, 255, .14); } :root[data-theme=dark] :is(.admin-app, #exemption-dialog, #feedback-admin-dialog, #growth-admin-dialog, #wa-admin, #wa-button-test-panel) { --adm-bg: #0b1220; --adm-surface: #131c31; --adm-soft: #1b2640; --adm-line: #2c3854; --adm-ink: #eef2fa; --adm-muted: #a3b0c7; --adm-accent: #b794ff; --adm-accent-soft: #2e2352; --adm-on-accent: #0b1220; --adm-focus: #b794ff; --adm-ok: #5fe3a1; --adm-ok-soft: #12352a; --adm-warn: #ffb86b; --adm-warn-soft: #3a2f1c; --adm-danger: #ff9b89; --adm-danger-soft: #43231f; --adm-side-bg: #0e1628; --adm-side-ink: #eef2fa; --adm-side-muted: #a3b0c7; --adm-side-hover: #1d1838; --adm-side-active: #2e2352; --adm-side-line: #2c3854; } .post-dialog { --community-accent: var(--l360-blue); --community-soft: var(--l360-blue-soft); } :root[data-theme=dark] .post-dialog { --community-accent: var(--l360-link); --community-soft: var(--l360-selected); } .wa-dialog { --wa-blue: var(--l360-blue); } html[data-theme=dark] .wa-dialog { --wa-surface: #131c31; --wa-soft: #1b2640; --ink: #eef2fa; --muted: #a3b0c7; --line: #2c3854; --wa-blue: #b794ff; } .usage-panel { --usage-accent: var(--l360-live-strong); --usage-soft: var(--l360-live-soft); } /* ---------- 4. Cores fixas antigas (#0847a6 etc.) → marca ---------- */ :is(.artesp-search button, .artesp-more, .artesp-message button, .artesp-route-heading > span, .group-primary, .favorite-route-badge, .favorite-follow, .favorites-empty button, .travel-map-label, .history-line, .history-view .history-primary, .history-empty button, .recent-trip-card .recent-trip-action, .recent-trips-footer > button, .wa-days input:checked + span) { background-color: var(--l360-blue); border-color: var(--l360-blue); } .history-stops p::before { background: var(--l360-blue); } :is(.city-info-header, .favorites-dialog-header, .ta-header, .history-heading, .install-app-visual) { background: var(--l360-gradient); } .wa-line, .wa-route-bus { background: var(--l360-blue-soft); color: var(--l360-blue-strong); } .commute-route-panel .journey-card.active { border-color: color-mix(in srgb, var(--l360-blue) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--l360-blue) 13%, transparent), 0 10px 28px #6d28d90d; } .search-control:focus-within { border-color: color-mix(in srgb, var(--l360-blue) 50%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--l360-blue) 10%, transparent); } .workspace-tabs { background: #eef1f7; } /* Botão de partida sem local confirmado (fundo violeta): rótulos claros com contraste AA (5.39:1 e 5.87:1) */ html body:not(.location-confirmed) #location-button small { color: #e6dbff; } html body:not(.location-confirmed) #location-button em { color: #ede6ff; } .live-pill.ready span { background: var(--l360-live); box-shadow: 0 0 0 4px #12b76a1f; } @media (max-width: 900px) { #mobile-nav > button.active:not(.reading-menu-action) { background: var(--l360-blue-soft); color: var(--l360-blue); border-color: var(--l360-blue-soft-2); } #mobile-nav > button.active i { color: var(--l360-blue); background: var(--l360-blue-soft-2); } } /* Escuro: botões primários (antes #1658b5, depois azul; agora violeta) */ :root[data-theme=dark] :is(.boarding-steps button[aria-current=step] i, .location-confirm-actions button.primary, #location-confirm-dialog .location-confirm-actions button.primary, .selection-actions #open-selected-line-chat, .guide-actions button.primary, .form-footer button:last-child, .install-app-actions .primary-action, .private-invite-actions button:first-child, .community-step.ready > button, .journey-actions .journey-start-button), :root[data-theme=dark] .journey-card .journey-actions .journey-start-button, html[data-theme=dark] .group-primary { background: var(--l360-button); color: #fff; border-color: #8b5cf6; } :root[data-theme=dark] :is(.nearby-stop-choice.active, .nearby-stop-choice:hover, .stop-card.active, .stop-line-option.active, .stop-line-option:hover, .direction-choice.current, .direction-choice:hover, .reading-theme-card input:checked + span, .route-preference button.active) { border-color: #8b5cf6; } :root[data-theme=dark] .reading-toggle input:checked + i { background: var(--l360-button); } :root[data-theme=dark] .toast { background: #e6ecfa; color: #0f1a2e; } @media (max-width: 900px) { :root[data-theme=dark] #mobile-nav > button.active:not(.reading-menu-action) { background: var(--l360-selected); border-color: #4a3a7a; color: var(--l360-link); } :root[data-theme=dark] #mobile-nav > button.active i { background: #3a2d66; color: var(--l360-link); } } /* ---------- 5. Assinatura (logo) ---------- */ .brand-logo-on-dark { display: none !important; } :root[data-theme=dark] .brand-logo { filter: none !important; } :root[data-theme=dark] :is(.brand, .auth-brand) .brand-logo:not(.brand-logo-on-dark) { display: none !important; } :root[data-theme=dark] :is(.brand, .auth-brand) .brand-logo-on-dark { display: block !important; } .brand .brand-lockup small, .auth-brand small { margin-left: 0; letter-spacing: .01em; font-weight: 600; color: var(--muted); } .brand-mark { border-radius: 22.5% !important; } .admin-brand .brand-mark img, .install-phone img { border-radius: 22.5%; } /* Logotipo sobre o mapa com um halo da cor do fundo, para nomes de rua não atravessarem o “Uppi”. */ body.map-shell .map-shell-brand .brand-logo { filter: drop-shadow(0 0 1px var(--l360-bg)) drop-shadow(0 0 3px var(--l360-bg)) !important; } /* ---------- 5b. Logotipo Youpi: proporção 23:10 (1104 × 480) ---------- * Os tamanhos são pela ALTURA (largura automática) e a proporção vai fixa no CSS, igual ao width/height dos : nenhuma * página reserva uma caixa errada antes de o SVG carregar (sem salto de layout). Gerador: tools/brand-youpi/gen-youpi.mjs. */ img[src$="/brand/luna360-logo.svg"], img[src$="/brand/luna360-logo-dark.svg"] { aspect-ratio: 1104 / 480; } .brand .brand-logo, .topbar .brand .brand-logo { width: auto; height: 44px; max-width: none; } .auth-brand .brand-logo, #auth-dialog .auth-brand .brand-logo { width: auto; height: 54px; max-width: none; } .privacy-logo { width: auto; height: 50px; max-width: none; } .access-brand img { width: auto; height: 54px; } header:not([class]) > a > img[src*="/brand/luna360-logo"] { width: auto; height: 48px; max-width: none; } /* viagem-demo.html */ @media (max-width: 900px) { .topbar .brand .brand-logo { height: 38px; } } @media (max-width: 760px) { .privacy-logo { height: 44px; } } @media (max-width: 690px) { .access-brand img { height: 44px; } } @media (max-width: 380px) { .privacy-logo { height: 40px; } } @media (max-width: 360px) { .topbar .brand .brand-logo { height: 34px; } } @media (max-width: 359px) { #auth-dialog .auth-brand .brand-logo { height: 46px; } } /* ---------- 6. Aviso de novo endereço (somente partiuponto.web.app) ---------- */ .l360-domain-notice { position: fixed; z-index: 2600; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 28px #0f1a2e1f; font: 500 13px/1.35 "DM Sans", sans-serif; } .l360-domain-notice img { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 22.5%; } .l360-domain-notice p { flex: 1 0 auto; margin: 0; white-space: nowrap; } .l360-domain-notice p b { font-weight: 700; } .l360-domain-notice a, .l360-domain-notice button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font: 700 13px "DM Sans", sans-serif; text-decoration: none; white-space: nowrap; } .l360-domain-notice a { padding: 0 12px; background: var(--l360-blue); color: #fff; } .l360-domain-notice button { width: 44px; flex: 0 0 44px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .l360-domain-notice button svg { width: 20px; height: 20px; } .l360-domain-notice .l360-domain-carry { background: transparent; color: var(--l360-blue); padding: 0 10px; width: auto; flex: 0 0 auto; } :root[data-theme=dark] .l360-domain-notice a { background: var(--l360-button); } :root[data-theme=dark] .l360-domain-notice .l360-domain-carry { color: var(--l360-link); background: transparent; } .l360-domain-notice :is(a, button):focus-visible { outline: 3px solid var(--l360-blue); outline-offset: 2px; } @media (max-width: 520px) { .l360-domain-notice { width: calc(100vw - 32px); flex-wrap: wrap; row-gap: 2px; } .l360-domain-notice p { flex: 1 1 calc(100% - 44px); white-space: normal; } .l360-domain-notice .l360-domain-actions { flex-basis: 100%; justify-content: flex-end; } } .l360-domain-actions { display: flex; align-items: center; gap: 4px; } /* Importação de dados vindos do endereço antigo */ .l360-import-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px #0f1a2e33; font-family: "DM Sans", sans-serif; } .l360-import-dialog::backdrop { background: #0b122080; } .l360-import-dialog img { display: block; width: 48px; height: 48px; border-radius: 22.5%; margin-bottom: 14px; } .l360-import-dialog h2 { margin: 0 0 6px; font: 700 21px/1.2 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; } .l360-import-dialog p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; } .l360-import-dialog ul { margin: 0 0 18px; padding-left: 18px; font-size: 14px; line-height: 1.6; } .l360-import-dialog footer { display: flex; justify-content: flex-end; gap: 8px; } .l360-import-dialog footer button { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 14px "DM Sans", sans-serif; cursor: pointer; } .l360-import-dialog footer button.primary { border-color: var(--l360-blue); background: var(--l360-blue); color: #fff; } :root[data-theme=dark] .l360-import-dialog footer button.primary { border-color: var(--l360-button); background: var(--l360-button); } /* ---------- 7. Páginas avulsas (privacidade, fontes, excluir conta, login admin) ---------- */ .privacy-logo-on-dark { display: none !important; } :root[data-theme=dark] .privacy-logo { filter: none !important; } :root[data-theme=dark] .privacy-logo:not(.privacy-logo-on-dark) { display: none !important; } :root[data-theme=dark] .privacy-logo-on-dark { display: block !important; } .privacy-aside { background: linear-gradient(155deg, var(--l360-blue-deep), var(--l360-blue)); } :root { --soft: var(--l360-blue-soft); --background: var(--l360-bg); } :root[data-theme=dark] { --soft: var(--l360-selected); --background: var(--l360-bg); } :root[data-theme=dark] .access-brand { padding: 0; background: none; } :root[data-theme=dark] .access-brand img:not(.brand-logo-on-dark) { display: none !important; } :root[data-theme=dark] .access-brand .brand-logo-on-dark { display: block !important; } :root[data-theme=dark] :is(.access-eyebrow, .access-capabilities i, .access-symbol, .access-text-button, .access-first button) { color: var(--l360-link); } :root[data-theme=dark] .access-submit { background: var(--l360-button); } body:has(.privacy-header) { background: radial-gradient(circle at 5% 5%, #9854ff14, transparent 32%), radial-gradient(circle at 100% 42%, #6d28d914, transparent 28%), var(--cream); } .privacy-hero::before { border-color: #9854ff24; } .privacy-hero { border-color: var(--l360-blue-soft-2); background: linear-gradient(125deg, #fdfbff, var(--l360-blue-soft) 62%, #f7f0ff); } :root[data-theme=dark] .privacy-hero { border-color: #463a70; background: linear-gradient(125deg, #131c31, #231a45 62%, #2a1f4a); } :root[data-theme=dark] .privacy-actions a.primary { background: var(--l360-button); border-color: var(--l360-button); } :root[data-theme=dark] .privacy-aside { background: linear-gradient(155deg, #2a1c5c, #3a2690); } /* ---------- 8. Resquícios da paleta antiga (QA mobile v140) ---------- */ /* Tokens de fluxo/viagem que ainda traziam o verde-azulado e os cinzas esverdeados da v139. */ :root { --flow-ok: var(--l360-live-strong); --flow-ok-soft: var(--l360-live-soft); --flow-skeleton: #e9e5f3; --flow-skeleton-shine: #f6f4fc; --flow-alert: var(--l360-coral-strong); --journey-board: var(--l360-live-strong); } :root[data-theme=dark] { --flow-ok: var(--l360-live-text); --flow-ok-soft: #12352a; --flow-skeleton: #1b2640; --flow-skeleton-shine: #24314f; --journey-board: var(--l360-live-text); } :root[data-theme=dark] body.map-shell #arrival-drawer :is(.stop-line-option .line-live-count, .arrival-card:not(.next, :first-child) .arrival-live-note) { color: var(--l360-live-text); } /* Próximo ônibus (cartão violeta): minuto branco, apoio a 88 %, botão branco como o "···" (o coral sobre a cor da marca vibrava). */ .arrival-card.next small, .arrival-card.next .arrival-time span { color: rgba(255, 255, 255, .88); } .arrival-card.next .arrival-time .live-eta-number { color: #fff; } .arrival-card.next .arrival-live-note { color: #bdf5e2; } html body .arrival-card.next .arrival-track-button, html body .arrival-card.next .arrival-card-actions .arrival-map-button { background: #fff; color: var(--l360-blue-strong); } :root[data-theme=dark] body .arrival-card.next :is(.arrival-track-button, .arrival-card-actions .arrival-map-button) { background: #fff; color: #5b21b6; } .plan-button small { color: rgba(255, 255, 255, .88); } /* Busca de linha e de endereço: ação principal na cor da marca (o coral forte parecia botão de erro). */ :is(#search-form .search-control, #place-search-form .place-search-control) button { background: var(--l360-blue); color: #fff; } :root[data-theme=dark] :is(#search-form .search-control, #place-search-form .place-search-control) button { background: var(--l360-button); color: #fff; } /* Destino opcional (claro): tom lavanda da marca (o coral virou só cor de alerta). */ :root:not([data-theme=dark]) .itinerary-destination { border-color: color-mix(in srgb, var(--l360-blue) 24%, transparent); background: var(--l360-blue-soft); } /* Perfil (claro): gradiente creme→menta antigo vira branco→tom lavanda. */ :root:not([data-theme=dark]) .profile-header { background: linear-gradient(125deg, #fdfbff, var(--l360-blue-soft)); } /* Preferências de leitura (claro): tinta e papel antigos. */ :root:not([data-theme=dark]) .reading-dialog { --reading-ink: var(--l360-ink); --reading-muted: var(--l360-muted); --reading-line: #dfe5ef; background: var(--l360-paper); } :root:not([data-theme=dark]) .reading-dialog-header { background: linear-gradient(125deg, var(--l360-blue-soft), var(--l360-paper) 80%); } :root:not([data-theme=dark]) .reading-dialog-footer { background: var(--l360-paper); } /* Fim de viagem, menu e relato de erro: ícone, véus e botão de envio na paleta nova. */ .trip-complete-icon { background: var(--l360-live-soft); color: var(--l360-live-strong); } :root[data-theme=dark] .trip-complete-icon { background: #12352a; color: var(--l360-live-text); } .trip-complete-dialog::backdrop, .fg-dialog::backdrop { background: #0b122088; } body.map-shell .map-shell-menu-scrim { background: #0b122028; } .fg-dialog button[type=submit] { border-color: var(--l360-blue); background: var(--l360-blue); color: #fff; } :root[data-theme=dark] .fg-dialog button[type=submit] { border-color: var(--l360-button); background: var(--l360-button); color: #fff; } /* Anel de foco global (travel.css usava --teal, que virou verde): violeta da marca, lavanda no escuro. */ button:focus-visible, summary:focus-visible, [role=button]:focus-visible { outline-color: var(--l360-blue); } :root[data-theme=dark] :is(button, summary, [role=button]):focus-visible { outline-color: var(--l360-link); } /* Aviso de novo endereço: "Levar meus favoritos" sem dados ficava visível (display vencia [hidden]); em 320–420 px * "Abrir luna360.web.app" e o X saíam da tela. O X vai para o canto e as duas ações dividem a linha. */ .l360-domain-notice .l360-domain-carry[hidden] { display: none; } @media (max-width: 420px) { .l360-domain-notice { padding: 8px; row-gap: 6px; } .l360-domain-notice p { display: flex; align-items: center; min-height: 36px; padding-right: 40px; } .l360-domain-notice [data-l360-close] { position: absolute; top: 0; right: 0; } .l360-domain-notice .l360-domain-actions { gap: 6px; } .l360-domain-notice .l360-domain-actions > :is(a, .l360-domain-carry) { flex: 1 1 0; min-width: 0; padding: 4px 8px; line-height: 1.2; text-align: center; white-space: normal; } } /* Prévia do tema em "Preferências de leitura": papel e tinta da paleta nova nos dois temas. */ .reading-preview { --preview-paper: #eef2fa; --preview-ink: #0f1a2e; --preview-muted: #56637a; border-color: #dfe5ef; } .reading-preview[data-theme=dark] { --preview-paper: #131c31; --preview-ink: #eef2fa; --preview-muted: #a3b0c7; border-color: #2c3854; } .reading-preview i { color: #067647; } .reading-preview[data-theme=dark] i { color: #5fe3a1; } /* ---------- 9. QA desktop v140 (768–1920 px) ---------- */ /* Itinerário (desktop > 900 px): o cartão "Linha completa" em gradiente da marca, com rótulo lavanda (5.39:1). */ @media (min-width: 901px) { .vehicle-itinerary-summary { background: linear-gradient(125deg, var(--l360-blue), var(--l360-blue-deep)); } .vehicle-itinerary-summary span { color: #e6dbff; } .vehicle-itinerary-summary small { color: rgba(255, 255, 255, .86); } :root[data-theme=dark] body.map-shell #arrival-drawer .vehicle-itinerary-summary button { color: #fff; } } /* Viagem no tema escuro: o mapa volta às cores reais (mobility-polish.css), então o logotipo do canto usa a versão * para fundo claro; a versão clara (lavanda) sumia sobre o mapa claro. */ :root[data-theme=dark] body.travel-active .map-shell-brand .brand-logo:not(.brand-logo-on-dark) { display: block !important; } :root[data-theme=dark] body.travel-active .map-shell-brand .brand-logo-on-dark { display: none !important; } /* Aviso de novo endereço em tablet/desktop estreito: centralizado no topo, cobria a aba "Casa ↔ Trabalho" (até ~1400 px). * 1024–1439: no topo do mapa, à direita do painel e abaixo da pílula do Círculo. 701–1023: acima da barra inferior. */ @media (min-width: 1024px) and (max-width: 1439px) { html body .l360-domain-notice { top: calc(env(safe-area-inset-top, 0px) + 84px); left: calc((100vw + 385px) / 2); max-width: calc(100vw - 425px); } } @media (min-width: 701px) and (max-width: 1023px) { html body .l360-domain-notice { top: auto; bottom: 152px; } } /* Login da administração: grifo do título em violeta (antes coral). */ .access-intro h1 em::after { background: color-mix(in srgb, var(--l360-blue-bright) 30%, transparent); } :root[data-theme=dark] .access-intro h1 em::after { background: color-mix(in srgb, var(--l360-link) 40%, transparent); } /* Ícones com as cores de acento antigas: estrela verde-limão no cabeçalho azul dos Favoritos, ônibus verde-água no * cartão azul do próximo ônibus (no escuro virava um quadrado verde-escuro) e ícone ativo verde-água na barra do admin. */ .favorites-heading-icon { color: #fff; } .arrival-card.next .arrival-bus-icon { color: #fff; } :root[data-theme=dark] .arrival-card.next .arrival-bus-icon { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .12); color: #fff; } :root .admin-app .admin-sidebar nav button.active i { color: #fff; } /* ---------- 10. v144: o coral sai da marca ---------- * --orange (acima) era o acento de marca das folhas antigas e virou violeta. Os estados ativos que traziam coral fixo * ganham o violeta; o coral fica só em alerta/erro: GPS instável, precisão baixa, remover, post de alerta, trilho suspenso. */ .planner-route-coral { stroke: #9854ff; } :is(.stop-card.active, .itinerary-stop.current, .drawer-actions .drawer-close:hover, .origin-results > button:hover) { border-color: color-mix(in srgb, var(--l360-blue) 40%, transparent); } :is(.line-card, .stop-card):hover, .destination-result:hover, .journey-card.active, .arrival-card[data-bus-itinerary]:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--l360-blue) 42%, transparent); } .direction-picker button.active { border-color: color-mix(in srgb, var(--l360-blue) 40%, transparent); color: var(--l360-blue-strong); box-shadow: inset 0 0 0 1px #6d28d914; } .guide-step.active { border-color: color-mix(in srgb, var(--l360-blue) 45%, transparent); background: #faf7ff; box-shadow: 0 8px 20px #6d28d914; } .nearby-stop-choice:is(:hover, .active) { border-color: color-mix(in srgb, var(--l360-blue) 42%, transparent); background: #faf7ff; } .nearby-stop-choice .nearby-stop-icon { background: linear-gradient(145deg, #f7f2ff, var(--l360-blue-soft-2)); box-shadow: inset 0 0 0 1px #6d28d914; } .itinerary-destination[open] > summary { border-bottom-color: color-mix(in srgb, var(--l360-blue) 16%, transparent); } :is(.destination-search-control button, .destination-empty-art i:last-child) { box-shadow: 0 8px 16px #6d28d933; } .mission-art span { box-shadow: 0 13px 26px #6d28d933; } :is(.safety-card b, .safety-card button, .demo-access, .mission-copy b, .install-app-copy .install-app-help.highlight) { color: var(--l360-blue-strong); } .ambient-one { background: radial-gradient(circle, #9854ff3d 0, #9854ff00 70%); } .travel-stop.alight { background: #6d28d910; } @media (max-width: 900px) { .mobile-nav-trigger:focus-visible { outline-color: color-mix(in srgb, var(--l360-blue) 42%, transparent); } } :root[data-theme=dark] :is(.itinerary-destination, .itinerary-stop.current, .guide-step.active) { background: var(--l360-selected); border-color: #4a3a7a; } :root[data-theme=dark] :is(.nearby-stop-choice .nearby-stop-icon, .guide-step.active, .nearby-stop-choice:is(:hover, .active)) { box-shadow: none; } :root[data-theme=dark] .nearby-stop-choice:is(:hover, .active) { background: var(--l360-selected); } :root[data-theme=dark] :is(.direction-picker button.active, .safety-card b, .safety-card button, .demo-access, .mission-copy b, .install-app-copy .install-app-help.highlight) { color: var(--l360-link); } /* Escuro: selos com glifo branco sobre o acento ganham o violeta de botão (branco 7.10:1); o lavanda do acento é para texto. */ :root[data-theme=dark] :is(.map-pin.destination, .stop-card.active .stop-card-icon, .nearby-stop-choice.active .nearby-stop-icon, .install-bus, .account-art b, .mission-art span) { background: var(--l360-button); color: #fff; } /* (Os selos de texto — linha, destino opcional, parada atual — seguem theme.css no escuro: tinta #142630 sobre o lavanda, 7.5:1.) */ /* Coral funcional (alerta/erro), nos dois temas. */ .guide-gps:is(.error, .stale), body.map-shell #journey-guide #guide-gps:is(.error, .stale) { background: var(--l360-coral-soft); } .guide-gps:is(.error, .stale) i, .location-accuracy.low > i b { background: var(--l360-coral-strong); box-shadow: 0 0 0 4px #ff5a3622; } :is(.origin-recent-remove, .favorite-stop-remove):hover { color: var(--l360-coral-strong); } .favorite-remove-confirm [data-confirm-remove], .chat-loading.error > span, .community-sync-state > b, .rail-badge[data-state=suspended], .social-post .post-tags .category.alert { background: var(--l360-coral-soft); } .social-post.alert-post > span.community-post-avatar { background: var(--l360-coral-soft); color: var(--l360-coral-strong); } :root[data-theme=dark] :is(.guide-gps:is(.error, .stale), .location-accuracy.low, .journey-boarding.warning, .favorite-remove-confirm [data-confirm-remove], .chat-loading.error > span, .community-sync-state > b, .rail-badge[data-state=suspended], .social-post .post-tags .category.alert, .social-post.alert-post > span.community-post-avatar), :root[data-theme=dark] body.map-shell #journey-guide #guide-gps:is(.error, .stale) { background: var(--l360-coral-soft-dark); } :root[data-theme=dark] :is(.origin-recent-remove, .favorite-stop-remove):hover, :root[data-theme=dark] .social-post.alert-post > span.community-post-avatar { color: var(--l360-coral-text); } /* Círculo: ícones de "Meus horários" e de encontro eram coral de destaque; viram violeta. Continuam coral só as cores * de categoria escolhidas pela pessoa (anel "coral", círculo de amigos) e o alfinete do encontro no mapa. */ /* (v140-circle-extras.css carrega depois desta folha: "html:root" ganha por especificidade.) */ html:root { --cx-coral: var(--l360-blue); --cx-coral-soft: var(--l360-blue-soft); } html:root[data-theme=dark] { --cx-coral: var(--l360-link); --cx-coral-soft: var(--l360-selected); } /* Escuro: link "sentido oposto" dos cartões de chegada (v141-polish.css, carregada depois) no lavanda da marca. */ html:root[data-theme="dark"] #arrival-drawer .arrival-card:not(.next) > .arrival-opposite-link { color: var(--l360-link); } /* Selo de modo "ônibus" (legenda de transporte: ônibus coral, metrô/trem azul, CPTM verde) fica coral também no escuro; * .journey-live no escuro usa o lavanda da marca. */ :root[data-theme=dark] .mode-badge.bus { background: var(--l360-coral-soft-dark); color: #ffc0a7; } :root[data-theme=dark] .journey-live { color: var(--l360-link); } /* ---------- 11. v141: WhatsApp (alertas e link de chegada #chegada=) ainda na paleta antiga ---------- * Cabeçalho: gradiente azul-marinho → verde-azulado (#083c77 → #134c55) vira o violeta da marca (#300d83 → #6d28d9). * Contraste: título branco ≥ 7.10:1 em todo o gradiente; rótulo #e6dbff ≥ 8.0:1 na metade esquerda (onde fica); * "Fechar" (branco sobre o véu branco de 7 %) 6.24:1. No escuro, o mesmo violeta mais profundo (#241060 → #4c1d95). */ .wa-dialog .wa-header { background: linear-gradient(120deg, #300d83 0%, var(--l360-blue-deep) 52%, var(--l360-blue) 100%); } :root[data-theme=dark] .wa-dialog .wa-header { background: linear-gradient(120deg, #241060 0%, #4c1d95 100%); } .wa-dialog .wa-eyebrow { color: #e6dbff; } .wa-dialog .wa-symbol { background: rgba(255, 255, 255, .14); color: #fff; } /* era verde-limão #d2f568 */ .wa-dialog::backdrop { background: #0b122088; } /* véu azul-petróleo → véu neutro da marca */ /* Foco: anel violeta (era azul #418bd6/#529fe3); no cabeçalho violeta, branco; no escuro, lavanda. */ .wa-dialog :is(button, a):focus-visible, .wa-days input:focus-visible + span { outline-color: var(--l360-blue); } .wa-dialog .wa-header :is(button, a):focus-visible { outline-color: #fff; } :root[data-theme=dark] .wa-dialog :is(button, a):focus-visible, :root[data-theme=dark] .wa-days input:focus-visible + span { outline-color: var(--l360-link); } :root[data-theme=dark] .wa-dialog .wa-header :is(button, a):focus-visible { outline-color: #fff; } .wa-dialog #wa-message { border-left-color: var(--l360-blue); } /* era #5394cf */ .wa-check input { accent-color: var(--l360-blue); } /* era #1454a0 */ #wa-link-box a { color: var(--l360-blue-strong); } /* era #165dab */ :root[data-theme=dark] #wa-link-box a { color: var(--l360-link); } /* "No seu ponto": ícone do ponto no violeta da marca (era verde-azulado #16715e). */ .wa-route-stop > span { color: var(--l360-blue); } :root[data-theme=dark] .wa-route-stop > span { color: var(--l360-link); } /* Resultado da previsão: filete "ao vivo" no verde funcional da marca (era #168168). */ #wa-arrival-result { border-left-color: var(--l360-live-strong); } :root[data-theme=dark] #wa-arrival-result { border-left-color: var(--l360-live-text); } /* Escuro: selo do ônibus azul-marinho (#244d72) e etapa atual azul-claro (#a8cfff) → lavanda da marca. */ :root[data-theme=dark] .wa-route-bus { background: var(--l360-selected); color: var(--l360-link); } :root[data-theme=dark] .wa-dialog .wa-steps [aria-current=step] { border-color: var(--l360-link); color: var(--l360-link); } /* Escuro: --wa-blue é o lavanda de texto; nos botões cheios ele ficava sob texto branco (2.3:1). Botões cheios usam o * violeta de botão (branco 7.10:1). */ :root[data-theme=dark] :is(.wa-arrival-dialog #wa-arrival-refresh, .wa-dialog #wa-link, .wa-verification #wa-check-email, .wa-dialog .wa-form-actions button:last-child, .wa-dialog #wa-save, .wa-dialog .wa-field-step) { background: var(--l360-button); border-color: var(--l360-button); color: #fff; } /* Painéis da administração (métricas do WhatsApp e do crescimento): número em azul-claro no escuro → lavanda. */ :root[data-theme=dark] :is(.wa-admin-metric strong, .fg-metric strong) { color: var(--l360-link); } /* Compartilhar viagem (escuro): o cabeçalho começava no lavanda claro (#f3edff) sob o título claro (1.1:1). */ :root[data-theme=dark] .journey-share-dialog header { background: linear-gradient(120deg, var(--l360-selected), var(--l360-paper)); } .journey-share-dialog :is(button, a):focus-visible { outline-color: var(--l360-blue); } /* era --teal (verde) */ :root[data-theme=dark] .journey-share-dialog :is(button, a):focus-visible { outline-color: var(--l360-link); } /* Véus dos diálogos de partida e de compartilhar: azul-petróleo antigo → véu neutro da marca. */ #location-confirm-dialog::backdrop, .journey-share-dialog::backdrop { background: rgba(11, 18, 32, .56); } /* Claro: fundos creme → menta/azul-claro da paleta antiga (partida, sentido, resumos de seleção e o celular do convite de * instalação) viram branco → lavanda da marca. O escuro já usa papel/selecionado (theme.css). */ :root:not([data-theme=dark]) #location-confirm-dialog { background: linear-gradient(170deg, #fff 0%, #f9f7ff 100%); } :root:not([data-theme=dark]) #location-confirm-dialog .location-confirm-actions { background: #f9f7ff; } :root:not([data-theme=dark]) .direction-dialog { background: linear-gradient(170deg, #fff 0%, #f9f7ff 100%); } :root:not([data-theme=dark]) :is(.selection-summary, .boarding-direction) { border-color: var(--l360-blue-soft-2); background: linear-gradient(120deg, var(--l360-blue-soft), #fbf9ff); } .install-phone { background: linear-gradient(170deg, #fff, var(--l360-blue-soft)); } /* Convite de instalação (menu e iPhone): "Ver como instalar" era verde-azulado (#0b6e63) e o brilho do botão, azul; * o fundo creme (#fffdf7) vira papel. */ .install-app-actions .primary-action.instructions-only { background: var(--l360-blue); } .install-app-actions .primary-action { box-shadow: 0 11px 24px rgba(109, 40, 217, .22); } :root:not([data-theme=dark]) .install-app-dialog { background: var(--l360-paper); }