/* Variáveis CSS do Figma */ :root { /* Cores principais */ --color-bg-primary: #f5f5f7; --color-bg-secondary: #ffffff; --color-text-primary: #000000; --color-text-secondary: #888888; --color-text-tertiary: #a4a4a4; --color-text-disabled: #d7d7d7; --color-border: #a4a4a4; /* Gradientes especiais do Figma */ --gradient-purple: linear-gradient(180deg, #670054 0%, #a400a2 100%); --gradient-blue: linear-gradient(229.8598064887252deg, #024c9a 8.4496%, #f0cc00 91.55%); --gradient-green: linear-gradient(221.13640550743565deg, #a7eb7e 7.7497%, #fe9454 92.25%); /* Bordas e raios */ --radius-sm: 8px; --radius-md: 13px; --radius-lg: 18px; --radius-xl: 27px; --radius-full: 50%; /* Sombras */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2); /* Espaçamentos */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; /* Tipografia */ /* Prefer SF Pro Display when available locally (or when you add the font files to assets/fonts/). Otherwise fall back to Poppins and system fonts. */ --font-primary: 'SF Pro Display', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-secondary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; /* Breakpoints */ --bp-small: 480px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1280px; } /* Fonte local: Korataki */ @font-face { font-family: 'Korataki'; src: url('../fonts/koratakieb-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Korataki'; src: url('../fonts/koratakieb-regular.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* Fontes via CDN: SF Pro Display e Korataki são carregadas no */ /* Reset básico */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); color: var(--color-text-primary); background-color: var(--color-bg-primary); line-height: 1.5; font-size: clamp(14px, 1vw, 16px); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* Navbar */ .navbar { position: fixed; top: 0; left: 0; right: 0; /* Start transparent over the hero */ background: transparent; backdrop-filter: none; height: 67px; z-index: 1000; transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; overflow: visible; /* Permitir que dropdowns apareçam acima */ } .navbar.scrolled { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,0.25); } .navbar-inner { max-width: 1860px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 var(--spacing-lg); height: 100%; gap: 40px; } .navbar-logo img { width: 64px; height: 64px; } .navbar-menu { display: flex; gap: 50px; align-items: center; } .navbar-menu a { color: var(--Color-FALLBACK, var(--color-text-primary)); font-size: 12px; font-weight: 500; transition: color 200ms ease; } .navbar-menu a:hover { color: var(--color-text-primary); } .navbar-language { display: flex; align-items: center; position: relative; z-index: 1001; } .navbar-language select { padding: 6px 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; background-color: transparent; color: var(--color-text-primary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 200ms ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; z-index: 1002; } .navbar-language select:hover { border-color: var(--color-text-primary); } .navbar.scrolled .navbar-language select { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); background-color: rgba(0, 0, 0, 0.5); } .navbar.scrolled .navbar-language select:hover { border-color: #ffffff; background-color: rgba(0, 0, 0, 0.7); } .navbar.scrolled .navbar-language select:focus { outline: none; border-color: #ffffff; background-color: rgba(0, 0, 0, 0.9); } /* Garantir que o dropdown apareça acima de tudo */ .navbar-language select option { background-color: rgba(0, 0, 0, 0.95); color: #ffffff; padding: 8px 12px; } .navbar.scrolled .navbar-menu a, .navbar.scrolled .navbar-login, .navbar.scrolled .navbar-menu li a { color: #ffffff !important; } .navbar:not(.scrolled) .navbar-menu a, .navbar:not(.scrolled) .navbar-login { color: var(--color-text-primary); } .navbar-login { color: var(--color-text-secondary) !important; } .mobile-menu-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 8px; } .mobile-menu-toggle span { width: 30px; height: 3px; background: var(--color-text-primary); border-radius: 2px; transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; } .navbar.scrolled .mobile-menu-toggle span { background: #ffffff; } /* Páginas sem hero: navbar preta e fontes brancas por padrão (desktop) */ body:not(:has(.hero-section)) .navbar { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); } body:not(:has(.hero-section)) .navbar-menu a, body:not(:has(.hero-section)) .navbar-login, body:not(:has(.hero-section)) .navbar-menu li a { color: #ffffff !important; } body:not(:has(.hero-section)) .navbar-language select { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); background-color: rgba(0, 0, 0, 0.5); } body:not(:has(.hero-section)) .navbar-language select:hover { border-color: #ffffff; background-color: rgba(0, 0, 0, 0.7); } body:not(:has(.hero-section)) .mobile-menu-toggle span { background: #ffffff; } /* Hero Section */ .hero-section { position: relative; margin-top: 67px; min-height: 850px; overflow: hidden; } .hero-background { position: absolute; display: flex; align-items: center; justify-content: center; inset: 0; /* Keep background/videos behind the content but not pushed behind the page background (avoid negative z-index which can hide the element in some browsers). */ z-index: 5; /* Let pointer events pass through the background container so hover/click on foreground elements work reliably. */ } /* Vídeos de background sobrepostos */ .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Background videos shouldn't capture pointer events so hover on top elements still works */ .hero-background video { pointer-events: none; } .hero-video-top { z-index: 1; opacity: 0.2; mix-blend-mode: screen; } .hero-video-bottom { z-index: 0; opacity: 0.2; } .hero-content { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--spacing-2xl); padding-top: 0; padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); padding-bottom: 0; max-width: 1860px; height: 100%; /* ensure hero content sits above background/videos and receives pointer events */ position: relative; z-index: 2; } .hero-text { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 10; } .hero-title { font-weight: 900; line-height: 1.2; } .hero-title .appradio { display: block; font-size: 24px; font-weight: 300; width: 100%; text-align: center; } .hero-title-content{ height: 100px; } .hero-title .pro { font-family: 'Korataki', sans-serif; font-weight: 400; font-size: clamp(71px, 7vw, 166px); background: linear-gradient(90deg, #969191 33.654%, #000000 97.981%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-title .version { font-size: 61.162px; color: var(--color-text-tertiary); } .outline-border-black { display: flex; align-items: center; background: linear-gradient(200deg, rgba(0, 0, 0, 1) 0%, rgba(112, 112, 112, 1) 50%, rgba(0, 0, 0, 1) 100%); border-radius: 32px; padding: 4px; } .outline-border-white { display: flex; justify-content: center; align-items: center; border: 2px solid #000; background-color: #fff; border-radius: 32px; padding: 4px; } .hero-buttons { display: flex; gap: var(--spacing-md); } .btn-primary, .btn-secondary, .btn-white { padding: 13px 40px; border-radius: var(--radius-xl); font-size: 22.273px; font-weight: 500; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 1; } .btn-primary { color: #ffffff; border: 0.25px solid #ffffff; } .btn-primary:hover { background: rgba(255, 255, 255, 0.1); } .btn-secondary { color: var(--color-text-primary); position: relative; overflow: hidden; } .btn-secondary::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%); pointer-events: none; z-index: 0; border-radius: var(--radius-xl); transition: background 0.4s ease, opacity 0.4s ease; } .btn-secondary > * { position: relative; z-index: 1; } .btn-secondary:hover { transition: all 0.3s ease; opacity: 0.9; } .btn-secondary:hover::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%); transition: all 0.3s ease; } .hero-social { display: flex; gap: 20px; position: absolute; bottom: 20px; left: 2%; } .social-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: transform 0.3s ease; border-radius: 50%; padding: 3px; } .social-link:hover { transform: scale(1.3); transition: transform 0.3s ease; } .social-link img { width: 100%; height: 100%; object-fit: contain; filter: brightness(1.2); } .hero-device { position: relative; } .hero-iphone { width: 100%; max-width: 534px; height: auto; } /* Music Player */ .music-player { position: fixed; right: 43px; top: 111px; background: #ffffff; border: 1px solid #d1d0d0; border-radius: 13px; padding: 28px 25px; z-index: 9999; } .music-player-content { display: flex; flex-direction: column; gap: 14px; } .play-music{ display: flex; flex-direction: row; align-items: center; gap: 20px; } .play-button{ background: none; border: none; cursor: pointer; transition: all 0.2s ease; } .play-button:hover { transform: scale(1.05); } .music-player.playing .play-button { background: linear-gradient(135deg, #024c9a, #f0cc00); border-radius: 50%; padding: 8px; } .music-player.playing .play-button img { filter: brightness(0) invert(1); } .music-player.loading .play-button { position: relative; pointer-events: none; } .music-player.loading .play-button img { opacity: 0; } .music-player.loading .play-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid rgba(2, 76, 154, 0.2); border-top-color: #024c9a; border-radius: 50%; animation: spinner 0.8s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } .music-label { font-size: 15px; color: var(--color-text-secondary); font-weight: 400; } .music-title { font-size: 19.102px; font-weight: 500; color: var(--color-text-primary); word-break: break-word; overflow-wrap: break-word; max-height: 60px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .music-artist { font-size: 11.573px; font-weight: 700; color: var(--color-text-primary); } .music-station { font-size: 10.322px; color: var(--color-text-secondary); } .music-coverart { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; margin-top: 10px; } /* Device Section */ .device-section { display: grid; /* Forçar layout 2 colunas em telas maiores (2x2 para os primeiros 4 cards) e deixar o último card ocupar a linha inteira abaixo. */ grid-template-columns: repeat(2, 1fr); gap: 20px; padding: var(--spacing-2xl) 0; width: 100%; margin: 0 auto; align-items: start; background-color: #D7D7D7; overflow: hidden; } /* Disposição sobreposta dos dispositivos (celular + tablet) */ .mobile-devices { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; /* garante área para posicionar sobreposição */ } .mobile-devices .device { position: absolute; display: block; height: auto; transform-origin: center center; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25)); transition: transform 220ms ease; } .mobile-devices .tablet { right: 6%; top: 0; width: 60%; z-index: 1; } .mobile-devices .phone { left: 12%; bottom: -6%; width: 34%; z-index: 2; } @media (max-width: 900px) { .mobile-devices { max-width: 680px; aspect-ratio: 16/10; } .mobile-devices .tablet { width: 66%; right: 2%; transform: rotate(10deg); } .mobile-devices .phone { width: 38%; left: 4%; bottom: -2%; transform: rotate(-10deg); } } @media (max-width: 600px) { .mobile-devices { max-width: 520px; aspect-ratio: 4/3; } .mobile-devices .tablet { width: 72%; right: 0; transform: rotate(8deg); } .mobile-devices .phone { width: 44%; left: 2%; bottom: 0; transform: rotate(-8deg); } } /* Último card ocupa toda a largura em desktop (linha separada) */ .device-section .device-card:last-child { grid-column: 1 / -1; height: auto; } .device-card { background: var(--color-bg-primary); padding: 66px var(--spacing-lg); text-align: center; min-height: 793px; height: 860px; position: relative; overflow: hidden; transition: transform 0.3s ease; } .device-card:hover{ transform: scale(1.05); transition: transform 0.3s ease; } .device-card img { max-width: 100%; height: auto; margin: 0 auto; } .device-card h2 { font-size: clamp(40px, 4vw, 63.119px); font-weight: 600; margin-bottom: var(--spacing-xl); } .gradient-text { font-weight: 700; background: linear-gradient(90deg, #969191 33.654%, #5c5c5c 59.135%, #969191 87.981%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Content Section */ .content-section { padding: var(--spacing-2xl) var(--spacing-lg); max-width: 1860px; margin: 0 auto; } .section-title { font-size: 37.015px; font-weight: 500; margin-bottom: var(--spacing-xl); color: var(--color-text-primary); } .gray-text { color: var(--color-text-secondary); } .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(341px, 1fr)); gap: var(--spacing-lg); } .content-card { background: var(--color-bg-secondary); border-radius: 6.509px; overflow: hidden; position: relative; height: 200px; } .content-card img { width: 100%; height: 100%; object-fit: cover; } .content-card h3 { position: absolute; top: 60px; left: 19px; max-width: 182px; font-size: 27.518px; font-weight: 700; color: #ffffff; } .content-card p { position: absolute; bottom: 20px; left: 19px; font-size: 11.403px; font-weight: 200; color: #ffffff; max-width: 182px; } /* Radio Grid Section */ .radio-grid-section { padding: var(--spacing-2xl) var(--spacing-lg); max-width: 1860px; margin: 0 auto; } .radio-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-top: var(--spacing-xl); } .radio-card { position: relative; border: 1px solid #a4a4a4; border-radius: 18px; min-height: 254px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; padding: 0; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .radio-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .radio-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); z-index: 1; pointer-events: none; } .radio-card.has-dropdown-open { overflow: visible; z-index: 20; } .radio-play-btn { position: absolute; right: 49px; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; background: #ffffff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 2; padding: 0; line-height: 1; transform-origin: center center; backface-visibility: hidden; will-change: transform; } .radio-play-btn:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .radio-play-btn img { width: 36px; height: 36px; object-fit: contain; display: block; pointer-events: none; transform: translateZ(0); } .radio-info { position: absolute; bottom: 0; left: 28px; z-index: 2; } .radio-name { position: absolute; bottom: 50px; width: 260px; left: 0; font-size: 22px; font-weight: 500; color: #ffffff; line-height: 1.2; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); margin: 0; } .radio-location { position: absolute; width: 260px; bottom: 20px; left: 0; font-size: 16px; font-weight: 400; color: #d9d9d9; line-height: 1.2; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); margin: 0; } /* Services Section */ .services-section { padding: var(--spacing-2xl) var(--spacing-lg); max-width: 1860px; margin: var(--spacing-2xl) auto 0; } .services-grid{ display: flex; flex-direction: row; justify-content: center; gap: var(--spacing-lg); } .services-grid-left { display: flex; flex-direction: column; gap: var(--spacing-lg); } .service-card.bottom-left { display: flex; flex-direction: row; gap: 20px; } .service-card { background: var(--color-bg-secondary); border-radius: 22px; overflow: hidden; position: relative; min-height: 575px; } .service-card.large{ width: 100%; } .service-card.small{ width: 50%; } .service-card img { width: 100%; height: 100%; object-fit: cover; } .service-content, .service-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--spacing-lg); /* background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); */ color: #ffffff; } .service-content.monetize{ height: 100%; color: #000; p{ font-size: 20px; } h3{ font-size: 24px; } a{ display: flex; align-items: center; justify-content: center; } } .monetize-top-button{ border: solid 2px #FFBB00; padding: 10px 20px; border-radius: 5px; background: transparent; color: #FFBB00; font-weight: bold; text-decoration: none; transition: all 0.3s ease; } .monetize-top-button:hover{ background: #FFBB00; color: #ffffff; } .app-section { padding: var(--spacing-2xl) var(--spacing-lg); max-width: 1860px; margin: 0 auto; display: flex; flex-direction: row; text-align: center; gap: 40px; border-radius: 16px; } .app-section-iphone{ display: flex; flex-direction: row; align-items: center; gap: 60px; } .right-elementos{ display: flex; flex-direction: column; gap: 80px; } .elemento{ display: flex; flex-direction: row; align-items: center; gap: 10px; } .elemento-icon{ display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: #D9D9D9; border-radius: 50%; padding: 10px; } .elemento-icon svg{ width: 24px; height: 24px; } .elemento p{ color: #000; font-style: normal; font-weight: 500; line-height: normal; } .app-section-content { display: flex; flex-direction: column; align-items: center; gap: 20px; } .app-section-content-left{ display: flex; flex-direction: column; gap: 70px; } .app-section-content-right{ display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .app-section-title.right{ font-size: 28px; font-weight: 500; width: 80%; } .app-section-title { font-family: var(--font-secondary); font-size: 32px; font-weight: 700; color: var(--color-text-primary); margin: 0; max-width: 631px; } .app-section-description { font-family: var(--font-secondary); font-size: 18px; font-weight: 400; color: var(--color-text-primary); margin: 0; max-width: 611px; } .service-content h3 { font-size: 40px; font-weight: 700; margin-bottom: var(--spacing-sm); width: 450px; } .service-content p { font-size: 25.882px; margin-bottom: var(--spacing-md); width: 450px; } .service-overlay p{ font-size: 20px; } .service-overlay h3{ font-size: 28px; } .btn-white { background: #ffffff; color: var(--color-text-primary); transition: all 0.3s ease; } .btn-white:hover{ background-color: #000; color: #ffffff; transition: all 0.3s ease; } .btn-know-more { position: absolute; bottom: 30px; right: 30px; background: #fff; width: 70px; height: 70px; border: none; border-radius: 50%; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; } .btn-know-more svg{ width: 48px; height: 48px; color: #000; transition: all 0.3s ease; } .btn-know-more:hover{ background: var(--color-text-primary); transition: all 0.3s ease; svg{ color: #fff; } } .service-card.monetize { background: linear-gradient(135deg, #a7eb7e 0%, #fe9454 100%); } /* Footer */ .footer { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-xl); margin: var(--spacing-2xl) var(--spacing-lg) 0; border-top: 1px solid var(--color-border); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 1860px; margin: 0 auto; padding-bottom: var(--spacing-xl); } .footer-section h3 { font-size: 20.746px; font-weight: 500; margin-bottom: var(--spacing-md); color: var(--color-text-primary); } .footer-section ul { display: flex; flex-direction: column; gap: var(--spacing-sm); } .footer-section a { font-size: 16.044px; color: rgba(0, 0, 0, 0.72); transition: color 0.3s ease; } .footer-section a:hover { color: var(--color-text-primary); } .smart-tv{ display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; } .footer-social-networks{ display: flex; gap: 10px; transition: all 0.3s ease; } .footer-social-networks .social-link{ transition: transform 0.3s ease; } .footer-social { display: flex; flex-direction: column; gap: var(--spacing-lg); p{ color: var(--color-text-secondary); font-size: 15.62px; } } .social-links { display: flex; gap: var(--spacing-md); } .btn-back-top { height: 60px; width: 230px; border: 1.238px solid var(--color-border); border-radius: 37.968px; background: transparent; color: var(--color-text-primary); font-size: 27.017px; cursor: pointer; transition: all 0.3s ease; } .btn-back-top:hover { background: var(--color-text-primary); color: #ffffff; } /* Footer simples para páginas específicas */ .footer-simple { background-color: #ffffff; padding: 2rem 1.5rem; border-top: 1px solid #E0E0E0; } .footer-simple-content { max-width: 1280px; margin: 0 auto; text-align: center; font-size: 14px; color: #999999; } .footer-bottom { max-width: 1860px; margin: var(--spacing-lg) auto 0; text-align: center; } /* Disclaimer */ .disclaimer { max-width: 1860px; margin: var(--spacing-2xl) auto; padding: 0 var(--spacing-lg); } .disclaimer p { font-size: 23.355px; color: var(--color-text-secondary); margin-bottom: var(--spacing-md); text-align: justify; } .disclaimer ol { margin-left: var(--spacing-lg); } .disclaimer li { font-size: 23.355px; color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); text-align: justify; } /* Responsivo */ @media (max-width: 1280px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .device-section { grid-template-columns: 1fr; } .radio-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: 1fr; } .service-card.large { grid-column: 1; } .hero-social{ gap: 5px !important; } } @media (max-width: 1024px) { .navbar-inner{ justify-content: space-between; } .radio-detail-program{ width: 100% !important; } .radio-detail-contacts-platforms-container{ align-items: center; h2{ text-align: center; } } .navbar-menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: rgba(0, 0, 0, 0.95); flex-direction: column; padding: var(--spacing-lg); max-height: calc(100vh - 67px); overflow-y: auto; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .navbar-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } /* Ensure good contrast when the mobile menu is opened over the hero (transparent navbar). The menu uses a near-black background, so force menu links and the toggle bars to white while the menu is active. This keeps the existing .monetize-top-button and other navbar styles unchanged. */ .navbar-menu.active a, .navbar-menu.active li a{ color: #ffffff !important; } /* Make the language selector visible when the menu is active */ .navbar-menu.active .navbar-language select { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.3) !important; background-color: rgba(0, 0, 0, 0.5) !important; } .navbar-menu.active .navbar-language select:hover { border-color: #ffffff !important; background-color: rgba(0, 0, 0, 0.7) !important; } /* When the mobile menu is active, make the hamburger bars white for visibility. The toggle button follows the menu in the DOM, so use the adjacent sibling selector. Also animate the bars to form an X. */ .navbar-menu.active + .mobile-menu-toggle span { background: #ffffff !important; } .navbar-menu.active + .mobile-menu-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .navbar-menu.active + .mobile-menu-toggle span:nth-child(2) { opacity: 0; } .navbar-menu.active + .mobile-menu-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Add a subtle dark translucent background behind the hamburger when the menu is open so the white bars don't disappear if the navbar itself is light. This preserves the white bars but ensures contrast regardless of the navbar color. */ .navbar-menu.active + .mobile-menu-toggle { background: rgba(0,0,0,0.28); border-radius: 8px; padding: 6px; transition: background 160ms ease; } /* Fallback for pages without .hero-section: ensure navbar is visible with dark background */ body:not(:has(.hero-section)) .navbar { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,0.25); } body:not(:has(.hero-section)) .navbar-menu a, body:not(:has(.hero-section)) .navbar-login { color: #ffffff !important; } body:not(:has(.hero-section)) .mobile-menu-toggle span { background: #ffffff !important; } .mobile-menu-toggle { display: flex; } /* Adjust hero-section for top music player on mobile */ .hero-section { margin-top: 135px; /* 67px header + 68px player */ min-height: calc(100vh - 135px); } /* Make the music player responsive - moves to top on mobile Fixed below header (67px) as a horizontal bar that doesn't conflict with chat/cookies */ .music-player { position: fixed; top: 67px; left: 0; right: 0; width: 100%; padding: 10px 16px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border: none; border-bottom: 1px solid rgba(209, 208, 208, 0.3); border-radius: 0; z-index: 999; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .music-player .music-player-content { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; } .music-player .play-music { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .music-player .play-button { width: 48px; height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; padding: 0; flex-shrink: 0; cursor: pointer; transition: all 0.2s ease; } .music-player .play-button img { width: 48px; height: 48px; filter: none; } /* Playing state - add gradient background */ .music-player.playing .play-button { background: linear-gradient(135deg, #024c9a, #f0cc00); padding: 8px; } .music-player.playing .play-button img { filter: brightness(0) invert(1); } .music-player .play-music-info { flex: 1 1 auto; min-width: 0; overflow: hidden; } .music-player .music-label { display: block; font-size: 10px; color: #666; margin-bottom: 2px; } .music-player .music-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 2px 0; color: #000; } .music-player .music-artist { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); } .music-player .music-station { display: none; } /* Player states on mobile */ .music-player.playing { background: linear-gradient(90deg, rgba(2, 76, 154, 0.08) 0%, rgba(240, 204, 0, 0.08) 100%), rgba(255, 255, 255, 0.98); } .music-player.loading .play-button { position: relative; pointer-events: none; } .music-player.loading .play-button img { opacity: 0; } .music-player.loading .play-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid rgba(2, 76, 154, 0.2); border-top-color: #024c9a; border-radius: 50%; animation: spinner 0.8s linear infinite; } .music-player .music-coverart { width: 60px; height: 60px; } .hero-social{ display: none; } /* Otimização de vídeos em tablets */ .hero-video-top, .hero-video-bottom { opacity: 0.8; } .app-section-content-right{ gap: 20px; } .app-section{ flex-direction: column; } .swiper-main .carrossel-content button{ height: auto !important; width: auto !important; font-size: 18px !important; left: 7% !important; bottom: 10% !important; } .figma-search-controls{ flex: auto !important; } .device-card { min-height: auto !important; height: auto !important; padding: var(--spacing-lg); } /* Responsive: stack services section cards and convert overlays to flow */ .services-section { padding: var(--spacing-lg) 1rem; } .services-grid { flex-direction: column; gap: var(--spacing-md); align-items: stretch; } .services-grid-left { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-md); } .service-card { width: 100%; min-height: auto; padding: 0; border-radius: 12px; overflow: hidden; } .service-card img { width: 100%; height: auto; display: block; object-fit: cover; } .service-card.large, .service-card.small { width: 100%; } .service-card.small .service-overlay{ padding: 10px; height: 100%; background: linear-gradient(to top, #000, transparent); } /* Convert overlayed content to flowing content on small screens so text is readable */ .service-card.large .service-content{ width: 50% !important; height: 100% !important; padding: 10px; } .service-card.large .service-content h3{ font-size: large; width: auto; } .service-card.large .service-content p{ display: none; } .service-card.large .btn-white{ padding: 10px; } .service-card.small h3{ font-size: 22px !important; } .service-overlay .btn-know-more { width: 48px !important; height: 48px !important; } .service-overlay .btn-know-more svg { width: 24px !important; height: 24px !important; } .service-overlay p{ font-size: 16px !important; } .service-content.monetize { color: var(--color-text-primary) !important; } .service-card.monetize { order: 2; } } @media (max-width: 768px) { .radio-detail-news-lazy{ margin-top: 0 !important; padding-bottom: 0 !important; } .radio-detail-schedule-subtitle{ display: none; } .radio-detail-schedule-block{ margin-top: 20px; border-radius: 14px; padding: 14px 14px 12px 14px; background: #f9fafb; border: 1px solid rgba(209, 213, 219, 0.9); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); } .content-card h3 { max-width: 250px; } .content-card p { max-width: 220px; } .device-section{ padding-top: 0 !important; } .content-grid { grid-template-columns: 1fr; } .radio-grid { grid-template-columns: 1fr; } .radio-play-btn { right: 20px; } .radio-play-btn img { width: 30px; height: 34px; } .radio-name { font-size: clamp(24px, 5vw, 33.524px); } .radio-location { font-size: clamp(16px, 3vw, 21.943px); } .footer-content { grid-template-columns: 1fr; } .footer-section { text-align: center; } .footer-section h3 { text-align: center; } .footer-section ul { align-items: center; } .footer-social { align-items: center; } .footer-social-networks { justify-content: center; } .social-links { justify-content: center; } .smart-tv { justify-content: center; } .btn-back-top { margin: 0 auto; } .hero-buttons { flex-direction: column; } .hero-social { justify-content: center; flex-wrap: wrap; gap: 10px; } .social-link { width: 28px; height: 28px; } /* Vídeos background em mobile */ .hero-video-top { opacity: 0.4; mix-blend-mode: overlay; } .hero-video-bottom { opacity: 0.9; } .app-section-iphone { flex-direction: column; } } @media (max-width: 480px) { .hero-title .pro { font-size: clamp(48px, 12vw, 120px); } .content-card { height: 180px; } .music-player { padding: 8px 12px; } .music-player .play-button { width: 42px; height: 42px; min-width: 42px; } .music-player .play-button img { width: 42px; height: 42px; } .music-player.playing .play-button { padding: 6px; } .music-player .music-title { font-size: 12px; } .music-player .music-artist { font-size: 11px; } /* Vídeos background em mobile pequeno */ .hero-video { filter: brightness(0.8); } } /* Swiper Main Carousel */ .swiper-main-section { width: 100%; margin: 48px 0; position: relative; } .swiper-main { width: 100%; padding-bottom: 0; } .swiper-main .swiper-wrapper { align-items: stretch; } .swiper-main .swiper-slide { width: 70%; height: auto; display: flex; box-sizing: border-box; } /* Em telas menores, aumenta a largura do slide */ @media (max-width: 768px) { .swiper-main .swiper-slide { width: 85%; } } @media (max-width: 480px) { .swiper-main .swiper-slide { width: 90%; } } .swiper-main .carrossel-content { width: 100%; max-width: 100%; box-sizing: border-box; padding: 28px 10px; display: flex; gap: 14px; align-items: center; justify-content: center; background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02)); /* Make each slide a positioned container so absolutely positioned children (like a button) are positioned relative to the slide instead of the viewport. This prevents buttons from floating over other slides. */ position: relative; opacity: 0.6; /* inativo por padrão */ transition: opacity 360ms ease; } .swiper-main .carrossel-content.active { opacity: 1; } .swiper-main .carrossel-content button{ position: absolute; bottom: 12%; left: 7%; /* a largura passa a ser determinada pelo espaço entre left e right */ inline-size: auto; /* width automático */ block-size: auto; /* height baseado no padding */ padding: clamp(8px, 1.2vw, 14px) clamp(14px, 2vw, 24px); font-size: clamp(16px, 2.4vw, 30px); border: none; border-radius: 24px; background: #fff; color: #000; cursor: pointer; } /* If the slide is image-only (img is direct child), stretch to full slide */ .swiper-main .carrossel-content > img { width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center; box-shadow: 0 10px 30px rgba(0,0,0,0.12); display: block; } .swiper-main .carousel-item-body { width: 50%; max-width: 700px; } .swiper-main .carousel-item-body h3 { font-size: 2rem; margin: 0 0 8px 0; } .swiper-main .carousel-item-body p { margin: 0 0 16px 0; color: var(--text-muted, #777); } .carousel-dots { margin-top: 16px; display: flex; justify-content: center; gap: 8px; } .carousel-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: #979797; cursor: pointer; transition: transform .18s ease, background-color .18s ease; } .carousel-dot.active { background: var(--accent, #333); transform: scale(1.2); } /* Responsive tweaks */ @media (max-width: 900px) { .swiper-main .carrossel-content { padding: 18px; gap: 14px; } } /* Figma Search Section (converted from Figma node 131:1189) */ .figma-search { padding: var(--spacing-xl) var(--spacing-lg) 0; background: transparent; } .figma-search-inner { max-width: 1860px; margin: 0 auto; display: flex; align-items: center; gap: 28px; justify-content: center; flex-wrap: wrap; } .figma-search-title { font-family: var(--font-secondary); font-weight: 400; font-size: clamp(20px, 2.8vw, 56px); margin: 0; white-space: nowrap; } .figma-search-controls { display: flex; gap: 24px; align-items: center; flex: 1 1 640px; justify-content: center; flex-wrap: wrap; } .search-pill { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 0.68px solid #a4a4a4; border-radius: 68px; min-height: 56px; box-shadow: none; flex: 1 1 600px; min-width: 260px; } .search-pill input { border: none; outline: none; background: transparent; font-size: 18px; flex: 1; min-width: 0; min-height: 24px; padding: 18px 24px; } /* Filtros */ .search-filters { display: flex; gap: 12px; align-items: center; flex: 1 1 auto; min-width: 300px; } .search-filters select, .search-filters input { padding: 10px 16px; border: 0.68px solid #a4a4a4; border-radius: 8px; background: #ffffff; font-size: 14px; font-family: var(--font-primary); color: var(--color-text-primary); outline: none; transition: border-color 0.2s ease; } .search-filters select:hover, .search-filters input:hover { border-color: #666; } .search-filters select:focus, .search-filters input:focus { border-color: #024c9a; box-shadow: 0 0 0 2px rgba(2, 76, 154, 0.1); } .search-filters select { flex: 1; min-width: 150px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/csvg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 35px; } .search-filters input { flex: 1; min-width: 150px; } .search-btn { width: 56px; height: 56px; border-radius: 50%; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 56px; } .search-btn img { width: 22px; height: 22px; display:block; } .search-right { display:flex; align-items:center; gap:16px; } .search-flag { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 0.68px solid #a4a4a4; } .search-settings { background: transparent; border: none; width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; cursor: pointer; } .search-settings img { width: 20px; height: 20px; display:block; } @media (max-width: 520px) { .search-pill { min-height: 48px; gap: 8px; } .search-pill input { font-size: 16px; padding: 14px 16px; } .search-btn { width: 48px; height: 48px; flex: 0 0 48px; } .search-btn img { width: 20px; height: 20px; } } @media (max-width: 900px) { .figma-search-inner { flex-direction: column; gap: 20px; } .figma-search-controls { width: 100%; justify-content: center; } /* Performance hints for the carousel track and slides */ .carrossel .carousel-track { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .carrossel .carrossel-content { /* Paint containment reduces repaint scope when slides change */ contain: paint; backface-visibility: hidden; } .search-right { order: 3; } } /* Rádios Destaques - Swiper radio carousel styling */ .swiper-radio-section { margin-top: 32px; position: relative; padding-bottom: 60px; /* Espaço para o botão de controle */ } .swiper-radio { width: 100%; padding-bottom: 0; } .swiper-radio .swiper-wrapper { align-items: stretch; } .swiper-radio .swiper-slide { height: auto; display: flex; } .swiper-radio .carrossel-content { /* Make each radio slide a flex item so they lay out horizontally instead of stacking. Use a fixed-ish width on desktop but allow shrink on small screens. */ box-sizing: border-box; width: 100%; height: 100%; min-width: 260px; background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02)); border-radius: 12px; overflow: hidden; position: relative; } .swiper-radio .carrossel-content img { width: 100%; height: 300px; object-fit: cover; border-radius: 10px; display: block; } .swiper-radio .carrossel-content { position: relative; /* ensure caption can be absolutely positioned */ } .swiper-radio .slide-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-radio .slide-caption { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #ffffff; text-shadow: 0 6px 18px rgba(0,0,0,0.6); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.6) 100%); } .swiper-radio .slide-text { flex: 1 1 auto; min-width: 0; } .swiper-radio .slide-title { font-size: 16px; font-weight: 700; margin: 0 0 4px 0; white-space: nowrap; text-overflow: ellipsis; } .swiper-radio .slide-desc { font-size: 13px; margin: 0; opacity: 0.95; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .swiper-radio .slide-btn { width: 60px; height: 60px; min-width: 60px; min-height: 60px; border-radius: 50%; background: #ffffff; border: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.18); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .swiper-radio .slide-btn:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0,0,0,0.25); background: #f5f5f5; } .swiper-radio .slide-btn:active { transform: scale(0.95); } .swiper-radio .slide-btn img, .swiper-radio .slide-btn svg { width: 26px; height: 26px; transition: transform 0.2s ease; } .swiper-radio .slide-btn:hover svg { transform: scale(1.1); } @media (max-width: 900px) { .swiper-radio .carrossel-content img { height: 160px; } } /* Swiper pagination outside carousel */ .swiper-radio-section .swiper-pagination { position: relative !important; margin-top: 24px !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 10 !important; transform: none !important; } .swiper-radio-section .swiper-pagination-bullet { width: 10px !important; height: 10px !important; background: #979797 !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; pointer-events: auto !important; transition: transform 0.18s ease, background-color 0.18s ease !important; border-radius: 50% !important; display: inline-block !important; margin: 0 !important; /* Força formato circular mesmo com dynamicBullets */ min-width: 10px !important; max-width: 10px !important; } .swiper-radio-section .swiper-pagination-bullet-active { background: #333 !important; transform: scale(1.2) !important; opacity: 1 !important; visibility: visible !important; border-radius: 50% !important; } /* Swiper Main Pagination */ .swiper-main-section .swiper-pagination-main { position: relative !important; margin-top: 24px !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 10 !important; transform: none !important; } .swiper-main-section .swiper-pagination-main .swiper-pagination-bullet { width: 10px !important; height: 10px !important; background: #979797 !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; pointer-events: auto !important; transition: transform 0.18s ease, background-color 0.18s ease !important; border-radius: 50% !important; display: inline-block !important; margin: 0 !important; /* Força formato circular mesmo com dynamicBullets */ min-width: 10px !important; max-width: 10px !important; } .swiper-main-section .swiper-pagination-main .swiper-pagination-bullet-active { background: #333 !important; transform: scale(1.2) !important; opacity: 1 !important; visibility: visible !important; border-radius: 50% !important; } /* Swiper Radio Control Button */ .swiper-radio-control-btn { position: absolute; bottom: 20px; right: 20px; width: 64px; height: 64px; border-radius: 50%; background: #D9D9D9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100; transition: transform 0.2s ease, background-color 0.2s ease; padding: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .swiper-radio-control-btn:hover { transform: scale(1.1); background: #C0C0C0; } .swiper-radio-control-btn:active { transform: scale(0.95); } .swiper-radio-control-btn .play-icon { width: 28px; height: 28px; display: none; } .swiper-radio-control-btn .pause-icon { width: 64px; height: 64px; display: none; } /* Quando pausado, mostra o ícone de play */ .swiper-radio-control-btn.paused .play-icon { display: block; } .swiper-radio-control-btn.paused .pause-icon { display: none; } /* Quando rodando, mostra o ícone de pause */ .swiper-radio-control-btn:not(.paused) .play-icon { display: none; } .swiper-radio-control-btn:not(.paused) .pause-icon { display: block; } /* Loading Indicator */ .loading-indicator { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; } .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #024c9a; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* No results message */ .no-radios { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: #888888; font-size: 18px; } /* Pagination Controls */ .pagination-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: var(--spacing-xl); padding: var(--spacing-lg) 0; } /* Radio Favorite Button */ .radio-favorite-btn { position: absolute; top: 15px; left: 15px; width: 35px; height: 35px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, transform 0.3s ease; z-index: 2; transform-origin: center center; line-height: 1; backface-visibility: hidden; will-change: transform; } .radio-favorite-btn:hover { background-color: rgba(0, 0, 0, 0.7); } .radio-favorite-btn:active { transform: scale(0.95); } .radio-favorite-btn svg { width: 20px; height: 20px; display: block; transform-origin: center center; line-height: 1; transform: translateZ(0); } /* Mini overlay de carregamento dentro do botão favorito */ .radio-favorite-btn-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: radio-favorite-spin 0.65s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .radio-favorite-btn.loading .radio-favorite-btn-spinner { display: block; } .radio-favorite-btn.loading .favorite-icon-empty, .radio-favorite-btn.loading .favorite-icon-filled { visibility: hidden; } .radio-favorite-btn.loading { pointer-events: none; cursor: wait; } @keyframes radio-favorite-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .favorite-icon-empty { display: block; } .favorite-icon-filled { display: none; } /* Toast Animations */ @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } .favorite-toast { font-family: var(--font-primary); font-size: 14px; font-weight: 500; } /* Radio Dropdown */ .radio-dropdown { position: absolute; top: 100%; left: 0; right: 0; background-color: white; border-radius: 0 0 18px 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10; max-height: 400px; overflow-y: auto; } .radio-dropdown-content { padding: 20px; } .dropdown-section { margin-bottom: 16px; } .dropdown-section:last-child { margin-bottom: 0; } .dropdown-section h4 { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .dropdown-section p { font-size: 14px; color: #666; line-height: 1.5; margin: 0; } .contact-list { display: flex; flex-direction: column; gap: 8px; } .contact-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; } .contact-icon { font-size: 18px; width: 24px; display: inline-flex; align-items: center; justify-content: center; } .contact-item a { color: #0066cc; text-decoration: none; transition: color 0.2s ease; } .contact-item a:hover { color: #0052a3; text-decoration: underline; } /* Radio Card Playing State */ .radio-card.playing { box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); } /* Radio Category Section */ .radio-category-section { margin-bottom: var(--spacing-2xl); } .radio-category-header { margin-bottom: var(--spacing-lg); } .category-title { font-size: 28px; font-weight: 600; color: #000000; margin-bottom: 8px; } .category-detail { font-size: 14px; color: #888888; margin: 0; } /* Grid responsivo: 3 colunas (desktop), 2 (tablet), 1 (mobile) */ .radio-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); width: 100%; } /* Tablet: 2 colunas */ @media (max-width: 1024px) { .radio-category-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile: 1 coluna */ @media (max-width: 768px) { .radio-category-grid { grid-template-columns: 1fr; } .category-title { font-size: 24px; } } .load-more-button { background: linear-gradient(229.8598064887252deg, #024c9a 8.4496%, #f0cc00 91.55%); color: white; border: none; padding: 12px 40px; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .load-more-button:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .load-more-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .load-more-button.is-loading { opacity: 0.75; cursor: wait; } .loading-indicator-inline { padding: 12px 0 10px; margin-bottom: 0; align-items: center; justify-content: center; text-align: center; } .loading-indicator-inline .spinner { width: 28px; height: 28px; margin-bottom: 10px; border-width: 3px; } /* Jogo em Destaque */ .jogo-destaque-section { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); border-radius: 16px; padding: 28px; margin-bottom: var(--spacing-2xl); color: white; } @media (max-width: 768px) { .jogo-destaque-section { /* Expande para toda a largura do viewport apenas em telas menores */ width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } } .jogo-destaque-section .category-title { color: white; } .jogo-destaque-section .category-detail { color: rgba(255, 255, 255, 0.7); } .jogo-destaque-card { display: flex; flex-direction: column; gap: 28px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; margin-top: 16px; flex-wrap: wrap; } @media (max-width: 768px) { .jogo-destaque-card { flex-direction: column; gap: 16px; } } .jogo-info { flex: 1; min-width: 280px; } .jogo-live-badge { display: inline-block; background: #ff4444; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 12px; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .jogo-header { margin-bottom: 16px; } .jogo-competicao { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.5px; } .jogo-horario { font-size: 14px; font-weight: 600; color: #f0cc00; margin: 0; } .jogo-times { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .time-mandante, .time-visitante { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; } .time-logo { width: 120px; height: 120px; object-fit: contain; border-radius: 50%; padding: 4px; } .time-nome { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.3; } .jogo-versus { font-size: 20px; font-weight: 700; color: #f0cc00; display: flex; align-items: center; justify-content: center; } .jogo-radios { flex: 1; min-width: 280px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); width: 100%; } /* Tablet: 2 colunas */ @media (max-width: 1024px) { .jogo-radios { grid-template-columns: repeat(2, 1fr); } } /* Mobile: 1 coluna */ @media (max-width: 768px) { .jogo-radios { grid-template-columns: 1fr; } } .radio-card-compact { height: 120px; border-radius: 8px; } .radio-card-compact .radio-info { padding: 8px; } .radio-card-compact .radio-name { font-size: 12px; } .radio-card-compact .radio-location { font-size: 10px; line-height: 1.2; } /* ========== Página de detalhes da rádio ========== */ .radio-detail-page { padding-top: 130px; display: flex; flex-direction: column; align-items: center; opacity: 1; transition: opacity 0.25s ease; } .radio-detail-page.radio-detail-page-loading { opacity: 0; } .radio-detail-page .radio-detail-hero { width: 100%; max-width: 720px; margin: 0 auto; } .radio-detail-card { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 32px; } .radio-detail-logo-wrapper { width: 100%; max-width: 420px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; flex-shrink: 0; } .radio-detail-logo-image-box { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.92); overflow: hidden; } .radio-detail-logo { width: 100%; height: 100%; object-fit: contain; } .radio-detail-logo-description { width: 100%; padding: 12px; margin: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.22); } .radio-detail-logo-description h2 { margin: 0 0 8px 0; color: #ffffff; font-size: 0.85rem; letter-spacing: 0.04em; } .radio-detail-logo-description p { margin: 0; color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; line-height: 1.5; } .radio-detail-main-info { text-align: center; width: 100%; padding: 0 24px; } .radio-detail-title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; margin: 0 0 8px 0; line-height: 1.2; } .radio-detail-location, .radio-detail-frequency, .radio-detail-segment { margin: 4px 0; font-size: 1rem; color: var(--color-text-secondary, #666); } .radio-detail-program { width: 50%; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .radio-detail-program-detail { font-size: 0.9rem; color: var(--color-text-secondary, #666); margin-top: 4px; } .radio-detail-slogan-inline { margin: 4px 0 6px 0; font-size: 1.05rem; color: #000000; } .radio-detail-streams { margin-top: 20px; text-align: left; } .radio-detail-streams h2 { font-size: 1.1rem; margin-bottom: 12px; } .radio-detail-audio-player { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .radio-detail-streams ul, .radio-detail-streams-list { list-style: none; padding: 0; margin: 0; } .radio-detail-streams li, .radio-detail-stream-item { margin: 8px 0; display: flex; align-items: center; gap: 10px; } .radio-detail-stream-play { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-primary, #3b82f6); background: var(--color-primary, #3b82f6); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s, transform 0.15s; } .radio-detail-stream-play:hover:not(:disabled) { background: var(--color-primary-hover, #2563eb); border-color: var(--color-primary-hover, #2563eb); transform: scale(1.05); } .radio-detail-stream-play:disabled { cursor: wait; } .radio-detail-stream-play-icon, .radio-detail-stream-play-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .radio-detail-stream-play-loading { opacity: 0; pointer-events: none; background: rgba(0, 0, 0, 0.35); border-radius: 50%; transition: opacity 0.2s; } .radio-detail-stream-play.loading .radio-detail-stream-play-icon { opacity: 0; pointer-events: none; } .radio-detail-stream-play.loading .radio-detail-stream-play-loading { opacity: 1; } .radio-detail-stream-play .radio-detail-stream-play-icon i { font-size: 0.95rem; margin-left: 2px; } .radio-detail-stream-play .radio-detail-stream-play-icon i.fa-pause { margin-left: 0; } .radio-detail-stream-play .radio-detail-stream-play-loading i { font-size: 1rem; } .radio-detail-streams a { color: var(--color-primary, #3b82f6); text-decoration: none; font-weight: 500; flex: 1; max-width: 80px; } /* Toast: link do stream indisponível */ .radio-stream-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 12px 20px; background: #1f2937; color: #fff; font-size: 0.9rem; font-weight: 500; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); z-index: 9999; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; max-width: calc(100% - 32px); } .radio-stream-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ====== Player global fixo (inspirado em Spotify) ====== */ .radio-global-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform 0.3s ease-out, opacity 0.3s ease-out; background: radial-gradient(circle at top left, #1e293b 0, #020617 45%, #000 100%); color: #f9fafb; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5); } .radio-global-player.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .radio-global-player-inner { position: relative; width: 100%; background: linear-gradient(120deg, #000000 0%, #101622 36%, #232834 56%, #8b93a1 69%, #1c2432 82%, #000000 100%); background-size: 220% 220%; animation: radio-global-player-bg-shift 12s ease-in-out infinite; border-top: 1px solid rgba(255, 255, 255, 0.08); } .radio-global-player-content { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; } .radio-global-player-overlay { position: absolute; inset: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 23, 0.72); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 2; } .radio-global-player.is-loading .radio-global-player-overlay { opacity: 1; } .radio-global-player-spinner { width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.35); border-top-color: #38bdf8; animation: radio-global-player-spin 0.7s linear infinite; } @keyframes radio-global-player-spin { to { transform: rotate(360deg); } } @keyframes radio-global-player-bg-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .radio-global-player-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1.4; } .radio-global-player-logo { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } .radio-global-player-logo img { width: 100%; height: 100%; object-fit: cover; } .radio-global-player-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .radio-global-player-title { font-size: 0.9rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio-global-player-subtitle { font-size: 0.8rem; margin: 0; color: rgba(249, 250, 251, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio-global-player-program { flex: 2; min-width: 0; position: relative; overflow: hidden; /* Fade nas bordas sem pintar faixas: só o texto some, o fundo do player continua visível */ -webkit-mask-image: linear-gradient( to right, transparent 0, black 5%, black 95%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0, black 5%, black 95%, transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .radio-global-player-program-track { display: inline-block; white-space: nowrap; padding: 0 8px; font-size: 0.8rem; color: rgba(249, 250, 251, 0.85); will-change: transform; } .radio-global-player-play { width: 38px; height: 38px; border-radius: 999px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--color-primary, #38bdf8), #a855f7); color: #0b1120; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transform-origin: center center; backface-visibility: hidden; will-change: transform; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.9); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; } .radio-global-player-play:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 22px rgba(15, 23, 42, 1); } .radio-global-player-play:disabled { cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.6); } .radio-global-player-play i { font-size: 0.9rem; display: block; line-height: 1; width: 1em; text-align: center; transform: translateZ(0); } .radio-global-player-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1; } /* Botão de favorito no player global */ .radio-global-favorite-btn { position: relative; width: 32px; height: 32px; border-radius: 50%; border: none; background-color: rgba(15, 23, 42, 0.65); display: inline-flex; align-items: center; justify-content: center; color: #f9fafb; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .radio-global-favorite-btn i { font-size: 16px; } .radio-global-favorite-btn:hover { background-color: rgba(15, 23, 42, 0.9); transform: translateY(-1px); } .radio-global-favorite-btn.is-favorited { color: #fb7185; } /* Overlay de carregamento específico do player global */ .radio-global-favorite-btn.loading .radio-favorite-btn-spinner { display: block; } .radio-global-favorite-btn.loading .favorite-icon-empty, .radio-global-favorite-btn.loading .favorite-icon-filled { visibility: hidden; } .radio-global-favorite-btn.loading { pointer-events: none; cursor: wait; } .radio-global-player-volume { display: flex; align-items: center; gap: 6px; } .radio-global-player-volume-range { width: 120px; max-width: 35vw; height: 6px; border-radius: 999px; appearance: none; -webkit-appearance: none; background: linear-gradient( to right, #38bdf8 0%, #38bdf8 var(--range-progress, 70%), rgba(15, 23, 42, 0.7) var(--range-progress, 70%), rgba(15, 23, 42, 0.7) 100% ); cursor: pointer; outline: none; } .radio-global-player-volume-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(2, 6, 23, 0.9); background: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); margin-top: -4px; } .radio-global-player-volume-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: transparent; } .radio-global-player-volume-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.7); } .radio-global-player-volume-range::-moz-range-progress { height: 6px; border-radius: 999px; background: #38bdf8; } .radio-global-player-volume-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(2, 6, 23, 0.9); background: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); } .radio-global-player-volume-icon { color: #9ca3af; font-size: 0.9rem; } .radio-global-player-volume-percent { font-size: 0.8rem; color: rgba(249, 250, 251, 0.8); min-width: 36px; text-align: right; } /* ------------------------ Notícias locais (radio.php) ------------------------ */ .radio-detail-news-lazy { padding-top: 0 !important; } .radio-detail-news-card { padding: 20px; border-radius: 16px; background: #f9fafb; border: 1px solid #e5e7eb; } .radio-detail-news-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .radio-detail-news-title-wrapper { display: flex; align-items: center; gap: 12px; } .radio-detail-news-icon { font-size: 18px; color: #4b5563; } .radio-detail-block-title { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #111827; } .radio-detail-block-subtitle { font-size: 13px; color: #6b7280; } .radio-detail-news-body { margin-top: 8px; } .radio-news-load-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid #e5e7eb; background: #ffffff; color: #111827; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .radio-news-load-btn:hover { background: #eff6ff; border-color: #60a5fa; color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .radio-news-load-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06); } .radio-news-load-btn.is-loading { cursor: wait; opacity: 0.85; } .radio-news-load-label { white-space: nowrap; } .radio-news-load-spinner { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(59, 130, 246, 0.25); border-top-color: #2563eb; display: none; animation: radio-news-spin 0.7s linear infinite; } .radio-news-load-btn.is-loading .radio-news-load-spinner { display: inline-block; } .radio-detail-news-empty { font-size: 14px; color: #6b7280; } .radio-detail-news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .radio-detail-news-item { border-radius: 12px; border: 1px solid #e5e7eb; padding: 12px 14px; background: #ffffff; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .radio-detail-news-item:hover { border-color: #bfdbfe; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .radio-detail-news-item-hidden { display: none; } .radio-detail-news-link { display: block; text-decoration: none; color: inherit; } .radio-detail-news-image-wrap { width: 100%; height: 140px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #f3f4f6; } .radio-detail-news-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } .radio-detail-news-item:hover .radio-detail-news-image-wrap img { transform: scale(1.04); } .radio-detail-news-title { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 4px; } .radio-detail-news-description { font-size: 13px; color: #4b5563; margin-bottom: 6px; } .radio-detail-news-summary { list-style: none; padding: 0; margin: 0 0 8px 0; } .radio-detail-news-summary li { font-size: 12px; color: #374151; padding-left: 12px; position: relative; } .radio-detail-news-summary li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 999px; background: #2563eb; } .radio-detail-news-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #6b7280; } .radio-detail-news-date { padding: 2px 8px; border-radius: 999px; background: #f3f4f6; } .radio-detail-news-more-wrapper { margin-top: 10px; text-align: center; } .radio-detail-news-more-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 999px; border: 1px solid #e5e7eb; background: #ffffff; color: #1f2933; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .radio-detail-news-more-btn:hover { background: #eff6ff; border-color: #60a5fa; color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .radio-detail-news-more-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06); } @keyframes radio-news-spin { to { transform: rotate(360deg); } } /* Botão de favorito no player global */ .radio-global-favorite-btn { position: static !important; width: 32px; height: 32px; border-radius: 50%; border: none; background-color: rgba(15, 23, 42, 0.65); display: inline-flex; align-items: center; justify-content: center; color: #f9fafb; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .radio-global-favorite-btn i { font-size: 16px; } .radio-global-favorite-btn:hover { background-color: rgba(15, 23, 42, 0.9); transform: translateY(-1px); } .radio-global-favorite-btn.is-favorited { color: #fb7185; } .radio-global-player-close { border: none; background: transparent; color: rgba(249, 250, 251, 0.7); cursor: pointer; padding: 4px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .radio-global-player-close:hover { background: rgba(15, 23, 42, 0.85); color: #f9fafb; transform: translateY(-1px); } .radio-global-player-close:disabled, .radio-global-player-volume-range:disabled { cursor: not-allowed; opacity: 0.6; } .radio-global-player-close i { font-size: 0.95rem; } @media (max-width: 640px) { .radio-global-player-content { padding: 8px 12px; gap: 10px; } .radio-global-player-subtitle { display: none; } .radio-global-player-volume { display: none; } .radio-global-player-program { display: none; } } .radio-detail-extra { position: relative; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .radio-detail-extra-overlay { position: absolute; inset: 0; background: rgba(245, 246, 248, 0.9); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; z-index: 1; } .radio-detail-extra.is-loading .radio-detail-extra-overlay { opacity: 1; pointer-events: auto; } .radio-detail-extra-spinner { width: 32px; height: 32px; border-radius: 999px; border: 3px solid rgba(0, 0, 0, 0.08); border-top-color: rgba(0, 0, 0, 0.45); animation: radio-detail-extra-spin 0.7s linear infinite; } @keyframes radio-detail-extra-spin { to { transform: rotate(360deg); } } .radio-detail-block { padding: 20px 0; } /* Container em coluna: Contatos + Plataformas (mobile e desktop) */ .radio-detail-contacts-platforms-container { display: flex; flex-direction: column; gap: 24px; } .radio-detail-report-card { border-radius: 14px; padding: 14px 14px 12px 14px; background: #f9fafb; border: 1px solid rgba(209, 213, 219, 0.9); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); display: grid; grid-template-columns: 1fr; align-items: center; row-gap: 8px; text-align: center; } .radio-detail-report-icon { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background: radial-gradient(circle at top, rgba(59, 130, 246, 0.18), transparent 70%); border: 1px solid rgba(37, 99, 235, 0.7); color: #1d4ed8; flex-shrink: 0; } .radio-detail-report-body { display: flex; flex-direction: column; gap: 12px; align-items: center; } .radio-detail-report-title { margin: 0; font-size: 0.88rem; font-weight: 600; color: #111827; } .radio-detail-report-text { margin: 0; font-size: 0.8rem; color: #4b5563; } .radio-detail-report-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.85); background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), rgba(129, 140, 248, 0.18)); color: #1f2937; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); } .radio-detail-report-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25); border-color: rgba(37, 99, 235, 1); } .radio-detail-report-btn-icon i { font-size: 0.8rem; } @media (max-width: 640px) { .radio-detail-report-card { padding: 16px 14px; } .radio-detail-report-btn { width: 100%; justify-content: center; } } .radio-detail-block h2 { font-size: 1rem; font-weight: 600; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-secondary, #666); } .radio-detail-block p { margin: 0; line-height: 1.5; } /* ====== Layout desktop (compactar colunas) ====== */ @media (min-width: 900px) { .radio-detail-page .radio-detail-hero{ max-width: 1040px; } .radio-detail-hero-top { display: flex; gap: 32px; align-items: flex-start; padding-left: var(--spacing-lg, 24px); padding-right: var(--spacing-lg, 24px); } .radio-detail-card { flex-direction: row; align-items: flex-start; flex: 1.4; } .radio-detail-main-info { text-align: left; } .radio-detail-extra { display: flex; flex-direction: column; gap: 20px; } .radio-detail-contacts-wrapper { flex: 1.1; } /* Blocos que ocupam a largura toda na grade */ .radio-detail-schedule-block, .radio-detail-status-block { grid-column: 1 / -1; } .radio-detail-schedule-block { margin-top: 20px; padding: 20px; border-radius: 16px; background: #f9fafb; border: 1px solid #e5e7eb; } /* Container para informações adicionais e clima */ .radio-detail-info-climate-container { display: flex; flex-direction: row; gap: 80px; align-items: flex-start; } .radio-detail-info-climate-container .radio-detail-enrichment-block, .radio-detail-info-climate-container .radio-detail-weather-block { flex: 1; padding: 20px 0; } } .radio-detail-enrichment-list { margin: 0; padding: 0; } .radio-detail-enrichment-row { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; } .radio-detail-enrichment-row dt { font-weight: bold; margin-right: 6px; } .radio-detail-enrichment-row dt::after { content: ':'; } .radio-detail-enrichment-row dd { margin: 0; flex: 1; } .radio-detail-contacts { list-style: none; padding: 0; margin: 0; } .radio-detail-contacts-icons { display: flex; flex-wrap: wrap; gap: 10px; } .radio-detail-contact-item { display: flex; align-items: center; gap: 12px; margin: 8px 0; } .radio-detail-contact-icon { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #000000; font-size: 1.1rem; } .radio-detail-contact-icon i { font-size: inherit; } .radio-detail-contact-text { flex: 1; min-width: 0; } .radio-detail-contacts a { color: #000000; text-decoration: none; } .radio-detail-contact-icon-only { border-radius: 999px; color: #000000; text-decoration: none; transition: transform 0.15s; } .radio-detail-contact-icon-only:hover { transform: translateY(-2px); } .radio-detail-platforms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; } .radio-detail-platform-item { display: inline-flex; } .radio-detail-platform-link { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); background: #ffffff; color: #000000; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .radio-detail-platform-link i { font-size: 1.4rem; } .radio-detail-platform-item.is-available .radio-detail-platform-link:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); } .radio-detail-platform-item.is-unavailable .radio-detail-platform-link { filter: grayscale(1); opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Itens sem link (disponível mas sem store_url): efeito bloqueado no hover */ .radio-detail-platform-item.is-no-link .radio-detail-platform-link { cursor: not-allowed; } .radio-detail-platform-item.is-no-link .radio-detail-platform-link:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); filter: grayscale(0.6); opacity: 0.7; } .radio-detail-platforms-empty { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary, #666); } .radio-detail-error { text-align: center; padding: 48px 24px; } .radio-detail-error h1 { font-size: 1.5rem; margin-bottom: 12px; } .radio-detail-error p { margin-bottom: 24px; color: var(--color-text-secondary, #666); } .radio-detail-error .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-size: 1rem; font-weight: 600; color: #ffffff; background: #0f172a; border: 1px solid #0f172a; text-decoration: none; } .radio-detail-error .btn-primary:hover { background: #1e293b; border-color: #1e293b; } /* Programação da semana (schedule) */ .radio-detail-schedule-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .radio-detail-schedule-block h2 { margin: 0; } .radio-detail-schedule-subtitle { margin: 2px 0 0 0; font-size: 0.8rem; color: var(--color-text-secondary, #6b7280); } .radio-schedule-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; border: 1px solid #e5e7eb; background: #ffffff; font-size: 0.8rem; font-weight: 500; color: #374151; cursor: pointer; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .radio-schedule-toggle-btn:hover { background: #eff6ff; border-color: #60a5fa; color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .radio-schedule-toggle-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06); } .radio-schedule-toggle-btn.collapsed { background: #f9fafb; } .radio-detail-schedule-table-wrapper { display: none; overflow-x: auto; } .radio-detail-schedule-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .radio-detail-schedule-table thead th:first-child, .radio-detail-schedule-table tbody td:first-child { width: 120px; min-width: 120px; white-space: nowrap; } .radio-detail-schedule-table thead th { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); font-weight: 600; font-size: 0.85rem; color: var(--color-text-secondary, #666); } .radio-detail-schedule-table tbody td { padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); vertical-align: top; } .radio-detail-schedule-table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.01); } .radio-detail-schedule-table tbody tr:last-child td { border-bottom: none; } .radio-detail-schedule-free { color: var(--color-text-secondary, #999); font-size: 0.85rem; } .radio-detail-schedule-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .radi.radio-detail-schedule-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .radio-detail-schedule-tab { padding: 8px 14px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px; background: #fff; color: var(--color-text-primary, #111); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .radio-detail-schedule-tab:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.25); } .radio-detail-schedule-tab.active { background: var(--color-primary, #3b82f6); border-color: var(--color-primary, #3b82f6); color: #fff; } .radio-detail-schedule-panel { margin-top: 0; } .radio-detail-schedule-list { list-style: none; padding: 0; margin: 0; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; overflow: hidden; } .radio-detail-schedule-item { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.95rem; } .radio-detail-schedule-item:last-child { border-bottom: none; } .radio-detail-schedule-time { color: var(--color-text-secondary, #666); font-size: 0.85rem; } .radio-detail-schedule-title { font-weight: 600; } .radio-detail-schedule-detail { grid-column: 2; font-size: 0.85rem; color: var(--color-text-secondary, #666); } .radio-detail-weather-block .radio-detail-weather-content[data-icon-type="rain"] .radio-detail-weather-icon-single { color: #3b82f6; } .radio-detail-weather-block .radio-detail-weather-content[data-icon-type="cloud"] .radio-detail-weather-icon-single { color: #6b7280; } .radio-detail-weather-block .radio-detail-weather-content[data-icon-type="storm"] .radio-detail-weather-icon-single { color: #6366f1; } .radio-detail-weather-block .radio-detail-weather-content[data-icon-type="sun"] .radio-detail-weather-icon-single { color: #f59e0b; } .radio-detail-weather-icon-single { font-size: 1.85rem; } .radio-detail-weather-icon-stack { position: relative; display: inline-block; width: 1.9rem; height: 1.65rem; margin-right: 4px; vertical-align: -0.18rem; } .radio-detail-weather-icon-part { position: absolute; line-height: 1; } .radio-detail-weather-icon-part.weather-part-sun { left: 0; top: 0; font-size: 1.35rem; color: #f59e0b; } .radio-detail-weather-icon-part.weather-part-cloud { right: 0; bottom: 0; font-size: 1.22rem; color: #9ca3af; } .radio-detail-weather-icon-part.weather-part-rain { right: -0.05rem; bottom: -0.15rem; font-size: 0.95rem; color: #3b82f6; } .radio-detail-weather-icon-part.weather-part-bolt { right: 0.25rem; bottom: -0.05rem; font-size: 0.9rem; color: #6366f1; } .radio-detail-weather-condition { margin: 0 0 0.5rem 0; font-size: 1rem; } .radio-detail-weather-meta { margin: 0.25rem 0; font-size: 0.9rem; color: var(--color-text-secondary, #666); } .radio-detail-weather-link { margin: 0.75rem 0 0 0; font-size: 0.9rem; } .radio-detail-weather-link a { color: var(--color-primary, #0066cc); } @media (min-width: 900px) { .radio-detail-schedule-table-wrapper { display: block; margin-top: 8px; } .radio-detail-schedule-tabs, .radio-detail-schedule-panel { display: none; } } .radio-detail-status-block { border-bottom: none; text-align: center; } .radio-detail-status { margin: 0; color: var(--color-text-secondary, #666); } /* ===== Modal de reporte de problema ===== */ .radio-report-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1200; opacity: 0; pointer-events: none; transition: opacity 0.22s ease-out; } .radio-report-modal.is-open { opacity: 1; pointer-events: auto; } .radio-report-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px); } .radio-report-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: 0 16px; border-radius: 16px; background: #f9fafb; border: 1px solid rgba(209, 213, 219, 0.9); padding: 20px 20px 18px 20px; color: #111827; box-shadow: 0 26px 60px rgba(15, 23, 42, 0.32); opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.22s ease-out, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1); } .radio-report-modal.is-open .radio-report-modal-dialog { opacity: 1; transform: translateY(0) scale(1); } .radio-report-modal-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .radio-report-modal-icon { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(254, 243, 199, 0.8); border: 1px solid rgba(245, 158, 11, 0.8); color: #b45309; flex-shrink: 0; } .radio-report-modal-header-text h3 { margin: 0 0 2px 0; font-size: 1.05rem; font-weight: 600; } .radio-report-modal-subtitle { margin: 0; font-size: 0.85rem; color: #4b5563; } .radio-report-modal-form { display: flex; flex-direction: column; gap: 14px; } .radio-report-field label { display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 500; color: #111827; } .radio-report-field textarea, .radio-report-field input[type="email"] { width: 100%; border-radius: 10px; border: 1px solid rgba(209, 213, 219, 1); background: #ffffff; color: #111827; padding: 10px 12px; font-size: 0.9rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .radio-report-field textarea::placeholder, .radio-report-field input[type="email"]::placeholder { color: #9ca3af; } .radio-report-field textarea:focus, .radio-report-field input[type="email"]:focus { border-color: #2563eb; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); background: #ffffff; } .radio-report-help { margin: 4px 0 0 0; font-size: 0.75rem; color: #6b7280; } .radio-report-privacy { margin: 4px 0 0 0; font-size: 0.75rem; color: #1d4ed8; padding: 8px 10px; border-radius: 10px; background: rgba(219, 234, 254, 0.7); border: 1px solid rgba(191, 219, 254, 1); } .radio-report-modal-footer { margin-top: 14px; display: flex; justify-content: flex-end; gap: 10px; } .radio-report-btn-secondary, .radio-report-btn-primary { border-radius: 999px; padding: 8px 18px; font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .radio-report-btn-secondary { background: #f3f4f6; color: #374151; border-color: rgba(209, 213, 219, 1); } .radio-report-btn-secondary:hover { background: #e5e7eb; } .radio-report-btn-primary { background: linear-gradient(135deg, #2563eb, #4f46e5); color: #f9fafb; border-color: transparent; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.9); } .radio-report-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 23, 42, 1); } .radio-report-btn-primary:disabled { cursor: not-allowed; opacity: 0.6; box-shadow: none; } body.radio-report-modal-open { overflow: hidden; } @media (max-width: 640px) { .radio-report-modal-dialog { margin: 0 12px; padding: 18px 16px 16px 16px; } } /* Ajuste da posição do widget Tawk.to em mobile para não sobrepor o player */ @media (max-width: 768px) { #tawkchat-container, #tawkchat-minified-container, #tawk-minified-box { bottom: 88px !important; /* espaço para o player fixo */ } }