/* ========================================================= OPIX — PLANOS PAGE VISUAL REFRESH ========================================================= */ /* GRID DOS CARDS */ .tab-panel.grid.cards, #fibra.tab-panel, #watch.tab-panel, #globoplay.tab-panel { width: 100%; } .tab-panel.grid.cards { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 24px; align-items: stretch; } #globoplay.tab-panel.grid.cards { grid-template-columns: repeat(2, minmax(280px, 360px)); justify-content: center; } @media (max-width: 1200px) { .tab-panel.grid.cards { grid-template-columns: repeat(2, minmax(260px, 1fr)); } #globoplay.tab-panel.grid.cards { grid-template-columns: repeat(2, minmax(260px, 1fr)); } } @media (max-width: 700px) { .tab-panel.grid.cards, #globoplay.tab-panel.grid.cards { grid-template-columns: 1fr; } } /* CARD BASE */ .plan-card { position: relative; overflow: visible; border-radius: 28px; border: 1px solid #e8c7ff; background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%); box-shadow: 0 16px 40px rgba(73, 20, 104, 0.08), 0 4px 12px rgba(73, 20, 104, 0.04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .plan-card:hover { transform: translateY(-6px); box-shadow: 0 22px 52px rgba(73, 20, 104, 0.12), 0 6px 18px rgba(73, 20, 104, 0.06); } /* CATEGORIA FIBRA */ #fibra .plan-card, .plan-card[data-plan*="Mega"] { background: linear-gradient(180deg, #ffffff 0%, #faf6ff 100%); } /* CATEGORIA WATCH */ #watch .plan-card, .plan-card[data-plan*="Watch"] { background: linear-gradient(180deg, #fffdfa 0%, #fff8f1 100%); border-color: #f0d9ff; } /* CATEGORIA GLOBOPLAY */ #globoplay .plan-card, .plan-card[data-plan*="Globoplay"] { background: linear-gradient(180deg, #fffafc 0%, #fff4f8 100%); border-color: #f3c7df; } /* CARD DESTACADO */ .plan-card.featured { border: 2px solid #d000ff; transform: translateY(-8px); box-shadow: 0 26px 60px rgba(208, 0, 255, 0.18), 0 10px 22px rgba(93, 18, 144, 0.08); } .plan-card.featured:hover { transform: translateY(-10px); } .plan-card.featured::before { content: "Mais escolhido"; position: absolute; top: -14px; right: 18px; z-index: 3; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #d800ff, #8f00d9); color: #ffffff; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 20px rgba(208, 0, 255, 0.28); } /* TOPO / CHIP */ .plan-card .eyebrow, .plan-card .card-eyebrow, .plan-card .plan-kicker, .plan-card .plan-label { border-radius: 999px; background: #f1ddff; border: 1px solid #ddb7ff; color: #5b1697; font-weight: 800; letter-spacing: .04em; } /* TITULOS */ .plan-card h3, .plan-card h2, .plan-card .title, .plan-card .plan-title, .plan-card .plan-speed { color: #2c004c; letter-spacing: -0.02em; } /* PRECO */ .plan-card .price, .plan-card .plan-price, .plan-card [class*="price"] { color: #8f11e6; } /* LISTA / BENEFICIOS */ .plan-card li, .plan-card .benefit, .plan-card .benefits li { line-height: 1.45; } .plan-card li::marker { color: #b000ff; } /* BOTOES */ .plan-card .btn, .plan-card button, .plan-card a.btn, .plan-card a.button { border-radius: 16px; font-weight: 700; box-shadow: 0 10px 24px rgba(167, 20, 214, 0.16); } /* AJUSTE PARA NAO QUEBRAR "WI-FI 6" */ .nowrap, .wifi-nowrap { white-space: nowrap; } /* ABAS DE TOPO */ .tab-btn { transition: all .2s ease; } .tab-btn:hover { transform: translateY(-1px); } /* MELHOR RESPIRO GERAL */ .plan-card { min-height: 100%; } /* ========================================================= OPIX PLAN CARDS — SHADOW FIX V2 Remove efeitos retangulares que vazavam das curvas. ========================================================= */ /* * Existem efeitos antigos em ::before / ::after vindos * da Motion V3 e do primeiro refresh dos cards. * * O selo "Mais escolhido" já existe de verdade no HTML * através de .plan-tag, portanto não precisamos criar * selo ou linha luminosa usando pseudo-elemento. */ html body .tab-panel .plan-card::before, html body .tab-panel .plan-card::after { content: none !important; display: none !important; } /* --------------------------------------------------------- CARD NORMAL --------------------------------------------------------- */ html body .tab-panel .plan-card { position: relative; border-radius: 28px !important; background-clip: padding-box; box-shadow: 0 18px 38px rgba(55, 15, 78, .075), 0 5px 14px rgba(55, 15, 78, .035) !important; /* * Mantemos visible porque o selo do card destacado * precisa ficar acima da borda. */ overflow: visible !important; } /* Hover também respeitando a curva */ @media (hover:hover) { html body .tab-panel .plan-card:hover { box-shadow: 0 24px 48px rgba(55, 15, 78, .11), 0 8px 18px rgba(55, 15, 78, .045) !important; } } /* --------------------------------------------------------- CARD EM DESTAQUE --------------------------------------------------------- */ html body .tab-panel.active .plan-card.featured { border: 2px solid rgba(205, 0, 247, .88) !important; border-radius: 28px !important; box-shadow: 0 22px 48px rgba(152, 0, 199, .16), 0 8px 20px rgba(91, 15, 124, .07), 0 0 0 1px rgba(211, 55, 245, .10) !important; } /* * Animação de destaque agora atua somente na sombra. * Nada de linha reta passando sobre o card. */ html body .tab-panel.active .plan-card.featured { animation: opixPlanSoftGlowFinal 4.2s ease-in-out infinite !important; } @keyframes opixPlanSoftGlowFinal { 0%, 100% { box-shadow: 0 22px 48px rgba(152, 0, 199, .13), 0 8px 20px rgba(91, 15, 124, .06), 0 0 0 1px rgba(211, 55, 245, .08); } 50% { box-shadow: 0 25px 54px rgba(176, 0, 221, .20), 0 10px 24px rgba(91, 15, 124, .08), 0 0 0 2px rgba(211, 55, 245, .11); } } /* --------------------------------------------------------- SELO REAL "MAIS ESCOLHIDO" --------------------------------------------------------- */ html body .tab-panel.active .plan-card.featured .plan-tag { display: inline-flex !important; position: absolute !important; top: -14px !important; right: 18px !important; z-index: 50 !important; align-items: center; justify-content: center; padding: 8px 15px !important; border-radius: 999px !important; background: linear-gradient( 135deg, #d018ef, #8500b8 ) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.48); box-shadow: 0 7px 18px rgba(152,0,199,.23); font-size: .72rem !important; line-height: 1 !important; font-weight: 900 !important; white-space: nowrap; } /* --------------------------------------------------------- ACCESSIBILITY --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html body .tab-panel.active .plan-card.featured { animation: none !important; } }