/* ============================================================ * native-app.css — Per-screen overrides for the native app shell. * Loads AFTER tab-bar.css. All rules are scoped to body.platform-native * so the web experience is unchanged. * ========================================================== */ /* ---------- Main container goes edge-to-edge ---------- */ body.platform-native > main { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; } /* When the sidebar opens, body.scroll-locked becomes position:fixed with a * negative top offset, which exposes the background. Without a bg on * html, WKWebView paints white. Match html bg to body so the gap is invisible. */ html:has(body.platform-native) { background-color: var(--color-bg-primary, #020617) !important; } /* Scroll-lock no app nativo: o lock global (.scroll-locked) usa position:fixed, * mas `html body.platform-native` força `position: relative !important` e * `touch-action: pan-y !important` (tab-bar.css), o que anulava o lock e deixava * o fundo rolar com qualquer modal/sheet aberto (ex.: Editar Perfil). Aqui * reforçamos o lock com maior especificidade pra travar o fundo de fato. */ body.platform-native.scroll-locked { position: fixed !important; width: 100% !important; overflow: hidden !important; touch-action: none !important; overscroll-behavior: none !important; } /* Hide desktop-only blocks on native (mobile-home is what shows) */ body.platform-native .rackfy-desktop-grid, body.platform-native .rackfy-desktop-block { display: none !important; } /* ============================================================ * HOME (#forum-section + .rackfy-mobile-home) * ============================================================ */ /* Hero text block above the search */ body.platform-native #forum-section > div:first-child { text-align: left !important; margin-bottom: 0.75rem !important; padding: 0 16px !important; max-width: none !important; } body.platform-native #forum-section #home-hero-logo-wrap { display: none !important; /* logo is already in the top header */ } body.platform-native #forum-section > div:first-child > p { text-align: left !important; font-size: 0.9rem !important; line-height: 1.4 !important; margin-bottom: 0 !important; color: #94a3b8 !important; } /* ---------- .rackfy-mobile-home child blocks become edge-to-edge ---------- */ body.platform-native .rackfy-mobile-home { --tw-space-y-reverse: 0 !important; margin: 0 !important; } body.platform-native .rackfy-mobile-home > * + * { margin-top: 1.25rem !important; } /* 1) Central Rackfy hero card → destaque com glow radial lime */ body.platform-native .rackfy-mobile-home > div:nth-child(1) { background: radial-gradient(120% 120% at 0% 0%, rgba(224, 243, 56, 0.08) 0%, #0f172a 55%) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-card, 24px) !important; box-shadow: none !important; padding: 18px 16px !important; margin: 0 16px !important; } body.platform-native .rackfy-mobile-home > div:nth-child(1) > p:first-child { color: #e0f338 !important; font-size: 0.7rem !important; margin-bottom: 0.5rem !important; } body.platform-native .rackfy-mobile-home > div:nth-child(1) h1 { font-size: 1.65rem !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; } body.platform-native .rackfy-mobile-home > div:nth-child(1) > p:nth-of-type(2) { margin-top: 0.5rem !important; } body.platform-native .rackfy-mobile-home > div:nth-child(1) .grid { margin-top: 1rem !important; } /* 2) "O que você quer melhorar hoje?" — 2x2 grid of tiles * Flatten tile chrome: no bg, just a thin divider grid */ body.platform-native .rackfy-mobile-home > div:nth-child(2) { padding: 0 16px !important; } body.platform-native .rackfy-mobile-home > div:nth-child(2) > p:first-child { margin-bottom: 0.75rem !important; color: #94a3b8 !important; } body.platform-native .rackfy-mobile-home > div:nth-child(2) > div.grid { gap: 10px !important; } body.platform-native .rackfy-mobile-home > div:nth-child(2) > div.grid > button { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: 18px !important; box-shadow: none !important; padding: 14px !important; } /* Keep the special lime tile (Analisar meu jogo) accent */ body.platform-native .rackfy-mobile-home > div:nth-child(2) > div.grid > button.border-lime-500\/30 { background: rgba(224, 243, 56, 0.06) !important; border-color: rgba(224, 243, 56, 0.35) !important; } /* 3) Jornada Rackfy → header (eyebrow+título) fora + card delimitado. * O wrapper só recebe o respiro lateral; o card é .rk-journey. */ body.platform-native .rackfy-mobile-home > div:nth-child(3) { padding: 0 16px !important; } body.platform-native .rackfy-mobile-home .rk-journey { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-card, 24px) !important; box-shadow: none !important; padding: 6px 16px !important; } /* 4) Meu Cronograma — removido da Home no app nativo (fica só na sidebar). */ body.platform-native .rackfy-mobile-home > div:last-child { display: none !important; } /* ============================================================ * PROFILE (#profile-section) * Content is injected by script.js — selectors target the * generated structure. * ============================================================ */ /* Outer wrapper → strip card chrome, full-width */ body.platform-native #profile-section > div:first-child { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; margin: 0 !important; } /* Header row (avatar + name + stats) — stack vertically, tight top */ body.platform-native #profile-section > div > div:first-child { flex-direction: column !important; align-items: center !important; padding: 8px 16px 16px !important; text-align: center; gap: 0 !important; margin-top: 0 !important; } /* Avatar — smaller to feel more native and closer to top */ body.platform-native #profile-section #profile-picture { width: 84px !important; height: 84px !important; margin: 0 auto 10px !important; border-width: 2px !important; border-color: rgba(224, 243, 56, 0.4) !important; } /* Botão "Editar Perfil" → pill discreto (estilo mockup) */ body.platform-native #profile-section #open-profile-modal-btn-page { background: #0b1220 !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: 999px !important; color: #f8fafc !important; } /* Rackfy Ace (Perfil): card resumo + empty estavam laranja → trazer p/ marca. * A lista de análises (.rk-listrow + .rk-statuschip) é injetada após o card. */ body.platform-native #rackfy-ace-view > div:first-child { background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 16px !important; } body.platform-native #rackfy-ace-view h4, body.platform-native #rackfy-ace-view p, body.platform-native #rackfy-ace-view [style*="color: black"], body.platform-native #rackfy-ace-view [style*="color:black"] { color: #f8fafc !important; } body.platform-native #rackfy-ace-view .text-orange-600 { color: #e0f338 !important; } body.platform-native #rackfy-ace-view .bg-orange-200 { background: #1e293b !important; } body.platform-native #rackfy-ace-view .bg-orange-600 { background: #e0f338 !important; color: #08120a !important; } body.platform-native #rackfy-ace-view .border-orange-200 { border-color: #1e293b !important; } /* Name + email block */ body.platform-native #profile-section > div > div:first-child > div:last-child { width: 100% !important; text-align: center !important; } body.platform-native #profile-section > div > div:first-child h2 { font-size: 1.4rem !important; margin-bottom: 0.15rem !important; } body.platform-native #profile-section > div > div:first-child > div:last-child > div:first-child { flex-direction: column !important; align-items: center !important; margin-bottom: 1rem !important; } /* Edit profile button — sem margin-top pra alinhar com o botão "Conta" * na mesma linha (ambos centralizados pelo flex items-center). */ body.platform-native #profile-section #open-profile-modal-btn-page { width: auto !important; margin-top: 0 !important; } /* 6 stat cards (Nível/Raquete/Frequência/Idade/Telefone/Cidade) → cards delimitados 2 colunas (estilo Clube DL) */ body.platform-native #profile-section .grid.grid-cols-2 { gap: 10px !important; margin-top: 1rem !important; padding: 0 16px; } body.platform-native #profile-section .grid.grid-cols-2 > .bg-slate-800 { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-control, 16px) !important; padding: 12px 14px !important; text-align: left !important; } body.platform-native #profile-section .grid.grid-cols-2 > .bg-slate-800 > p:first-child { margin: 0 0 2px !important; } body.platform-native #profile-section .grid.grid-cols-2 > .bg-slate-800 > p:last-child { margin: 0 !important; color: #f8fafc !important; } /* "Meu Cronograma" gradient banner — removido do Perfil no app nativo * (fica só na sidebar). */ body.platform-native #profile-section div.bg-gradient-to-r { display: none !important; } /* Inner left cluster (icon + text) — keep horizontal even on mobile */ body.platform-native #profile-section div.bg-gradient-to-r > div:first-child { flex: 1 1 auto; flex-direction: row !important; align-items: center !important; gap: 12px !important; min-width: 0; } /* Smaller icon badge */ body.platform-native #profile-section div.bg-gradient-to-r .bg-emerald-500\/20 { padding: 8px !important; flex-shrink: 0; } body.platform-native #profile-section div.bg-gradient-to-r .bg-emerald-500\/20 svg { width: 18px !important; height: 18px !important; } /* Smaller text */ body.platform-native #profile-section div.bg-gradient-to-r h3 { font-size: 0.95rem !important; line-height: 1.2 !important; margin-bottom: 2px !important; } body.platform-native #profile-section div.bg-gradient-to-r p { font-size: 0.78rem !important; line-height: 1.3 !important; margin: 0 !important; } /* Trailing arrow svg — stays vertically centered on the right */ body.platform-native #profile-section div.bg-gradient-to-r > svg { width: 20px !important; height: 20px !important; flex-shrink: 0; } /* Section headers (h3) in profile */ body.platform-native #profile-section h3.text-xl { padding: 0 16px !important; font-size: 1.25rem !important; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800 !important; margin-bottom: 0.75rem !important; margin-top: 1.5rem !important; } /* Divider lines between sections (mt-8 pt-6 border-t) */ body.platform-native #profile-section .border-t { border-top: 0.5px solid rgba(148, 163, 184, 0.15) !important; padding-top: 1rem !important; margin-top: 1.5rem !important; } /* Preferences row */ body.platform-native #profile-section label.flex.items-center { padding: 12px 16px !important; margin: 0 !important; } /* All inner cards (Encordoamentos / Consultas / Care / Ace items / publications) → cards delimitados */ body.platform-native #profile-section .stringing-card, body.platform-native #profile-section #rackfy-care-view > div > div, body.platform-native #profile-section #rackfy-ace-view > div, body.platform-native #profile-section #my-publications-view > div, body.platform-native #profile-section .bg-slate-900.border, body.platform-native #profile-section .bg-slate-800.p-4 { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-control, 16px) !important; box-shadow: none !important; padding: 14px 16px !important; margin: 0 16px 10px !important; } /* Add Encordoamento button → keep but tighten margin */ body.platform-native #profile-section #add-stringing-btn { width: calc(100% - 32px) !important; margin: 16px !important; display: block !important; } /* space-y-4 inside dynamic profile lists shouldn't add extra vertical gap (we use dividers) */ body.platform-native #profile-section .space-y-4 > * + *, body.platform-native #profile-section .space-y-3 > * + * { margin-top: 0 !important; } /* ============================================================ * DESCUBRA (#finder-section) * ============================================================ */ body.platform-native #finder-section > div { max-width: none !important; } /* Hero header → centered, tighter */ body.platform-native #finder-section > div > div:first-child { text-align: center !important; padding: 0 16px !important; margin-bottom: 1rem !important; } body.platform-native #finder-section > div > div:first-child h2 { font-size: 1.5rem !important; margin-bottom: 0.4rem !important; text-align: center !important; } body.platform-native #finder-section > div > div:first-child > p { font-size: 0.9rem !important; text-align: center !important; margin: 0 auto !important; min-height: 0 !important; } /* Ball Guide banner → card destaque com glow lime */ body.platform-native #finder-section .bg-gradient-to-r.from-emerald-950 { background: radial-gradient(120% 120% at 0% 0%, rgba(224, 243, 56, 0.08) 0%, #0f172a 55%) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-card, 24px) !important; box-shadow: none !important; padding: 16px !important; margin: 0 16px 1rem !important; } body.platform-native #finder-section .bg-gradient-to-r.from-emerald-950 .absolute { display: none !important; } body.platform-native #finder-section .bg-gradient-to-r.from-emerald-950 p:first-child { font-size: 0.65rem !important; letter-spacing: 0.15em !important; margin-bottom: 0.25rem !important; } body.platform-native #finder-section .bg-gradient-to-r.from-emerald-950 h3 { font-size: 1rem !important; margin-bottom: 0.25rem !important; } body.platform-native #finder-section .bg-gradient-to-r.from-emerald-950 p:nth-of-type(2) { font-size: 0.8rem !important; line-height: 1.35 !important; } body.platform-native #finder-section #finder-ball-guide-btn { padding: 0.5rem 1rem !important; font-size: 0.8rem !important; margin-top: 0.5rem !important; width: 100% !important; } /* Tabs row → tighter spacing, horizontal scroll */ body.platform-native #finder-section nav[aria-label="Tabs"] { padding: 0 16px !important; justify-content: flex-start !important; } body.platform-native #finder-section .border-b.border-gray-200 { border-bottom: 0.5px solid rgba(148, 163, 184, 0.15) !important; margin-bottom: 1rem !important; } body.platform-native #finder-section nav[aria-label="Tabs"] button { padding: 0.75rem 0.5rem !important; font-size: 0.9rem !important; } /* Strip the BIG form container card → edge-to-edge form. * padding-top dá respiro pro título "O que você busca hoje?" (antes colado). */ body.platform-native #racket-finder-content > div, body.platform-native #string-finder-content > div, body.platform-native #shoe-finder-content > div, body.platform-native #ball-finder-content > div, body.platform-native #compare-rackets-finder-content > div { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 1rem 16px 0 !important; min-height: 0 !important; } /* Seletor de nível ("Selecione seu nível") → lista EMBUTIDA (in-flow) em vez de * overlay absoluto. O overlay crescia pra baixo e sumia atrás da tab-bar fixa; * in-flow ele empurra o conteúdo e a página rola natural, sem cortar nada. * Mudança 100% visual — os data-value/handlers/seleção continuam idênticos. */ body.platform-native #finder-section #finder-level-options { position: static !important; box-shadow: none !important; border-radius: 12px !important; } /* Ao abrir, garante altura suficiente pra todas as opções (página rola). */ body.platform-native #finder-section #finder-level-options.max-h-96 { max-height: 30rem !important; } /* Choice buttons row — compact, centered, 1 line per button when possible */ body.platform-native #finder-section .finder-choice-btn { padding: 0.5rem 0.4rem !important; font-size: 0.72rem !important; line-height: 1.15 !important; min-height: 0 !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } body.platform-native #finder-section .finder-choice-btn.hidden { display: none !important; } /* Forms inside finder: clean input styling */ body.platform-native #finder-section input[type="text"], body.platform-native #finder-section input[type="number"], body.platform-native #finder-section select, body.platform-native #finder-section textarea { padding: 0.75rem 0.875rem !important; border-radius: 10px !important; font-size: 0.95rem !important; } /* ============================================================ * SETUP LAB (#setup-lab-section) * ============================================================ */ body.platform-native #setup-lab-section > div { max-width: none !important; } /* Header → left-align, hide chunky badge, tighter */ body.platform-native #setup-lab-section > div > div:first-child { text-align: left !important; padding: 0 16px !important; margin-bottom: 1rem !important; } body.platform-native #setup-lab-section > div > div:first-child > div:first-child { display: none !important; /* The "LABORATÓRIO DE SETUPS" chunky pill badge */ } body.platform-native #setup-lab-section > div > div:first-child h2 { font-size: 1.5rem !important; margin-bottom: 0.3rem !important; } body.platform-native #setup-lab-section > div > div:first-child p { font-size: 0.9rem !important; text-align: left !important; margin: 0 !important; } /* Tab buttons (Setup Padrão / Pro Stock Builder) */ body.platform-native #setup-lab-section .flex.gap-2.mb-6 { padding: 0 16px !important; gap: 8px !important; } body.platform-native #setup-lab-section .setup-lab-tab-btn { padding: 0.6rem 0.5rem !important; font-size: 0.85rem !important; } /* Workspace cards (.setup-lab-builder etc.) → strip chrome, edge-to-edge */ body.platform-native #setup-lab-section .setup-lab-workspace { gap: 0 !important; } body.platform-native #setup-lab-section .setup-lab-workspace { padding: 0 16px; } body.platform-native #setup-lab-section .setup-lab-builder, body.platform-native #setup-lab-section .bg-slate-900.rounded-lg.shadow-lg, body.platform-native #setup-lab-section .bg-slate-900.rounded-xl.shadow-lg { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-card, 24px) !important; box-shadow: none !important; padding: 16px !important; margin: 0 0 12px !important; } /* Setup Lab section headers (h3 with icon + title) */ body.platform-native #setup-lab-section .setup-lab-builder h3 { font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8 !important; margin-bottom: 0.75rem !important; font-weight: 700 !important; } body.platform-native #setup-lab-section .setup-lab-builder h3 > span { display: none !important; /* Hide chunky icon badges in section headers on native */ } /* Setup Lab inputs */ body.platform-native #setup-lab-section input[type="text"], body.platform-native #setup-lab-section input[type="number"], body.platform-native #setup-lab-section select { padding: 0.75rem 0.875rem !important; border-radius: 10px !important; font-size: 0.95rem !important; } /* Field labels uppercase small-caps style */ body.platform-native #setup-lab-section label.block.text-sm { font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8 !important; font-weight: 600 !important; margin-bottom: 0.35rem !important; } /* ============================================================ * Keyboard handling: when keyboard is up, slide tab bar off-screen * ============================================================ */ body.platform-native.keyboard-open #rackfy-tab-bar { transform: translateX(-50%) translateY(220%) translateZ(0) !important; } /* ============================================================ * Backdrops — keep background untouched when sidebar / Care open * Sidebar (#mobile-menu) and Care (#ai-assistant-modal) used a * bg-black/50 dim that made the page look washed out on native. * ============================================================ */ body.platform-native #ai-assistant-modal, body.platform-native #account-settings-modal { background-color: transparent !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.platform-native #mobile-menu-backdrop { background-color: rgba(0, 0, 0, 0.45) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ============================================================ * Header em nativo: hamburger esquerda, logo direita (espelhado) * ============================================================ */ body.platform-native header #header-logo-wrap { order: 2; margin-left: auto; } body.platform-native header #header-mobile-controls { order: 1; margin-right: auto; } body.platform-native #rackfy-mobile-menu-btn svg { transform: scaleX(-1); } /* ============================================================ * Side-bar (#mobile-menu) — drawer glass (redesign) * Painel translúcido com blur, canto direito arredondado, * header com avatar + plano, itens .rk-menu-* gerados em script.js. * ============================================================ */ body.platform-native #mobile-menu { width: min(78vw, 300px) !important; background-color: transparent !important; background: var(--glass-bg-strong, rgba(2, 6, 23, 0.72)) !important; -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); border-right: 1px solid var(--glass-border, rgba(148, 163, 184, 0.18)) !important; border-radius: 0 var(--radius-card, 24px) var(--radius-card, 24px) 0; box-shadow: var(--shadow-float, 0 8px 32px rgba(0, 0, 0, 0.45)); transition: transform 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) !important; } body.platform-native #mobile-menu .menu-sticky-top { position: sticky; top: 0; z-index: 5; background: transparent; padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); } /* Header: avatar + nome + plano */ body.platform-native #mobile-menu .rk-menu-header { padding-left: 16px; padding-right: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); } body.platform-native #mobile-menu .rk-menu-profile { display: flex; align-items: center; gap: 12px; padding-top: 14px; } body.platform-native #mobile-menu .rk-menu-avatar { width: 46px !important; height: 46px !important; object-fit: cover; } body.platform-native #mobile-menu .rk-menu-id { min-width: 0; } body.platform-native #mobile-menu .rk-menu-name { color: #f8fafc !important; font-size: 0.95rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.platform-native #mobile-menu .rk-menu-plan-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } body.platform-native #mobile-menu .rk-menu-plan { color: #e0f338 !important; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } body.platform-native #mobile-menu .rackfy-goat-plan-text { color: #facc15 !important; } body.platform-native #mobile-menu .rk-menu-manage { display: block; width: 100%; margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-control, 16px); background: var(--accent-tint, rgba(224, 243, 56, 0.14)); color: #e0f338 !important; font-size: 0.8rem; font-weight: 700; text-align: center; text-decoration: none !important; border: none; } /* Corpo: labels de seção + itens */ body.platform-native #mobile-menu .rk-menu-body { padding: 6px 12px 16px; } body.platform-native #mobile-menu .rk-menu-label { color: #64748b !important; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; margin: 14px 6px 6px; } body.platform-native #mobile-menu .rk-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border-radius: var(--radius-control, 16px); background: transparent; border: none; color: #cbd5e1 !important; font-size: 0.92rem; font-weight: 600; text-align: left; text-decoration: none; transition: background 160ms ease-out, transform 120ms ease-out; -webkit-tap-highlight-color: transparent; } body.platform-native #mobile-menu .rk-menu-item span { color: inherit !important; } body.platform-native #mobile-menu .rk-menu-item:active { background: rgba(148, 163, 184, 0.1); transform: scale(0.97); } body.platform-native #mobile-menu .rk-menu-item.is-active { background: var(--accent-tint, rgba(224, 243, 56, 0.14)); color: #e0f338 !important; } body.platform-native #mobile-menu .rk-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } body.platform-native #mobile-menu .rk-menu-icon svg { width: 19px; height: 19px; display: block; } body.platform-native #mobile-menu .rk-menu-admin { color: #a5b4fc !important; } /* Rodapé: sair */ body.platform-native #mobile-menu .rk-menu-footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.12); } body.platform-native #mobile-menu #signout-btn, body.platform-native #mobile-menu #signout-btn * { color: #f87171 !important; } /* Account settings modal — full-width content on small screens; the modal * stays centered with its body scrolling internally (same pattern as * #profile-modal). max-height accounts for status bar + tab bar + safe areas. */ body.platform-native #account-settings-modal { padding: max(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), 16px) 12px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 76px) 12px !important; /* 76px = tab bar height (~60) + breathing room */ } body.platform-native #account-settings-modal .modal-content { max-width: 100%; max-height: 100%; } body.platform-native #ai-consent-modal { padding: max(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), 16px) 12px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 76px) 12px !important; } body.platform-native #ai-consent-modal .modal-content { max-width: 100%; max-height: 100%; } /* "Minhas Consultas Salvas" collapsible — native
/. * Applies on web + native (rule is unscoped). */ details.consultas-collapse > summary { list-style: none; } details.consultas-collapse > summary::-webkit-details-marker { display: none; } details.consultas-collapse[open] > summary .consultas-chevron { transform: rotate(180deg); } details.consultas-collapse > summary .consultas-chevron { transition: transform 0.3s ease; } .consultas-collapse > div.space-y-4 { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-top 0.32s ease; } .consultas-collapse[open] > div.space-y-4 { max-height: 2000px; opacity: 1; margin-top: 1rem; } /* ============================================================ * CARE em nativo: página própria (#care-chat-section) * O conteúdo do modal é transplantado para a section no boot * nativo (ai-service.js). A classe body.care-open é togglada * pelo navigateTo quando a seção ativa é o chat. * ============================================================ */ body.platform-native.care-open #rackfy-tab-bar { transform: translateX(-50%) translateY(220%) translateZ(0) !important; } /* Página full-screen: header global some (o chat tem header próprio * com safe-area) e o main perde os paddings de header/tab bar. */ body.platform-native.care-open > header { display: none !important; } html body.platform-native.care-open > main { padding-top: 0 !important; padding-bottom: 0 !important; } body.platform-native #care-chat-section { margin: 0 !important; padding: 0 !important; } /* Container do chat (ex-.modal-content): coluna ocupando o viewport. */ body.platform-native #care-chat-section .modal-content { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; border: none !important; border-radius: 0 !important; transform: none !important; background: #020617 !important; box-shadow: none !important; overflow: hidden; } body.platform-native #ai-modal-header { position: sticky; top: 0; z-index: 5; flex-shrink: 0; padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 12px) !important; padding-bottom: 12px !important; background: var(--glass-bg-strong, rgba(2, 6, 23, 0.72)); -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); border-bottom: 0.5px solid var(--glass-border, rgba(148, 163, 184, 0.18)); } body.platform-native #ai-modal-header h3 { flex: 1; justify-content: center; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: #f1f5f9; } body.platform-native #ai-modal-header h3 svg { display: none; } body.platform-native #close-ai-modal-btn { order: -1; color: #e2e8f0; padding: 8px; margin-right: 4px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } body.platform-native .ai-close-icon-web { display: none !important; } body.platform-native .ai-close-icon-native { display: inline-flex !important; } body.platform-native #ai-modal-header::after { content: ""; width: 40px; flex-shrink: 0; } body.platform-native #ai-chat-topics { background: linear-gradient(180deg, rgba(132, 204, 22, 0.04) 0%, transparent 100%); border-bottom-color: rgba(148, 163, 184, 0.12) !important; overflow-y: auto; overscroll-behavior: contain; } /* Cards informativos dos tópicos → padrão flat do redesign */ body.platform-native #ai-chat-topics .rounded-lg.border { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-control, 16px) !important; } body.platform-native .ai-topic-btn { background: #1e293b !important; color: #e2e8f0 !important; border: 1px solid rgba(132, 204, 22, 0.25); box-shadow: none !important; border-radius: var(--radius-control, 16px) !important; padding: 0.625rem 0.875rem !important; font-size: 0.875rem !important; } body.platform-native .ai-topic-btn:active { background: #0f172a !important; border-color: rgba(132, 204, 22, 0.6); transform: scale(0.98); } /* Rodapé do chat (container do form): cola no fim da coluna flex, * acima do home indicator. */ body.platform-native #care-chat-section #ai-chat-form { flex-direction: row !important; } body.platform-native #ai-chat-form input { background: #0f172a !important; border: 1px solid #1e293b !important; color: #f1f5f9 !important; border-radius: var(--radius-control, 16px) !important; } body.platform-native #ai-chat-form input::placeholder { color: #64748b; } body.platform-native #ai-chat-form input:focus { border-color: #84cc16 !important; outline: none; box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15); } body.platform-native #ai-chat-submit-btn { background: #84cc16 !important; color: #020617 !important; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-control, 16px) !important; box-shadow: 0 4px 14px rgba(132, 204, 22, 0.2) !important; } body.platform-native #ai-chat-submit-btn:active { background: #65a30d !important; transform: scale(0.98); } body.platform-native #ai-chat-box { background: #020617; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ============================================================ * Cronograma (schedule) em nativo: esconde tab-bar + back btn * ============================================================ */ .native-back-nav { display: none; } body.platform-native .native-back-nav { display: block; } /* Cronograma agora mantém a tab-bar visível (a barra aparece em todas as * páginas). Só garante respiro no fim da página para o pill flutuante. */ body.platform-native.schedule-open #schedule-section { padding-bottom: calc(58px + 10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 1rem); } /* ============================================================ * Animações de dropdown (ecossistema da sidebar + stringing card) * ============================================================ */ .servicos-mobile-items { overflow: hidden; transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; max-height: 1000px; opacity: 1; } .servicos-mobile-items.is-collapsed { max-height: 0; opacity: 0; padding-top: 0; } .stringing-details { overflow: hidden; transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, margin-top 0.32s ease, padding-top 0.32s ease; max-height: 0; opacity: 0; margin-top: 0 !important; padding-top: 0 !important; border-top-width: 0 !important; } .stringing-details.is-open { max-height: 1200px; opacity: 1; margin-top: 1rem !important; padding-top: 1rem !important; border-top-width: 1px !important; } /* ============================================================ * iPad / Tablet — Native app shell on wide screens. * Centers content column (720px) and keeps tab bar aligned. * Uses 100dvh so iOS dynamic-viewport changes don't strand * fixed-position elements at the wrong bottom. * ============================================================ */ @media (min-width: 768px) { html:has(body.platform-native), body.platform-native { min-height: 100dvh !important; background-color: #020617 !important; } body.platform-native > main { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } body.platform-native header > div { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 16px !important; } /* Pill flutuante já é centralizada e hug-content; nada a forçar no tablet. */ body.platform-native #forum-section, body.platform-native .rackfy-mobile-home { width: 100% !important; max-width: 100% !important; } } /* ============================================================ * REDESIGN — Bottom-sheets (modais de formulário/conteúdo) * Todo .modal-backdrop vira sheet ancorado no rodapé, exceto: * - #ai-assistant-modal (Care = página inteira, regras acima) * - #confirmation-modal / #string-change-confirm-modal (dialogs centrais) * ============================================================ */ @keyframes rk-sheet-up { from { transform: translateY(48px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } } body.platform-native .modal-backdrop:not(#ai-assistant-modal):not(#confirmation-modal):not(#string-change-confirm-modal) { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; } body.platform-native .modal-backdrop:not(#ai-assistant-modal):not(#confirmation-modal):not(#string-change-confirm-modal) > .modal-content { position: relative; width: 100% !important; max-width: 100% !important; margin: 0 !important; border: 1px solid var(--glass-border, rgba(148, 163, 184, 0.18)) !important; border-bottom: none !important; border-radius: var(--radius-sheet, 28px) var(--radius-sheet, 28px) 0 0 !important; background: var(--glass-bg-strong, rgba(2, 6, 23, 0.72)) !important; -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5) !important; max-height: calc(100dvh - var(--safe-area-inset-top, env(safe-area-inset-top, 44px)) - 24px) !important; padding-top: 22px !important; padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 16px) !important; overflow-y: auto; animation: rk-sheet-up 380ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } /* Alça de arrastar */ body.platform-native .modal-backdrop:not(#ai-assistant-modal):not(#confirmation-modal):not(#string-change-confirm-modal) > .modal-content::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.3); } /* Dialogs centrais (confirmações) → card glass compacto */ body.platform-native #confirmation-modal > .modal-content, body.platform-native #string-change-confirm-modal > .modal-content { border-radius: var(--radius-card, 24px) !important; border: 1px solid var(--glass-border, rgba(148, 163, 184, 0.18)) !important; background: var(--glass-bg-strong, rgba(2, 6, 23, 0.72)) !important; -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); } /* ============================================================ * REDESIGN — Micro-interações * ============================================================ */ /* Transição de seção ao trocar de tab (re-dispara quando .hidden sai) */ @keyframes rk-section-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } body.platform-native main > section { animation: rk-section-in 240ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); } /* Press states em elementos tocáveis */ body.platform-native .rackfy-mobile-home > div:nth-child(2) > div.grid > button:active, body.platform-native .rackfy-mobile-home > div:last-child > button:active, body.platform-native #profile-section div.bg-gradient-to-r:active, body.platform-native #profile-section #add-stringing-btn:active, body.platform-native #finder-section .finder-choice-btn:active { transform: scale(0.97); transition: transform 120ms ease-out; } /* Skeleton loading (shimmer) — aplicar .rk-skeleton em placeholders de lista */ @keyframes rk-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .rk-skeleton { position: relative; overflow: hidden; background: var(--color-bg-secondary, #0f172a); border-radius: var(--radius-control, 16px); min-height: 52px; } .rk-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.08), transparent); animation: rk-shimmer 1.4s ease-in-out infinite; } /* ============================================================ * REDESIGN — Identidade na Home + polish das páginas secundárias * (Planos, Gerenciar Assinatura, Quem Somos, Privacidade, Suporte). * 100% CSS, escopo platform-native — nenhum handler/ID/fluxo tocado. * ============================================================ */ /* Chip de plano na Home (preenchido por updateHomeIdentity) */ body.platform-native #home-plan-chip { margin-top: 14px; } body.platform-native .rk-plan-pill { display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #e0f338; background: var(--accent-tint, rgba(224, 243, 56, 0.14)); border-radius: var(--radius-pill, 999px); padding: 6px 13px; } body.platform-native .rk-plan-pill.rk-plan-goat { color: #facc15; background: rgba(250, 204, 21, 0.14); } /* ---------- Planos (#pricing-section) ---------- */ /* Toggle mensal/anual continua centralizado (defensivo). */ body.platform-native #pricing-section #pricing-interval-toggle { margin: 0 auto; } body.platform-native #pricing-cards-grid { padding: 0 16px; } /* Cards de plano: flat, raio 24, borda sutil. */ body.platform-native #pricing-cards-grid > div { background: var(--color-bg-secondary, #0f172a) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: var(--radius-card, 24px) !important; box-shadow: none !important; } /* GOAT em destaque com borda/glow lime. */ body.platform-native #pricing-cards-grid > div[data-plan-id="goat"] { border-color: rgba(224, 243, 56, 0.5) !important; background: linear-gradient(170deg, rgba(224, 243, 56, 0.07), #0f172a 45%) !important; } /* CTAs dos planos como pill. */ body.platform-native #pricing-section .pricing-select-btn { border-radius: var(--radius-control, 16px) !important; } /* Flag "Mais Popular" → canto superior esquerdo (estilo mockup .flag). */ body.platform-native #pricing-cards-grid > div > .absolute.-top-3 { top: -10px !important; left: 18px !important; right: auto !important; justify-content: flex-start !important; } /* ---------- Gerenciar Assinatura ---------- */ body.platform-native #subscription-management-section { padding: 0 16px; } /* Card principal com glow radial lime (estilo mockup .subhead). */ body.platform-native #subscription-management-section > div:first-child { background: radial-gradient(120% 120% at 0% 0%, rgba(224, 243, 56, 0.10) 0%, #0f172a 55%) !important; border: 1px solid var(--color-border, #1e293b) !important; border-radius: 22px !important; padding: 18px !important; } /* Detalhes em grade de 2 colunas, células compactas (estilo .subcell). */ body.platform-native #subscription-management-section .grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.platform-native #subscription-management-section .grid > div { padding: 12px 14px !important; } body.platform-native #subscription-management-section .grid > div:nth-child(3) { grid-column: 1 / -1; } body.platform-native #subscription-management-section .bg-slate-900, body.platform-native #subscription-management-section .bg-slate-800, body.platform-native #subscription-management-section .rounded-xl, body.platform-native #subscription-management-section .rounded-2xl { border-radius: var(--radius-control, 16px) !important; border-color: var(--color-border, #1e293b) !important; } /* ---------- Quem Somos / Privacidade / Suporte ---------- */ /* Contêiner externo vira edge-to-edge (mesmo padrão das outras telas). */ body.platform-native #about-us-section > div, body.platform-native #privacy-section > div, body.platform-native #support-section > div { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 16px 0 !important; margin: 0 !important; max-width: none !important; } /* Cartões internos com raio consistente. */ body.platform-native #about-us-section .rounded-xl, body.platform-native #privacy-section .rounded-xl, body.platform-native #support-section .rounded-xl, body.platform-native #privacy-section .rounded-2xl, body.platform-native #support-section .rounded-2xl { border-radius: var(--radius-control, 16px) !important; border-color: var(--color-border, #1e293b) !important; } /* Títulos dessas páginas com hierarquia mais forte. */ body.platform-native #about-us-section h2, body.platform-native #privacy-section h2, body.platform-native #support-section h2 { font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: -0.01em; } /* ---------- Alertas (#notifications-section) ---------- */ /* Container edge-to-edge + título mais forte, igual às demais telas. */ body.platform-native #notifications-section > div { padding-left: 16px !important; padding-right: 16px !important; max-width: none !important; } body.platform-native #notifications-section h2 { font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: -0.01em; } /* Lista de notificações: cada item agora é um card .rk-notif próprio — * o container não carrega mais chrome (sem bg/borda/divisores). */ body.platform-native #notifications-section #notifications-page-list { background: transparent !important; border: none !important; box-shadow: none !important; } body.platform-native #notifications-section #notifications-page-list > .rk-notif { transition: background 160ms ease-out; } body.platform-native #notifications-section #notifications-page-list > .rk-notif:active { background: rgba(224, 243, 56, 0.06) !important; } /* ============================================================ * SECTION HEADER (eyebrow + título) — assinatura do redesign. * Markup base usa utilitários Tailwind (degrada na web); aqui * só refinamos espaçamento/tipografia no app nativo. * ============================================================ */ body.platform-native .rk-sec-head { width: 100%; text-align: left; padding: 0 16px; } /* Dentro de containers que já têm respiro lateral próprio, o header não * deve somar outro padding (senão fica mais indentado que o conteúdo). */ body.platform-native #notifications-section .rk-sec-head, body.platform-native .rackfy-mobile-home .rk-sec-head, body.platform-native #about-us-section .rk-sec-head, body.platform-native #privacy-section .rk-sec-head, body.platform-native #support-section .rk-sec-head { padding: 0; } body.platform-native .rk-sec-head .rk-eyebrow { font-size: 0.625rem !important; letter-spacing: 0.14em !important; margin-bottom: 4px !important; } body.platform-native .rk-sec-head .rk-sec-title { font-size: 1.2rem !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-transform: none !important; padding: 0 !important; margin: 0 !important; color: #f8fafc !important; } /* Pill de plano no Perfil (reaproveita .rk-plan-pill da Home). */ body.platform-native .rk-profile-plan { margin-top: 8px; } /* ---------- Empty-state (sem registros) ---------- */ body.platform-native .rk-empty { text-align: center; padding: 24px 18px; margin: 0 16px; border: 1px dashed rgba(148, 163, 184, 0.24); border-radius: var(--radius-control, 16px); background: rgba(15, 23, 42, 0.4); } body.platform-native .rk-empty .rk-empty-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-tint, rgba(224, 243, 56, 0.14)); color: #e0f338; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } body.platform-native .rk-empty .rk-empty-ico svg { width: 20px; height: 20px; } body.platform-native .rk-empty .rk-empty-title { font-size: 0.9rem; font-weight: 700; color: #f8fafc; } body.platform-native .rk-empty .rk-empty-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 4px; line-height: 1.5; } /* ============================================================ * REDESIGN v2 — Camada de componentes .rk-* (fiel aos mockups) * logged-polish-v2.html + secondary-pages.html. * Vocabulário de classes semânticas que substitui os seletores * posicionais. Escopo body.platform-native (web intocada). * Tokens: lime #e0f338 / lime-tint rgba(224,243,56,0.14), * emerald #34d399, indigo #818cf8, sky #38bdf8, * card #0f172a, card2 #0b1220, border #1e293b, * ink #f8fafc, muted #94a3b8, faint #64748b. * ============================================================ */ /* ---------- Hero (Home) ---------- */ body.platform-native .rk-hero { border-radius: 24px !important; padding: 18px !important; background: radial-gradient(120% 120% at 0% 0%, rgba(224, 243, 56, 0.10) 0%, #0f172a 55%) !important; border: 1px solid #1e293b !important; box-shadow: none !important; } body.platform-native .rk-hero .rk-eyebrow { font-size: 0.625rem !important; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #e0f338 !important; } /* Linha avatar + nome/sub + pill (preenchida por updateHomeIdentity) */ body.platform-native .rk-planrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; } body.platform-native .rk-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #84cc16, #e0f338); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #08120a; font-size: 15px; flex: none; } body.platform-native .rk-planrow .rk-who { flex: 1; min-width: 0; } body.platform-native .rk-planrow .rk-who .rk-nm { font-size: 14px; font-weight: 700; line-height: 1.1; color: #f8fafc; } body.platform-native .rk-planrow .rk-who .rk-sub { font-size: 11px; color: #94a3b8; } /* ---------- Tiles 2x2 (Home) ---------- */ body.platform-native .rk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.platform-native .rk-tile { position: relative; background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 18px !important; padding: 14px !important; box-shadow: none !important; min-height: 96px; display: flex; flex-direction: column; gap: 8px; } body.platform-native .rk-tile.feat { background: rgba(224, 243, 56, 0.06) !important; border-color: rgba(224, 243, 56, 0.30) !important; } /* ---------- Estado travado (cadeado/PRO) — Home adaptável por plano ---------- * .rk-lock fica escondido por padrão (inclusive na web, evitando texto solto). * JS (updateHomeAccessState) alterna .is-locked conforme canAccessFeature. */ .rk-lock { display: none; } body.platform-native .rk-tile .rk-lock { position: absolute; top: 10px; right: 10px; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #facc15; background: rgba(250, 204, 21, 0.14); border-radius: 999px; padding: 3px 7px 3px 6px; } body.platform-native .rk-tile .rk-lock svg { width: 11px; height: 11px; } body.platform-native .rk-tile.is-locked .rk-lock { display: inline-flex; } /* Tile travado: levemente esmaecido; chip dessaturado pra leitura de "bloqueado". */ body.platform-native .rk-tile.is-locked { opacity: 0.9; } body.platform-native .rk-tile.is-locked .rk-chip { filter: saturate(0.55); } /* ACE travado não pode parecer destaque ativo: remove o glow lime do .feat. */ body.platform-native .rk-tile.feat.is-locked { background: #0f172a !important; border-color: #1e293b !important; } body.platform-native .rk-chip { width: 34px !important; height: 34px !important; border-radius: 12px !important; display: flex; align-items: center; justify-content: center; flex: none; } body.platform-native .rk-chip svg { width: 18px; height: 18px; } body.platform-native .rk-chip.lime { background: rgba(224, 243, 56, 0.14); color: #e0f338; } body.platform-native .rk-chip.emerald { background: rgba(52, 211, 153, 0.14); color: #34d399; } body.platform-native .rk-chip.indigo { background: rgba(129, 140, 248, 0.16); color: #818cf8; } body.platform-native .rk-chip.sky { background: rgba(56, 189, 248, 0.16); color: #38bdf8; } /* ---------- Steps numerados (Jornada) ---------- */ body.platform-native .rk-step { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid rgba(148, 163, 184, 0.10); } body.platform-native .rk-step:first-child { border-top: none; } body.platform-native .rk-step .rk-num { width: 24px; height: 24px; border-radius: 8px; background: rgba(224, 243, 56, 0.14) !important; color: #e0f338 !important; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; } /* ---------- List rows (Perfil análises / Cronograma) ---------- */ body.platform-native .rk-listrow { display: flex; align-items: center; gap: 12px; padding: 13px 14px !important; border-radius: 16px !important; background: #0f172a !important; border: 1px solid #1e293b !important; } body.platform-native .rk-listrow + .rk-listrow { margin-top: 8px; } body.platform-native .rk-listrow .rk-chip { width: 36px !important; height: 36px !important; border-radius: 11px !important; } body.platform-native .rk-listrow .rk-tx { flex: 1; min-width: 0; } body.platform-native .rk-listrow .rk-tx .rk-a { font-size: 13.5px; font-weight: 700; color: #f8fafc; } body.platform-native .rk-listrow .rk-tx .rk-b { font-size: 11.5px; color: #94a3b8; } body.platform-native .rk-listrow .rk-arr { color: #64748b; flex: none; } body.platform-native .rk-statuschip { font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; flex: none; } body.platform-native .rk-statuschip.ok { color: #e0f338; background: rgba(224, 243, 56, 0.14); } /* ---------- Stat cards (Perfil) ---------- */ body.platform-native .rk-stat { background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 16px !important; padding: 12px 14px !important; } /* ---------- Notification cards (Alertas) ---------- * Globais (não escopadas a platform-native): a página/dropdown de * notificações é a mesma em app web logado e no app nativo (ambos dark). * A estrutura do item é reescrita em renderNotifications. */ .rk-notif { display: flex; gap: 12px; padding: 13px 14px; border-radius: 16px; background: #0f172a; border: 1px solid #1e293b; align-items: flex-start; } .rk-notif + .rk-notif { margin-top: 8px; } .rk-notif.rk-notif-unread { border-color: rgba(224, 243, 56, 0.30); } .rk-notif-ico { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; } .rk-notif-ico svg { width: 17px; height: 17px; } .rk-notif-ico.lime { background: rgba(224, 243, 56, 0.14); color: #e0f338; } .rk-notif-ico.emerald { background: rgba(52, 211, 153, 0.14); color: #34d399; } .rk-notif-ico.indigo { background: rgba(129, 140, 248, 0.16); color: #818cf8; } .rk-notif-ico.sky { background: rgba(56, 189, 248, 0.16); color: #38bdf8; } .rk-notif-body { flex: 1; min-width: 0; text-decoration: none; color: inherit; } .rk-notif-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: #f8fafc; } .rk-notif-desc { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 2px; line-height: 1.4; } .rk-notif-time { display: block; font-size: 10px; color: #64748b; margin-top: 5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .rk-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0f338; flex: none; margin-top: 4px; } /* Respiro p/ os cards .rk-notif dentro do dropdown do sino. */ #notification-list { padding: 8px; } /* ---------- Document cards (Quem Somos / Privacidade / Suporte) ---------- */ body.platform-native .rk-doc { background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 18px !important; padding: 16px !important; margin-bottom: 10px; box-shadow: none !important; } body.platform-native .rk-doc-num { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: #e0f338; text-transform: uppercase; } body.platform-native .rk-doc h4 { font-size: 14.5px; font-weight: 800; margin-top: 5px; color: #f8fafc; } body.platform-native .rk-doc p { font-size: 13px; color: #94a3b8; line-height: 1.6; margin-top: 6px; } body.platform-native .rk-doc ul { list-style: none; margin-top: 8px; padding: 0; } body.platform-native .rk-doc li { font-size: 13px; color: #94a3b8; padding: 4px 0 4px 16px; position: relative; line-height: 1.55; } body.platform-native .rk-doc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #e0f338; } .rk-badge-top { width: 46px; height: 46px; border-radius: 14px; background: rgba(224, 243, 56, 0.14); color: #e0f338; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .rk-badge-top svg { width: 24px; height: 24px; } body.platform-native .rk-ctacard { background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 18px !important; padding: 18px !important; text-align: center; margin-bottom: 12px; box-shadow: none !important; } body.platform-native .rk-ctacard h4 { font-size: 15px; font-weight: 800; color: #f8fafc; } body.platform-native .rk-ctacard p { font-size: 12px; color: #94a3b8; margin-top: 6px; line-height: 1.5; } body.platform-native .rk-ctacard .rk-mail { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 800; padding: 11px 22px; border-radius: 14px; background: #e0f338; color: #08120a !important; text-decoration: none; } body.platform-native .rk-ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } body.platform-native .rk-ctrl { background: #0b1220 !important; border: 1px solid #1e293b !important; border-radius: 14px !important; padding: 11px 12px !important; } body.platform-native .rk-ctrl .rk-ctrl-t { font-size: 12px; font-weight: 700; color: #f8fafc; } body.platform-native .rk-ctrl .rk-ctrl-d { font-size: 10.5px; color: #94a3b8; margin-top: 2px; line-height: 1.4; } /* ---------- Subscription header (Gerenciar Assinatura) ---------- */ body.platform-native .rk-subhead { background: radial-gradient(120% 120% at 0% 0%, rgba(224, 243, 56, 0.10) 0%, #0f172a 55%) !important; border: 1px solid #1e293b !important; border-radius: 22px !important; padding: 18px !important; box-shadow: none !important; } body.platform-native .rk-status-pill { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #e0f338; background: rgba(224, 243, 56, 0.14); border-radius: 999px; padding: 4px 10px; } body.platform-native .rk-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } body.platform-native .rk-subcell { background: #0f172a !important; border: 1px solid #1e293b !important; border-radius: 16px !important; padding: 12px 14px !important; } body.platform-native .rk-subcell.full { grid-column: 1 / -1; } body.platform-native .rk-subcell .rk-k { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; } body.platform-native .rk-subcell .rk-v { font-size: 15px; font-weight: 700; margin-top: 3px; color: #f8fafc; } /* ---------- Plan flag "Mais popular" reposicionada (Planos) ---------- */ body.platform-native #pricing-cards-grid > div[data-plan-id="goat"] { position: relative; }