/* ============================================================ Estilos do SITE de demonstração (seções de conteúdo). Mesma linguagem glass do player: vidro escuro, bordas translúcidas, um acento de cor. Não estiliza o player (que injeta o próprio CSS). ============================================================ */ :root { --site-accent: #4dd7e0; --site-accent-ink: #04252a; --site-bg: #0b0e13; --site-text: #eef1f5; --site-muted: rgba(238, 241, 245, 0.65); --site-surface: rgba(255, 255, 255, 0.06); --site-surface-strong: rgba(255, 255, 255, 0.12); --site-border: rgba(255, 255, 255, 0.12); --site-header-bg: rgba(11, 14, 19, 0.72); --site-glow-1: rgba(77, 215, 224, 0.12); --site-glow-2: rgba(160, 90, 255, 0.10); --site-radius: 18px; } /* tema claro — ativado com data-theme="light" no (toggle no header) */ :root[data-theme="light"] { --site-accent: #0aa6b4; --site-accent-ink: #ffffff; --site-bg: #eef1f6; --site-text: #141821; --site-muted: rgba(20, 24, 33, 0.65); --site-surface: rgba(20, 24, 33, 0.05); --site-surface-strong: rgba(20, 24, 33, 0.10); --site-border: rgba(20, 24, 33, 0.14); --site-header-bg: rgba(238, 241, 246, 0.8); --site-glow-1: rgba(10, 166, 180, 0.14); --site-glow-2: rgba(140, 90, 255, 0.10); } * { box-sizing: border-box; } /* barra de rolagem global, coerente com o tema (claro e escuro) */ html { scrollbar-width: thin; scrollbar-color: var(--site-surface-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--site-surface-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--site-muted); } body { margin: 0; min-height: 100vh; font-family: Montserrat, system-ui, sans-serif; background: radial-gradient(60% 40% at 15% 0%, var(--site-glow-1), transparent 60%), radial-gradient(50% 35% at 90% 10%, var(--site-glow-2), transparent 60%), var(--site-bg); color: var(--site-text); transition: background-color 0.3s ease, color 0.3s ease; } img { max-width: 100%; display: block; } .site-container { max-width: 1120px; margin: 0 auto; padding: 0 24px 180px; /* respiro para o dock do player */ } /* no celular o dock é mais baixo (e ainda pode ser recolhido): menos espaço morto no fim da página */ @media (max-width: 991px) { .site-container { padding-bottom: 130px; } } /* --- header --- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); background: var(--site-header-bg); border-bottom: 1px solid var(--site-border); } .theme-toggle { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .theme-toggle:hover { background: var(--site-surface-strong); } /* extras no topo: chip de clima + botão de doação (à la portal) */ .header-extras { display: flex; align-items: center; gap: 10px; } .header-weather { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); text-decoration: none; transition: background 0.2s ease; } .header-weather:hover { background: var(--site-surface-strong); } .header-weather-icon { font-size: 18px; line-height: 1; } .header-weather-info { display: flex; flex-direction: column; line-height: 1.15; } .header-weather-city { font-size: 11px; font-weight: 600; color: var(--site-muted); } .header-weather-temp { font-size: 13px; font-weight: 700; } .header-donate { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--site-accent-ink); background: linear-gradient(135deg, var(--site-accent), var(--site-accent-2, #2ba7b0)); transition: filter 0.2s ease, transform 0.15s ease; } .header-donate:hover { filter: brightness(1.08); transform: translateY(-1px); } .header-donate-icon { display: flex; width: 14px; height: 14px; } .header-donate-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: none; } /* botão "Instalar app" (PWA) — injetado pelo pwa.js quando o navegador oferece a instalação. No topo é só o ícone (o header já está cheio); o botão com texto fica no card "Como nos ouvir". */ .header-install { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .header-install:hover { background: var(--site-surface-strong); transform: translateY(-1px); } .header-install svg, .listen-install-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .listen-install { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 10px; padding: 11px 20px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--site-accent), var(--site-accent-2, #2ba7b0)); color: var(--site-accent-ink); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease; } .listen-install:hover { filter: brightness(1.08); transform: translateY(-1px); } .listen-install-icon { display: flex; } /* aviso de versão nova do site (service worker atualizado) */ .pwa-toast { position: fixed; left: 50%; bottom: 150px; /* acima do dock do player */ transform: translateX(-50%); z-index: 190; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 12px 12px 18px; border-radius: 999px; background: rgba(13, 17, 23, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; animation: pwa-toast-in 0.35s ease both; } @keyframes pwa-toast-in { from { transform: translate(-50%, 16px); opacity: 0; } } .pwa-toast-text { flex: 1; min-width: 0; } .pwa-toast-button { flex: none; padding: 8px 16px; border: none; border-radius: 999px; background: var(--site-accent); color: var(--site-accent-ink); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .pwa-toast-button:disabled { opacity: 0.6; cursor: default; } .pwa-toast-close { flex: none; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 12px; cursor: pointer; } .pwa-toast-close:hover { background: rgba(255, 255, 255, 0.22); } .site-header-inner { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site-brand { font-weight: 800; font-size: 18px; letter-spacing: 0.04em; color: var(--site-text); text-decoration: none; display: flex; align-items: center; gap: 10px; } .site-brand-logo { height: 38px; width: auto; display: block; } .site-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 10px #ff5a5f; animation: site-live 1.6s ease-in-out infinite; } @keyframes site-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .site-nav { display: flex; gap: 2px; flex-wrap: wrap; } /* espaçamento enxuto: o header tem no máximo 1120px e precisa caber menu + clima + doação + instalar + tema numa linha só */ .site-nav a { color: var(--site-muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; } .site-nav a:hover { background: var(--site-surface-strong); color: var(--site-text); } /* botão hambúrguer — aparece quando o menu não cabe mais na linha */ .nav-toggle { display: none; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); cursor: pointer; align-items: center; justify-content: center; transition: background 0.2s ease; } .nav-toggle:hover { background: var(--site-surface-strong); } .nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (max-width: 700px) { /* no mobile o header fica apertado: o clima some, o botão de doar vira só o coração (o rótulo é escondido) */ .header-weather { display: none; } /* sem o rótulo, o botão de doar vira uma bolinha do mesmo tamanho dos outros (clima, instalar, tema, menu) — antes ficava uma pílula estreita, fora do padrão do header */ .header-donate { width: 38px; height: 38px; padding: 0; gap: 0; border-radius: 50%; flex: none; } .header-donate span:not(.header-donate-icon) { display: none; } .header-donate-icon { width: 16px; height: 16px; } } /* Abaixo de ~1150px o menu inteiro não cabe mais ao lado dos extras (ele quebrava em duas linhas e o header dobrava de altura): vira o painel colapsável do hambúrguer. */ @media (max-width: 1150px) { .nav-toggle { display: flex; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 8px 16px 14px; /* fundo sólido: o painel cobre o conteúdo da página ao abrir */ background: var(--site-bg); border-bottom: 1px solid var(--site-border); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); } .site-header.nav-open .site-nav { display: flex; } .site-nav a { padding: 12px 14px; font-size: 14px; border-radius: 12px; } } /* --- hero --- */ .hero { padding: 88px 0 64px; max-width: 720px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: var(--site-surface); border: 1px solid var(--site-border); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--site-accent); } .hero h1 { margin: 20px 0 12px; font-size: clamp(34px, 6vw, 56px); line-height: 1.1; letter-spacing: -0.01em; } .hero p { margin: 0 0 28px; font-size: 17px; line-height: 1.7; color: var(--site-muted); } .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--site-accent), var(--site-accent-2, #2ba7b0)); color: var(--site-accent-ink); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: 0 14px 34px color-mix(in srgb, var(--site-accent) 35%, transparent); transition: transform 0.15s ease, box-shadow 0.2s ease; } .hero-cta:hover { transform: scale(1.04); box-shadow: 0 16px 40px color-mix(in srgb, var(--site-accent) 45%, transparent); } /* --- hero slider --- */ .hero-slider { position: relative; padding: 72px 0 48px; } .hero-slides { display: grid; } .hero-slide { grid-area: 1 / 1; max-width: 680px; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; } .hero-slide h1 { margin: 20px 0 12px; font-size: clamp(32px, 5.5vw, 52px); line-height: 1.1; letter-spacing: -0.01em; } .hero-slide p { margin: 0 0 28px; font-size: 17px; line-height: 1.7; color: var(--site-muted); max-width: 560px; } /* camada própria das imagens (irmã dos slides): fica fora do transform dos slides — dentro deles o transform virava containing block da imagem absoluta e ela "pulava" de posição ao fim da transição */ .hero-slide-image { position: absolute; top: 48px; right: 0; bottom: 48px; width: 40%; height: auto; object-fit: cover; border-radius: 24px; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: 0; transition: opacity 0.5s ease; } .hero-slide-image.is-active { opacity: 0.9; } @media (max-width: 980px) { .hero-images { display: none; } } .hero-dots { display: flex; gap: 8px; margin-top: 32px; } .hero-dot { width: 26px; height: 5px; padding: 0; border: none; border-radius: 3px; background: var(--site-surface-strong); cursor: pointer; transition: background 0.2s ease, width 0.2s ease; } .hero-dot:hover { background: var(--site-muted); } .hero-dot.is-active { width: 42px; background: var(--site-accent); } /* --- seções --- */ .site-section { margin-top: 72px; scroll-margin-top: 84px; /* âncoras não ficam escondidas sob o header fixo */ } .site-section-title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; font-size: 24px; font-weight: 800; } .site-section-title::after { content: ""; flex: 1; height: 1px; background: var(--site-border); } /* --- notícias --- */ .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .news-card { display: flex; flex-direction: column; border-radius: var(--site-radius); overflow: hidden; background: var(--site-surface); border: 1px solid var(--site-border); text-decoration: none; color: inherit; transition: transform 0.15s ease, border-color 0.2s ease; } .news-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.25); } .news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .news-card-body { padding: 16px 18px 20px; } .news-card-date { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--site-accent); } .news-card h3 { margin: 8px 0 8px; font-size: 17px; line-height: 1.35; } .news-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--site-muted); } .news-card-more { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 800; color: var(--site-accent); } /* modal de notícia (conteúdo completo) */ .news-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 8, 12, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s ease; } .news-modal.is-open { opacity: 1; } .news-modal-card { position: relative; width: min(680px, 100%); max-height: 85vh; overflow-y: auto; border-radius: 22px; background: var(--site-bg); border: 1px solid var(--site-border); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); transform: translateY(16px); transition: transform 0.25s ease; } .news-modal.is-open .news-modal-card { transform: none; } /* scrollbar discreta, coerente com o vidro */ .news-modal-card { scrollbar-width: thin; scrollbar-color: var(--site-surface-strong) transparent; } .news-modal-card::-webkit-scrollbar { width: 8px; } .news-modal-card::-webkit-scrollbar-track { background: transparent; } .news-modal-card::-webkit-scrollbar-thumb { background: var(--site-surface-strong); border-radius: 4px; } .news-modal-card::-webkit-scrollbar-thumb:hover { background: var(--site-muted); } .news-modal-card > img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; } .news-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(11, 14, 19, 0.65); color: #fff; font-size: 15px; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s ease; } .news-modal-close:hover { background: rgba(11, 14, 19, 0.9); } .news-modal-body { padding: 24px 28px 32px; } .news-modal-body h2 { margin: 10px 0 16px; font-size: 24px; line-height: 1.3; } .news-modal-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; color: var(--site-muted); } body.news-modal-open { overflow: hidden; } /* --- vídeos (click-to-play, leve) --- */ .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .video-card { border-radius: var(--site-radius); overflow: hidden; border: 1px solid var(--site-border); background: var(--site-surface); } .video-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: none; cursor: pointer; background: #000; display: block; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.2s ease, transform 0.3s ease; } .video-thumb:hover img { opacity: 1; transform: scale(1.03); } .video-thumb::after { content: ""; position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: url('data:image/svg+xml;utf8,') center / 26px no-repeat, rgba(11, 14, 19, 0.75); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); transition: transform 0.15s ease; } .video-thumb:hover::after { transform: scale(1.08); } .video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } .video-card-title { padding: 12px 16px 14px; font-size: 14px; font-weight: 700; } /* --- modo vídeo: mini-player flutuante (sobrevive à navegação) --- */ .video-dock { position: fixed; right: 16px; bottom: 122px; /* acima do dock do player */ z-index: 90; width: min(400px, calc(100vw - 32px)); border-radius: 16px; overflow: hidden; background: rgba(13, 17, 23, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); animation: video-dock-in 0.35s ease both; } @keyframes video-dock-in { from { transform: translateY(16px); opacity: 0; } } .video-dock-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: #fff; } .video-dock-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-dock-close { flex: none; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 12px; cursor: pointer; transition: background 0.2s ease; } .video-dock-close:hover { background: rgba(255, 255, 255, 0.22); } .video-dock-body iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; } /* --- galeria de fotos --- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .gallery-item { position: relative; display: block; padding: 0; border: 1px solid var(--site-border); border-radius: 14px; overflow: hidden; background: var(--site-surface); cursor: zoom-in; transition: transform 0.15s ease, border-color 0.2s ease; } .gallery-item:hover { transform: translateY(-3px); border-color: var(--site-accent); } .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.35s ease, opacity 0.2s ease; } .gallery-item:hover img { transform: scale(1.05); } /* legenda sobre a foto, com degradê para o texto ficar legível */ .gallery-caption { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; font-size: 12.5px; font-weight: 700; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(5, 8, 12, 0.85)); } /* --- lightbox da galeria --- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: rgba(5, 8, 12, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.25s ease; } .lightbox.is-open { opacity: 1; } .lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(1000px, 100%); transform: scale(0.97); transition: transform 0.25s ease; } .lightbox.is-open .lightbox-figure { transform: none; } .lightbox-figure img { max-width: 100%; max-height: 76vh; border-radius: 16px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); } .lightbox-caption { font-size: 14px; font-weight: 700; color: #fff; text-align: center; } .lightbox-counter { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); } .lightbox-close, .lightbox-nav { flex: none; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; border-radius: 50%; transition: background 0.2s ease; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); } .lightbox-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; font-size: 16px; } .lightbox-nav { width: 46px; height: 46px; font-size: 26px; line-height: 1; } body.lightbox-open { overflow: hidden; } @media (max-width: 700px) { .lightbox { padding: 16px; } /* as setas saem das laterais e flutuam sobre a foto */ .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); } .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } } /* --- programação --- */ .schedule-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .schedule-tab { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .schedule-tab:hover { background: var(--site-surface-strong); } .schedule-tab.is-active { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-ink); } .schedule-list { display: grid; gap: 10px; } .schedule-item { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 14px; background: var(--site-surface); border: 1px solid var(--site-border); } .schedule-time { flex: none; min-width: 64px; font-weight: 800; color: var(--site-accent); font-variant-numeric: tabular-nums; } .schedule-name { font-weight: 700; } .schedule-host { margin-left: auto; font-size: 13px; color: var(--site-muted); text-align: right; } .schedule-empty { padding: 22px; text-align: center; color: var(--site-muted); background: var(--site-surface); border: 1px dashed var(--site-border); border-radius: 14px; } /* --- equipe --- */ /* Carrossel: track rola na horizontal (scroll-snap), setas nas pontas. As setas só aparecem quando o conteúdo transborda (has-overflow), e ficam desabilitadas na ponta em que já não há mais o que rolar. */ .team-carousel { position: relative; display: flex; align-items: center; gap: 10px; } .team-arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; display: none; } .team-carousel.has-overflow .team-arrow { display: block; } .team-arrow:hover:not(:disabled) { background: var(--site-surface-strong); } .team-arrow:disabled { opacity: 0.35; cursor: default; } .team-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; flex: 1; min-width: 0; padding-bottom: 4px; } .team-track::-webkit-scrollbar { height: 6px; } .team-card { flex: none; width: 200px; scroll-snap-align: start; text-align: center; padding: 24px 16px; border-radius: var(--site-radius); background: var(--site-surface); border: 1px solid var(--site-border); } .team-card img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 2px solid rgba(255, 255, 255, 0.25); } .team-card h3 { margin: 0 0 4px; font-size: 16px; } .team-card span { font-size: 12.5px; color: var(--site-muted); } /* --- sobre a rádio (história + contato) --- */ .about-grid { display: grid; grid-template-columns: 1.6fr 1fr; /* Linha 1 = altura do texto; linha 2 = TODA a sobra. Sem isso, a coluna da direita (mais alta) distribuía a sobra entre as duas linhas e o vão aparecia embaixo da história, com o mapa terminando antes dos cards. Agora quem cresce é só o mapa, e as duas colunas fecham na mesma linha. */ grid-template-rows: auto 1fr; gap: 24px; align-items: stretch; } .about-history p { margin: 0 0 14px; line-height: 1.8; color: var(--site-muted); } .about-history p:last-child { margin-bottom: 0; } /* coluna da direita: "como nos ouvir" em cima, contato embaixo */ .about-side { display: grid; gap: 24px; align-content: start; } .contact-card, .listen-card { border-radius: var(--site-radius); background: var(--site-surface); border: 1px solid var(--site-border); padding: 22px; } .contact-card h3, .listen-card h3 { margin: 0 0 12px; font-size: 16px; } /* --- como nos ouvir (apps + Alexa) --- */ .listen-text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.7; color: var(--site-muted); } /* AÇÕES DO CARD "COMO NOS OUVIR" As três (loja, Alexa, instalar) eram blocos com a largura do próprio conteúdo, empilhados à esquerda — a coluna ficava serrilhada. Agora cada uma ocupa a largura toda do card, com o conteúdo centralizado e o mesmo ritmo vertical: elas se leem como um conjunto, não como três sobras. */ .listen-stores { display: grid; /* duas lojas dividem a linha; uma só ocupa a largura inteira */ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; } .listen-stores .store-badge { justify-content: center; } .listen-stores .store-badge img { height: 44px; } .listen-alexa-label { display: block; margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--site-muted); } .listen-alexa { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--site-border); background: var(--site-surface-strong); color: var(--site-text); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: border-color 0.2s ease, transform 0.15s ease; } a.listen-alexa:hover { border-color: #00caff; transform: translateY(-1px); } .listen-alexa-icon { display: flex; width: 22px; height: 22px; flex: none; color: #00caff; } .listen-alexa-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; } .contact-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--site-muted); font-size: 13.5px; text-decoration: none; transition: color 0.2s ease; } a.contact-item:hover { color: var(--site-text); } .contact-icon { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--site-border); background: var(--site-surface); } .contact-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* mapa: ocupa as duas colunas do grid, abaixo da história/contato */ /* O mapa desce para a COLUNA DA ESQUERDA, embaixo da história, e a coluna da direita passa a atravessar as duas linhas. Ele ocupava a largura toda numa terceira linha, e como a história costuma ser curta e a lateral é alta (ouvir + contato), sobrava um retângulo vazio embaixo do texto — agora é o mapa que preenche esse espaço. */ .about-history { grid-column: 1; grid-row: 1; align-self: start; } .about-side { grid-column: 2; grid-row: 1 / span 2; } .map-card { grid-column: 1; grid-row: 2; /* o mapa é o elemento elástico da seção: ele estica até alcançar o pé da coluna de cards (mínimo de 260px quando a coluna é curta) */ min-height: 260px; border-radius: var(--site-radius); border: 1px solid var(--site-border); overflow: hidden; } .map-card iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; } @media (max-width: 800px) { /* coluna única: volta ao fluxo natural (história → ouvir/contato → mapa). O grid-template-rows precisa cair junto — o "1fr" da linha 2 esticaria o card de contato no empilhamento. */ .about-grid { grid-template-columns: 1fr; grid-template-rows: none; } .about-history, .about-side, .map-card { grid-column: auto; grid-row: auto; } .map-card { min-height: 0; } } /* --- footer --- */ .site-footer { margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--site-border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--site-muted); } .site-footer a { color: var(--site-accent); font-weight: 700; } /* redes sociais (saíram do player) */ .footer-social { display: flex; gap: 10px; flex-wrap: wrap; } .site-social-item { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); transition: background 0.2s ease, transform 0.15s ease; } .site-social-item:hover { background: var(--site-surface-strong); transform: translateY(-2px); } .site-social-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* badges oficiais das lojas (rodapé) — SVG branco de assets/app/ */ .footer-apps { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .store-badge { display: inline-flex; transition: transform 0.15s ease, opacity 0.2s ease; } .store-badge:hover { transform: translateY(-1px); opacity: 0.85; } .store-badge img { height: 40px; width: auto; display: block; } /* o SVG é branco (feito para fundo escuro); no tema claro, inverte para preto e assim mantém contraste sobre o rodapé claro */ :root[data-theme="light"] .store-badge img { filter: invert(1); }