/* ─── CSS Custom Properties ─── */ :root { --praia-yellow: #FFEB3B; --praia-teal: #003A40; --praia-teal-light: #005D56; --praia-blue: #0288D1; --praia-green: #43A047; --praia-sand: #FAF8F5; --praia-sand-dark: #E8DFD0; --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1); --smooth-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Altura de conteúdo da bottom-nav (sem safe-area). Fonte única — usada na altura da nav e em todo o espaço reservado/posições que dependem dela (padding do body, banners, modais, toasts, FAB, mapa da Rede). */ --bnav-h: 80px; } /* ─── Base ─── */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* O fundo do só aparece em zonas onde o não chega — área acima da safe-area no iOS Safari (entre URL bar e início do header), overscroll/rubber-band, e cantos arredondados da viewport. Sem isto, ficava uma linha branca/areia visível por cima do header teal. */ background-color: #003A40; } body { font-family: 'Open Sans', system-ui, sans-serif; line-height: 1.7; color: #2D2820; background-color: #FAF8F5; } ::selection { background-color: rgba(255, 235, 59, 0.35); color: #003A40; } /* ─── Scrollbar ─── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #F5F0E8; } ::-webkit-scrollbar-thumb { background: #C4B898; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #A89A78; } /* ─── Underwater Bubbles ─── */ .bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.08); opacity: 0; animation: bubble-rise var(--dur, 11s) linear infinite; animation-delay: var(--delay, 0s); pointer-events: none; will-change: transform, opacity; } .bubble-sideways { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.07); opacity: 0; animation: bubble-sideways var(--dur, 12s) linear infinite; animation-delay: var(--delay, 0s); pointer-events: none; will-change: transform, opacity; } /* Tamanho ligeiramente maior mantendo as classes Tailwind originais */ .bubble.w-1, .bubble-sideways.w-1 { width: 5px; height: 5px; } .bubble.w-1\.5, .bubble-sideways.w-1\.5 { width: 7px; height: 7px; } .bubble.w-2, .bubble-sideways.w-2 { width: 9px; height: 9px; } .bubble.w-2\.5, .bubble-sideways.w-2\.5 { width: 10px; height: 10px; } .bubble.w-3, .bubble-sideways.w-3 { width: 11px; height: 11px; } @keyframes bubble-rise { 0% { opacity: 0; transform: translateY(25px) scale(0.4); } 5% { opacity: 0.5; } 30% { opacity: 0.5; transform: translateY(-55px) scale(0.8) translateX(var(--drift, 10px)); } 65% { opacity: 0.45; transform: translateY(-125px) scale(0.95) translateX(calc(var(--drift, 10px) * -0.35)); } 94% { opacity: 0.12; } 100% { opacity: 0; transform: translateY(-190px) scale(1.05) translateX(var(--drift, 10px)); } } @keyframes bubble-sideways { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 7% { opacity: 0.45; } 50% { opacity: 0.45; transform: translate(var(--dx, 45px), var(--dy, -25px)) scale(0.85); } 93% { opacity: 0.18; } 100% { opacity: 0; transform: translate(calc(var(--dx, 45px) * 1.9), calc(var(--dy, -25px) * 0.85)) scale(1.05); } } /* ── Performance das bolhas ───────────────────────────────────────────────── Quando o hero sai do ecrã (JS adiciona .bubbles-paused ao contentor), as animações param — deixa de haver custo de compositor durante o scroll pela restante página. No telemóvel não promovemos cada bolha a uma camada GPU permanente (memória), já que o browser compõe animações de transform/opacity na mesma; o número de bolhas é reduzido em JS. Desktop fica inalterado. */ .bubbles-paused .bubble, .bubbles-paused .bubble-sideways { animation-play-state: paused; } @media (max-width: 767px) { .bubble, .bubble-sideways { will-change: auto; } } /* ─── Layered Shadows ─── */ .shadow-layered { box-shadow: 0 1px 2px rgba(0, 58, 64, 0.04), 0 4px 8px rgba(0, 58, 64, 0.06), 0 12px 24px rgba(0, 58, 64, 0.08); } .shadow-layered-lg { box-shadow: 0 2px 4px rgba(0, 58, 64, 0.04), 0 8px 16px rgba(0, 58, 64, 0.06), 0 24px 48px rgba(0, 58, 64, 0.1); } .shadow-layered-yellow { box-shadow: 0 1px 2px rgba(255, 235, 59, 0.06), 0 4px 8px rgba(255, 235, 59, 0.1), 0 12px 24px rgba(255, 235, 59, 0.14); } /* ─── Noise Texture Overlay ─── */ .noise-overlay::after { content: ''; position: absolute; inset: 0; background-image: url('../img/noise-texture.svg'); background-repeat: repeat; pointer-events: none; opacity: 0.4; z-index: 1; } /* ─── Gradient Overlays for Images ─── */ .img-overlay-bottom::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 58, 64, 0.7) 0%, rgba(0, 58, 64, 0.2) 40%, transparent 70%); pointer-events: none; } .img-overlay-full::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 58, 64, 0.5) 0%, rgba(0, 42, 46, 0.3) 100%); mix-blend-mode: multiply; pointer-events: none; } /* ─── Interactive States ─── */ .btn-primary { transition: transform 0.3s var(--spring-ease), opacity 0.3s var(--smooth-ease), box-shadow 0.3s var(--smooth-ease); } .btn-primary:hover { transform: scale(1.03) translateY(-1px); } .btn-primary:active { transform: scale(0.97); } .btn-primary:focus-visible { outline: 3px solid var(--praia-yellow); outline-offset: 3px; } .card-interactive { transition: transform 0.4s var(--spring-ease), box-shadow 0.4s var(--smooth-ease); } .card-interactive:hover { transform: scale(1.02) translateY(-4px); } .card-interactive:active { transform: scale(0.99); } /* ─── Service icons (praia.html) — balancing por chave para PNGs com áreas vazias internas distintas ─── */ .service-icon-img[data-key="playground"], .service-icon-img[data-key="petFriendly"] { transform: scale(0.82); } .service-icon-img[data-key="accessible"], .service-icon-img[data-key="bar"], .service-icon-img[data-key="wc"] { transform: scale(1.38); } .service-icon-img[data-key="lifeguard"] { transform: scale(1.15); } /* ─── Scroll Reveal ─── */ .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.65s var(--smooth-ease), transform 0.65s var(--smooth-ease); } .reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); } /* ─── Skeleton Loading ─── */ .skeleton { background: linear-gradient( 90deg, #E8DFD0 25%, #F5F0E8 50%, #E8DFD0 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 8px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── App context (Capacitor native) — esconder elementos web-only e gerir safe-areas do iOS/Android. A classe `is-app` é adicionada ao por js/app-context.js quando isApp() === true. ─── */ :where(.is-app) #main-header, :where(.is-app) #mobile-menu, :where(.is-app) #mobile-menu-overlay, :where(.is-app) footer { display: none !important; } /* Page transitions: removidas a pedido do utilizador. Navegação imediata, sem fade/slide. O loader teal com spinner cobre qualquer momento de transição/carregamento, dando a sensação de fluidez sem animações de UI. */ /* Sem header e sem overlay — conteúdo vai edge-to-edge até ao topo do display. A status bar do sistema (notch / dynamic island) flutua transparente sobre o conteúdo. */ :where(.is-app) body { padding-top: 0; /* Body transparente para que o html (teal) apareça nas zonas vazias — evita o sand-50 do site aparecer como "branco". Em páginas full-bleed (mapa, hero), o conteúdo cobre tudo e o teal não se vê. */ background-color: transparent !important; } /* Páginas usam

para dar espaço ao header fixed. Sem header, este padding fica desperdiçado — reset para 0. */ :where(.is-app) main { padding-top: 0 !important; /* Preenche viewport para esconder o teal do html por baixo do bottom-nav. 100dvh respeita keyboard/url-bar dinâmicos do iOS. */ min-height: 100dvh; /* Background sand restaura legibilidade do conteúdo do site web (text teal-800 sobre sand-50). Sem isto, body teal tornaria textos invisíveis em páginas como onde-encontrar (concelho headers com text-praia-teal-800). Em páginas full-bleed (rede.html), o map-main position:fixed cobre tudo e este background não se vê. */ background-color: #FAF8F5; } /* Bottom nav extende safe-area-inset-bottom (gesture indicator do iPhone) em contexto app, igual ao que já fazia em PWA standalone. */ :where(.is-app) .bottom-nav { padding-bottom: 0; } :where(.is-app) .bottom-nav .bottom-nav-inner { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--bnav-h) + env(safe-area-inset-bottom)); } /* Páginas com altura calculada manualmente (rede.html: #map-main, #sidebar) subtraem o header (64px). Em app não há header — usar position: fixed com top:0 e bottom:bottom-nav-height para preencher exactamente entre o topo do ecrã e o início do bottom-nav, sem depender de cálculos de altura que iOS calcula de forma inconsistente. */ html.is-app #map-main { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; width: auto !important; } /* Bottom-nav fica por cima do mapa (z-index 1000 já existente). O FAB de filtros é reposicionado para ficar acima do bottom-nav. */ html.is-app .filter-fab, html.is-app #filter-fab, html.is-app #filter-open-btn { bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom) + 16px) !important; } html.is-app #sidebar { height: calc(100dvh - var(--bnav-h) - env(safe-area-inset-bottom)) !important; } /* ─── Loading overlay app ─── */ /* A geometria base e as transições do loader vivem em