/* ========================================================================== Laboratório Siqueira — IPHS Agendamento de coleta externa (agendamentos.html) Carregada DEPOIS de main.css e escrita nas mesmas camadas nativas: tokens, botões, eyebrow, lead, halo do cursor, camada de partículas e estados de reveal vêm de lá sem uma linha duplicada. Aqui existe apenas o que a página realmente acrescenta — o cartão de vidro, o campo de formulário e o layout de aplicativo. ========================================================================== */ @layer tokens { .booking-page { /* Único token novo: o erro do formulário. Vermelho lavado, para ter contraste sobre navy sem virar um alarme dentro de um cartão calmo. */ --danger: #FF9BA4; /* Vidro — uma superfície só, reutilizada pelo cartão e pelo CTA. Fundo bem baixo e desfoque alto: quem dá corpo ao cartão é o brilho que passa por trás dele, não a opacidade da superfície. */ --glass-bg: rgba(255, 255, 255, 0.025); --glass-bd: rgba(255, 255, 255, 0.13); --glass-hi: rgba(255, 255, 255, 0.42); } } @layer base { /* A página tem fundo próprio e nenhuma seção clara: o navy do propaga para o canvas e o overscroll do iOS não revela branco. */ .booking-page { background-color: var(--navy-900); } /* `hidden` alterna o formulário, o painel de sucesso e as mensagens de erro. Sem isto, qualquer `display` declarado adiante venceria o atributo — regra de autor sempre ganha da folha do navegador. */ .booking-page [hidden] { display: none !important; } } /* ========================================================================== AMBIENTE Aurora + marca d'água + malha de partículas. Fixo, atrás de tudo, sem capturar ponteiro — o mesmo tratamento dos blocos escuros do site. ========================================================================== */ @layer sections { .booking-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Fallback estático: sem partículas e sem animação, a página continua com a mesma atmosfera. */ background: radial-gradient(65% 50% at 50% -5%, rgba(54, 169, 225, 0.13), transparent 70%), radial-gradient(55% 45% at 90% 105%, rgba(45, 46, 131, 0.34), transparent 72%), linear-gradient(180deg, #0D1538, var(--navy-900) 60%); } .booking-field__aurora { position: absolute; inset: 0; } .booking-field__aurora span { position: absolute; display: block; border-radius: 50%; will-change: transform; } /* Os keyframes (aurora-a/b/c) já existem em main.css — só o posicionamento e a cor mudam de contexto. */ .booking-field__aurora span:nth-child(1) { width: min(58vw, 720px); aspect-ratio: 1; top: -22%; right: -14%; background: radial-gradient(circle closest-side, rgba(54, 169, 225, 0.15), rgba(54, 169, 225, 0) 70%); animation: aurora-a 24s ease-in-out infinite alternate; } .booking-field__aurora span:nth-child(2) { width: min(50vw, 640px); aspect-ratio: 1; bottom: -26%; left: -16%; background: radial-gradient(circle closest-side, rgba(49, 39, 131, 0.24), rgba(49, 39, 131, 0) 70%); animation: aurora-b 31s ease-in-out infinite alternate; } .booking-field__aurora span:nth-child(3) { width: min(38vw, 480px); aspect-ratio: 1; top: 34%; left: 42%; background: radial-gradient(circle closest-side, rgba(29, 113, 184, 0.13), rgba(29, 113, 184, 0) 70%); animation: aurora-c 27s ease-in-out infinite alternate; } /* Brilho central — fica exatamente atrás do cartão e é o que faz o vidro ler como vidro: sem uma fonte de luz por trás, translucidez vira só cinza. Não anima, para não distrair quem está preenchendo o formulário. */ .booking-field__aurora span:nth-child(4) { width: min(90vw, 900px); aspect-ratio: 1.15; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, rgba(54, 169, 225, 0.07), rgba(54, 169, 225, 0) 72%), radial-gradient(circle closest-side, rgba(45, 46, 131, 0.12), rgba(45, 46, 131, 0) 65%); } .booking-field__mark { position: absolute; right: -6%; bottom: -8%; width: min(46vw, 460px); aspect-ratio: 45.5 / 62.8; background: url("../assets/brand/symbol.svg") no-repeat center / contain; opacity: 0.05; } @media (prefers-reduced-motion: reduce) { .booking-field__aurora span { animation: none; } } /* ------------------------------------------------------------- LAYOUT */ .booking { position: relative; z-index: 1; display: grid; align-content: center; min-height: 100svh; padding-block: clamp(2rem, 6vw, 4.5rem); } .booking__shell { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); justify-items: center; } /* Filhos de grid têm min-width: auto — sem zerar, uma palavra longa ("anatomopatologista") estoura a coluna em telas de 360px. */ .booking__shell > * { min-width: 0; width: 100%; } /* Sobre o navy, a versão monocromática branca da logo é a aplicação oficial — nenhum tratamento extra é necessário. */ .booking__brand { display: flex; justify-content: center; margin-bottom: clamp(0.25rem, 2vw, 1rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); } .booking__brand img { width: clamp(190px, 42vw, 250px); height: auto; } .booking__brand:hover, .booking__brand:focus-visible { transform: translateY(-2px); opacity: 0.9; } .booking__back { display: flex; justify-content: center; margin-top: clamp(0.25rem, 2vw, 0.75rem); } } /* ========================================================================== COMPONENTES ========================================================================== */ @layer components { /* --- Superfície de vidro --------------------------------------------- Um componente, dois usos (formulário e CTA de resultados). O brilho da borda superior é o que separa "vidro" de "retângulo translúcido". */ .glass-card { position: relative; border: 1px solid var(--glass-bd); border-radius: clamp(20px, 3.5vw, 30px); background: var(--glass-bg); /* Desfoque baixo de propósito: o suficiente para separar o cartão do fundo, sem apagar a malha de partículas que passa por trás. */ backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08) inset, 0 30px 80px rgba(4, 8, 26, 0.42), 0 0 90px -40px rgba(54, 169, 225, 0.2); overflow: hidden; } /* Fio de luz que atravessa o topo do cartão, esmaecendo nas pontas. */ .glass-card::before { content: ""; position: absolute; inset: 0 12% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-hi), transparent); pointer-events: none; } /* Sem suporte a backdrop-filter o vidro vira um navy sólido translúcido — preferível a um cartão lavado e ilegível. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-card { background: rgba(13, 21, 56, 0.88); } } /* --- Título de caixa com ícone ---------------------------------------- Variante do .eyebrow do site: o traço dá lugar a um selo redondo. */ .eyebrow--icon { gap: 0.65rem; } .eyebrow--icon::before { display: none; } .eyebrow--icon svg { box-sizing: border-box; width: 30px; height: 30px; padding: 6px; flex: 0 0 auto; border: 1px solid rgba(54, 169, 225, 0.28); border-radius: 50%; background: rgba(54, 169, 225, 0.12); color: var(--cyan-400); } /* --- Cartão de agendamento ------------------------------------------- */ .booking-card { padding: clamp(1.5rem, 4.5vw, 2.75rem); } .booking-card__head { display: grid; gap: 0.9rem; justify-items: start; margin-bottom: clamp(1.75rem, 4vw, 2.25rem); } .booking-card__title { font-size: var(--step-3); max-width: 18ch; } .booking-card__lead { font-size: var(--step-0); max-width: 54ch; } /* --- Formulário -------------------------------------------------------- */ .form { display: grid; gap: clamp(1.1rem, 2.6vw, 1.4rem); } /* `align-items: start` impede que a mensagem de erro de um campo estique o campo vizinho: sem isto, o erro do WhatsApp alonga o input de e-mail. */ .form__row { display: grid; align-items: start; gap: clamp(1.1rem, 2.6vw, 1.4rem); } @media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .form__submit { justify-content: space-between; width: 100%; margin-top: 0.35rem; } /* Enquanto a mensagem é montada, o botão informa e recusa novos cliques. */ .form__submit[data-busy="true"] { pointer-events: none; opacity: 0.75; } .form__note { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); } .form__note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 0.15em; color: var(--accent); } .form__note--noscript svg { color: var(--danger); } .form__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* --- Campo ------------------------------------------------------------ Um componente para input e textarea. O ícone é decorativo e fica fora do fluxo; o padding do controle é que reserva o espaço dele. */ .field { display: grid; gap: 0.5rem; } .field__label { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .field__req, .field__opt { font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; padding: 0.15em 0.6em; border-radius: var(--r-pill); text-transform: uppercase; } .field__req { color: var(--cyan-400); background: rgba(54, 169, 225, 0.14); } .field__opt { color: var(--text-muted); background: rgba(255, 255, 255, 0.06); } .field__control { position: relative; display: block; } .field__icon { position: absolute; top: 50%; left: 1.05rem; transform: translateY(-50%); display: grid; place-items: center; color: var(--text-muted); pointer-events: none; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out); } .field__icon svg { width: 19px; height: 19px; } .field__control--area .field__icon { top: 1.05rem; transform: none; } .field__input { width: 100%; min-height: 58px; padding: 0.95rem 1.15rem 0.95rem 3.1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); color: var(--text); font-size: var(--step-0); font-weight: 500; letter-spacing: -0.01em; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field__input--area { min-height: 118px; padding-top: 1rem; line-height: 1.55; resize: vertical; } .field__input::placeholder { color: rgba(167, 184, 214, 0.62); font-weight: 400; } .field__input:hover { border-color: rgba(255, 255, 255, 0.26); } /* O foco é desenhado no controle inteiro (borda + halo + ícone), e não só no contorno padrão — por isso o outline nativo sai daqui. */ .field__input:focus { outline: none; border-color: var(--cyan-400); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(54, 169, 225, 0.18); } .field__control:focus-within .field__icon { color: var(--cyan-400); } /* Teclado: o halo já sinaliza o foco, mas mantemos um contorno visível para quem depende de alto contraste. */ .field__input:focus-visible { outline: 2px solid transparent; } @media (forced-colors: active) { .field__input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } } /* O autofill do Chrome pinta o campo de branco: o inset repõe o vidro. */ .field__input:-webkit-autofill, .field__input:-webkit-autofill:hover, .field__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--white); -webkit-box-shadow: 0 0 0 1000px #16204A inset; caret-color: var(--white); } /* Estado de erro — só aparece depois da primeira tentativa de envio. */ .field[data-invalid="true"] .field__input { border-color: var(--danger); } .field[data-invalid="true"] .field__input:focus { box-shadow: 0 0 0 3px rgba(255, 155, 164, 0.2); } .field[data-invalid="true"] .field__icon { color: var(--danger); } .field__error { display: flex; align-items: center; gap: 0.45rem; font-size: var(--step--1); font-weight: 600; color: var(--danger); } .field__error svg { width: 15px; height: 15px; flex: 0 0 auto; } /* --- Estado de sucesso -------------------------------------------------- */ .booking-done { display: grid; justify-items: center; gap: 0.9rem; text-align: center; padding-block: clamp(1rem, 4vw, 2rem); } .booking-done:focus-visible { outline: none; } .booking-done__icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; color: var(--navy-900); background: linear-gradient(140deg, var(--cyan-400), #7FD5F5); box-shadow: 0 12px 40px rgba(54, 169, 225, 0.3); /* Sem fill-mode: o painel só existe depois de sair do `display: none`, e uma animação que não chegue a disparar deixaria o selo preso no primeiro keyframe. Sem preenchimento, o estado de repouso é o correto. */ animation: booking-pop 0.55s var(--ease-out); } .booking-done__icon svg { width: 30px; height: 30px; } @keyframes booking-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .booking-done__title { font-size: var(--step-2); } .booking-done__text { max-width: 42ch; color: var(--text-muted); } .booking-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; margin-top: 0.5rem; } /* --- CTA de resultados -------------------------------------------------- Menos densa que o cartão do formulário de propósito: é uma saída, não a tarefa principal da página. */ .results-cta { display: grid; gap: clamp(1.25rem, 3vw, 2rem); padding: clamp(1.4rem, 4vw, 2.1rem); background: rgba(255, 255, 255, 0.035); } .results-cta__copy { display: grid; gap: 0.7rem; justify-items: start; } .results-cta__title { font-size: var(--step-2); } .results-cta__text { font-size: var(--step--1); line-height: 1.6; color: var(--text-muted); max-width: 46ch; } .results-cta__actions { display: grid; gap: 0.75rem; } .results-cta__actions .btn { justify-content: space-between; } @media (min-width: 760px) { .results-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .results-cta__actions { min-width: 15rem; } } /* --- Botão de volta ------------------------------------------------------ Mesma variante ghost do site, com a seta invertida de lado e de sentido. */ .btn--back { padding-inline: 0.25rem 1.1rem; } .btn--back:hover .btn__arrow svg, .btn--back:focus-visible .btn__arrow svg { transform: translateX(-3px); } /* --- Rodapé discreto ------------------------------------------------------ */ .booking-foot { display: grid; gap: 0.4rem; justify-items: center; text-align: center; padding-top: clamp(1rem, 3vw, 1.75rem); border-top: 1px solid var(--border-soft); font-size: var(--step--1); color: var(--text-muted); } .booking-foot__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.55rem; } /* Em telas estreitas os itens quebram em linhas — o ponto separador perderia o sentido e vira ruído. */ @media (max-width: 560px) { .booking-foot__dot { display: none; } .booking-foot__line { flex-direction: column; gap: 0.15rem; } } .booking-foot a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease); } .booking-foot a:hover { color: var(--accent); } .booking-foot__legal { display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0.75; } .booking-foot__legal svg { width: 14px; height: 14px; flex: 0 0 auto; } }