/* ================================================ PISCINAS NATURAIS DE MACEIÓ — night.css Sobrescritas do Modo Noite Ativado quando ================================================ */ [data-theme="night"] { --bg: #05070F; --bg-alt: #090E1A; --surface: #0D1B2A; --surface-2: #112233; --accent: #A8DADC; --accent-deep: #D4EEF0; --accent-glow: rgba(168, 218, 220, 0.14); --text: #E8F4F8; --text-muted: #7B9EAD; --border: rgba(168, 218, 220, 0.10); --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.60); } /* ─── Background noturno do body ─────────────────── */ [data-theme="night"] body { background: var(--bg); } /* ─── Header ─────────────────────────────────────── */ [data-theme="night"] .header { background: rgba(5, 7, 15, 0.90); border-bottom-color: var(--border); } /* ─── Hero ───────────────────────────────────────── */ [data-theme="night"] .hero__bg--day { opacity: 0; } [data-theme="night"] .hero__bg--night { opacity: 1; } [data-theme="night"] .hero__overlay { background: linear-gradient( 160deg, rgba(0, 5, 20, 0.45) 0%, rgba(0, 5, 20, 0.25) 40%, rgba(0, 5, 20, 0.70) 100% ); } [data-theme="night"] .hero__stars { opacity: 1; } /* Trocar textos hero */ [data-theme="night"] .hero__text--day { opacity: 0; transform: translateY(-16px); pointer-events: none; } [data-theme="night"] .hero__text--night { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; position: relative; left: auto; transform: none; max-width: 100%; width: 100%; } /* Cor do título em itálico (modo noite = prata lunar) */ [data-theme="night"] .hero__title em { color: var(--accent); } /* ─── Botão outline no hero (noite) ─────────────── */ [data-theme="night"] .btn--outline { border-color: rgba(168, 218, 220, 0.5); } [data-theme="night"] .btn--outline:hover { background: rgba(168, 218, 220, 0.10); border-color: var(--accent); } /* ─── Toggle ─────────────────────────────────────── */ [data-theme="night"] .theme-toggle { background: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme="night"] .theme-toggle__track { background: var(--bg-alt); border-color: var(--border); } [data-theme="night"] .theme-toggle__thumb { left: calc(100% - calc(var(--thumb) * 0.78) - 3px); background: var(--accent); } [data-theme="night"] .icon-sun { display: none; } [data-theme="night"] .icon-moon { display: block; } /* ─── Navegação mobile ───────────────────────────── */ [data-theme="night"] .nav__links.open { background: var(--surface); border-bottom-color: var(--border); } [data-theme="night"] .nav__hamburger span { background: var(--text); } /* ─── Sobre ──────────────────────────────────────── */ /* No modo noite, mostramos só o card de noite e ocultamos o de dia */ [data-theme="night"] .sobre__card--day { display: none; } [data-theme="night"] .sobre__card--night { display: grid; } [data-theme="night"] .sobre-calendar-card--day { display: none; } [data-theme="night"] .sobre-calendar-card--night { display: flex; } /* ─── Calendário (Sobre) — modo noite ────────────── */ [data-theme="night"] .sobre-calendar-card { background: var(--surface-2); border-color: var(--border); } [data-theme="night"] .sobre-calendar { background: var(--surface-2); border-color: var(--border); } [data-theme="night"] .sobre-calendar__nav { background: var(--bg-alt); color: var(--accent); border-color: var(--border); } [data-theme="night"] .sobre-calendar__nav:hover { background: var(--accent-glow); border-color: var(--accent); } [data-theme="night"] .cal-day { background: var(--bg-alt); color: var(--text); } [data-theme="night"] .cal-day--today { border-color: var(--accent); } [data-theme="night"] .cal-day--available { background: rgba(168, 218, 220, 0.10); } [data-theme="night"] .cal-day--unavailable { background: rgba(217, 83, 79, 0.18); color: #FF9B9B; } [data-theme="night"] .cal-day--bright { background: rgba(255, 219, 130, 0.16); } [data-theme="night"] .cal-day--dim { background: rgba(120, 140, 170, 0.16); color: var(--text-muted); } [data-theme="night"] .sobre-calendar__note a { color: var(--accent); } /* Escorço da maré + gráfico do modal no modo noite */ [data-theme="night"] .cal-day__spark polyline { stroke: var(--accent); opacity: 0.9; } [data-theme="night"] .cal-day--has-tide:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.4); } [data-theme="night"] .tc-line { stroke: var(--accent); } [data-theme="night"] .tc-area { fill: rgba(168, 218, 220, 0.16); } [data-theme="night"] .tc-dot--high { fill: var(--accent); } [data-theme="night"] .tide-modal__backdrop { background: rgba(0,0,0,0.7); } /* ─── Passeios & Valores — modo noite ────────────── */ [data-theme="night"] .passeios { background: var(--bg); } [data-theme="night"] .passeio-card { background: var(--surface); border-color: var(--border); } [data-theme="night"] .passeio-card__price { color: var(--accent); } [data-theme="night"] .passeio-card__list li::before { color: var(--accent); } /* ─── Galeria ───────────────────────────────────── O filtro dia/noite é controlado só pelo JS (classe .hidden), sincronizado com o tema. Sem regras de opacidade aqui para não conflitar com a animação .reveal. */ /* ─── Dicas — trocar cards ───────────────────────── */ [data-theme="night"] .dica-card--day { display: none; } [data-theme="night"] .dica-card--night { display: flex; flex-direction: column; } /* ─── Como Chegar — card de noite destaque ──────── */ /* Saídas — mostra o ponto de saída noturno, oculta o de dia */ [data-theme="night"] .chegar__grid--day { display: none; } [data-theme="night"] .chegar__grid--night { display: grid; } /* ─── Labels em modo noite ───────────────────────── */ [data-theme="night"] .label--accent { background: rgba(168, 218, 220, 0.10); color: var(--accent); border-color: rgba(168, 218, 220, 0.18); } [data-theme="night"] .label--day { background: rgba(168, 218, 220, 0.08); color: var(--accent); } /* ─── Formulário ─────────────────────────────────── */ [data-theme="night"] .form-group input, [data-theme="night"] .form-group textarea { background: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme="night"] .form-group input::placeholder, [data-theme="night"] .form-group textarea::placeholder { color: var(--text-muted); } [data-theme="night"] .form-group input:focus, [data-theme="night"] .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* ─── Footer noturno ─────────────────────────────── */ [data-theme="night"] .footer { background: #020408; } /* ─── Efeito de brilho lunar nos títulos ─────────── */ [data-theme="night"] .section__title { text-shadow: 0 0 40px rgba(168, 218, 220, 0.12); } /* ─── Galeria grid no modo noite ─────────────────── */ [data-theme="night"] .galeria { /* Estrelas de fundo via radial-gradient */ background-image: radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 25% 50%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 50% 20%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.5) 0%, transparent 100%); } /* ─── Filtros galeria modo noite ─────────────────── */ [data-theme="night"] .filter-btn { background: var(--surface); border-color: var(--border); color: var(--text-muted); } [data-theme="night"] .filter-btn:hover { border-color: var(--accent); color: var(--accent); } [data-theme="night"] .filter-btn--active { background: var(--accent); border-color: var(--accent); color: #0D1B2A; } /* ─── Animação de entrada do modo noite ─────────── */ [data-theme="night"] .hero__content { animation: fadeInUp 0.8s var(--ease-out) both; } @keyframes fadeInUp { from { opacity: 0.5; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ─── Scrollbar noturna ──────────────────────────── */ [data-theme="night"] ::-webkit-scrollbar { width: 6px; } [data-theme="night"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="night"] ::-webkit-scrollbar-thumb { background: rgba(168, 218, 220, 0.25); border-radius: 99px; } [data-theme="night"] ::-webkit-scrollbar-thumb:hover { background: rgba(168, 218, 220, 0.45); }