/* HOSTLIGADO — estilos compartilhados Identidade: marinho institucional (#0B1B3D → #122B5C), azul royal da marca (#0066FF), laranja de ação (#FF6B00 / #FF5500), neutros #FFFFFF · #F4F6F9 · #2B354F. Áreas de conteúdo usam .on-light (padrão do ); cabeçalho, hero, faixas, banners, player e rodapé usam .on-dark. Os tokens abaixo trocam sozinhos em cada contexto. */ :root { --navy: #0B1B3D; --navy-2: #122B5C; --navy-3: #1A3A78; --royal: #0066FF; --royal-soft: #3D8BFF; --royal-deep: #0052CC; --brand: #FF6B00; --brand-soft: #FF8A33; --brand-deep: #FF5500; --white: #FFFFFF; --mist: #F4F6F9; --graphite: #2B354F; --player-h: 76px; --header-h: 72px; --shadow-sm: 0 1px 2px rgba(11, 27, 61, .06), 0 1px 3px rgba(11, 27, 61, .08); --shadow-md: 0 12px 32px -12px rgba(11, 27, 61, .18); --shadow-lg: 0 24px 60px -24px rgba(11, 27, 61, .28); } /* Tokens contextuais — claro */ :root, .on-light, .dropdown { --fg: #2B354F; --fg-muted: #4B5670; --fg-subtle: #5F6B82; --line: #E3E8F0; --line-strong: #CFD7E3; --accent: #0066FF; --soft: #FFFFFF; --card-bg: #FFFFFF; --focus: #0066FF; } /* Tokens contextuais — escuro (marinho) */ .on-dark { --fg: #FFFFFF; --fg-muted: #C3CEE3; --fg-subtle: #9AA9C7; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); --accent: #6FA8FF; --soft: rgba(255, 255, 255, 0.05); --card-bg: rgba(255, 255, 255, 0.06); --focus: #8FBCFF; color: var(--fg); } .dropdown { color: var(--fg); } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); } body { background: var(--white); color: var(--fg); -webkit-font-smoothing: antialiased; padding-bottom: var(--player-h); } h1, h2, h3, h4 { text-wrap: balance; } ::selection { background: rgba(0, 102, 255, 0.2); color: inherit; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; } /* Conteúdo gravado no banco que ainda usa classes do tema antigo */ .sec .text-white { color: var(--fg); } .sec .text-brand-soft { color: var(--accent); } /* ---------- Seções: fundo intercalado ---------- */ .sec { background: var(--white); --card-bg: var(--mist); } main > .sec:nth-child(even of .sec) { background: var(--mist); --card-bg: var(--white); } .sec .glow { opacity: .55; } /* Faixas institucionais em marinho */ .hero-band { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); } .stats-band { background: var(--navy-2); } .cta-banner { background: radial-gradient(120% 140% at 100% 0%, rgba(0, 102, 255, .35) 0%, transparent 55%), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-lg); } .site-footer { background: var(--navy); border-top: 3px solid var(--royal); } /* ---------- Background decor ---------- */ .bg-grid { background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 100%); } .glow { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; } /* ---------- Promo bar ---------- */ .promo-bar { background: #07132D; border-bottom: 1px solid rgba(255, 107, 0, .35); } .coupon { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .06em; border: 1px dashed rgba(255, 107, 0, .7); border-radius: 6px; padding: .05rem .45rem; color: #C2410C; background: #FFF4EB; cursor: pointer; transition: background-color .2s ease; } .coupon:hover { background: #FFE6D2; } .on-dark .coupon { color: #FFB27A; background: rgba(255, 107, 0, .12); } .on-dark .coupon:hover { background: rgba(255, 107, 0, .22); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 27, 61, 0.97); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; } .site-header.scrolled { background: rgba(11, 27, 61, 0.99); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 10px 30px -12px rgba(4, 12, 30, .6); } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: .3rem; height: 44px; padding: 0 .85rem; border-radius: 10px; color: #C8D3EA; font-weight: 600; font-size: .9375rem; transition: color .2s ease, background-color .2s ease; cursor: pointer; } .nav-link:hover, .nav-item:hover > .nav-link, .nav-link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); } .nav-link.active { color: #fff; } .nav-link.active::after { content: ''; position: absolute; left: .85rem; right: .85rem; bottom: 2px; height: 3px; border-radius: 3px; background: var(--royal-soft); } .nav-link .chev { width: 16px; height: 16px; transition: transform .2s ease; } .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; width: 320px; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(4, 12, 30, .45); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .dropdown.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .dropdown a { display: flex; gap: .85rem; align-items: flex-start; padding: .75rem; border-radius: 12px; transition: background-color .15s ease; } .dropdown a:hover, .dropdown a:focus-visible { background: var(--mist); } .dropdown a.active { background: rgba(0, 102, 255, .07); } .dropdown .dd-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: rgba(0, 102, 255, .08); color: var(--royal); border: 1px solid rgba(0, 102, 255, .16); } .dropdown .dd-title { display: block; font-weight: 600; color: var(--fg); font-size: .9375rem; } .dropdown a.active .dd-title { color: var(--royal); } .dropdown .dd-desc { display: block; font-size: .8125rem; color: var(--fg-muted); line-height: 1.4; margin-top: .1rem; } /* Mobile menu */ .mobile-menu { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .mobile-menu[hidden] { display: none; } .m-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; font-size: 1.0625rem; font-weight: 600; color: #E6ECF8; border-bottom: 1px solid var(--line); } .m-link.active { color: var(--accent); } .m-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .25s ease, visibility .25s; } .m-sub.open { grid-template-rows: 1fr; visibility: visible; } .m-sub > div { overflow: hidden; } .m-sub a { display: flex; align-items: center; min-height: 46px; padding-left: 1rem; color: var(--fg-muted); border-left: 2px solid var(--line); margin-left: .25rem; } .m-sub a.active { color: var(--accent); border-left-color: var(--royal-soft); } [aria-expanded="true"] > .chev { transform: rotate(180deg); } .chev { transition: transform .2s ease; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.5rem; border-radius: 12px; font-weight: 700; font-size: .95rem; letter-spacing: .01em; border: 1.5px solid transparent; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; cursor: pointer; white-space: nowrap; } .btn:active { transform: translateY(0) scale(.98); } /* Ação principal (Contratar, Saiba mais) — laranja com texto marinho (contraste 6:1) */ .btn-primary { color: var(--navy); background: var(--brand); box-shadow: 0 10px 24px -10px rgba(255, 107, 0, .7); } .btn-primary:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(255, 85, 0, .75); } /* Botão informativo — contorno azul royal em áreas claras, contorno branco nas escuras */ .btn-ghost { color: var(--royal); border-color: rgba(0, 102, 255, .45); background: #fff; } .btn-ghost:hover { color: #fff; background: var(--royal); border-color: var(--royal); } .on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.04); } .on-dark .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); } .btn-wa { color: #03170A; background: #22C55E; box-shadow: 0 10px 24px -12px rgba(34,197,94,.7); } .btn-wa:hover { background: #16A34A; color: #fff; transform: translateY(-1px); } .btn-sm { min-height: 40px; padding: 0 1rem; font-size: .875rem; border-radius: 10px; } .btn-lg { min-height: 54px; padding: 0 1.75rem; font-size: 1rem; } .btn .i { width: 18px; height: 18px; transition: transform .2s ease; } .btn:hover .i-arrow { transform: translateX(3px); } /* ---------- Surfaces ---------- */ .card { position: relative; background: var(--card-bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .card-hover:hover { border-color: rgba(0, 102, 255, .35); transform: translateY(-3px); box-shadow: var(--shadow-md); } .on-dark .card { box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .on-dark .card-hover:hover { border-color: rgba(255,255,255,.28); box-shadow: none; } .icon-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 102, 255, .08); color: var(--royal); border: 1px solid rgba(0, 102, 255, .18); } .icon-tile.blue { background: rgba(18, 43, 92, .07); color: var(--navy-2); border-color: rgba(18, 43, 92, .16); } .icon-tile.green { background: #ECFDF3; color: #15803D; border-color: #BBF7D0; } .on-dark .icon-tile { background: rgba(111, 168, 255, .12); color: #8FBCFF; border-color: rgba(111, 168, 255, .28); } .on-dark .icon-tile.blue { background: rgba(255,255,255,.08); color: #DCE7FF; border-color: rgba(255,255,255,.18); } .on-dark .icon-tile.green { background: rgba(34,197,94,.12); color: #86EFAC; border-color: rgba(34,197,94,.28); } .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .i-fill { fill: currentColor; stroke: none; } .i-sm { width: 18px; height: 18px; } .i-xs { width: 16px; height: 16px; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--brand); } .text-gradient { background: linear-gradient(92deg, #0052CC 0%, #0066FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .on-dark .text-gradient { background-image: linear-gradient(92deg, #8FBCFF 0%, #5C9DFF 45%, #FF8A33 100%); } .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .45rem; border-radius: 9999px; border: 1px solid var(--line-strong); background: var(--soft); font-size: .8125rem; font-weight: 600; color: var(--fg-muted); } .pill-dot { position: relative; width: 22px; height: 22px; border-radius: 9999px; background: rgba(34,197,94,.15); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pill-dot::after { content: ''; width: 8px; height: 8px; border-radius: 9999px; background: #22C55E; animation: ping 2s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--fg-subtle); } .breadcrumb a:hover { color: var(--fg); } .breadcrumb .sep { opacity: .5; } /* Console mockup */ .console { box-shadow: 0 40px 100px -30px rgba(2, 8, 24, .7), 0 0 0 1px rgba(255,255,255,.08) inset; background: linear-gradient(180deg, rgba(26, 58, 120, .6), rgba(11, 27, 61, .92)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .eq span { display: block; width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #FF8A33, #FF6B00); animation: eq 1.2s ease-in-out infinite; transform-origin: bottom; } .eq span:nth-child(2) { animation-delay: -.3s; } .eq span:nth-child(3) { animation-delay: -.6s; } .eq span:nth-child(4) { animation-delay: -.9s; } .eq span:nth-child(5) { animation-delay: -.45s; } @keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } .spark path.line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 2.2s .4s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* ---------- Pricing ---------- */ .plan-featured { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, var(--brand) 0%, var(--royal) 100%) border-box; border: 2px solid transparent; box-shadow: 0 30px 60px -28px rgba(0, 102, 255, .45); } .on-dark .plan-featured { background: linear-gradient(var(--navy-2), var(--navy-2)) padding-box, linear-gradient(160deg, var(--brand) 0%, var(--royal) 100%) border-box; } .check { width: 20px; height: 20px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #DCFCE7; color: #16A34A; flex-shrink: 0; } .on-dark .check { background: rgba(34,197,94,.15); color: #4ADE80; } .check .i { width: 13px; height: 13px; stroke-width: 2.75; } .spec { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; } .spec:last-child { border-bottom: 0; } .spec dt { color: var(--fg-muted); } .spec dd { color: var(--fg); font-weight: 700; text-align: right; } /* ---------- FAQ ---------- */ .faq-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility .3s; } .faq-panel.open { grid-template-rows: 1fr; visibility: visible; } .faq-panel > div { overflow: hidden; } .faq-btn { cursor: pointer; transition: color .2s ease; } .faq-btn:hover { color: var(--accent); } .faq-btn .i-plus { transition: transform .3s ease, color .2s ease; } .faq-btn[aria-expanded="true"] { color: var(--accent); } .faq-btn[aria-expanded="true"] .i-plus { transform: rotate(45deg); color: var(--accent); } /* ---------- Forms ---------- */ .field { width: 100%; min-height: 48px; padding: .75rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--line-strong); color: var(--graphite); transition: border-color .2s ease, box-shadow .2s ease; } .field::placeholder { color: #7D879B; } .field:hover { border-color: #AEB9CB; } .field:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(0, 102, 255, .18); } .field.invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); } select.field option { background: #fff; color: var(--graphite); } /* ---------- Tabs ---------- */ .tabs { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .35rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .tab { min-height: 42px; padding: 0 1.1rem; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--fg-muted); transition: color .2s ease, background-color .2s ease; cursor: pointer; } .tab:hover { color: var(--royal); background: rgba(0, 102, 255, .06); } .tab[aria-selected="true"] { color: #fff; background: var(--royal); } .tab .count { margin-left: .35rem; font-size: .75rem; opacity: .75; } /* ---------- Audio tracks ---------- */ .track { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .8rem .9rem; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--line); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; cursor: pointer; } .track:hover { border-color: rgba(0, 102, 255, .35); box-shadow: var(--shadow-sm); } .track .play { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 9999px; background: rgba(0, 102, 255, .08); color: var(--royal); border: 1px solid rgba(0, 102, 255, .22); transition: background-color .2s ease, color .2s ease; } .track:hover .play { background: var(--royal); color: #fff; } .track .ic-pause { display: none; } .track.playing { border-color: var(--royal); background: rgba(0, 102, 255, .05); } .track.playing .play { background: var(--royal); color: #fff; } .track.playing .ic-play { display: none; } .track.playing .ic-pause { display: block; } .track.loading .play { animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .5; } } .track .t-title { display: block; font-weight: 600; color: var(--fg); line-height: 1.3; } .track .t-meta { display: block; font-size: .8125rem; color: var(--fg-muted); } .track .bar { display: block; height: 3px; border-radius: 3px; background: var(--line); margin-top: .5rem; overflow: hidden; } .track .bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--royal), var(--royal-soft)); } .track .t-eq { display: none; height: 18px; align-items: flex-end; gap: 2px; } .track.playing .t-eq { display: flex; } .track .t-eq span { width: 3px; background: var(--royal); } /* ---------- Gallery ---------- */ .gallery-item { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--mist); box-shadow: var(--shadow-sm); cursor: zoom-in; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; } .gallery-item:hover img { transform: scale(1.04); } .gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 27, 61, .85)); opacity: .8; transition: opacity .3s ease; } .gallery-item:hover::after { opacity: 1; } .gallery-item .cap { position: absolute; left: .9rem; bottom: .75rem; right: .9rem; z-index: 1; font-size: .8125rem; font-weight: 600; color: #fff; text-align: left; } .gallery-item .zoom { position: absolute; right: .75rem; top: .75rem; z-index: 1; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(11, 27, 61, .8); color: #fff; opacity: 0; transition: opacity .2s ease; } .gallery-item:hover .zoom, .gallery-item:focus-visible .zoom { opacity: 1; } .lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 14, 33, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox[hidden] { display: none; } .lightbox figure { max-width: min(1200px, 100%); } .lightbox img { max-height: calc(100dvh - 9rem); width: auto; margin: 0 auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background-color .2s ease; cursor: pointer; } .lb-btn:hover { background: var(--royal); border-color: var(--royal); } .lb-close { top: 1rem; right: 1rem; } .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); } /* ---------- Video facade ---------- */ .yt { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--navy); box-shadow: var(--shadow-md); cursor: pointer; } .yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s ease, transform .5s ease; } .yt:hover img { opacity: 1; transform: scale(1.02); } .yt .yt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--navy); box-shadow: 0 20px 50px -10px rgba(255, 107, 0, .7); transition: transform .2s ease, background-color .2s ease; } .yt:hover .yt-play { transform: scale(1.06); background: var(--brand-deep); } .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Credentials ---------- */ .cred { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); } .cred code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--royal-deep); font-weight: 600; font-size: .95rem; } .on-dark .cred { background: rgba(0,0,0,.2); } .on-dark .cred code { color: #8FBCFF; } .copy-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .7rem; border-radius: 8px; font-size: .8125rem; color: var(--fg-muted); background: var(--soft); border: 1px solid var(--line-strong); transition: color .2s ease, border-color .2s ease; cursor: pointer; } .copy-btn:hover { color: var(--accent); border-color: var(--accent); } /* ---------- Legal / prose ---------- */ .legal { color: var(--fg); font-size: 1.0625rem; line-height: 1.8; max-width: 72ch; } .legal h2 { scroll-margin-top: calc(var(--header-h) + 1.5rem); margin: 3.25rem 0 1rem; padding-top: 2.5rem; border-top: 1px solid var(--line); font-family: Lexend, system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--navy); } .legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal p { margin: 0 0 1.1rem; } .legal ul { margin: 0 0 1.25rem; padding: 0; list-style: none; } .legal li { position: relative; margin: 0 0 .75rem; padding-left: 1.4rem; } .legal li::before { content: ''; position: absolute; left: .2rem; top: .75em; width: 6px; height: 6px; border-radius: 9999px; background: var(--royal); } .legal strong { color: var(--navy); font-weight: 700; } .legal a { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; } .legal a:hover { color: var(--royal-deep); } .legal .table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .legal table { width: 100%; border-collapse: collapse; font-size: .95rem; } .legal th, .legal td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); } .legal th { color: var(--navy); background: var(--mist); font-weight: 700; } .legal tr:last-child td { border-bottom: 0; } .legal td:last-child, .legal th:last-child { text-align: right; } .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100dvh - var(--header-h) - 3rem - var(--player-h)); overflow-y: auto; } .toc a { display: block; padding: .45rem .9rem; border-left: 2px solid var(--line); color: var(--fg-muted); font-size: .875rem; line-height: 1.4; transition: color .2s ease, border-color .2s ease; } .toc a:hover { color: var(--royal); } .toc a.active { color: var(--royal); font-weight: 600; border-left-color: var(--royal); } /* ---------- Rádio ao vivo ---------- */ .radio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom); background: rgba(11, 27, 61, .97); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -16px 40px -20px rgba(4, 12, 30, .5); } .radio::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--royal), var(--brand), transparent); opacity: 0; transition: opacity .4s ease; } .radio[data-state="playing"]::before { opacity: 1; } .radio-inner { display: flex; align-items: center; gap: .9rem; height: var(--player-h); } .radio-cover { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--royal-soft), var(--royal) 55%, var(--royal-deep)); box-shadow: 0 10px 24px -10px rgba(0, 102, 255, .8); } .radio-cover .eq { position: absolute; inset: auto 0 7px 0; display: none; justify-content: center; height: 14px; gap: 2px; } .radio-cover .eq span { width: 3px; background: #fff; } .radio[data-state="playing"] .radio-cover .i { display: none; } .radio[data-state="playing"] .radio-cover .eq { display: flex; position: static; height: 20px; align-items: flex-end; } .radio-info { min-width: 0; flex: 1; } .radio-label { display: flex; align-items: center; gap: .45rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); } .live-dot { width: 7px; height: 7px; border-radius: 9999px; background: #7D8BA8; } .radio[data-state="playing"] .live-dot { background: #EF4444; animation: live 1.6s ease-in-out infinite; } .radio[data-state="playing"] .radio-label .live-txt { color: #FCA5A5; } @keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); } } .radio-title { margin-top: .15rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: #fff; font-size: .9375rem; } .radio-status { font-size: .75rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio[data-state="error"] .radio-status { color: #FCA5A5; } .radio-play { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 9999px; color: var(--navy); cursor: pointer; background: var(--brand); box-shadow: 0 10px 26px -10px rgba(255, 107, 0, .8); transition: transform .15s ease, background-color .2s ease; } .radio-play:hover { transform: scale(1.05); background: var(--brand-deep); } .radio-play:active { transform: scale(.96); } .radio-play .ic-pause, .radio-play .spin { display: none; } .radio[data-state="playing"] .radio-play .ic-play { display: none; } .radio[data-state="playing"] .radio-play .ic-pause { display: block; } .radio[data-state="loading"] .radio-play .ic-play { display: none; } .radio[data-state="loading"] .radio-play .spin { display: block; } .spin { width: 22px; height: 22px; border-radius: 9999px; border: 2.5px solid rgba(11, 27, 61, .25); border-top-color: var(--navy); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .radio-vol { display: flex; align-items: center; gap: .5rem; } .radio-mute { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: #C8D3EA; cursor: pointer; transition: color .2s ease, background-color .2s ease; } .radio-mute:hover { color: #fff; background: rgba(255,255,255,.08); } .radio-mute .ic-mute { display: none; } .radio.is-muted .radio-mute .ic-vol { display: none; } .radio.is-muted .radio-mute .ic-mute { display: block; } .radio-vol input[type="range"] { -webkit-appearance: none; appearance: none; width: 110px; height: 4px; border-radius: 4px; cursor: pointer; background: linear-gradient(90deg, var(--royal-soft) var(--val, 80%), rgba(255,255,255,.18) var(--val, 80%)); } .radio-vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 9999px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .radio-vol input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 9999px; background: #fff; } .radio-vol input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; } /* Barra de progresso da navegação */ .route-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 3px; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .route-progress::before { content: ''; display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--royal), var(--brand)); animation: route 1s ease-in-out infinite; } .route-progress.active { opacity: 1; } @keyframes route { from { transform: translateX(-100%); } to { transform: translateX(260%); } } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 1rem); z-index: 80; transform: translate(-50%, 20px); opacity: 0; padding: .7rem 1.1rem; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 600; font-size: .875rem; box-shadow: 0 20px 50px -10px rgba(4, 12, 30, .5); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- Reveal ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); } .js .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } .spark path.line { stroke-dashoffset: 0; } }