/* Marca — Pousada Le Ange. Só TOKENS e tipografia. O layout mora em funnel.css: separar os dois é o que permite trocar a identidade sem reabrir a grade, e permite ao time de front portar este arquivo para o Next.js sem levar junto o CSS de referência. As seis cores abaixo são as do CSS de produção do site oficial. Não invente variações: derive delas. O que existe aqui além das seis são (a) tintas e linhas neutras que a marca não define e uma tela precisa, e (b) tokens SEMÂNTICOS (--acao, --destaque, --link…) — é por eles que o modo escuro troca o papel de cada cor sem tocar em uma regra de layout sequer. */ :root{ /* ── paleta oficial ───────────────────────────────────────────────── */ --color--green: #CAD766; /* verde-limão: destaque da marca */ --color--green--f: #979957; /* oliva */ --color--black: #4D4D4D; /* grafite — a marca não usa preto puro */ --color--blue: #7AC4F3; /* azul claro */ --color--blue--f: #04808C; /* petróleo — cor de ação */ --color--white: #FBFBFB; /* off-white — o fundo */ /* ── neutros de tela ──────────────────────────────────────────────── */ /* O grafite da marca sobre off-white dá 8.1:1; serve de texto corrido. A tinta fraca é o menor cinza que ainda passa AA (5.1:1) — abaixo disso "texto de apoio" vira "texto que não dá para ler". */ --fundo: var(--color--white); --superficie: #FFFFFF; --superficie-2: #F4F5EC; /* faixas e cabeçalhos: verde lavado até virar neutro */ --tinta: var(--color--black); --tinta-forte: #3A3A3A; --tinta-fraca: #6E6E6E; --linha: #E3E5D8; --linha-forte: #C7CAB6; /* ── papéis ───────────────────────────────────────────────────────── */ /* Petróleo é a ação porque é a única cor da marca que passa AA (4.5:1) com texto branco em cima. O verde-limão NÃO passa como cor de texto sobre claro — por isso ele é sempre FUNDO ou DETALHE, nunca letra. */ --acao: var(--color--blue--f); --acao-tinta: #FFFFFF; --acao-forte: #036670; --acao-lavada: #E3F2F3; /* fundo de estado ligado, para texto petróleo em cima */ --destaque: var(--color--green); --destaque-tinta: #3D4020; /* grafite esverdecido sobre o limão: 6.9:1 */ --destaque-suave: #F0F4D9; /* intervalo do calendário, selos */ --destaque-linha: var(--color--green--f); /* Etapa CONCLUÍDA e etapa ATUAL não podem ser a mesma cor. No claro dá para preencher a concluída de petróleo e a atual de verde; no escuro o petróleo sai de cena e as duas cairiam no mesmo verde — por isso o papel é token, e no escuro a concluída vira contorno em vez de preenchimento. */ --feito-bg: var(--color--blue--f); --feito-borda: var(--color--blue--f); --feito-tinta: #FFFFFF; --feito-linha: var(--color--blue--f); /* Selo de promoção: no claro é o verde cheio; no escuro o verde cheio já é o botão de ação, e um selo idêntico ao CTA rouba o clique. */ --selo-bg: var(--color--green); --selo-tinta: #3D4020; --selo-borda: var(--color--green); --link: var(--color--blue--f); --ok: var(--color--blue--f); /* desconto/sucesso: o petróleo já é o "positivo" da marca */ --alerta: #A83A2B; /* a marca não tem cor de erro; esta é a menor que passa AA */ --alerta-bg: #FBEAE7; --atencao: #7A5B12; --atencao-bg:#FBF3E0; --feriado: var(--color--blue); /* feriado é informação, não bloqueio: azul, não vermelho */ --indisponivel: #EDEDE7; --indisponivel-tinta: #6B6B6B; /* 4.6:1 sobre o cinza acima — dia bloqueado ainda se lê */ /* ── tipografia ───────────────────────────────────────────────────── */ /* A pilha de reserva não é decoração: se o Google Fonts não responder (e num funil de pagamento ele vai não responder algum dia), a tela tem de continuar com métrica parecida em vez de cair no Times. */ --fonte-titulo: "Comfortaa", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --fonte-texto: "Urbanist", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* ── forma ────────────────────────────────────────────────────────── */ --r-botao: 10px; /* raio de botão do site oficial */ --r-cartao: 16px; --r-campo: 10px; --sombra: 0 1px 2px rgba(77,77,77,.06), 0 10px 28px rgba(77,77,77,.07); --sombra-alta: 0 18px 50px rgba(77,77,77,.18); --anel: 0 0 0 3px rgba(4,128,140,.28); /* halo de foco */ } /* ── modo escuro ──────────────────────────────────────────────────────── Só troca de token, nenhuma regra de layout. O papel das cores INVERTE por necessidade de contraste, não por gosto: no escuro o petróleo fica escuro demais para ser o botão principal (texto branco em cima cai para ~1.9:1), então quem assume a ação é o verde-limão com tinta escura — 9.9:1. Pelo mesmo motivo o link vira azul claro: petróleo sobre fundo escuro não se lê. */ @media (prefers-color-scheme: dark){ :root{ --fundo: #1B1C17; --superficie: #24251F; --superficie-2: #2C2D25; --tinta: #ECEDE4; --tinta-forte: #FFFFFF; --tinta-fraca: #A9AA9F; --linha: #3B3C33; --linha-forte: #545548; --acao: var(--color--green); --acao-tinta: #22231D; --acao-forte: #DDE88A; --acao-lavada: #313326; --destaque: var(--color--green); --destaque-tinta: #22231D; --destaque-suave: #383A29; --destaque-linha: var(--color--green--f); --feito-bg: transparent; --feito-borda: var(--color--green--f); --feito-tinta: var(--color--green); --feito-linha: var(--color--green--f); --selo-bg: var(--destaque-suave); --selo-tinta: var(--color--green); --selo-borda: var(--color--green--f); --link: var(--color--blue); --ok: var(--color--green); --alerta: #F2A79A; --alerta-bg: #3A2320; --atencao: #E7CE8E; --atencao-bg:#332B18; --indisponivel: #2A2B24; --indisponivel-tinta: #9A9B90; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35); --sombra-alta: 0 18px 50px rgba(0,0,0,.6); --anel: 0 0 0 3px rgba(202,215,102,.35); } /* Foto e QR nasceram para fundo claro. Sem isto a galeria fica com brancos estourados no meio de uma tela escura. */ img{ filter: brightness(.94) } }