/* 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; } .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.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 200ms ease, transform 200ms ease; } .navbar.scrolled .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; } .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: all 0.3s ease; z-index: 2; padding: 0; } .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; } .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; } .navbar-menu { display: none; 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; } .navbar-menu.active { display: flex; } /* 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; } /* 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. */ .navbar-menu.active + .mobile-menu-toggle span { background: #ffffff !important; } /* 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; } /* Make the music player responsive instead of hiding it on tablets. On narrower screens it becomes a compact bottom-right bar so it remains accessible without overlapping hero content excessively. */ .music-player { /* move to bottom-right on smaller screens */ position: fixed; top: auto; right: 24px; bottom: 24px; width: 360px; padding: 12px 14px; background: #ffffff; border: 1px solid #d1d0d0; border-radius: 14px; z-index: 1100; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-md); } .music-player .music-player-content { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; } .music-player .play-music { justify-content: space-between;} .music-player .play-button { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: #000; border-radius: 50%; padding: 8px; } .music-player .play-button img { width: 24px; height: 24px; } .music-player .play-music-info { flex: 1 1 auto; min-width: 0; } .music-player .music-label { display: none; } .music-player .music-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .music-player .music-artist { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); } .music-player .music-station { display: none; } .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) { .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 { width: calc(105% - var(--spacing-lg) * 2); } /* 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); 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-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; } .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: 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; justify-content: center; margin-top: var(--spacing-xl); padding: var(--spacing-lg) 0; } /* Radio Info Button */ .radio-info-btn { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; background-color: rgba(0, 0, 0, 0.5); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; z-index: 2; } .radio-info-btn:hover { background-color: rgba(0, 0, 0, 0.7); } /* 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; }