/* Start - css/conta.css * * Shell compartilhado das páginas de conta do karazan.com.br * (/minha-conta, /checkout, /reagendamento, /estorno). * * MOBILE-FIRST de propósito: as regras base valem para o celular — que é onde o * convidado abre o e-mail da compra — e o desktop entra por `min-width`. Por isso * NÃO se usa `vw` para tipografia aqui (o resto do site usa): `vw` amarra o corpo * de texto à largura da tela e, no celular, ou fica minúsculo ou estoura. `rem` * respeita o tamanho de fonte escolhido pelo usuário no sistema. * * Este arquivo NÃO estiliza o widget da Planne — essa parte continua em * minha-conta.css / checkout.css, que são carregados DEPOIS e vencem. * * BLINDAGEM DO WIDGET (ago/2026): "não estilizar" não bastava. O widget é uma * ilha React de terceiro que declara pouco e HERDA o resto — então tudo que este * arquivo colocava no `body` (creme sobre o fundo escuro do castelo) descia para * dentro dele e virava creme sobre o branco do widget. Foi assim que o campo * "Lugares" do reagendamento ficou ilegível. Três regras nasceram daí: * 1. tipografia da marca mora no shell (.conta-header/.conta-main/.conta-footer), * NUNCA no `body` — o widget monta modal e dropdown como filho direto de * (portal), e o que estiver no body herda para lá também; * 2. `.conta-widget` é firewall de herança: reseta o que é herdável para * valores neutros, e o widget volta a mandar na própria aparência; * 3. o card que hospeda o widget usa `.conta-card--widget`, sem * `backdrop-filter` e sem `overflow` — filtro cria containing block e * prende o `position: fixed` do widget dentro do card; `overflow` corta * dropdown, tooltip e modal. * Seletor descendente novo (`.conta-card a`, por exemplo) alcança o widget: * mire na classe do conteúdo, não no card. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; } body.conta-body { position: relative; min-height: 100vh; background-color: #120a09; background-image: url("img/desktop-fundo-castelo.webp"); background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: scroll; display: flex; flex-direction: column; /* Base NEUTRA de propósito — ver "blindagem do widget" no topo. O que herda daqui é o que o widget da Planne pendura direto no (modal, dropdown, tooltip), e essas superfícies são claras: creme aqui é texto invisível lá. A tipografia da marca entra logo abaixo, no shell. */ font-family: var(--segoe); font-size: 1rem; line-height: normal; color: #1b1b1b; } /* Tipografia da marca: no shell, não no body. */ .conta-header, .conta-main, .conta-footer { font-family: var(--ibarra), Georgia, serif; font-size: 1rem; line-height: 1.65; color: var(--karazan-cream); } /* Vaga-lumes: mesma identidade das outras telas, agora no shell (uma única implementação para as quatro páginas). */ .conta-fireflies { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .firefly { position: absolute; background-color: rgba(255, 230, 150, 0.8); border-radius: 50%; box-shadow: 0 0 10px rgba(255, 230, 150, 0.8), 0 0 22px rgba(255, 230, 150, 0.5); filter: blur(1px); animation: firefly-blink 3s ease-in-out infinite; } @keyframes firefly-blink { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.5); } } @media (prefers-reduced-motion: reduce) { .firefly { animation: none; opacity: 0.55; } } /* ---------------------------------------------------------------- cabeçalho */ .conta-header { position: relative; z-index: 2; background-color: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--branco_lente01); } .conta-header-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: 60rem; margin: 0 auto; padding: 0 0.75rem; } .conta-voltar, .conta-marca { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0.5rem; text-decoration: none; color: var(--karazan-cream); } .conta-voltar { font-size: 0.9rem; opacity: 0.85; } .conta-voltar:hover, .conta-voltar:focus-visible { opacity: 1; } .conta-marca { font-family: var(--euphorigenic), serif; font-size: 1.15rem; letter-spacing: 0.02em; } /* Navegação: rolagem horizontal no celular em vez de quebrar em duas linhas desalinhadas. Cada item tem 44px de altura mínima (alvo de toque). */ .conta-nav { max-width: 60rem; margin: 0 auto; padding: 0 0.5rem 0.6rem; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; } .conta-nav::-webkit-scrollbar { display: none; } .conta-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--branco_lente02); background-color: rgba(255, 255, 255, 0.06); color: var(--karazan-cream); text-decoration: none; font-size: 0.92rem; white-space: nowrap; } .conta-nav a:hover, .conta-nav a:focus-visible { background-color: rgba(255, 255, 255, 0.14); } .conta-nav a[aria-current="page"] { background-color: var(--karazan-bordo); border-color: var(--karazan-amber); color: var(--karazan-cream); } /* -------------------------------------------------------------------- corpo */ .conta-main { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.25rem 0.85rem 2.5rem; } .conta-card { background-color: var(--preto_lente05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--branco_lente01); border-radius: 1rem; box-shadow: 0 8px 32px 0 var(--preto_lente05); padding: 1.1rem; margin-bottom: 1.25rem; overflow-x: hidden; } .conta-titulo { font-family: var(--euphorigenic), serif; font-weight: normal; font-size: 1.9rem; line-height: 1.15; text-align: center; color: var(--karazan-cream); margin: 0 0 1rem; } .conta-subtitulo { font-family: var(--euphorigenic), serif; font-weight: normal; font-size: 1.25rem; line-height: 1.25; color: var(--karazan-amber); margin: 0 0 0.6rem; } .conta-texto { margin: 0 0 0.9rem; } .conta-texto:last-child { margin-bottom: 0; } /* Âmbar nos links do NOSSO texto. Era `.conta-card a`, que também pintava os links de dentro do widget da Planne — descendente de card alcança a ilha. */ .conta-texto a, .conta-passos a, .conta-regras a, .conta-regulamento a, .conta-ajuda a { color: var(--karazan-amber); } /* ------------------------------------------------- widget da Planne (ilha) */ /* Card que hospeda o widget. Perde o vidro e o clipe de propósito: `backdrop-filter` faz o card virar containing block de `position: fixed` (o modal do widget abre preso dentro do card em vez de cobrir a tela) e `overflow` corta dropdown, tooltip e calendário. O `html, body` lá em cima continua segurando o transbordo horizontal da página. */ .conta-card--widget { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; /* Compensa o blur perdido para o texto do card seguir legível sobre a foto. */ background-color: var(--preto_lente07); } /* Firewall de herança. Tudo que é herdável volta ao neutro AQUI, na fronteira: dentro da ilha quem manda é o CSS do widget, que declara o que lhe interessa e herda o resto. Sem isto, o creme do shell desce e pinta texto claro sobre o fundo branco do widget. Não subir a especificidade para `.planne-widget` — isso passaria a sobrescrever o widget, que é justamente o que não se quer. */ .conta-widget { width: 100%; max-width: 100%; margin: 0 auto; color: #1b1b1b; font-family: var(--segoe); font-size: 1rem; font-weight: 400; font-style: normal; font-variant: normal; line-height: normal; letter-spacing: normal; word-spacing: normal; text-align: left; text-transform: none; text-shadow: none; text-indent: 0; white-space: normal; -webkit-font-smoothing: auto; } /* ------------------------------------------------------------------- passos */ .conta-passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; } .conta-passos li { counter-increment: passo; position: relative; padding: 0 0 0.9rem 2.6rem; margin: 0; } .conta-passos li::before { content: counter(passo); position: absolute; left: 0; top: 0.1rem; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--karazan-bordo); border: 1px solid var(--karazan-amber); color: var(--karazan-cream); font-family: var(--euphorigenic), serif; font-size: 1rem; line-height: 1; } .conta-passos li:last-child { padding-bottom: 0; } /* ------------------------------------------------------------------- regras */ .conta-regras { background-color: rgba(136, 24, 18, 0.35); border-left: 4px solid var(--karazan-amber); border-radius: 0.5rem; padding: 0.9rem 1rem; margin: 0 0 1rem; } .conta-regras:last-child { margin-bottom: 0; } .conta-regras ul { margin: 0; padding-left: 1.15rem; } .conta-regras li { margin-bottom: 0.55rem; } .conta-regras li:last-child { margin-bottom: 0; } .conta-regulamento ol { margin: 0; padding-left: 1.25rem; } .conta-regulamento li { margin-bottom: 0.7rem; } /* ------------------------------------------------------------------ botões */ .conta-botoes { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.1rem; } .conta-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7rem 1.4rem; border-radius: 0.6rem; border: 1px solid var(--karazan-bordo); background-color: var(--karazan-bordo); color: var(--karazan-cream); font-family: var(--euphorigenic), serif; font-size: 1.05rem; text-align: center; text-decoration: none; cursor: pointer; } .conta-botao:hover, .conta-botao:focus-visible { background-color: #a01e17; } .conta-botao--vazado { background-color: transparent; border-color: var(--karazan-cream); color: var(--karazan-cream); } .conta-botao--vazado:hover, .conta-botao--vazado:focus-visible { background-color: rgba(247, 232, 213, 0.14); } /* ---------------------------------------------------------------- formulário */ .conta-form { display: flex; flex-direction: column; gap: 1rem; } .conta-campo { display: flex; flex-direction: column; gap: 0.35rem; } .conta-campo label { font-size: 0.95rem; color: var(--karazan-cream); } .conta-campo input, .conta-campo textarea { width: 100%; min-height: 48px; padding: 0.7rem 0.8rem; border-radius: 0.5rem; border: 1px solid var(--branco_lente03); background-color: rgba(255, 255, 255, 0.92); color: #241a19; /* 16px evita o zoom automático do iOS ao focar o campo. */ font-size: 1rem; font-family: inherit; line-height: 1.4; } .conta-campo textarea { min-height: 8rem; resize: vertical; } .conta-campo input:focus-visible, .conta-campo textarea:focus-visible { outline: 3px solid var(--karazan-amber); outline-offset: 1px; } .conta-ajuda { font-size: 0.85rem; opacity: 0.85; } .conta-erro { color: #ffc9a3; font-size: 0.88rem; } .conta-erros { background-color: rgba(136, 24, 18, 0.55); border: 1px solid var(--karazan-amber); border-radius: 0.5rem; padding: 0.8rem 1rem; margin-bottom: 1rem; } .conta-erros ul { margin: 0.4rem 0 0; padding-left: 1.2rem; } /* Honeypot: fora da tela, mas sem `display:none` — bot que lê CSS ignora campo escondido por display; leitor de tela é avisado por aria-hidden + tabindex. */ .conta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------- diálogo de confirmação */ /*