/* * Complementos ao site.css (Tailwind compilado do layout validado, não editar). * Aqui ficam apenas: cores do tema congeladas, estados das animações que antes * eram do Framer Motion e estados de abrir/fechar dos componentes. */ /* Cores do tema validado pelo cliente (antes vinham do banco de dados). */ :root { --color-primary: #b01e21; --color-primary-dark: #ad1e21; --color-primary-light: #f0f0f0; --color-secondary: #000000; --color-secondary-dark: #ffffff; --color-secondary-light: #ffffff; --color-accent: #DC2626; --color-accent-dark: #B91C1C; --color-accent-light: #FCA5A5; --color-success: #16A34A; --color-warning: #EA8C55; --color-error: #DC2626; --color-info: #0284C7; --color-foreground: #0F172A; --color-foreground-muted: #64748B; --color-background: #FFFFFF; --color-surface: #F8FAFC; --color-border: #E2E8F0; --color-dark-foreground: #F1F5F9; --color-dark-background: #0F172A; --color-dark-surface: #1E293B; --color-dark-border: #334155; } /* ------------------------------------------------- fundo e texto do */ /* O site.css declara, FORA de qualquer camada: * body{background:var(--color-background);color:var(--color-foreground)} * @media (prefers-color-scheme:dark){body{...versao escura...}} * * Declaracao sem camada vence qualquer utilitario de `@layer utilities`, por * especificidade que seja. Por isso as classes `bg-white dark:bg-gray-950` que * o proprio carrega nunca chegam a pintar: quem decide e aquele par de * regras. E como a segunda depende de `prefers-color-scheme`, o fundo passava a * seguir o sistema operacional do visitante em vez do botao de modo escuro, que * so alterna a classe `.dark` no . Duas das quatro combinacoes saiam * erradas: SO claro + botao escuro dava cartoes escuros sobre fundo branco, e * SO escuro sem escolha nenhuma dava fundo escuro com texto claro sob cartoes * claros — na primeira visita, sem o visitante ter pedido nada. * * As duas regras abaixo devolvem a decisao a classe, que e o modelo do site: * `theme-init.js` aplica `.dark` so a partir do localStorage e o padrao e * claro. `:root body` (0,1,1) e `:root.dark body` (0,2,1) vencem o `body` * (0,0,1) do site.css por especificidade, entao nao precisam de !important; * a media query tambem nao acrescenta especificidade. */ :root body { background: var(--color-background); color: var(--color-foreground); } :root.dark body { background: var(--color-dark-background); color: var(--color-dark-foreground); } [hidden] { display: none !important; } /* ---------------------------------------------------------------- entrada */ /* Só esconde quando o JS está ativo (classe .js posta pelo theme-init.js). */ .js [data-reveal] { opacity: 0; transform: var(--reveal-from, none); transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--reveal-delay, 0s); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Forma fluida do cabeçalho das páginas (x:[0,40,0], y:[0,24,0], 18s). */ @keyframes aes-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, 24px); } } [data-float] { animation: aes-float 18s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { transition: none; transform: none; opacity: 1; } [data-float] { animation: none; } } html.a11y-reduced-motion [data-reveal] { transform: none !important; opacity: 1 !important; } html.a11y-reduced-motion [data-float] { animation: none; } /* ---------------------------------------------------------------- header */ [data-dropdown-panel] { opacity: 0; transform: translateX(var(--dropdown-shift, 0px)) translateY(8px) scale(.97); transition: opacity .15s cubic-bezier(.22, 1, .36, 1), transform .15s cubic-bezier(.22, 1, .36, 1); } [data-dropdown-panel].is-open { opacity: 1; transform: translateX(var(--dropdown-shift, 0px)); } [data-dropdown].is-open > button { color: #fff; background-color: rgb(255 255 255 / .15); } [data-dropdown].is-open > button > svg, [data-mobile-group].is-open > button > svg { transform: rotate(180deg); } [data-mobile-menu] { opacity: 0; transform: translateY(-10px); transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1); } [data-mobile-menu].is-open { opacity: 1; transform: none; } [data-mobile-backdrop] { opacity: 0; transition: opacity .2s; } [data-mobile-backdrop].is-open { opacity: 1; } /* ---------------------------------------------------------------- modais */ [data-modal] { opacity: 0; transition: opacity .2s; } [data-modal].is-open { opacity: 1; } [data-modal] [role="dialog"] { transform: translateY(16px) scale(.98); transition: transform .22s cubic-bezier(.22, 1, .36, 1); } [data-modal].is-open [role="dialog"] { transform: none; } /* ---------------------------------------------------------------- painel de acessibilidade */ [data-a11y-backdrop] { opacity: 0; transition: opacity .2s; } [data-a11y-backdrop].is-open { opacity: 1; } [data-a11y-panel] { transform: translateX(100%); opacity: 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s; } [data-a11y-panel].is-open { transform: none; opacity: 1; } [data-a11y-toggle][aria-checked="true"] { background-color: var(--color-primary); } [data-a11y-toggle][aria-checked="true"] > span { --tw-translate-x: 1.25rem; translate: 1.25rem 0; } [data-a11y-select] [data-value].is-selected { font-weight: 600; color: #fff; background-color: var(--color-primary); } [data-a11y-select].is-open > button > svg { transform: rotate(180deg); } /* ------------------------------------------------------ departamentos */ /* São três cards numa grade de duas colunas: o terceiro (Esportivo) ocupa a linha inteira e fica centralizado, com a largura exata de uma coluna. O cálculo depende do gap da grade ser gap-8 (2rem); se o gap mudar, a largura aqui muda junto. */ @media (min-width: 1024px) { [data-dept-card-centered] { grid-column: span 2 / span 2; margin-inline: auto; width: calc((100% - 2rem) / 2); } } /* --------------------------------------------------- núcleos de lazer */ /* Véu sobre a foto do header. O anterior era preto 100% opaco até 55% da largura, o que apagava mais da metade da imagem. Agora é um degradê de preto para transparente, e a foto aparece em toda a extensão. O limite é o parágrafo do header: texto normal branco, que precisa de 4,5:1. Medido nas três fotos, a mais clara (clube-nautico) tem luminância ~0,36 em toda a largura; com 0,55 de preto por cima o contraste fica em ~5:1. Em telas largas o parágrafo termina por volta de 56% da largura, então dali em diante o véu some. No celular ele ocupa quase toda a largura (~96%), e um degradê horizontal deixaria o texto sem fundo: lá o degradê é vertical e não chega a transparente. */ [data-hero-scrim] { background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .7) 100%); } @media (min-width: 768px) { [data-hero-scrim] { background: linear-gradient(to right, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 0) 100%); } }