/* ============================================================================= ROLLIN CLIENTAREA SHELL ----------------------------------------------------------------------------- Layout moderno tipo Hetzner / DigitalOcean / Vultr para a área do cliente. Substitui o header/footer/sidebar default do WHMCS quando o usuário está em qualquer página de clientarea, faturas, tickets, KB ou anúncios. Estrutura: ┌─────────────────────────────────────────────────────────┐ │ TOPBAR [logo] ............ [search] [notif] [theme] [user]│ ├──────────┬──────────────────────────────────────────────┤ │ SIDEBAR │ MAIN CONTENT │ │ (260px) │ │ │ │ │ │ │ │ │ │ │ └──────────┴──────────────────────────────────────────────┘ Tokens shared from /css/rollin-theme.css. ============================================================================= */ /* ============================================================================= FONT GLOBAL — Poppins em TODA a clientarea WHMCS Bootstrap (rhost/all.min.css) força "Open Sans"/"Helvetica Neue" em body, inputs, buttons, table cells, alerts. Esse bloco força Poppins em tudo, exceto elementos monospace (code, pre, kbd, samp). ============================================================================= */ body.rollin-clientarea, body.rollin-clientarea *, .rollin-kb-page, .rollin-kb-page * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* Excludes: monospace context (código, terminal, snippets) — mantém legibilidade */ body.rollin-clientarea code, body.rollin-clientarea pre, body.rollin-clientarea kbd, body.rollin-clientarea samp, body.rollin-clientarea .mono, body.rollin-clientarea .rollin-kv-value.mono, body.rollin-clientarea .CodeMirror, body.rollin-clientarea .CodeMirror *, body.rollin-clientarea [class*="hljs"], body.rollin-clientarea pre code { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace !important; } /* Excludes: ícones FontAwesome — mantém FA Pro (glifos só existem nessa font). Cobre tanto quanto (EasyMDE). O ::before pseudo-element TAMBÉM precisa de FA Pro pra renderizar o glyph. */ body.rollin-clientarea .fa, body.rollin-clientarea .fas, body.rollin-clientarea .far, body.rollin-clientarea .fal, body.rollin-clientarea .fad, body.rollin-clientarea [class~="fa"], body.rollin-clientarea [class*=" fa-"], body.rollin-clientarea [class^="fa-"], body.rollin-clientarea .fa::before, body.rollin-clientarea .fas::before, body.rollin-clientarea .far::before, body.rollin-clientarea .fal::before, body.rollin-clientarea .fad::before, body.rollin-clientarea [class~="fa"]::before, body.rollin-clientarea [class*=" fa-"]::before, body.rollin-clientarea [class^="fa-"]::before { font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome' !important; font-weight: 900 !important; } body.rollin-clientarea .fab, body.rollin-clientarea .fab::before, body.rollin-clientarea [class~="fab"], body.rollin-clientarea [class~="fab"]::before { font-family: 'Font Awesome 5 Brands', 'FontAwesome' !important; font-weight: 400 !important; } body.rollin-clientarea i[class*="glyphicon"], body.rollin-clientarea [class*="glyphicon"]::before { font-family: 'Glyphicons Halflings' !important; } /* ===== Layout shell ===== data-theme é setado SÍNCRONO no . WHMCS Bootstrap (rhost/css/all.css) aplica `body { background: #fff }` e outras CSS aplicam `#fafafc`. Forçamos com specificity alta (html[data-theme=X] body.rollin-clientarea) + !important pra garantir override total da cascade WHMCS legacy. */ body.rollin-clientarea { margin: 0; min-height: 100vh; overflow-x: hidden; display: block; /* sobrescreve display: flex de .rollin-body */ } /* ===== TOKEN OVERRIDE com !important — vence cascade do WHMCS legacy ===== Quando data-theme="dark" no html, força TODOS os tokens dark no body+children. Quando "light", força tokens light. Isso garante que QUALQUER componente filho que use var(--text-primary) etc receba o valor correto pro tema. */ html[data-theme="dark"] body.rollin-clientarea { /* Cor sólida #16002a = tom MÉDIO visível do gradient antigo do sidebar. Aplicar sólido garante consistência uniforme em todos os elementos (sidebar, topbar, main, footer), sem efeitos colaterais de attachment. */ --bg-primary: #16002a !important; --bg-secondary: #1f0040 !important; --bg-tertiary: #2a0055 !important; --bg-card: rgba(255,255,255,0.03) !important; --bg-card-hover: rgba(255,255,255,0.055) !important; --bg-glass: rgba(31,0,64,0.6) !important; --text-primary: #ffffff !important; --text-secondary: rgba(255,255,255,0.72) !important; --text-muted: rgba(255,255,255,0.50) !important; --text-dim: rgba(255,255,255,0.30) !important; --border-subtle: rgba(255,255,255,0.08) !important; --border-default: rgba(255,255,255,0.12) !important; --border-strong: rgba(255,255,255,0.20) !important; --rh-purple: #8a2bd6 !important; --rh-purple-deep: #6a1ab0 !important; --rh-cyan: #01fad5 !important; background: #16002a !important; color: #ffffff !important; } /* Shell + footer: bg explícito pra evitar mismatch html(#180025) vs body(#16002a). Sem :has() (performance-killer). Footer DEVE ter bg, senão herda transparente e mostra o html por baixo, que tem cor diferente. */ html[data-theme="dark"] body.rollin-clientarea .rh-ca-shell, html[data-theme="dark"] body.rollin-clientarea .rh-ca-footer { background: #16002a !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-shell, html[data-theme="light"] body.rollin-clientarea .rh-ca-footer { background: #fafafc !important; } html[data-theme="light"] body.rollin-clientarea { --bg-primary: #fafafc !important; --bg-secondary: #f0f0f6 !important; --bg-tertiary: #e4e4f0 !important; --bg-card: rgba(0,0,0,0.02) !important; --bg-card-hover: rgba(0,0,0,0.04) !important; --bg-glass: rgba(255,255,255,0.85) !important; --text-primary: #0d0a1f !important; --text-secondary: rgba(13,10,31,0.72) !important; --text-muted: rgba(13,10,31,0.50) !important; --text-dim: rgba(13,10,31,0.32) !important; --border-subtle: rgba(13,10,31,0.08) !important; --border-default: rgba(13,10,31,0.12) !important; --border-strong: rgba(13,10,31,0.20) !important; --rh-purple: #6a1ab0 !important; --rh-purple-deep: #5710a0 !important; --rh-cyan: #6a1ab0 !important; background-color: #fafafc !important; color: #0d0a1f !important; } /* Wrappers principais — bg transparente em dark (deixa o gradient do body atravessar). Light mantém bg-primary sólido. */ body.rollin-clientarea #main-body, body.rollin-clientarea .rollin-main { background-color: transparent !important; color: var(--text-primary) !important; } html[data-theme="light"] body.rollin-clientarea #main-body, html[data-theme="light"] body.rollin-clientarea .rollin-main { background-color: #fafafc !important; } body.rollin-clientarea .rollin-main-inner { background-color: transparent !important; } /* ===== Override TOTAL em cards WHMCS legacy ===== clientareahome.tpl e similares têm cards com bg hardcoded que ignoram tema. Aqui forçamos bg dark/light + cores de texto consistentes por data-theme. */ /* DARK */ html[data-theme="dark"] body.rollin-clientarea .rh-hero, html[data-theme="dark"] body.rollin-clientarea .rh-stat, html[data-theme="dark"] body.rollin-clientarea .rh-qa-card, html[data-theme="dark"] body.rollin-clientarea .rh-announce, html[data-theme="dark"] body.rollin-clientarea .rh-announce-item, html[data-theme="dark"] body.rollin-clientarea .rh-explore, html[data-theme="dark"] body.rollin-clientarea .rh-status-ribbon, html[data-theme="dark"] body.rollin-clientarea .rh-card, html[data-theme="dark"] body.rollin-clientarea .rh-panel { background: linear-gradient(135deg, rgba(138,43,214,0.10), rgba(31,0,64,0.4)) !important; border-color: rgba(255,255,255,0.08) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rh-hero { background: linear-gradient(135deg, rgba(138,43,214,0.20) 0%, rgba(1,250,213,0.04) 60%, rgba(106,26,176,0.20) 100%), rgba(31,0,64,0.5) !important; border-color: rgba(255,255,255,0.08) !important; } /* LIGHT */ html[data-theme="light"] body.rollin-clientarea .rh-hero, html[data-theme="light"] body.rollin-clientarea .rh-stat, html[data-theme="light"] body.rollin-clientarea .rh-qa-card, html[data-theme="light"] body.rollin-clientarea .rh-announce, html[data-theme="light"] body.rollin-clientarea .rh-announce-item, html[data-theme="light"] body.rollin-clientarea .rh-explore, html[data-theme="light"] body.rollin-clientarea .rh-status-ribbon, html[data-theme="light"] body.rollin-clientarea .rh-card, html[data-theme="light"] body.rollin-clientarea .rh-panel { background: rgba(255,255,255,0.92) !important; border-color: rgba(13,10,31,0.08) !important; color: #0d0a1f !important; } /* Texto interno dos cards (números, labels, títulos) — usa tokens do tema */ body.rollin-clientarea .rh-hero h1, body.rollin-clientarea .rh-hero h2, body.rollin-clientarea .rh-hero-title, body.rollin-clientarea .rh-stat-num, body.rollin-clientarea .rh-qa-card strong, body.rollin-clientarea .rh-qa-card h3, body.rollin-clientarea .rh-qa-body h3, body.rollin-clientarea .rh-announce-title, body.rollin-clientarea .rh-section-title { color: var(--text-primary) !important; } body.rollin-clientarea .rh-hero-sub, body.rollin-clientarea .rh-hero-eyebrow, body.rollin-clientarea .rh-stat-lbl, body.rollin-clientarea .rh-qa-card em, body.rollin-clientarea .rh-qa-card p, body.rollin-clientarea .rh-qa-body, body.rollin-clientarea .rh-qa-body p, body.rollin-clientarea .rh-announce-excerpt, body.rollin-clientarea .rh-announce-date, body.rollin-clientarea .rh-section-eyebrow, body.rollin-clientarea .rh-status-label { color: var(--text-secondary) !important; } /* ============================================================================= ZERO NEON — paleta limpa, apenas roxo, sem cyan/pink Remove glow effects, color-shadow gigante, transforms agressivas que atrapalham leitura. Hover sóbrio: lift sutil + border roxo. ============================================================================= */ /* Apaga o orb decorativo do hover dos quick access cards */ body.rollin-clientarea .rh-qa-glow { display: none !important; } /* Quick access cards — hover sóbrio */ body.rollin-clientarea .rh-qa-card { --rh-qa-tint: 138,43,214 !important; /* roxo apenas */ transition: transform 200ms ease, border-color 200ms ease, background 200ms ease !important; box-shadow: none !important; } html[data-theme="light"] body.rollin-clientarea .rh-qa-card { --rh-qa-tint: 106,26,176 !important; } body.rollin-clientarea .rh-qa-card:hover { transform: translateY(-2px) !important; border-color: rgba(138, 43, 214, 0.4) !important; background: rgba(138, 43, 214, 0.06) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; } html[data-theme="light"] body.rollin-clientarea .rh-qa-card:hover { border-color: rgba(106, 26, 176, 0.3) !important; background: rgba(106, 26, 176, 0.04) !important; box-shadow: 0 6px 20px rgba(106, 26, 176, 0.08) !important; } /* Icon sóbrio no hover (sem rotação, sem zoom exagerado) */ body.rollin-clientarea .rh-qa-card:hover .rh-qa-icon { transform: none !important; box-shadow: none !important; background: var(--rh-purple) !important; color: #ffffff !important; } /* Variants urgentes/featured — todos viram roxo */ body.rollin-clientarea .rh-qa-urgent { border-color: rgba(138, 43, 214, 0.3) !important; } body.rollin-clientarea .rh-qa-urgent .rh-qa-icon { background: rgba(138, 43, 214, 0.14) !important; color: var(--rh-purple) !important; border-color: rgba(138, 43, 214, 0.25) !important; } body.rollin-clientarea .rh-qa-featured { background: rgba(138, 43, 214, 0.10) !important; border-color: rgba(138, 43, 214, 0.28) !important; } html[data-theme="light"] body.rollin-clientarea .rh-qa-featured { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.18) !important; } /* Stats cards — todos roxos, sem pink/cyan, sem glow */ body.rollin-clientarea .rh-stat, body.rollin-clientarea .rh-stat-icon, body.rollin-clientarea .rh-stat-num { box-shadow: none !important; } body.rollin-clientarea .rh-stat-icon { background: rgba(138, 43, 214, 0.12) !important; color: var(--rh-purple) !important; border-color: rgba(138, 43, 214, 0.22) !important; } html[data-theme="light"] body.rollin-clientarea .rh-stat-icon { background: rgba(106, 26, 176, 0.08) !important; color: var(--rh-purple-deep) !important; border-color: rgba(106, 26, 176, 0.18) !important; } /* Mata variantes coloridas (alert/success/etc) — todos viram roxo */ body.rollin-clientarea .rh-stat-alert .rh-stat-num, body.rollin-clientarea .rh-stat-success .rh-stat-num, body.rollin-clientarea .rh-stat-warning .rh-stat-num { color: var(--text-primary) !important; } body.rollin-clientarea .rh-stat-spark { filter: hue-rotate(0deg) !important; } /* Hero — gradient sutil, sem orbs nem mesh decorativos */ body.rollin-clientarea .rh-hero-orb, body.rollin-clientarea .rh-hero-mesh { display: none !important; } /* Status ribbon (Todos os sistemas operacionais) — limpo */ body.rollin-clientarea .rh-status-dot { box-shadow: none !important; background: var(--rh-purple) !important; } body.rollin-clientarea .rh-status-ribbon { box-shadow: none !important; } .rh-ca-shell { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 64px 1fr auto; grid-template-areas: "sidebar topbar" "sidebar main" "sidebar footer"; min-height: 100vh; transition: grid-template-columns 220ms ease; } .rh-ca-shell.is-sidebar-collapsed { grid-template-columns: 72px 1fr; } /* Footer ocupa a linha 3 da coluna direita */ body.rollin-clientarea .rh-ca-footer { grid-area: footer; width: 100%; margin: 0; } /* ============================================================================= TOPBAR ============================================================================= */ .rh-ca-topbar { grid-area: topbar; position: sticky; top: 0; z-index: 40; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(13, 10, 31, 0.85); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border-subtle); } html[data-theme="light"] .rh-ca-topbar { background: rgba(255, 255, 255, 0.92); } .rh-ca-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .rh-ca-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Hamburger toggle (mobile) + collapse toggle (desktop) */ .rh-ca-burger { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: all 160ms ease; flex-shrink: 0; } .rh-ca-burger:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } html[data-theme="light"] .rh-ca-burger:hover { background: rgba(13, 10, 31, 0.05); } /* Page title (breadcrumb-ish) */ .rh-ca-pagetitle { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rh-ca-pagetitle small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; } /* Search — ícone com espaço PROFISSIONAL respirável, placeholder não colide. Especificidade alta (body.rollin-clientarea) pra vencer cascade quirky. */ body.rollin-clientarea .rh-ca-search { position: relative !important; width: 320px !important; max-width: 100% !important; } /* Especificidade alta com html[data-theme] + atributo type pra vencer regra genérica em body.rollin-clientarea input[type="search"] */ html[data-theme="dark"] body.rollin-clientarea .rh-ca-search input, html[data-theme="dark"] body.rollin-clientarea .rh-ca-search input[type="search"], html[data-theme="light"] body.rollin-clientarea .rh-ca-search input, html[data-theme="light"] body.rollin-clientarea .rh-ca-search input[type="search"], body.rollin-clientarea .rh-ca-search input, body.rollin-clientarea .rh-ca-search input[type="search"] { width: 100% !important; height: 40px !important; min-height: 40px !important; /* padding-left 52px = 16 (esquerda) + 18 (ícone) + 18 (gap respirável pro placeholder) */ padding-left: 52px !important; padding-right: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--border-default) !important; border-radius: 10px !important; color: var(--text-primary) !important; font: inherit !important; font-size: 13px !important; outline: none !important; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important; box-sizing: border-box !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-search input { background: rgba(13, 10, 31, 0.04) !important; } body.rollin-clientarea .rh-ca-search input::placeholder { color: var(--text-muted) !important; } body.rollin-clientarea .rh-ca-search input:focus { border-color: var(--rh-purple) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.12) !important; } body.rollin-clientarea .rh-ca-search-icon { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; color: var(--text-muted) !important; pointer-events: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; z-index: 1 !important; } body.rollin-clientarea .rh-ca-search-icon svg, body.rollin-clientarea .rh-ca-search-icon i { width: 16px !important; height: 16px !important; display: block !important; } /* Theme toggle — mostra apenas o ícone do tema OPOSTO (qual o usuário irá pra) */ .rh-ca-theme-icon { display: none !important; } html[data-theme="dark"] .rh-ca-theme-icon--sun { display: block !important; } html[data-theme="light"] .rh-ca-theme-icon--moon { display: block !important; } /* Action buttons (notif, theme, etc) */ .rh-ca-action { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-default); border-radius: 10px; color: var(--text-secondary); cursor: pointer; transition: all 160ms ease; text-decoration: none; } .rh-ca-action:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border-color: var(--border-strong); } html[data-theme="light"] .rh-ca-action { background: rgba(13, 10, 31, 0.04); } html[data-theme="light"] .rh-ca-action:hover { background: rgba(13, 10, 31, 0.08); } /* Action badge (sino) — círculo perfeito FORA do ícone, no canto superior direito. Border 2px da cor do topbar = halo limpo, isola do ícone. */ body.rollin-clientarea .rh-ca-action-badge { position: absolute !important; top: -6px !important; right: -6px !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; background: var(--rh-purple) !important; color: #fff !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border: 2px solid !important; z-index: 2 !important; pointer-events: none !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-action-badge { border-color: #16002a !important; background: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-action-badge { border-color: #ffffff !important; background: #6a1ab0 !important; } /* 1 dígito → círculo perfeito */ body.rollin-clientarea .rh-ca-action-badge:not([data-multi-digit]) { min-width: 18px !important; width: 18px !important; padding: 0 !important; } /* CRÍTICO: hidden REALMENTE esconde (cascade do [hidden] vencido pelo display:flex) */ body.rollin-clientarea .rh-ca-action-badge[hidden] { display: none !important; } /* User menu */ .rh-ca-user { position: relative; } .rh-ca-user-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-default); border-radius: 999px; color: var(--text-primary); cursor: pointer; transition: all 160ms ease; font: inherit; } .rh-ca-user-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); } html[data-theme="light"] .rh-ca-user-btn { background: rgba(13, 10, 31, 0.04); } html[data-theme="light"] .rh-ca-user-btn:hover { background: rgba(13, 10, 31, 0.08); } .rh-ca-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; box-shadow: 0 2px 8px rgba(138, 43, 214, 0.35); } .rh-ca-user-name { font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rh-ca-user-chev { color: var(--text-muted); transition: transform 200ms ease; flex-shrink: 0; } .rh-ca-user.is-open .rh-ca-user-chev { transform: rotate(180deg); } /* User dropdown */ .rh-ca-user-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; padding: 8px; background: rgba(20, 0, 40, 0.95); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--border-default); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; z-index: 100; } html[data-theme="light"] .rh-ca-user-pop { background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 40px rgba(13, 10, 31, 0.15); } .rh-ca-user.is-open .rh-ca-user-pop { opacity: 1; visibility: visible; transform: translateY(0); } .rh-ca-user-pop-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); } .rh-ca-user-pop-head .rh-ca-avatar { width: 40px; height: 40px; font-size: 14px; } .rh-ca-user-pop-info { min-width: 0; } .rh-ca-user-pop-info strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rh-ca-user-pop-info em { font-style: normal; font-size: 12px; color: var(--text-muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-top: 2px; } .rh-ca-user-pop a, .rh-ca-user-pop button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: none; border-radius: 8px; width: 100%; color: var(--text-secondary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; text-decoration: none; transition: all 140ms ease; } .rh-ca-user-pop a:hover, .rh-ca-user-pop button:hover { background: rgba(138, 43, 214, 0.1); color: var(--text-primary); } html[data-theme="light"] .rh-ca-user-pop a:hover, html[data-theme="light"] .rh-ca-user-pop button:hover { background: rgba(106, 26, 176, 0.06); } .rh-ca-user-pop hr { margin: 6px 4px; border: none; border-top: 1px solid var(--border-subtle); } .rh-ca-user-pop-logout { color: #f97316 !important; } /* ============================================================================= SIDEBAR ============================================================================= */ .rh-ca-sidebar { grid-area: sidebar; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: transparent; /* herda do body — #16002a em dark / #fafafc em light */ border-right: 1px solid var(--border-subtle); overflow: hidden; z-index: 30; transition: width 220ms ease; } /* Force solid same color in dark to vencer qualquer conflito de cascata */ html[data-theme="dark"] body.rollin-clientarea .rh-ca-sidebar { background: #16002a !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-sidebar { background: #fafafc !important; } .rh-ca-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 20px; height: 64px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; flex-shrink: 0; overflow: hidden; } .rh-ca-sidebar-brand img { display: block; height: 32px; width: 130px; flex-shrink: 0; transition: width 220ms ease; } .is-sidebar-collapsed .rh-ca-sidebar-brand { padding: 14px 12px; justify-content: center; } .is-sidebar-collapsed .rh-ca-sidebar-brand img { height: 30px; width: 30px; object-fit: cover; object-position: left center; } .rh-ca-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } .rh-ca-sidebar-nav::-webkit-scrollbar { width: 4px; } .rh-ca-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .rh-ca-sidebar-section { margin-bottom: 6px; } .rh-ca-sidebar-label { display: block; padding: 12px 12px 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); transition: opacity 200ms ease; } .is-sidebar-collapsed .rh-ca-sidebar-label { opacity: 0; pointer-events: none; height: 4px; padding: 0; overflow: hidden; } .rh-ca-sidebar-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-secondary); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: all 140ms ease; margin-bottom: 2px; white-space: nowrap; overflow: hidden; } .rh-ca-sidebar-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } html[data-theme="light"] .rh-ca-sidebar-link:hover { background: rgba(13, 10, 31, 0.04); } .rh-ca-sidebar-link.is-active { background: linear-gradient(135deg, rgba(138, 43, 214, 0.18), rgba(138, 43, 214, 0.08)); color: #fff; font-weight: 600; } html[data-theme="light"] .rh-ca-sidebar-link.is-active { background: linear-gradient(135deg, rgba(106, 26, 176, 0.12), rgba(106, 26, 176, 0.04)); color: var(--rh-purple-deep); } .rh-ca-sidebar-link.is-active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--rh-purple); border-radius: 0 3px 3px 0; } .rh-ca-sidebar-link svg { flex-shrink: 0; width: 18px; height: 18px; } .rh-ca-sidebar-link-label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms ease; } .is-sidebar-collapsed .rh-ca-sidebar-link-label { opacity: 0; pointer-events: none; } /* Sidebar link badge — sólido, circular pra 1 dígito, oval pra 2+ */ body.rollin-clientarea .rh-ca-sidebar-link-badge { flex-shrink: 0 !important; min-width: 22px !important; height: 22px !important; padding: 0 7px !important; background: var(--rh-purple) !important; color: #fff !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-sidebar-link-badge { background: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-sidebar-link-badge { background: #6a1ab0 !important; } /* 1 dígito → círculo perfeito (width=height) */ body.rollin-clientarea .rh-ca-sidebar-link-badge:not([data-multi-digit]) { width: 22px !important; min-width: 22px !important; padding: 0 !important; } /* CRÍTICO: hidden REALMENTE esconde (browser default [hidden]{display:none} foi vencido pelo display:inline-flex acima — precisa override explícito) */ body.rollin-clientarea .rh-ca-sidebar-link-badge[hidden] { display: none !important; } .is-sidebar-collapsed .rh-ca-sidebar-link-badge { position: absolute; top: 4px; right: 4px; padding: 0 4px; min-width: 14px; height: 14px; line-height: 14px; text-align: center; } /* Sidebar footer (status + colapse) */ .rh-ca-sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--border-subtle); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rh-ca-sidebar-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #01fad5; overflow: hidden; transition: opacity 200ms ease; } .is-sidebar-collapsed .rh-ca-sidebar-status .rh-ca-sidebar-status-text { display: none; } html[data-theme="light"] .rh-ca-sidebar-status { color: #00a896; } .rh-ca-sidebar-status::before { content: ''; width: 7px; height: 7px; background: currentColor; border-radius: 50%; box-shadow: none; flex-shrink: 0; } .rh-ca-sidebar-collapse { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: all 140ms ease; } .rh-ca-sidebar-collapse:hover { color: var(--text-primary); border-color: var(--border-strong); } .is-sidebar-collapsed .rh-ca-sidebar-collapse svg { transform: rotate(180deg); } /* ============================================================================= MAIN CONTENT ----------------------------------------------------------------------------- O
vem do WHMCS core (header.tpl linha 549) — ele é nosso grid-area "main" do shell. Forçamos o bg/cores pra herdar o tema corretamente, sobrescrevendo o que o rollin-layout.css ou similar tenta aplicar. ============================================================================= */ body.rollin-clientarea #main-body, body.rollin-clientarea .rollin-main, .rh-ca-main { grid-area: main !important; padding: 28px 32px 80px !important; overflow-x: hidden !important; overflow-y: auto !important; min-width: 0 !important; background: var(--bg-primary) !important; color: var(--text-primary) !important; margin: 0 !important; width: auto !important; max-width: none !important; } body.rollin-clientarea .rollin-main-inner, .rh-ca-main-inner { max-width: 1280px !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; background: transparent !important; } /* ============================================================================= FOOTER (minimalista, dentro do main) ============================================================================= */ .rh-ca-footer { grid-area: footer; margin: 0; padding: 24px 32px; border-top: 1px solid var(--border-subtle); width: 100%; box-sizing: border-box; } .rh-ca-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 12px; color: var(--text-muted); } .rh-ca-footer-trust { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; } .rh-ca-footer-trust span { display: inline-flex; align-items: center; gap: 5px; } .rh-ca-footer-trust svg { color: #01fad5; } html[data-theme="light"] .rh-ca-footer-trust svg { color: #00a896; } .rh-ca-footer-nav { display: inline-flex; gap: 16px; } .rh-ca-footer-nav a { color: var(--text-muted); text-decoration: none; transition: color 140ms ease; } .rh-ca-footer-nav a:hover { color: var(--text-primary); } /* ============================================================================= MOBILE — sidebar slides in from left, hides by default ============================================================================= */ @media (max-width: 900px) { .rh-ca-shell { grid-template-columns: 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "topbar" "main"; } .rh-ca-sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 60; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .rh-ca-shell.is-sidebar-open .rh-ca-sidebar { transform: translateX(0); box-shadow: 16px 0 40px rgba(0, 0, 0, 0.4); } .rh-ca-shell.is-sidebar-collapsed .rh-ca-sidebar { /* desktop-collapsed não aplica em mobile */ width: 280px; } .rh-ca-sidebar-collapse { display: none; } /* backdrop */ .rh-ca-shell.is-sidebar-open::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: none; z-index: 50; animation: rh-ca-fade-in 220ms ease; } @keyframes rh-ca-fade-in { from { opacity: 0; } to { opacity: 1; } } .rh-ca-search { display: none; } .rh-ca-user-name { display: none; } .rh-ca-main { padding: 20px 16px 60px; } } @media (max-width: 480px) { .rh-ca-topbar { padding: 0 14px; } .rh-ca-pagetitle { font-size: 14px; } .rh-ca-action { width: 36px; height: 36px; } .rh-ca-user-btn { padding: 0 4px; } .rh-ca-user-chev { display: none; } } /* ============================================================================= FIX PACK — 6 pontos críticos da clientarea (premium polish) ============================================================================= */ /* === 1. Logo do sidebar: full em expandido, símbolo em collapsed === */ .rh-ca-sidebar-logo-mark { display: none !important; } .is-sidebar-collapsed .rh-ca-sidebar-logo-full { display: none !important; } .is-sidebar-collapsed .rh-ca-sidebar-logo-mark { display: block !important; width: 32px !important; height: 32px !important; margin: 0 auto !important; object-fit: contain !important; } .is-sidebar-collapsed .rh-ca-sidebar-brand { padding: 14px 0 !important; justify-content: center !important; } /* === 2. Status footer do sidebar: em collapsed esconder texto, manter só dot === */ .is-sidebar-collapsed .rh-ca-sidebar-foot { padding: 14px 12px !important; justify-content: center !important; flex-direction: column !important; gap: 8px !important; } .is-sidebar-collapsed .rh-ca-sidebar-status-text { display: none !important; } .is-sidebar-collapsed .rh-ca-sidebar-status { font-size: 0 !important; /* esconde qualquer texto residual */ } .is-sidebar-collapsed .rh-ca-sidebar-status::before { width: 9px !important; height: 9px !important; } /* === 3. Topbar = mesma cor sólida do canvas (sem rgba que distorce) === */ html[data-theme="dark"] body.rollin-clientarea .rh-ca-topbar { background: #16002a !important; border-bottom-color: rgba(255,255,255,0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-topbar { background: #fafafc !important; border-bottom-color: rgba(13,10,31,0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* === 4. Card "Últimos anúncios" — match treatment do .rh-explore === */ html[data-theme="dark"] body.rollin-clientarea .rh-announce, html[data-theme="dark"] body.rollin-clientarea .rh-explore { background: linear-gradient(135deg, rgba(138,43,214,0.18) 0%, rgba(106,26,176,0.10) 100%), rgba(31,0,64,0.55) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px !important; padding: 28px !important; color: #ffffff !important; box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important; } html[data-theme="light"] body.rollin-clientarea .rh-announce, html[data-theme="light"] body.rollin-clientarea .rh-explore { background: linear-gradient(135deg, rgba(106,26,176,0.05) 0%, rgba(255,255,255,0.6) 100%), rgba(255,255,255,0.92) !important; border: 1px solid rgba(13,10,31,0.06) !important; border-radius: 20px !important; padding: 28px !important; color: #0d0a1f !important; box-shadow: 0 12px 32px rgba(106,26,176,0.08) !important; } /* Items de anúncio individuais */ html[data-theme="dark"] body.rollin-clientarea .rh-announce-item { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 12px !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rh-announce-item:hover { background: rgba(138,43,214,0.10) !important; border-color: rgba(138,43,214,0.3) !important; transform: translateY(-1px) !important; } html[data-theme="light"] body.rollin-clientarea .rh-announce-item { background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(13,10,31,0.06) !important; border-radius: 12px !important; color: #0d0a1f !important; } /* === 5. Lista de features no .rh-explore — fundo dark consistente === */ html[data-theme="dark"] body.rollin-clientarea .rh-feature-list li { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.85) !important; } html[data-theme="dark"] body.rollin-clientarea .rh-feature-list i { color: var(--rh-purple) !important; /* roxo, sem cyan */ } html[data-theme="dark"] body.rollin-clientarea .rh-feature-list li strong { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rh-feature-list li { background: rgba(255,255,255,0.7) !important; border-color: rgba(13,10,31,0.06) !important; color: rgba(13,10,31,0.85) !important; } html[data-theme="light"] body.rollin-clientarea .rh-feature-list i { color: var(--rh-purple-deep) !important; } /* === 6. Hero eyebrow "Boa madrugada" — glass premium dark === */ html[data-theme="dark"] body.rollin-clientarea .rh-hero-eyebrow { background: rgba(138,43,214,0.12) !important; border: 1px solid rgba(138,43,214,0.25) !important; color: rgba(255,255,255,0.9) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] body.rollin-clientarea .rh-hero-eyebrow { background: rgba(106,26,176,0.08) !important; border: 1px solid rgba(106,26,176,0.18) !important; color: var(--rh-purple-deep) !important; } body.rollin-clientarea .rh-hero-pulse { background: var(--rh-purple) !important; box-shadow: none !important; } /* === Botão "Conhecer a loja" (rh-btn-cyan) — força roxo === */ html[data-theme="dark"] body.rollin-clientarea .rh-btn-cyan { background: var(--rh-purple) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 6px 18px rgba(138,43,214,0.35) !important; } html[data-theme="dark"] body.rollin-clientarea .rh-btn-cyan:hover { background: var(--rh-purple-deep) !important; box-shadow: 0 10px 24px rgba(138,43,214,0.45) !important; transform: translateY(-2px) !important; } html[data-theme="light"] body.rollin-clientarea .rh-btn-cyan { background: var(--rh-purple-deep) !important; color: #ffffff !important; border-color: transparent !important; } /* === Premium iconography touch — todos os ícones lucide ficam roxos no dark === */ html[data-theme="dark"] body.rollin-clientarea .rh-section-eyebrow, html[data-theme="dark"] body.rollin-clientarea .rh-explore-eyebrow { color: rgba(184,85,255,0.95) !important; } /* Mobile: app-feel (status bar + notch awareness) */ @media (max-width: 900px) { body.rollin-clientarea { padding-top: env(safe-area-inset-top, 0) !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; } body.rollin-clientarea .rh-ca-topbar { position: sticky !important; top: 0 !important; backdrop-filter: none saturate(180%) !important; -webkit-backdrop-filter: none saturate(180%) !important; } body.rollin-clientarea .rh-ca-main, body.rollin-clientarea #main-body { padding: 16px 14px 80px !important; } body.rollin-clientarea .rh-twocol { grid-template-columns: 1fr !important; gap: 16px !important; } body.rollin-clientarea .rh-hero { padding: 24px !important; } } /* ============================================================================= MOBILE NUCLEAR FIX — força 1 coluna em tudo, esconde sidebar ============================================================================= */ @media (max-width: 900px) { /* Shell vira coluna única, sidebar fora do grid */ body.rollin-clientarea .rh-ca-shell { display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-template-areas: none !important; } /* Sidebar slide-in drawer */ body.rollin-clientarea .rh-ca-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: 280px !important; max-width: 80vw !important; height: 100vh !important; transform: translateX(-100%) !important; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 60 !important; box-shadow: 0 0 0 transparent !important; } body.rollin-clientarea .rh-ca-shell.is-sidebar-open .rh-ca-sidebar { transform: translateX(0) !important; box-shadow: 16px 0 40px rgba(0,0,0,0.5) !important; } /* Topbar full width sticky */ body.rollin-clientarea .rh-ca-topbar { position: sticky !important; top: 0 !important; width: 100% !important; height: 56px !important; padding: 0 14px !important; z-index: 50 !important; } /* Search escondida no mobile (espaço pra logo + ações) */ body.rollin-clientarea .rh-ca-search { display: none !important; } body.rollin-clientarea .rh-ca-user-name { display: none !important; } body.rollin-clientarea .rh-ca-pagetitle small { display: none !important; } /* Main full width */ body.rollin-clientarea #main-body, body.rollin-clientarea .rollin-main { width: 100% !important; max-width: 100% !important; padding: 16px 14px 100px !important; box-sizing: border-box !important; } body.rollin-clientarea .rollin-main-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Footer também full width sob o main */ body.rollin-clientarea .rh-ca-footer { width: 100% !important; padding: 20px 14px !important; } /* === Conteúdo do clientareahome.tpl: 1 coluna em tudo === */ body.rollin-clientarea .rh-hero { padding: 24px 20px !important; margin-bottom: 16px !important; } body.rollin-clientarea .rh-hero-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; } body.rollin-clientarea .rh-hero-title { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1 !important; } body.rollin-clientarea .rh-hero-cta { flex-wrap: wrap !important; gap: 8px !important; } body.rollin-clientarea .rh-hero-cta a { flex: 1 1 100% !important; justify-content: center !important; } /* Stats — 2x2 grid */ body.rollin-clientarea .rh-hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.rollin-clientarea .rh-stat { padding: 16px 14px !important; } body.rollin-clientarea .rh-stat-num { font-size: 28px !important; } body.rollin-clientarea .rh-stat-lbl { font-size: 11px !important; } /* Status ribbon — wrap */ body.rollin-clientarea .rh-status-ribbon { flex-wrap: wrap !important; gap: 10px !important; padding: 14px 16px !important; } body.rollin-clientarea .rh-status-sep { display: none !important; } body.rollin-clientarea .rh-status-item { flex: 1 1 calc(50% - 10px) !important; } /* Acesso rápido — 1 coluna */ body.rollin-clientarea .rh-qa-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } body.rollin-clientarea .rh-qa-card { padding: 16px 14px !important; } /* Two-column (explore + announcements) — empilhado */ body.rollin-clientarea .rh-twocol { display: flex !important; flex-direction: column !important; gap: 16px !important; } body.rollin-clientarea .rh-explore, body.rollin-clientarea .rh-announce { padding: 24px 20px !important; } body.rollin-clientarea .rh-explore-title { font-size: clamp(24px, 7vw, 32px) !important; } /* Sections title sizes */ body.rollin-clientarea .rh-section-title { font-size: 22px !important; } body.rollin-clientarea .rh-section { margin-bottom: 16px !important; } } @media (max-width: 480px) { body.rollin-clientarea .rh-hero-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } body.rollin-clientarea .rh-stat-icon { width: 36px !important; height: 36px !important; } body.rollin-clientarea .rh-stat-num { font-size: 24px !important; } body.rollin-clientarea .rh-status-item { flex: 1 1 100% !important; } body.rollin-clientarea .rh-ca-topbar { padding: 0 12px !important; } } /* ============================================================================= DARK CLIENTAREA SWEEP — todas tabelas/forms/listas WHMCS Páginas: Servicos, Dominios, Faturas, Tickets, KB, Novidades, Meus dados, Seguranca, Contatos. ============================================================================= */ /* Wrapper de tabela */ html[data-theme="dark"] body.rollin-clientarea .rollin-table-wrap { background: rgba(31, 0, 64, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table-toolbar { background: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } /* === Search input dentro de tabela (.rollin-search) — markup é
. Layout: ícone absolute no canto esquerdo, input full-width com padding-left adequado. === */ body.rollin-clientarea .rollin-search { position: relative !important; display: block !important; flex: 1 1 auto !important; max-width: 480px !important; } body.rollin-clientarea .rollin-search > i, body.rollin-clientarea .rollin-search > svg { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; pointer-events: none !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.rollin-clientarea .rollin-search > i svg, body.rollin-clientarea .rollin-search > i img { width: 16px !important; height: 16px !important; } /* Especificidade alta com html[data-theme] + atributo type pra vencer regra genérica em body.rollin-clientarea input[type="search"] */ html[data-theme="dark"] body.rollin-clientarea .rollin-search input, html[data-theme="dark"] body.rollin-clientarea .rollin-search input[type="search"], html[data-theme="dark"] body.rollin-clientarea .rollin-search input[type="text"], html[data-theme="light"] body.rollin-clientarea .rollin-search input, html[data-theme="light"] body.rollin-clientarea .rollin-search input[type="search"], html[data-theme="light"] body.rollin-clientarea .rollin-search input[type="text"], body.rollin-clientarea .rollin-search input, body.rollin-clientarea .rollin-search input[type="search"], body.rollin-clientarea .rollin-search input[type="text"] { width: 100% !important; height: 44px !important; min-height: 44px !important; /* padding-left = 16 (esquerda) + 18 (ícone) + 18 (gap respirável) = 52px */ padding-left: 52px !important; padding-right: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 10px !important; font-size: 14px !important; box-sizing: border-box !important; outline: none !important; transition: border-color 160ms ease, box-shadow 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-search input { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-search input::placeholder { color: rgba(255, 255, 255, 0.40) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-search input:focus { border-color: rgba(138, 43, 214, 0.5) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.15) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-search > i, html[data-theme="dark"] body.rollin-clientarea .rollin-search > svg { color: rgba(255, 255, 255, 0.50) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-search input { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; color: #0d0a1f !important; } html[data-theme="light"] body.rollin-clientarea .rollin-search input::placeholder { color: rgba(13, 10, 31, 0.45) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-search input:focus { border-color: #6a1ab0 !important; box-shadow: 0 0 0 3px rgba(106, 26, 176, 0.12) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-search > i, html[data-theme="light"] body.rollin-clientarea .rollin-search > svg { color: rgba(13, 10, 31, 0.50) !important; } /* Filter buttons */ html[data-theme="dark"] body.rollin-clientarea .rollin-table-filter-btn { background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; border: 1px solid transparent !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table-filter-btn:hover { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table-filter-btn.active { background: var(--rh-purple) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(138, 43, 214, 0.3) !important; } /* Tabela */ html[data-theme="dark"] body.rollin-clientarea .rollin-table { background: transparent !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table thead { background: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table thead th { color: rgba(255, 255, 255, 0.5) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table tbody tr { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table tbody tr:hover { background: rgba(138, 43, 214, 0.06) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table tbody td { color: rgba(255, 255, 255, 0.85) !important; border: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-table tbody td strong { color: #ffffff !important; } /* Status pills */ html[data-theme="dark"] body.rollin-clientarea .rollin-status-active, html[data-theme="dark"] body.rollin-clientarea .rollin-status-paid, html[data-theme="dark"] body.rollin-clientarea .rollin-status-closed { background: rgba(1, 250, 213, 0.10) !important; border: 1px solid rgba(1, 250, 213, 0.30) !important; color: #01fad5 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-status-pending, html[data-theme="dark"] body.rollin-clientarea .rollin-status-open, html[data-theme="dark"] body.rollin-clientarea .rollin-status-answered { background: rgba(255, 184, 0, 0.10) !important; border: 1px solid rgba(255, 184, 0, 0.30) !important; color: #ffb800 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-status-overdue, html[data-theme="dark"] body.rollin-clientarea .rollin-status-suspended, html[data-theme="dark"] body.rollin-clientarea .rollin-status-unpaid, html[data-theme="dark"] body.rollin-clientarea .rollin-status-terminated, html[data-theme="dark"] body.rollin-clientarea .rollin-status-cancelled { background: rgba(249, 115, 22, 0.10) !important; border: 1px solid rgba(249, 115, 22, 0.30) !important; color: #f97316 !important; } /* Empty state */ html[data-theme="dark"] body.rollin-clientarea .rollin-empty { background: transparent !important; color: rgba(255, 255, 255, 0.7) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-empty h3 { color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-empty p { color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-empty-icon-box { background: rgba(138, 43, 214, 0.12) !important; color: var(--rh-purple) !important; border: 1px solid rgba(138, 43, 214, 0.25) !important; } /* Page header (breadcrumb + title) */ html[data-theme="dark"] body.rollin-clientarea .rollin-breadcrumb { color: rgba(255, 255, 255, 0.5) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-breadcrumb a { color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-breadcrumb a:hover { color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-breadcrumb-current { color: var(--rh-purple) !important; font-weight: 600 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-page-title { color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-page-subtitle { color: rgba(255, 255, 255, 0.6) !important; } /* Forms (Meus dados, Seguranca, etc) */ html[data-theme="dark"] body.rollin-clientarea input[type="text"], html[data-theme="dark"] body.rollin-clientarea input[type="email"], html[data-theme="dark"] body.rollin-clientarea input[type="password"], html[data-theme="dark"] body.rollin-clientarea input[type="tel"], html[data-theme="dark"] body.rollin-clientarea input[type="number"], html[data-theme="dark"] body.rollin-clientarea input[type="search"], html[data-theme="dark"] body.rollin-clientarea input[type="url"], html[data-theme="dark"] body.rollin-clientarea select, html[data-theme="dark"] body.rollin-clientarea textarea { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea input::placeholder, html[data-theme="dark"] body.rollin-clientarea textarea::placeholder { color: rgba(255, 255, 255, 0.35) !important; } html[data-theme="dark"] body.rollin-clientarea input:focus, html[data-theme="dark"] body.rollin-clientarea select:focus, html[data-theme="dark"] body.rollin-clientarea textarea:focus { border-color: rgba(138, 43, 214, 0.5) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.15) !important; outline: none !important; } html[data-theme="dark"] body.rollin-clientarea label { color: rgba(255, 255, 255, 0.85) !important; } /* Botões padrão */ html[data-theme="dark"] body.rollin-clientarea .btn-primary { background: var(--rh-purple) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(138, 43, 214, 0.3) !important; } html[data-theme="dark"] body.rollin-clientarea .btn-primary:hover { background: var(--rh-purple-deep) !important; box-shadow: 0 8px 22px rgba(138, 43, 214, 0.4) !important; transform: translateY(-1px) !important; } html[data-theme="dark"] body.rollin-clientarea .btn-secondary, html[data-theme="dark"] body.rollin-clientarea .btn-default { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] body.rollin-clientarea .btn-secondary:hover, html[data-theme="dark"] body.rollin-clientarea .btn-default:hover { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.20) !important; } /* Footer (SSL/LGPD/links) */ html[data-theme="dark"] body.rollin-clientarea .rh-ca-footer { color: rgba(255, 255, 255, 0.55) !important; border-top-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-footer-trust span, html[data-theme="dark"] body.rollin-clientarea .rh-ca-footer-nav a { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-footer-nav a:hover { color: #ffffff !important; } /* Cards genericos (panel, well) */ html[data-theme="dark"] body.rollin-clientarea .rollin-card, html[data-theme="dark"] body.rollin-clientarea .panel, html[data-theme="dark"] body.rollin-clientarea .well { background: rgba(31, 0, 64, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } /* Alerts (success, info, warning, danger) */ html[data-theme="dark"] body.rollin-clientarea .alert { border-radius: 12px !important; border: 1px solid !important; } html[data-theme="dark"] body.rollin-clientarea .alert-success { background: rgba(1, 250, 213, 0.08) !important; border-color: rgba(1, 250, 213, 0.25) !important; color: #01fad5 !important; } html[data-theme="dark"] body.rollin-clientarea .alert-info { background: rgba(138, 43, 214, 0.08) !important; border-color: rgba(138, 43, 214, 0.25) !important; color: #d08cff !important; } html[data-theme="dark"] body.rollin-clientarea .alert-warning { background: rgba(255, 184, 0, 0.08) !important; border-color: rgba(255, 184, 0, 0.25) !important; color: #ffb800 !important; } html[data-theme="dark"] body.rollin-clientarea .alert-danger { background: rgba(249, 115, 22, 0.08) !important; border-color: rgba(249, 115, 22, 0.25) !important; color: #f97316 !important; } /* ============================================================================= FORMS premium (Submit ticket, Meus dados, etc) — rollin-form-* ============================================================================= */ /* === LAYOUT base (theme-agnostic) — aplica em dark E light === */ /* Section card */ body.rollin-clientarea .rollin-form-section { border-radius: 16px !important; padding: 28px !important; margin-bottom: 18px !important; border: 1px solid !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-form-section { background: rgba(31, 0, 64, 0.5) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-form-section { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } /* Section title (com ícone) */ body.rollin-clientarea .rollin-form-section-title { font-weight: 700 !important; font-size: 18px !important; display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 6px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-form-section-title { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-form-section-title { color: #0d0a1f !important; } body.rollin-clientarea .rollin-form-section-title svg, body.rollin-clientarea .rollin-form-section-title i { color: var(--rh-purple) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-form-section-title svg, html[data-theme="light"] body.rollin-clientarea .rollin-form-section-title i { color: #6a1ab0 !important; } /* Section description */ body.rollin-clientarea .rollin-form-section-desc { font-size: 13px !important; margin: 0 0 22px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-form-section-desc { color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-form-section-desc { color: rgba(13, 10, 31, 0.65) !important; } /* Row (grid de fields) — theme-agnostic */ body.rollin-clientarea .rollin-form-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 16px !important; } body.rollin-clientarea .rollin-form-row + .rollin-form-row { margin-top: 16px !important; } /* Variantes com colunas explícitas — evita 5 fields no row e dropdowns ficando perto demais da borda direita */ body.rollin-clientarea .rollin-form-row-2cols { grid-template-columns: repeat(2, 1fr) !important; } body.rollin-clientarea .rollin-form-row-3cols { grid-template-columns: repeat(3, 1fr) !important; } body.rollin-clientarea .rollin-form-row-4cols { grid-template-columns: repeat(4, 1fr) !important; } @media (max-width: 900px) { body.rollin-clientarea .rollin-form-row-2cols, body.rollin-clientarea .rollin-form-row-3cols, body.rollin-clientarea .rollin-form-row-4cols { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 540px) { body.rollin-clientarea .rollin-form-row, body.rollin-clientarea .rollin-form-row-2cols, body.rollin-clientarea .rollin-form-row-3cols, body.rollin-clientarea .rollin-form-row-4cols { grid-template-columns: 1fr !important; } } /* Field wrapper — theme-agnostic */ body.rollin-clientarea .rollin-form-field { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; /* permite que o input encolha dentro do grid */ } body.rollin-clientarea .rollin-form-field.full { grid-column: 1 / -1 !important; } body.rollin-clientarea .rollin-form-field label { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-form-field label { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-form-field label { color: rgba(13, 10, 31, 0.80) !important; } body.rollin-clientarea .rollin-form-field label .required { color: var(--rh-purple) !important; margin-left: 3px !important; } /* ============================================================================= FORM CONTROLS PRODUCTION-GRADE Override do Bootstrap 3 (height: 34px) + acessibilidade mobile (16px font pra evitar zoom no iOS) + focus ring premium roxo. ============================================================================= */ /* === Reset Bootstrap height + estrutura base === */ body.rollin-clientarea .form-control, body.rollin-clientarea input[type="text"], body.rollin-clientarea input[type="email"], body.rollin-clientarea input[type="password"], body.rollin-clientarea input[type="tel"], body.rollin-clientarea input[type="number"], body.rollin-clientarea input[type="search"], body.rollin-clientarea input[type="url"], body.rollin-clientarea input[type="date"], body.rollin-clientarea select, body.rollin-clientarea textarea { height: auto !important; min-height: 44px !important; padding: 10px 14px !important; font-size: 14px !important; line-height: 1.4 !important; border-radius: 10px !important; border-width: 1px !important; border-style: solid !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important; width: 100% !important; font-family: inherit !important; appearance: none !important; -webkit-appearance: none !important; } /* === DARK theme === */ html[data-theme="dark"] body.rollin-clientarea .form-control, html[data-theme="dark"] body.rollin-clientarea input[type="text"], html[data-theme="dark"] body.rollin-clientarea input[type="email"], html[data-theme="dark"] body.rollin-clientarea input[type="password"], html[data-theme="dark"] body.rollin-clientarea input[type="tel"], html[data-theme="dark"] body.rollin-clientarea input[type="number"], html[data-theme="dark"] body.rollin-clientarea input[type="search"], html[data-theme="dark"] body.rollin-clientarea input[type="url"], html[data-theme="dark"] body.rollin-clientarea input[type="date"], html[data-theme="dark"] body.rollin-clientarea select, html[data-theme="dark"] body.rollin-clientarea textarea { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .form-control:hover, html[data-theme="dark"] body.rollin-clientarea select:hover, html[data-theme="dark"] body.rollin-clientarea textarea:hover { border-color: rgba(255, 255, 255, 0.18) !important; } html[data-theme="dark"] body.rollin-clientarea .form-control:focus, html[data-theme="dark"] body.rollin-clientarea select:focus, html[data-theme="dark"] body.rollin-clientarea textarea:focus { border-color: var(--rh-purple) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.18) !important; outline: none !important; background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] body.rollin-clientarea .form-control::placeholder, html[data-theme="dark"] body.rollin-clientarea input::placeholder, html[data-theme="dark"] body.rollin-clientarea textarea::placeholder { color: rgba(255, 255, 255, 0.35) !important; } html[data-theme="dark"] body.rollin-clientarea .form-control:disabled, html[data-theme="dark"] body.rollin-clientarea .form-control.disabled, html[data-theme="dark"] body.rollin-clientarea input:disabled, html[data-theme="dark"] body.rollin-clientarea select:disabled, html[data-theme="dark"] body.rollin-clientarea textarea:disabled { background: rgba(255, 255, 255, 0.02) !important; color: rgba(255, 255, 255, 0.45) !important; cursor: not-allowed !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* === LIGHT theme === */ html[data-theme="light"] body.rollin-clientarea .form-control, html[data-theme="light"] body.rollin-clientarea input[type="text"], html[data-theme="light"] body.rollin-clientarea input[type="email"], html[data-theme="light"] body.rollin-clientarea input[type="password"], html[data-theme="light"] body.rollin-clientarea input[type="tel"], html[data-theme="light"] body.rollin-clientarea input[type="number"], html[data-theme="light"] body.rollin-clientarea input[type="search"], html[data-theme="light"] body.rollin-clientarea input[type="url"], html[data-theme="light"] body.rollin-clientarea input[type="date"], html[data-theme="light"] body.rollin-clientarea select, html[data-theme="light"] body.rollin-clientarea textarea { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.12) !important; color: #0d0a1f !important; } html[data-theme="light"] body.rollin-clientarea .form-control:hover, html[data-theme="light"] body.rollin-clientarea input:hover, html[data-theme="light"] body.rollin-clientarea select:hover, html[data-theme="light"] body.rollin-clientarea textarea:hover { border-color: rgba(13, 10, 31, 0.20) !important; } html[data-theme="light"] body.rollin-clientarea .form-control:focus, html[data-theme="light"] body.rollin-clientarea input:focus, html[data-theme="light"] body.rollin-clientarea select:focus, html[data-theme="light"] body.rollin-clientarea textarea:focus { border-color: var(--rh-purple-deep) !important; box-shadow: 0 0 0 3px rgba(106, 26, 176, 0.12) !important; outline: none !important; } html[data-theme="light"] body.rollin-clientarea .form-control::placeholder, html[data-theme="light"] body.rollin-clientarea input::placeholder, html[data-theme="light"] body.rollin-clientarea textarea::placeholder { color: rgba(13, 10, 31, 0.40) !important; } /* === MOBILE: tap targets maiores + 16px font (anti-zoom iOS) === */ @media (max-width: 900px) { body.rollin-clientarea .form-control, body.rollin-clientarea input[type="text"], body.rollin-clientarea input[type="email"], body.rollin-clientarea input[type="password"], body.rollin-clientarea input[type="tel"], body.rollin-clientarea input[type="number"], body.rollin-clientarea input[type="search"], body.rollin-clientarea input[type="url"], body.rollin-clientarea input[type="date"], body.rollin-clientarea select, body.rollin-clientarea textarea { min-height: 48px !important; padding: 12px 14px !important; font-size: 16px !important; /* 16px previne zoom automatico no iOS */ } body.rollin-clientarea select { background-position: right 14px center !important; padding-right: 42px !important; } body.rollin-clientarea .rollin-form-row { grid-template-columns: 1fr !important; gap: 14px !important; } body.rollin-clientarea .rollin-form-section { padding: 20px 16px !important; } body.rollin-clientarea .rollin-form-actions { flex-direction: column !important; align-items: stretch !important; } body.rollin-clientarea .rollin-form-actions .btn { width: 100% !important; justify-content: center !important; } } html[data-theme="dark"] body.rollin-clientarea .form-control:focus { border-color: rgba(138, 43, 214, 0.5) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.15) !important; outline: none !important; } html[data-theme="dark"] body.rollin-clientarea .form-control::placeholder { color: rgba(255, 255, 255, 0.35) !important; } html[data-theme="dark"] body.rollin-clientarea .form-control.disabled, html[data-theme="dark"] body.rollin-clientarea .form-control:disabled { background: rgba(255, 255, 255, 0.02) !important; color: rgba(255, 255, 255, 0.5) !important; cursor: not-allowed !important; } /* Select — bg + chevron customizado em ambos temas */ body.rollin-clientarea select.form-control, html[data-theme="dark"] body.rollin-clientarea select.form-control { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a2bd6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 14px !important; padding-right: 38px !important; cursor: pointer !important; } html[data-theme="dark"] body.rollin-clientarea select.form-control option { background: #16002a !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea select.form-control option { background: #ffffff !important; color: #0d0a1f !important; } /* Textarea / markdown — altura maior */ body.rollin-clientarea textarea.form-control, body.rollin-clientarea .markdown-editor { min-height: 180px !important; height: auto !important; font-family: inherit !important; line-height: 1.6 !important; resize: vertical !important; } /* ============================================================================= EasyMDE / CodeMirror Markdown Editor (Submit Ticket) ============================================================================= */ /* Container externo */ html[data-theme="dark"] body.rollin-clientarea .EasyMDEContainer { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 12px !important; overflow: hidden !important; } html[data-theme="dark"] body.rollin-clientarea .EasyMDEContainer:focus-within { border-color: var(--rh-purple) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.18) !important; } /* ============================================================================= BOOTSTRAP MARKDOWN EDITOR — usado em tickets (não é EasyMDE!) Markup gerado pelo JS: .md-editor > .md-header.btn-toolbar > .btn-group > .btn (com após o fix iconlibrary='fa-5') Classes corretas: md-editor, md-header, md-input, md-controls ============================================================================= */ /* Container externo */ body.rollin-clientarea .md-editor { border-radius: 12px !important; overflow: hidden !important; border: 1px solid !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.10) !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor:focus-within, html[data-theme="light"] body.rollin-clientarea .md-editor:focus-within { border-color: var(--rh-purple) !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.15) !important; } /* Toolbar (.md-header.btn-toolbar) — onde estão os botões Bold/Italic/etc */ body.rollin-clientarea .md-editor .md-header, body.rollin-clientarea .md-header.btn-toolbar { padding: 8px !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important; border-bottom: 1px solid !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-header { background: #1a0033 !important; border-bottom-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-header { background: #fafafc !important; border-bottom-color: rgba(13, 10, 31, 0.08) !important; } /* Botões dentro da toolbar (.btn-group > .btn) */ body.rollin-clientarea .md-editor .btn-group { display: inline-flex !important; gap: 2px !important; margin-right: 4px !important; } body.rollin-clientarea .md-editor .btn-group > .btn, body.rollin-clientarea .md-editor .md-header .btn { background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; padding: 6px 10px !important; min-width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; box-shadow: none !important; cursor: pointer !important; transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-header .btn { color: rgba(255, 255, 255, 0.75) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-header .btn { color: rgba(13, 10, 31, 0.70) !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-header .btn:hover { background: rgba(138, 43, 214, 0.15) !important; border-color: rgba(138, 43, 214, 0.40) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-header .btn:hover { background: rgba(106, 26, 176, 0.08) !important; border-color: rgba(106, 26, 176, 0.30) !important; color: #4a0e80 !important; } body.rollin-clientarea .md-editor .md-header .btn.active, body.rollin-clientarea .md-editor .md-header .btn:active { background: var(--rh-purple) !important; color: #ffffff !important; border-color: var(--rh-purple) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-header .btn.active, html[data-theme="light"] body.rollin-clientarea .md-editor .md-header .btn:active { background: #6a1ab0 !important; border-color: #6a1ab0 !important; } /* Ícones dentro dos botões — FA Pro Solid */ body.rollin-clientarea .md-editor .md-header .btn .fas, body.rollin-clientarea .md-editor .md-header .btn .fa, body.rollin-clientarea .md-editor .md-header .btn .far, body.rollin-clientarea .md-editor .md-header .btn span[class*="fa-"], body.rollin-clientarea .md-editor .md-header .btn span[class*="fa-"]::before { font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome' !important; font-weight: 900 !important; font-size: 13px !important; line-height: 1 !important; } /* Md-controls (botão fullscreen no canto direito) */ body.rollin-clientarea .md-editor .md-controls { margin-left: auto !important; } body.rollin-clientarea .md-editor .md-controls .md-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 6px !important; text-decoration: none !important; transition: background 140ms ease, color 140ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-controls .md-control { color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-controls .md-control { color: rgba(13, 10, 31, 0.65) !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-controls .md-control:hover { background: rgba(138, 43, 214, 0.15) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-controls .md-control:hover { background: rgba(106, 26, 176, 0.08) !important; color: #4a0e80 !important; } /* Md-input (a textarea principal) */ body.rollin-clientarea .md-editor .md-input, body.rollin-clientarea .md-editor textarea.md-input { background: transparent !important; border: none !important; box-shadow: none !important; padding: 14px 16px !important; min-height: 220px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.6 !important; width: 100% !important; resize: vertical !important; outline: none !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-input { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-input { color: #0d0a1f !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .md-input::placeholder { color: rgba(255, 255, 255, 0.45) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .md-input::placeholder { color: rgba(13, 10, 31, 0.45) !important; } /* Status bar (lines / words / salvo) — fica dentro do md-editor */ body.rollin-clientarea .md-editor .markdown-editor-status { padding: 8px 14px !important; font-size: 12px !important; border-top: 1px solid !important; } html[data-theme="dark"] body.rollin-clientarea .md-editor .markdown-editor-status { background: rgba(255, 255, 255, 0.02) !important; border-top-color: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.50) !important; } html[data-theme="light"] body.rollin-clientarea .md-editor .markdown-editor-status { background: #fafafc !important; border-top-color: rgba(13, 10, 31, 0.06) !important; color: rgba(13, 10, 31, 0.50) !important; } /* Disabled state */ body.rollin-clientarea .md-editor.md-editor-disabled { opacity: 0.6 !important; pointer-events: none !important; } /* CodeMirror (área de texto) */ html[data-theme="dark"] body.rollin-clientarea .CodeMirror { background: transparent !important; color: #ffffff !important; border: none !important; min-height: 220px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.6 !important; padding: 14px 16px !important; } html[data-theme="dark"] body.rollin-clientarea .CodeMirror-cursor { border-left-color: var(--rh-purple) !important; } html[data-theme="dark"] body.rollin-clientarea .CodeMirror-selected { background: rgba(138, 43, 214, 0.25) !important; } html[data-theme="dark"] body.rollin-clientarea .CodeMirror-placeholder { color: rgba(255, 255, 255, 0.35) !important; } html[data-theme="dark"] body.rollin-clientarea .CodeMirror-lines { padding: 0 !important; } html[data-theme="dark"] body.rollin-clientarea .CodeMirror-line { color: #ffffff !important; } /* Status bar (lines / words / salvo) */ html[data-theme="dark"] body.rollin-clientarea .editor-statusbar { background: rgba(255, 255, 255, 0.02) !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.45) !important; padding: 8px 14px !important; font-size: 12px !important; } /* Preview (quando clica em Preview) */ html[data-theme="dark"] body.rollin-clientarea .editor-preview, html[data-theme="dark"] body.rollin-clientarea .editor-preview-side { background: rgba(31, 0, 64, 0.5) !important; color: #ffffff !important; padding: 14px 16px !important; } /* Fullscreen mode */ html[data-theme="dark"] body.rollin-clientarea .CodeMirror-fullscreen, html[data-theme="dark"] body.rollin-clientarea .editor-toolbar.fullscreen { background: #16002a !important; } /* ============================================================================= File input (Anexos) ============================================================================= */ html[data-theme="dark"] body.rollin-clientarea input[type="file"].form-control, html[data-theme="dark"] body.rollin-clientarea input[type="file"] { background: rgba(255, 255, 255, 0.04) !important; border: 1px dashed rgba(255, 255, 255, 0.20) !important; color: rgba(255, 255, 255, 0.85) !important; padding: 10px 14px !important; cursor: pointer !important; transition: all 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea input[type="file"]:hover { border-color: var(--rh-purple) !important; background: rgba(138, 43, 214, 0.06) !important; } /* Botão "Escolher ficheiro" do navegador (Webkit) */ html[data-theme="dark"] body.rollin-clientarea input[type="file"]::-webkit-file-upload-button, html[data-theme="dark"] body.rollin-clientarea input[type="file"]::file-selector-button { background: var(--rh-purple) !important; color: #ffffff !important; border: none !important; padding: 8px 14px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; margin-right: 12px !important; transition: background 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea input[type="file"]::-webkit-file-upload-button:hover, html[data-theme="dark"] body.rollin-clientarea input[type="file"]::file-selector-button:hover { background: var(--rh-purple-deep) !important; } /* Light theme equivalents */ html[data-theme="light"] body.rollin-clientarea input[type="file"]::-webkit-file-upload-button, html[data-theme="light"] body.rollin-clientarea input[type="file"]::file-selector-button { background: var(--rh-purple-deep) !important; color: #ffffff !important; border: none !important; padding: 8px 14px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; margin-right: 12px !important; } /* ============================================================================= INTERAÇÕES SÓBRIAS — estilo Astro Remove outline default do browser, underline em links, hard focus rings. Substitui por focus-visible custom + hover/active sutis. ============================================================================= */ /* Reset global de outline e tap-highlight no namespace clientarea */ body.rollin-clientarea a, body.rollin-clientarea button, body.rollin-clientarea [role="button"], body.rollin-clientarea input, body.rollin-clientarea select, body.rollin-clientarea textarea, body.rollin-clientarea summary { -webkit-tap-highlight-color: transparent !important; outline: none !important; } /* Remove sublinhado de TODOS links da clientarea — exceto inline em texto */ body.rollin-clientarea a { text-decoration: none !important; } body.rollin-clientarea a:hover, body.rollin-clientarea a:focus, body.rollin-clientarea a:active { text-decoration: none !important; } /* Focus-visible (apenas teclado) — ring sutil custom, sem hard outline */ body.rollin-clientarea a:focus-visible, body.rollin-clientarea button:focus-visible, body.rollin-clientarea [role="button"]:focus-visible, body.rollin-clientarea summary:focus-visible { outline: 2px solid rgba(138, 43, 214, 0.5) !important; outline-offset: 2px !important; border-radius: 8px !important; } html[data-theme="light"] body.rollin-clientarea a:focus-visible, html[data-theme="light"] body.rollin-clientarea button:focus-visible, html[data-theme="light"] body.rollin-clientarea [role="button"]:focus-visible { outline-color: rgba(106, 26, 176, 0.5) !important; } /* Click ativo — feedback removido (estava causando lag em alguns browsers). Hover/focus já dão feedback visual suficiente. */ /* Sidebar links — hover sóbrio com transição smooth */ body.rollin-clientarea .rh-ca-sidebar-link { text-decoration: none !important; transition: background 180ms ease, color 180ms ease !important; } body.rollin-clientarea .rh-ca-sidebar-link:focus-visible { outline: none !important; background: rgba(138, 43, 214, 0.08) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-sidebar-link:focus-visible { background: rgba(106, 26, 176, 0.06) !important; color: var(--rh-purple-deep) !important; } /* Topbar actions — focus sutil */ body.rollin-clientarea .rh-ca-action:focus-visible, body.rollin-clientarea .rh-ca-burger:focus-visible, body.rollin-clientarea .rh-ca-theme-toggle:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.25) !important; } /* User menu items — sem outline, hover/focus uniforme */ body.rollin-clientarea .rh-ca-user-pop a, body.rollin-clientarea .rh-ca-user-pop button { text-decoration: none !important; outline: none !important; } body.rollin-clientarea .rh-ca-user-pop a:focus-visible, body.rollin-clientarea .rh-ca-user-pop button:focus-visible { outline: none !important; background: rgba(138, 43, 214, 0.12) !important; } /* Botões btn / btn-primary / btn-ghost — focus ring premium */ body.rollin-clientarea .btn:focus, body.rollin-clientarea .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.25) !important; } body.rollin-clientarea .btn-primary:focus, body.rollin-clientarea .btn-primary:focus-visible { box-shadow: 0 4px 14px rgba(138, 43, 214, 0.4), 0 0 0 3px rgba(138, 43, 214, 0.25) !important; } /* Filtros de tabela — focus sutil */ body.rollin-clientarea .rollin-table-filter-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(138, 43, 214, 0.4) !important; } /* Linhas de tabela clicáveis (rh-announce-item, table tbody tr) */ body.rollin-clientarea .rh-announce-item:focus-visible, body.rollin-clientarea .rollin-table tbody tr:focus-visible { outline: none !important; background: rgba(138, 43, 214, 0.08) !important; } /* Quick access cards — focus matches hover */ body.rollin-clientarea .rh-qa-card:focus-visible { outline: none !important; transform: translateY(-2px) !important; border-color: rgba(138, 43, 214, 0.5) !important; background: rgba(138, 43, 214, 0.08) !important; } /* Stats cards (.rh-stat) */ body.rollin-clientarea .rh-stat:focus-visible { outline: none !important; transform: translateY(-2px) !important; border-color: rgba(138, 43, 214, 0.4) !important; } /* Editor markdown — botões da toolbar sem outline ugly */ body.rollin-clientarea .editor-toolbar button:focus, body.rollin-clientarea .editor-toolbar a:focus { outline: none !important; background: rgba(138, 43, 214, 0.15) !important; } /* Bootstrap default focus rings — limitado a clickables (não em *) pra performance */ body.rollin-clientarea a:focus, body.rollin-clientarea button:focus, body.rollin-clientarea [role="button"]:focus, body.rollin-clientarea input:focus, body.rollin-clientarea select:focus, body.rollin-clientarea textarea:focus, body.rollin-clientarea summary:focus { outline: none; } /* ============================================================================= PRODUCT DETAILS — clientarea.php?action=productdetails&id=X Hero do plano + 4 stat cards + tabs + KV list (técnicos) ============================================================================= */ /* Hero do serviço (card grande no topo com nome do plano) */ html[data-theme="dark"] body.rollin-clientarea .rollin-service-hero { background: linear-gradient(135deg, rgba(138,43,214,0.18) 0%, rgba(106,26,176,0.10) 100%), rgba(31,0,64,0.5) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 20px !important; padding: 32px !important; margin-bottom: 20px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06) !important; overflow: hidden !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-hero-main { display: flex !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-icon { width: 64px !important; height: 64px !important; border-radius: 16px !important; background: var(--rh-purple) !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 8px 24px rgba(138,43,214,0.4) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-icon svg, html[data-theme="dark"] body.rollin-clientarea .rollin-service-icon i { width: 28px !important; height: 28px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-hero-text { flex: 1 1 auto !important; min-width: 200px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-name { color: #ffffff !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 0 4px !important; line-height: 1.1 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-group { color: rgba(255,255,255,0.65) !important; font-size: 14px !important; margin: 0 0 12px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-domain { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(1,250,213,0.10) !important; border: 1px solid rgba(1,250,213,0.30) !important; color: #01fad5 !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-service-domain:hover { background: rgba(1,250,213,0.18) !important; border-color: rgba(1,250,213,0.45) !important; } /* Grid 4 cards de info (Data Registro / Valor / Vencimento / Pagamento) */ html[data-theme="dark"] body.rollin-clientarea .rollin-info-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 14px !important; margin-top: 24px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-info-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 14px !important; padding: 16px 18px !important; transition: all 200ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-info-card:hover { border-color: rgba(138,43,214,0.3) !important; background: rgba(255,255,255,0.06) !important; transform: translateY(-2px) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-info-card-label { display: flex !important; align-items: center !important; gap: 6px !important; color: rgba(255,255,255,0.5) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 8px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-info-card-value { color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-info-card-value.big { font-size: 22px !important; color: var(--rh-purple) !important; color: #b855ff !important; letter-spacing: -0.01em !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-info-card-hint { display: block !important; color: rgba(255,255,255,0.5) !important; font-size: 12px !important; margin-top: 4px !important; } /* Tabs (Informações de Hospedagem / Uso de recursos) — força layout pill bar. .rollin-details-nav é o wrapper externo;
    dentro. */ html[data-theme="dark"] body.rollin-clientarea .rollin-details-nav { margin-bottom: 16px !important; overflow: visible !important; } html[data-theme="dark"] body.rollin-clientarea .nav.nav-tabs.rollin-tabs, html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs { display: flex !important; flex-wrap: wrap !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; background: transparent !important; border: none !important; border-radius: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs::-webkit-scrollbar { display: none !important; } html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs li, body.rollin-clientarea ul.rollin-tabs > li { display: inline-block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; float: none !important; /* mata Bootstrap nav-tabs > li { float: left } */ width: auto !important; border: none !important; background: none !important; } /* Garante .rollin-details-nav sem overflow oculto que escondia os tabs */ body.rollin-clientarea .rollin-details-nav { width: 100% !important; overflow: visible !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 0 16px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-tab, html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs li > a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 999px !important; color: rgba(255, 255, 255, 0.70) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-tab:hover, html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs li > a:hover { background: rgba(138, 43, 214, 0.10) !important; border-color: rgba(138, 43, 214, 0.30) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-tab.active, html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs li.active > a { background: var(--rh-purple) !important; border-color: var(--rh-purple) !important; color: #ffffff !important; box-shadow: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-tab svg, html[data-theme="dark"] body.rollin-clientarea .rollin-tab i, html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs li > a svg, html[data-theme="dark"] body.rollin-clientarea ul.rollin-tabs li > a i { width: 14px !important; height: 14px !important; } /* Tab content panels — força bg dark + reset Bootstrap */ html[data-theme="dark"] body.rollin-clientarea .tab-content, html[data-theme="dark"] body.rollin-clientarea .rollin-tab-content { background: transparent !important; border: none !important; padding: 0 !important; } html[data-theme="dark"] body.rollin-clientarea .tab-pane { background: transparent !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .tab-pane.fade.in.active { display: block !important; } /* KV list (Domínio / IP / Servidores / SSL info) */ html[data-theme="dark"] body.rollin-clientarea .rollin-kv-list { background: rgba(31,0,64,0.5) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; padding: 8px !important; list-style: none !important; margin: 0 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-kv { display: grid !important; grid-template-columns: 220px 1fr !important; align-items: center !important; gap: 16px !important; padding: 14px 18px !important; border-radius: 8px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; transition: background 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-kv:last-child { border-bottom: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-kv:hover { background: rgba(138,43,214,0.05) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-kv-label { color: rgba(255,255,255,0.5) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-kv-value { color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; word-break: break-all !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-kv-value.mono { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; font-size: 13px !important; color: #b855ff !important; } /* Progress bars de uso (disco, banda, etc) */ html[data-theme="dark"] body.rollin-clientarea .rollin-progress, html[data-theme="dark"] body.rollin-clientarea .progress { background: rgba(255,255,255,0.06) !important; border-radius: 999px !important; overflow: hidden !important; height: 8px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-progress-bar, html[data-theme="dark"] body.rollin-clientarea .progress-bar { background: linear-gradient(90deg, #6a1ab0, #b855ff) !important; border-radius: inherit !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-progress-bar.cyan, html[data-theme="dark"] body.rollin-clientarea .progress-bar-success { background: linear-gradient(90deg, #00c2a6, #01fad5) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-progress-label { color: rgba(255,255,255,0.7) !important; font-size: 12px !important; } /* Bloco de uso de recursos */ html[data-theme="dark"] body.rollin-clientarea .rollin-usage-block { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 12px !important; } /* SSL state badge */ html[data-theme="dark"] body.rollin-clientarea .ssl-state.ssl-active { background: rgba(1,250,213,0.10) !important; border: 1px solid rgba(1,250,213,0.30) !important; color: #01fad5 !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } /* Module client area (DirectAdmin / cPanel area) */ html[data-theme="dark"] body.rollin-clientarea .module-client-area { background: rgba(31,0,64,0.5) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; padding: 24px !important; color: #ffffff !important; margin-top: 16px !important; } html[data-theme="dark"] body.rollin-clientarea .module-client-area .button, html[data-theme="dark"] body.rollin-clientarea .module-client-area .btn { background: var(--rh-purple) !important; color: #ffffff !important; border: none !important; padding: 12px 20px !important; border-radius: 10px !important; font-weight: 600 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 4px 14px rgba(138,43,214,0.3) !important; transition: all 180ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .module-client-area .button:hover, html[data-theme="dark"] body.rollin-clientarea .module-client-area .btn:hover { background: var(--rh-purple-deep) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 22px rgba(138,43,214,0.45) !important; } /* Mobile — product details */ /* === MOBILE — Product details + componentes globais (theme-agnostic) === */ @media (max-width: 900px) { body.rollin-clientarea .rollin-service-hero { padding: 20px 18px !important; margin-bottom: 14px !important; } body.rollin-clientarea .rollin-service-hero-main { flex-wrap: wrap !important; gap: 14px !important; } body.rollin-clientarea .rollin-service-icon { width: 52px !important; height: 52px !important; border-radius: 12px !important; } body.rollin-clientarea .rollin-service-icon svg, body.rollin-clientarea .rollin-service-icon i { width: 22px !important; height: 22px !important; } body.rollin-clientarea .rollin-service-name { font-size: 20px !important; } body.rollin-clientarea .rollin-service-group { font-size: 13px !important; } body.rollin-clientarea .rollin-service-domain { font-size: 12px !important; padding: 5px 10px !important; word-break: break-all !important; } body.rollin-clientarea .rollin-info-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.rollin-clientarea .rollin-info-card { padding: 12px 14px !important; } body.rollin-clientarea .rollin-info-card-value.big { font-size: 18px !important; } body.rollin-clientarea .rollin-kv-list { padding: 4px !important; } body.rollin-clientarea .rollin-kv { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 14px !important; } body.rollin-clientarea .rollin-tab, body.rollin-clientarea ul.rollin-tabs li > a { padding: 8px 14px !important; font-size: 12px !important; } body.rollin-clientarea ul.rollin-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 4px !important; } body.rollin-clientarea .module-client-area { padding: 18px !important; } body.rollin-clientarea .module-client-area .button, body.rollin-clientarea .module-client-area .btn { width: 100% !important; justify-content: center !important; } body.rollin-clientarea .rollin-form-actions { flex-direction: column-reverse !important; align-items: stretch !important; } body.rollin-clientarea .rollin-form-actions .btn, body.rollin-clientarea .rollin-form-actions button { width: 100% !important; justify-content: center !important; } } /* === MOBILE PHONE (< 480px) — refinements === */ @media (max-width: 480px) { body.rollin-clientarea .rollin-info-grid { grid-template-columns: 1fr !important; } body.rollin-clientarea .rollin-service-hero { padding: 18px 14px !important; } body.rollin-clientarea .rollin-service-name { font-size: 18px !important; } body.rollin-clientarea .rollin-service-icon { width: 44px !important; height: 44px !important; } body.rollin-clientarea .rollin-feed-hero { padding: 24px 18px !important; } body.rollin-clientarea .rollin-feed-hero-title { font-size: 24px !important; } body.rollin-clientarea .rollin-announce-detail-title { font-size: 22px !important; } body.rollin-clientarea .rollin-feed-img { aspect-ratio: 21 / 9 !important; } body.rollin-clientarea .form-control { font-size: 16px !important; /* anti-zoom iOS */ } } /* Light counterparts pra product details consolidados no bloco LIGHT MODE no fim do arquivo */ /* Hint / required text below fields */ html[data-theme="dark"] body.rollin-clientarea .hint, html[data-theme="dark"] body.rollin-clientarea .ticket-attachments-message { color: rgba(255, 255, 255, 0.55) !important; font-size: 12px !important; } /* Form actions row (botões no final) */ html[data-theme="dark"] body.rollin-clientarea .rollin-form-actions { display: flex !important; gap: 10px !important; justify-content: flex-end !important; flex-wrap: wrap !important; margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } /* Botões btn-ghost (Voltar / Cancelar) */ html[data-theme="dark"] body.rollin-clientarea .btn-ghost { background: rgba(255, 255, 255, 0.04) !important; color: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] body.rollin-clientarea .btn-ghost:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.20) !important; color: #ffffff !important; } /* ============================================================================= Segurança / Toggle Row / Checkboxes ============================================================================= */ /* Linha de toggle (Single Sign-On etc) */ html[data-theme="dark"] body.rollin-clientarea .rollin-toggle-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 16px !important; padding: 18px 20px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; color: #ffffff !important; } /* Status badges (Permitido / Bloqueado) — pílulas premium */ html[data-theme="dark"] body.rollin-clientarea .rollin-status { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-status::before { content: '' !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: currentColor !important; box-shadow: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-status.rollin-status-active { background: rgba(1, 250, 213, 0.10) !important; border: 1px solid rgba(1, 250, 213, 0.30) !important; color: #01fad5 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-status.rollin-status-closed { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.6) !important; } /* .hidden — theme-agnostic, esconde span fora de uso (badge SSO mutuamente exclusivo) */ body.rollin-clientarea .rollin-status.hidden, body.rollin-clientarea .hidden { display: none !important; } /* Toggle Switch (ON/OFF) */ html[data-theme="dark"] body.rollin-clientarea .toggle-switch-success { /* deixa o toggle nativo do WHMCS, mas garante contraste */ filter: hue-rotate(0deg) !important; } /* Checkbox custom */ html[data-theme="dark"] body.rollin-clientarea .rollin-check { display: inline-flex !important; align-items: center !important; gap: 10px !important; color: rgba(255, 255, 255, 0.85) !important; cursor: pointer !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-check input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: var(--rh-purple) !important; cursor: pointer !important; } /* Página de details: select com bandeira (telefone country code) */ html[data-theme="dark"] body.rollin-clientarea .form-control.custom-select { background-color: rgba(255, 255, 255, 0.04) !important; color: #ffffff !important; } /* "marketing-email-optin" variant — variant da .rollin-form-section */ html[data-theme="dark"] body.rollin-clientarea .rollin-form-section.marketing-email-optin { background: rgba(138, 43, 214, 0.06) !important; border-color: rgba(138, 43, 214, 0.20) !important; } /* Hint em formulário (texto pequeno embaixo de campos) */ html[data-theme="dark"] body.rollin-clientarea .hint { color: rgba(255, 255, 255, 0.55) !important; font-size: 12px !important; } /* ============================================================================= intl-tel-input v11 (versão embutida no scripts.min.js do WHMCS rhost) Classes v11 (sem underscore): .intl-tel-input, .flag-container, .selected-flag, .selected-dial-code, .iti-flag, .iti-arrow, .country-list, .country-name. WHMCS NÃO instala o CSS — esse bloco implementa o positioning correto. ============================================================================= */ /* Wrapper — ocupa toda a largura do form-field */ body.rollin-clientarea .intl-tel-input { position: relative !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } /* Input — padding-left calculado pra abrir espaço pra área da bandeira. Dimensões da .selected-flag: 14px (pad-left) + 20px (flag) + 8px (gap) + ~12px (arrow + spacing) + 12px (pad-right) + 1px (border) = ~67px (default) No modo separate-dial-code adiciona ~36px de "+55" texto = ~103px. */ body.rollin-clientarea .intl-tel-input input[type="tel"], body.rollin-clientarea .intl-tel-input input.form-control, body.rollin-clientarea .intl-tel-input > input { position: relative !important; z-index: 0 !important; padding-left: 70px !important; margin-left: 0 !important; width: 100% !important; } body.rollin-clientarea .intl-tel-input.allow-dropdown input[type="tel"], body.rollin-clientarea .intl-tel-input.allow-dropdown > input { padding-left: 70px !important; } /* Input: 110px (selected-flag width) + 1px (border-right) + 14px (respiro) = 125px */ body.rollin-clientarea .intl-tel-input.separate-dial-code input[type="tel"], body.rollin-clientarea .intl-tel-input.separate-dial-code > input, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-2 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-3 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-4 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-5 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input { padding-left: 125px !important; } /* Flag container — overlay absoluto no canto esquerdo */ body.rollin-clientarea .intl-tel-input .flag-container { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; padding: 1px !important; z-index: 2 !important; } /* Quando dropdown allowed, container é clicável */ body.rollin-clientarea .intl-tel-input.allow-dropdown .flag-container:hover { cursor: pointer !important; } /* Selected flag — iti v11 usa display:table e elementos absolute-positioned. NÃO altero o display (manter table); só o width pra ter respiro, padding, border-right e bg sutil. Os filhos (.iti-flag, .iti-arrow) são absolute. */ body.rollin-clientarea .intl-tel-input .selected-flag { position: relative !important; z-index: 1 !important; height: 100% !important; background: transparent !important; border-right: 1px solid !important; border-radius: 8px 0 0 8px !important; cursor: pointer !important; transition: background 160ms ease !important; } /* Mode separate-dial-code (Brazil = +55 = iti-sdc-3): override do width=68 pra acomodar respiro PROFISSIONAL: 16 (left) + 20 (flag) + 14 (gap) + 30 (+55) + 14 (gap) + 12 (arrow) + 12 (right) = ~118px */ body.rollin-clientarea .intl-tel-input.separate-dial-code .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag, body.rollin-clientarea .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag { width: 110px !important; } /* iti-flag (bandeira) — absolute, posicionar com left explícito */ body.rollin-clientarea .intl-tel-input.separate-dial-code .selected-flag .iti-flag { left: 16px !important; } /* dial-code (+55) — table-cell, padding-left dá o gap após a bandeira */ body.rollin-clientarea .intl-tel-input.separate-dial-code .selected-dial-code { padding-left: 50px !important; /* 16 (flag-left) + 20 (flag width) + 14 (gap) = 50 */ padding-right: 0 !important; } /* arrow — absolute, ajustar pra ter margem segura da borda direita */ body.rollin-clientarea .intl-tel-input.separate-dial-code .selected-flag .iti-arrow { right: 12px !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .selected-flag { border-right-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .selected-flag { border-right-color: rgba(13, 10, 31, 0.10) !important; } body.rollin-clientarea .intl-tel-input .selected-flag:hover { background: rgba(138, 43, 214, 0.08) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .selected-flag:hover { background: rgba(106, 26, 176, 0.05) !important; } /* Flag sprite (Brazil, US, etc) — sized 16x11px (v11 default) */ body.rollin-clientarea .iti-flag { width: 20px !important; height: 15px !important; box-shadow: 0 0 1px 0 #888 !important; background-repeat: no-repeat !important; flex-shrink: 0 !important; } /* Dial code (+55) — visível em separate-dial-code, gap controlado pelo .selected-flag */ body.rollin-clientarea .intl-tel-input .selected-dial-code { margin: 0 !important; font-weight: 600 !important; font-size: 14px !important; white-space: nowrap !important; flex-shrink: 0 !important; letter-spacing: 0.01em !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .selected-dial-code { color: rgba(255,255,255,0.92) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .selected-dial-code { color: #0d0a1f !important; } /* Arrow — triângulo CSS-only, gap controlado pelo .selected-flag */ body.rollin-clientarea .intl-tel-input .iti-arrow { margin: 0 !important; width: 0 !important; height: 0 !important; border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-top: 5px solid !important; flex-shrink: 0 !important; transition: transform 200ms ease, border-top-color 160ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .iti-arrow { border-top-color: rgba(255,255,255,0.65) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .iti-arrow { border-top-color: rgba(13,10,31,0.65) !important; } body.rollin-clientarea .intl-tel-input .selected-flag:hover .iti-arrow { border-top-color: var(--rh-purple) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .selected-flag:hover .iti-arrow { border-top-color: #6a1ab0 !important; } body.rollin-clientarea .intl-tel-input .iti-arrow.up { border-top: none !important; border-bottom: 5px solid !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .iti-arrow.up { border-bottom-color: rgba(255,255,255,0.65) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .iti-arrow.up { border-bottom-color: rgba(13,10,31,0.65) !important; } /* Country dropdown — design profissional, hierarquia clara, anti-clipping */ body.rollin-clientarea .intl-tel-input .country-list { position: absolute !important; z-index: 100 !important; list-style: none !important; text-align: left !important; padding: 8px !important; margin: 6px 0 0 -1px !important; border-radius: 14px !important; max-height: 320px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; border: 1px solid !important; min-width: 320px !important; max-width: min(380px, 92vw) !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country-list { background: #1a0033 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country-list { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; color: #0d0a1f !important; box-shadow: 0 16px 40px rgba(13, 10, 31, 0.12) !important; } /* Quando JS aplica left negativo grande (overflow direita), realinha pela direita */ body.rollin-clientarea .intl-tel-input .country-list[style*="left: -"] { left: auto !important; right: 0 !important; } /* Custom scrollbar refinado */ body.rollin-clientarea .intl-tel-input .country-list::-webkit-scrollbar { width: 8px !important; } body.rollin-clientarea .intl-tel-input .country-list::-webkit-scrollbar-track { background: transparent !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10) !important; border-radius: 999px !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country-list::-webkit-scrollbar-thumb { background: rgba(13, 10, 31, 0.12) !important; border-radius: 999px !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country-list::-webkit-scrollbar-thumb:hover { background: rgba(13, 10, 31, 0.25) !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country-list { background: #16002a !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country-list { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.10) !important; color: #0d0a1f !important; } body.rollin-clientarea .intl-tel-input .country { padding: 10px 14px !important; margin: 1px 0 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 12px !important; font-size: 14px !important; border-radius: 8px !important; transition: background 120ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country:hover, html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country.highlight { background: rgba(138, 43, 214, 0.20) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country:hover, html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country.highlight { background: rgba(106, 26, 176, 0.08) !important; } /* Active country (current) — estado checked */ html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country.active { background: rgba(138, 43, 214, 0.14) !important; color: #d18bff !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country.active { background: rgba(106, 26, 176, 0.06) !important; color: #4a0e80 !important; } /* Divider — separa preferred countries do resto */ body.rollin-clientarea .intl-tel-input .divider { padding: 0 !important; margin: 6px 8px !important; cursor: default !important; height: 1px !important; list-style: none !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .divider { background: rgba(255,255,255,0.08) !important; border: none !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .divider { background: rgba(13,10,31,0.06) !important; border: none !important; } body.rollin-clientarea .intl-tel-input .country .iti-flag { flex-shrink: 0 !important; } body.rollin-clientarea .intl-tel-input .country-name { flex: 1 !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; font-weight: 500 !important; } body.rollin-clientarea .intl-tel-input .dial-code { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; font-size: 13px !important; flex-shrink: 0 !important; margin-left: 8px !important; font-weight: 500 !important; } html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .dial-code { color: rgba(255,255,255,0.55) !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .dial-code { color: rgba(13,10,31,0.55) !important; } /* No item ativo, dial code mais saturado */ html[data-theme="dark"] body.rollin-clientarea .intl-tel-input .country.active .dial-code { color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .intl-tel-input .country.active .dial-code { color: #6a1ab0 !important; } /* ============================================================================= ANNOUNCEMENTS — /announcements.php Layout completo: grid 2-col, cards com imagem topo, badges, body ============================================================================= */ /* Section wrapper */ body.rollin-clientarea .rollin-feed-section { background: transparent !important; padding: 0 !important; } /* Hero card */ body.rollin-clientarea .rollin-feed-hero { border-radius: 16px !important; padding: 36px 32px !important; text-align: center !important; margin-bottom: 28px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-hero { background: linear-gradient(135deg, rgba(138, 43, 214, 0.10) 0%, rgba(31, 0, 64, 0.55) 100%) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-hero { background: linear-gradient(135deg, rgba(138, 43, 214, 0.05) 0%, #ffffff 100%) !important; border-color: rgba(13, 10, 31, 0.06) !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } body.rollin-clientarea .rollin-feed-hero-title { font-size: 32px !important; font-weight: 700 !important; margin: 8px 0 12px !important; line-height: 1.15 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-hero-title { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-hero-title { color: #0d0a1f !important; } body.rollin-clientarea .rollin-feed-hero-subtitle { font-size: 14px !important; line-height: 1.55 !important; max-width: 620px !important; margin: 0 auto 24px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-hero-subtitle { color: rgba(255,255,255,0.70) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-hero-subtitle { color: rgba(13,10,31,0.65) !important; } /* Eyebrow pill */ body.rollin-clientarea .rollin-eyebrow { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 5px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin: 0 0 4px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-eyebrow { background: rgba(138, 43, 214, 0.10) !important; border: 1px solid rgba(138, 43, 214, 0.28) !important; color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-eyebrow { background: rgba(106, 26, 176, 0.06) !important; border: 1px solid rgba(106, 26, 176, 0.25) !important; color: #6a1ab0 !important; } /* "gradient-text" — sem gradient. Usa o ROXO do logo sólido em ambos os temas. Dark eleva pro tom claro (#b855ff) pra contraste contra #16002a; light usa o roxo profundo (#6a1ab0). */ body.rollin-clientarea .gradient-text { background: none !important; background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; } html[data-theme="dark"] body.rollin-clientarea .gradient-text { color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .gradient-text { color: #6a1ab0 !important; } /* Pulse dot */ body.rollin-clientarea .rollin-pulse-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #01fad5 !important; box-shadow: none !important; } html[data-theme="light"] body.rollin-clientarea .rollin-pulse-dot { background: #00a896 !important; } /* Section subtitle */ body.rollin-clientarea .rollin-section-subtitle { font-size: 18px !important; font-weight: 600 !important; margin: 32px 0 16px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-section-subtitle { color: rgba(255,255,255,0.85) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-section-subtitle { color: #0d0a1f !important; } /* Filter pills row */ body.rollin-clientarea .rollin-feed-filters { display: inline-flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.rollin-clientarea .rollin-filter { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 16px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; box-shadow: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-filter { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.70) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-filter:hover { background: rgba(138, 43, 214, 0.12) !important; border-color: rgba(138, 43, 214, 0.30) !important; color: #ffffff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-filter.active { background: rgba(138, 43, 214, 0.22) !important; border-color: rgba(138, 43, 214, 0.55) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-filter { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; color: rgba(13, 10, 31, 0.70) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-filter.active { background: rgba(106, 26, 176, 0.10) !important; border-color: rgba(106, 26, 176, 0.40) !important; color: #4a0e80 !important; } /* ===== FEED GRID — 2 colunas no desktop, 1 no mobile ===== */ body.rollin-clientarea .rollin-feed { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; margin: 0 !important; } @media (max-width: 768px) { body.rollin-clientarea .rollin-feed { grid-template-columns: 1fr !important; } } /* ===== FEED ITEM CARD ===== */ body.rollin-clientarea .rollin-feed-item { display: flex !important; flex-direction: column !important; overflow: hidden !important; border-radius: 14px !important; cursor: pointer !important; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-item { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-item:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(138, 43, 214, 0.40) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-item { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-item:hover { border-color: rgba(106, 26, 176, 0.40) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(13, 10, 31, 0.10) !important; } /* ===== IMAGE AREA (topo do card) — 16:9 com imagem, barra fina sem ===== */ body.rollin-clientarea .rollin-feed-img { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; background-color: rgba(138, 43, 214, 0.10) !important; background-size: cover !important; background-position: center !important; border-radius: 0 !important; border: none !important; overflow: hidden !important; } /* Sem imagem: colapsa pra barra fina que só hospeda os badges (evita o "buraco" gigante reservado pelo aspect-ratio). */ body.rollin-clientarea .rollin-feed-img:not([style*="background-image"]) { aspect-ratio: auto !important; height: 56px !important; background-color: transparent !important; border-bottom: 1px solid rgba(138, 43, 214, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-img:not([style*="background-image"]) { border-bottom-color: rgba(106, 26, 176, 0.10) !important; } body.rollin-clientarea .rollin-feed-img:not([style*="background-image"]) .rollin-feed-badge, body.rollin-clientarea .rollin-feed-img:not([style*="background-image"]) .rollin-feed-featured { top: 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-img { background-color: linear-gradient(135deg, rgba(138, 43, 214, 0.18), rgba(31, 0, 64, 0.65)) !important; background-image: linear-gradient(135deg, rgba(138, 43, 214, 0.18), rgba(31, 0, 64, 0.65)) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-img[style*="background-image"] { background-image: var(--feed-img, none) !important; } /* Quando o item tem image inline (style background-image), respeita */ body.rollin-clientarea .rollin-feed-img[style*="background-image"] { background-color: transparent !important; } /* Badges absolutas no canto da imagem */ body.rollin-clientarea .rollin-feed-img .rollin-feed-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 2 !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } body.rollin-clientarea .rollin-feed-img .rollin-feed-featured { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 2 !important; } /* ===== BADGES — pill style ===== */ body.rollin-clientarea .rollin-feed-badge, body.rollin-clientarea .rollin-feed-featured { display: inline-flex !important; align-items: center !important; gap: 5px !important; border-radius: 999px !important; padding: 5px 11px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; box-shadow: none !important; text-shadow: none !important; border: 1px solid transparent !important; line-height: 1 !important; white-space: nowrap !important; } body.rollin-clientarea .rollin-feed-badge i, body.rollin-clientarea .rollin-feed-featured i { width: 12px !important; height: 12px !important; } /* Variantes — sem rosa */ html[data-theme="dark"] body.rollin-clientarea .rollin-feed-badge.aviso { background: rgba(249, 115, 22, 0.20) !important; border-color: rgba(249, 115, 22, 0.40) !important; color: #fdba74 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-badge.promo { background: rgba(138, 43, 214, 0.22) !important; border-color: rgba(138, 43, 214, 0.45) !important; color: #d18bff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-badge.tutorial { background: rgba(184, 85, 255, 0.18) !important; border-color: rgba(184, 85, 255, 0.40) !important; color: #d18bff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-featured { background: rgba(255, 196, 0, 0.18) !important; border-color: rgba(255, 196, 0, 0.42) !important; color: #ffd54f !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-badge.aviso { background: rgba(249, 115, 22, 0.10) !important; border-color: rgba(249, 115, 22, 0.35) !important; color: #c2410c !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-badge.promo { background: rgba(106, 26, 176, 0.08) !important; border-color: rgba(106, 26, 176, 0.30) !important; color: #4a0e80 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-badge.tutorial { background: rgba(106, 26, 176, 0.08) !important; border-color: rgba(106, 26, 176, 0.30) !important; color: #6a1ab0 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-featured { background: rgba(255, 196, 0, 0.10) !important; border-color: rgba(202, 138, 4, 0.40) !important; color: #854d0e !important; } /* ===== BODY — title, desc, meta ===== */ body.rollin-clientarea .rollin-feed-body { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 18px 20px 20px !important; gap: 8px !important; } body.rollin-clientarea .rollin-feed-title { font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; margin: 0 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-title { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-title { color: #0d0a1f !important; } body.rollin-clientarea .rollin-feed-desc { font-size: 13px !important; line-height: 1.55 !important; margin: 0 !important; flex: 1 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-desc { color: rgba(255,255,255,0.65) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-desc { color: rgba(13,10,31,0.65) !important; } body.rollin-clientarea .rollin-feed-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 8px !important; padding-top: 12px !important; font-size: 12px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-meta { color: rgba(255,255,255,0.50) !important; border-top: 1px solid rgba(255,255,255,0.06) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-meta { color: rgba(13,10,31,0.55) !important; border-top: 1px solid rgba(13,10,31,0.06) !important; } body.rollin-clientarea .rollin-feed-meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; } body.rollin-clientarea .rollin-feed-meta i { width: 12px !important; height: 12px !important; } body.rollin-clientarea .rollin-feed-cta { font-weight: 600 !important; text-decoration: none !important; transition: color 0.15s ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-cta { color: #b855ff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-item:hover .rollin-feed-cta { color: #d18bff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-cta { color: #6a1ab0 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-item:hover .rollin-feed-cta { color: #8a2bd6 !important; } /* Footer (RSS + paginação) */ body.rollin-clientarea .rollin-feed-footer { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; margin-top: 32px !important; padding-top: 20px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-feed-footer { border-top: 1px solid rgba(255,255,255,0.06) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-feed-footer { border-top: 1px solid rgba(13,10,31,0.06) !important; } /* Empty state */ body.rollin-clientarea .rollin-empty-state { text-align: center !important; padding: 60px 20px !important; border-radius: 14px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-empty-state { background: rgba(255,255,255,0.02) !important; border: 1px dashed rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.55) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-empty-state { background: #fafafc !important; border: 1px dashed rgba(13,10,31,0.15) !important; color: rgba(13,10,31,0.55) !important; } body.rollin-clientarea .rollin-empty-icon { font-size: 48px !important; margin-bottom: 12px !important; opacity: 0.5 !important; } /* ============================================================================= ANNOUNCEMENT DETAIL VIEW — /announcements/{id}/{slug}.html ============================================================================= */ body.rollin-clientarea .rollin-announce-detail { max-width: 820px !important; margin: 0 auto !important; } body.rollin-clientarea .rollin-announce-back { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; margin-bottom: 24px !important; transition: color 0.15s ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-back { color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-back:hover { color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-back { color: rgba(13, 10, 31, 0.65) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-back:hover { color: #6a1ab0 !important; } body.rollin-clientarea .rollin-announce-back i { width: 14px !important; height: 14px !important; } body.rollin-clientarea .rollin-announce-detail-head { padding-bottom: 24px !important; margin-bottom: 28px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-head { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-head { border-bottom: 1px solid rgba(13, 10, 31, 0.08) !important; } body.rollin-clientarea .rollin-announce-detail-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 11px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; margin-bottom: 14px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-badge { background: rgba(249, 115, 22, 0.18) !important; border: 1px solid rgba(249, 115, 22, 0.35) !important; color: #fdba74 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-badge { background: rgba(249, 115, 22, 0.10) !important; border: 1px solid rgba(249, 115, 22, 0.30) !important; color: #c2410c !important; } body.rollin-clientarea .rollin-announce-detail-badge i { width: 12px !important; height: 12px !important; } body.rollin-clientarea .rollin-announce-detail-title { font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 14px !important; letter-spacing: -0.01em !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-title { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-title { color: #0d0a1f !important; } body.rollin-clientarea .rollin-announce-detail-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; font-size: 13px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-meta { color: rgba(255,255,255,0.55) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-meta { color: rgba(13,10,31,0.55) !important; } body.rollin-clientarea .rollin-announce-detail-meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; } body.rollin-clientarea .rollin-announce-detail-meta i { width: 14px !important; height: 14px !important; } body.rollin-clientarea .rollin-announce-detail-edit { text-decoration: none !important; color: inherit !important; transition: color 0.15s ease !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-edit:hover { color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-edit:hover { color: #6a1ab0 !important; } /* Body — conteúdo HTML do anúncio */ body.rollin-clientarea .rollin-announce-detail-body { font-size: 15px !important; line-height: 1.7 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body { color: rgba(255,255,255,0.85) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body { color: rgba(13,10,31,0.85) !important; } body.rollin-clientarea .rollin-announce-detail-body p { margin: 0 0 16px !important; } body.rollin-clientarea .rollin-announce-detail-body h2, body.rollin-clientarea .rollin-announce-detail-body h3, body.rollin-clientarea .rollin-announce-detail-body h4 { margin: 28px 0 12px !important; font-weight: 600 !important; line-height: 1.3 !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body h2, html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body h3, html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body h4 { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body h2, html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body h3, html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body h4 { color: #0d0a1f !important; } body.rollin-clientarea .rollin-announce-detail-body h2 { font-size: 22px !important; } body.rollin-clientarea .rollin-announce-detail-body h3 { font-size: 18px !important; } body.rollin-clientarea .rollin-announce-detail-body h4 { font-size: 16px !important; } body.rollin-clientarea .rollin-announce-detail-body a { text-decoration: underline !important; text-underline-offset: 2px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body a { color: #b855ff !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body a:hover { color: #d18bff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body a { color: #6a1ab0 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body a:hover { color: #4a0e80 !important; } body.rollin-clientarea .rollin-announce-detail-body ul, body.rollin-clientarea .rollin-announce-detail-body ol { margin: 0 0 16px !important; padding-left: 24px !important; } body.rollin-clientarea .rollin-announce-detail-body li { margin-bottom: 6px !important; } body.rollin-clientarea .rollin-announce-detail-body img { max-width: 100% !important; height: auto !important; border-radius: 10px !important; margin: 16px 0 !important; } body.rollin-clientarea .rollin-announce-detail-body blockquote { margin: 16px 0 !important; padding: 12px 18px !important; border-radius: 8px !important; font-style: italic !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body blockquote { background: rgba(138, 43, 214, 0.08) !important; border-left: 3px solid #b855ff !important; color: rgba(255, 255, 255, 0.80) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body blockquote { background: rgba(106, 26, 176, 0.05) !important; border-left: 3px solid #6a1ab0 !important; color: rgba(13, 10, 31, 0.80) !important; } body.rollin-clientarea .rollin-announce-detail-body code { padding: 2px 6px !important; border-radius: 4px !important; font-family: 'JetBrains Mono', Consolas, monospace !important; font-size: 13px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-body code { background: rgba(255, 255, 255, 0.06) !important; color: #01fad5 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-body code { background: rgba(13, 10, 31, 0.05) !important; color: #00a896 !important; } /* Detail footer */ body.rollin-clientarea .rollin-announce-detail-foot { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; margin-top: 36px !important; padding-top: 24px !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-announce-detail-foot { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-announce-detail-foot { border-top: 1px solid rgba(13, 10, 31, 0.08) !important; } /* Botão ghost reutilizável (substitui btn btn-ghost antigo) */ body.rollin-clientarea .rollin-btn-ghost { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; box-shadow: none !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-btn-ghost { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="dark"] body.rollin-clientarea .rollin-btn-ghost:hover { background: rgba(138, 43, 214, 0.12) !important; border-color: rgba(138, 43, 214, 0.35) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rollin-btn-ghost { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; color: rgba(13, 10, 31, 0.85) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-btn-ghost:hover { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.30) !important; color: #4a0e80 !important; } body.rollin-clientarea .rollin-btn-ghost i { width: 14px !important; height: 14px !important; } /* ============================================================================= KILL bootstrap-tabdrop overflow dropdown — não usamos (abas já fazem flex-wrap responsivo; tabdrop só polui o layout) ============================================================================= */ body.rollin-clientarea .nav-tabs-overflow li.dropdown, body.rollin-clientarea .rollin-tabs li.dropdown, body.rollin-clientarea .nav-tabs > li.dropdown { display: none !important; } /* ============================================================================= NOTIFICATIONS DROPDOWN — bell na topbar ============================================================================= */ body.rollin-clientarea .rh-ca-notif-wrap { position: relative !important; } body.rollin-clientarea .rh-ca-notif-panel { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; z-index: 50 !important; width: 360px !important; max-width: calc(100vw - 32px) !important; border-radius: 14px !important; overflow: hidden !important; border: 1px solid !important; animation: rhNotifFadeIn 160ms ease !important; } @keyframes rhNotifFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-panel { background: #1a0033 !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-panel { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; box-shadow: 0 16px 40px rgba(13, 10, 31, 0.14) !important; } /* Header do panel */ body.rollin-clientarea .rh-ca-notif-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; border-bottom: 1px solid !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-head { border-bottom-color: rgba(255,255,255,0.06) !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-head { border-bottom-color: rgba(13,10,31,0.06) !important; } body.rollin-clientarea .rh-ca-notif-title { font-weight: 700 !important; font-size: 14px !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-title { color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-title { color: #0d0a1f !important; } body.rollin-clientarea .rh-ca-notif-count { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-count { color: rgba(255,255,255,0.55) !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-count { color: rgba(13,10,31,0.55) !important; } /* Items */ body.rollin-clientarea .rh-ca-notif-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 18px !important; border-bottom: 1px solid !important; text-decoration: none !important; transition: background 140ms ease !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-item { border-bottom-color: rgba(255,255,255,0.04) !important; color: #ffffff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-item { border-bottom-color: rgba(13,10,31,0.04) !important; color: #0d0a1f !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-item:hover { background: rgba(138,43,214,0.08) !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-item:hover { background: rgba(106,26,176,0.04) !important; } body.rollin-clientarea .rh-ca-notif-icon { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.rollin-clientarea .rh-ca-notif-icon--orange { background: rgba(249, 115, 22, 0.12) !important; color: #fb923c !important; } body.rollin-clientarea .rh-ca-notif-icon--purple { background: rgba(138, 43, 214, 0.14) !important; color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-icon--purple { background: rgba(106, 26, 176, 0.10) !important; color: #6a1ab0 !important; } body.rollin-clientarea .rh-ca-notif-icon--cyan { background: rgba(1, 250, 213, 0.12) !important; color: #01fad5 !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-icon--cyan { background: rgba(0, 168, 150, 0.10) !important; color: #006d5b !important; } body.rollin-clientarea .rh-ca-notif-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } body.rollin-clientarea .rh-ca-notif-row-title { font-size: 13px !important; font-weight: 600 !important; } body.rollin-clientarea .rh-ca-notif-row-desc { font-size: 12px !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-row-desc { color: rgba(255,255,255,0.55) !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-row-desc { color: rgba(13,10,31,0.55) !important; } body.rollin-clientarea .rh-ca-notif-pill { flex-shrink: 0 !important; min-width: 22px !important; height: 22px !important; padding: 0 8px !important; border-radius: 999px !important; background: var(--rh-purple) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.rollin-clientarea .rh-ca-notif-pill:not([data-multi-digit]) { width: 22px !important; min-width: 22px !important; padding: 0 !important; } body.rollin-clientarea .rh-ca-notif-pill[hidden] { display: none !important; } /* Footer */ body.rollin-clientarea .rh-ca-notif-foot { padding: 10px 18px !important; } body.rollin-clientarea .rh-ca-notif-foot a { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; color: var(--rh-purple) !important; } html[data-theme="dark"] body.rollin-clientarea .rh-ca-notif-foot a { color: #b855ff !important; } html[data-theme="light"] body.rollin-clientarea .rh-ca-notif-foot a { color: #6a1ab0 !important; } @media (max-width: 480px) { body.rollin-clientarea .rh-ca-notif-panel { width: calc(100vw - 24px) !important; right: -8px !important; } } /* ============================================================================= ============================================================================ LIGHT MODE — espelho completo do dark Reescreve LAYOUT + cores claras pra todas as classes que estavam só em dark. Usa #ffffff base, #6a1ab0 púrpura escuro, #0d0a1f texto, borders 0.08 ink. ============================================================================ ============================================================================= */ /* ----- Buttons ----- */ html[data-theme="light"] body.rollin-clientarea .btn-primary, html[data-theme="light"] body.rollin-clientarea .rollin-btn-primary { background: #6a1ab0 !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(106, 26, 176, 0.20) !important; } html[data-theme="light"] body.rollin-clientarea .btn-primary:hover, html[data-theme="light"] body.rollin-clientarea .rollin-btn-primary:hover { background: #5710a0 !important; box-shadow: 0 8px 22px rgba(106, 26, 176, 0.30) !important; transform: translateY(-1px) !important; } html[data-theme="light"] body.rollin-clientarea .btn-secondary, html[data-theme="light"] body.rollin-clientarea .btn-default { background: #ffffff !important; color: #0d0a1f !important; border: 1px solid rgba(13, 10, 31, 0.12) !important; } html[data-theme="light"] body.rollin-clientarea .btn-secondary:hover, html[data-theme="light"] body.rollin-clientarea .btn-default:hover { background: #fafafc !important; border-color: rgba(13, 10, 31, 0.20) !important; } /* ----- Cards (panel, well, rollin-card) ----- */ html[data-theme="light"] body.rollin-clientarea .rollin-card, html[data-theme="light"] body.rollin-clientarea .panel, html[data-theme="light"] body.rollin-clientarea .well { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; border-radius: 12px !important; color: #0d0a1f !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } /* ----- Alerts ----- */ html[data-theme="light"] body.rollin-clientarea .alert { border-radius: 12px !important; border: 1px solid !important; } html[data-theme="light"] body.rollin-clientarea .alert-success { background: rgba(0, 168, 150, 0.08) !important; border-color: rgba(0, 168, 150, 0.30) !important; color: #006d5b !important; } html[data-theme="light"] body.rollin-clientarea .alert-info { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.28) !important; color: #4a0e80 !important; } html[data-theme="light"] body.rollin-clientarea .alert-warning { background: rgba(202, 138, 4, 0.08) !important; border-color: rgba(202, 138, 4, 0.30) !important; color: #854d0e !important; } html[data-theme="light"] body.rollin-clientarea .alert-danger { background: rgba(220, 38, 38, 0.06) !important; border-color: rgba(220, 38, 38, 0.28) !important; color: #991b1b !important; } /* ----- SERVICE HERO (clientareaproductdetails) ----- */ /* Light tone com toque roxo brand — fundo claro, texto escuro legível, chip de domínio em roxo (sem ciano). */ html[data-theme="light"] body.rollin-clientarea .rollin-service-hero { background: linear-gradient(135deg, rgba(106, 26, 176, 0.05) 0%, #ffffff 100%) !important; border: 1px solid rgba(106, 26, 176, 0.14) !important; border-radius: 20px !important; padding: 32px !important; margin-bottom: 20px !important; box-shadow: 0 4px 16px rgba(13, 10, 31, 0.04) !important; overflow: hidden !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-hero-main { display: flex !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-icon { width: 64px !important; height: 64px !important; border-radius: 16px !important; background: #6a1ab0 !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 6px 18px rgba(106, 26, 176, 0.22) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-icon svg, html[data-theme="light"] body.rollin-clientarea .rollin-service-icon i { width: 28px !important; height: 28px !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-hero-text { flex: 1 1 auto !important; min-width: 200px !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-name { color: #0d0a1f !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 0 4px !important; line-height: 1.1 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-group { color: rgba(13, 10, 31, 0.65) !important; font-size: 14px !important; margin: 0 0 12px !important; } /* Domínio chip — roxo brand (substitui o ciano/teal proibido) */ html[data-theme="light"] body.rollin-clientarea .rollin-service-domain { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(106, 26, 176, 0.08) !important; border: 1px solid rgba(106, 26, 176, 0.25) !important; color: #6a1ab0 !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 160ms ease !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-domain:hover { background: rgba(106, 26, 176, 0.14) !important; border-color: rgba(106, 26, 176, 0.40) !important; color: #4a1080 !important; } /* Botão "Solicitar Cancelamento" — visível e neutro no light */ html[data-theme="light"] body.rollin-clientarea .rollin-service-hero .btn-cancel, html[data-theme="light"] body.rollin-clientarea .rollin-service-hero a[href*="cancel"], html[data-theme="light"] body.rollin-clientarea .rollin-service-hero button[name*="cancel"] { background: rgba(13, 10, 31, 0.04) !important; border: 1px solid rgba(13, 10, 31, 0.14) !important; color: rgba(13, 10, 31, 0.75) !important; padding: 8px 14px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; } html[data-theme="light"] body.rollin-clientarea .rollin-service-hero .btn-cancel:hover, html[data-theme="light"] body.rollin-clientarea .rollin-service-hero a[href*="cancel"]:hover, html[data-theme="light"] body.rollin-clientarea .rollin-service-hero button[name*="cancel"]:hover { background: rgba(220, 38, 38, 0.08) !important; border-color: rgba(220, 38, 38, 0.28) !important; color: #b91c1c !important; } /* ----- INFO GRID + CARDS (Data Registro / Valor / Vencimento / Pagamento) ----- */ html[data-theme="light"] body.rollin-clientarea .rollin-info-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 14px !important; margin-top: 24px !important; } html[data-theme="light"] body.rollin-clientarea .rollin-info-card { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; border-radius: 14px !important; padding: 16px 18px !important; transition: all 200ms ease !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-info-card:hover { border-color: rgba(106, 26, 176, 0.30) !important; box-shadow: 0 8px 20px rgba(13, 10, 31, 0.08) !important; transform: translateY(-2px) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-info-card-label { display: flex !important; align-items: center !important; gap: 6px !important; color: rgba(13, 10, 31, 0.55) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 8px !important; } html[data-theme="light"] body.rollin-clientarea .rollin-info-card-value { color: #0d0a1f !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-info-card-value.big { font-size: 22px !important; color: #6a1ab0 !important; letter-spacing: -0.01em !important; } html[data-theme="light"] body.rollin-clientarea .rollin-info-card-hint { display: block !important; color: rgba(13, 10, 31, 0.55) !important; font-size: 12px !important; margin-top: 4px !important; } /* ----- TABS (rollin-tabs / nav-tabs) ----- */ html[data-theme="light"] body.rollin-clientarea .nav.nav-tabs.rollin-tabs, html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs { display: flex !important; flex-wrap: wrap !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; background: transparent !important; border: none !important; border-radius: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs::-webkit-scrollbar { display: none !important; } html[data-theme="light"] body.rollin-clientarea .rollin-tab, html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs li > a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; border-radius: 999px !important; color: rgba(13, 10, 31, 0.70) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important; } html[data-theme="light"] body.rollin-clientarea .rollin-tab:hover, html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs li > a:hover { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.30) !important; color: #4a0e80 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-tab.active, html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs li.active > a { background: #6a1ab0 !important; border-color: #6a1ab0 !important; color: #ffffff !important; box-shadow: none !important; } html[data-theme="light"] body.rollin-clientarea .rollin-tab svg, html[data-theme="light"] body.rollin-clientarea .rollin-tab i, html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs li > a svg, html[data-theme="light"] body.rollin-clientarea ul.rollin-tabs li > a i { width: 14px !important; height: 14px !important; } html[data-theme="light"] body.rollin-clientarea .tab-content, html[data-theme="light"] body.rollin-clientarea .rollin-tab-content { background: transparent !important; border: none !important; padding: 0 !important; } html[data-theme="light"] body.rollin-clientarea .tab-pane { background: transparent !important; color: #0d0a1f !important; } /* ----- KV LIST (Domínio / IP / Servidores / SSL info) ----- */ html[data-theme="light"] body.rollin-clientarea .rollin-kv-list { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; border-radius: 16px !important; padding: 8px !important; list-style: none !important; margin: 0 !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-kv { display: grid !important; grid-template-columns: 220px 1fr !important; align-items: center !important; gap: 16px !important; padding: 14px 18px !important; border-radius: 8px !important; border-bottom: 1px solid rgba(13, 10, 31, 0.06) !important; transition: background 160ms ease !important; } html[data-theme="light"] body.rollin-clientarea .rollin-kv:last-child { border-bottom: none !important; } html[data-theme="light"] body.rollin-clientarea .rollin-kv:hover { background: rgba(106, 26, 176, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-kv-label { color: rgba(13, 10, 31, 0.55) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } html[data-theme="light"] body.rollin-clientarea .rollin-kv-value { color: #0d0a1f !important; font-size: 14px !important; font-weight: 500 !important; word-break: break-all !important; } html[data-theme="light"] body.rollin-clientarea .rollin-kv-value.mono { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; font-size: 13px !important; color: #6a1ab0 !important; } /* ----- PROGRESS BARS ----- */ html[data-theme="light"] body.rollin-clientarea .rollin-progress, html[data-theme="light"] body.rollin-clientarea .progress { background: rgba(13, 10, 31, 0.06) !important; border-radius: 999px !important; overflow: hidden !important; height: 8px !important; } html[data-theme="light"] body.rollin-clientarea .rollin-progress-bar, html[data-theme="light"] body.rollin-clientarea .progress-bar { background: linear-gradient(90deg, #6a1ab0, #8a2bd6) !important; border-radius: inherit !important; } html[data-theme="light"] body.rollin-clientarea .rollin-progress-bar.cyan, html[data-theme="light"] body.rollin-clientarea .progress-bar-success { background: linear-gradient(90deg, #006d5b, #00a896) !important; } html[data-theme="light"] body.rollin-clientarea .rollin-progress-label { color: rgba(13, 10, 31, 0.65) !important; font-size: 12px !important; } /* ----- USAGE BLOCK ----- */ html[data-theme="light"] body.rollin-clientarea .rollin-usage-block { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 12px !important; } /* ----- SSL state badge ----- */ html[data-theme="light"] body.rollin-clientarea .ssl-state.ssl-active { background: rgba(0, 168, 150, 0.08) !important; border: 1px solid rgba(0, 168, 150, 0.30) !important; color: #006d5b !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } /* ----- MODULE CLIENT AREA (DirectAdmin/cPanel CTA) ----- */ html[data-theme="light"] body.rollin-clientarea .module-client-area { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; border-radius: 16px !important; padding: 24px !important; color: #0d0a1f !important; margin-top: 16px !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .module-client-area .button, html[data-theme="light"] body.rollin-clientarea .module-client-area .btn { background: #6a1ab0 !important; color: #ffffff !important; border: none !important; padding: 12px 20px !important; border-radius: 10px !important; font-weight: 600 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 4px 14px rgba(106, 26, 176, 0.25) !important; transition: all 180ms ease !important; } html[data-theme="light"] body.rollin-clientarea .module-client-area .button:hover, html[data-theme="light"] body.rollin-clientarea .module-client-area .btn:hover { background: #5710a0 !important; transform: translateY(-1px) !important; box-shadow: 0 8px 22px rgba(106, 26, 176, 0.35) !important; } /* ----- FORMS (.form-control) ----- */ html[data-theme="light"] body.rollin-clientarea .form-control { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.12) !important; color: #0d0a1f !important; border-radius: 8px !important; height: auto !important; min-height: 44px !important; padding: 10px 14px !important; font-size: 14px !important; line-height: 1.4 !important; box-shadow: none !important; } html[data-theme="light"] body.rollin-clientarea .form-control:hover { border-color: rgba(13, 10, 31, 0.20) !important; } html[data-theme="light"] body.rollin-clientarea .form-control:focus { border-color: #6a1ab0 !important; box-shadow: 0 0 0 3px rgba(106, 26, 176, 0.12) !important; outline: none !important; } html[data-theme="light"] body.rollin-clientarea .form-control::placeholder { color: rgba(13, 10, 31, 0.45) !important; } html[data-theme="light"] body.rollin-clientarea .form-control:disabled, html[data-theme="light"] body.rollin-clientarea .form-control.disabled { background: #fafafc !important; color: rgba(13, 10, 31, 0.55) !important; cursor: not-allowed !important; } /* ----- STATUS PILLS ----- */ html[data-theme="light"] body.rollin-clientarea .rollin-status, html[data-theme="light"] body.rollin-clientarea .rollin-status-active { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; } html[data-theme="light"] body.rollin-clientarea .rollin-status.rollin-status-active { background: rgba(0, 168, 150, 0.10) !important; border: 1px solid rgba(0, 168, 150, 0.32) !important; color: #006d5b !important; } html[data-theme="light"] body.rollin-clientarea .rollin-status.rollin-status-closed { background: rgba(13, 10, 31, 0.04) !important; border: 1px solid rgba(13, 10, 31, 0.15) !important; color: rgba(13, 10, 31, 0.55) !important; } /* ----- TABLES (.table) ----- */ html[data-theme="light"] body.rollin-clientarea .table, html[data-theme="light"] body.rollin-clientarea .rollin-table { background: #ffffff !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .table thead th, html[data-theme="light"] body.rollin-clientarea .rollin-table thead th { background: #fafafc !important; color: rgba(13, 10, 31, 0.55) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-bottom: 1px solid rgba(13, 10, 31, 0.08) !important; padding: 12px 14px !important; } html[data-theme="light"] body.rollin-clientarea .table tbody td, html[data-theme="light"] body.rollin-clientarea .rollin-table tbody td { color: #0d0a1f !important; border-bottom: 1px solid rgba(13, 10, 31, 0.05) !important; padding: 14px !important; } html[data-theme="light"] body.rollin-clientarea .table tbody tr:hover, html[data-theme="light"] body.rollin-clientarea .rollin-table tbody tr:hover { background: rgba(106, 26, 176, 0.03) !important; } /* ----- SSL toggle switch (no banner SSL Válido / SSL Detectado) ----- */ html[data-theme="light"] body.rollin-clientarea .toggle-switch-success { accent-color: #00a896 !important; } /* ----- MODAL ----- */ html[data-theme="light"] body.rollin-clientarea .modal-content { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; border-radius: 16px !important; color: #0d0a1f !important; } html[data-theme="light"] body.rollin-clientarea .modal-header { border-bottom: 1px solid rgba(13, 10, 31, 0.08) !important; } html[data-theme="light"] body.rollin-clientarea .modal-footer { border-top: 1px solid rgba(13, 10, 31, 0.08) !important; } html[data-theme="light"] body.rollin-clientarea .modal-backdrop { background: rgba(13, 10, 31, 0.40) !important; } /* ----- DROPDOWN MENU (Bootstrap) ----- */ html[data-theme="light"] body.rollin-clientarea .dropdown-menu { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(13, 10, 31, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .dropdown-menu > li > a { color: #0d0a1f !important; padding: 9px 14px !important; } html[data-theme="light"] body.rollin-clientarea .dropdown-menu > li > a:hover, html[data-theme="light"] body.rollin-clientarea .dropdown-menu > .active > a { background: rgba(106, 26, 176, 0.06) !important; color: #4a0e80 !important; } /* ----- EasyMDE / CodeMirror (ticket editor) ----- */ html[data-theme="light"] body.rollin-clientarea .EasyMDEContainer, html[data-theme="light"] body.rollin-clientarea .editor-toolbar { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; color: #0d0a1f !important; border-radius: 10px !important; } html[data-theme="light"] body.rollin-clientarea .EasyMDEContainer .CodeMirror, html[data-theme="light"] body.rollin-clientarea .CodeMirror { background: #ffffff !important; color: #0d0a1f !important; border-radius: 10px !important; border: 1px solid rgba(13, 10, 31, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .CodeMirror-cursor { border-left: 1px solid #0d0a1f !important; } html[data-theme="light"] body.rollin-clientarea .CodeMirror-selected { background: rgba(106, 26, 176, 0.12) !important; } html[data-theme="light"] body.rollin-clientarea .CodeMirror-placeholder { color: rgba(13, 10, 31, 0.45) !important; } html[data-theme="light"] body.rollin-clientarea .editor-toolbar a, html[data-theme="light"] body.rollin-clientarea .editor-toolbar button { color: rgba(13, 10, 31, 0.65) !important; border-radius: 6px !important; } html[data-theme="light"] body.rollin-clientarea .editor-toolbar a:hover, html[data-theme="light"] body.rollin-clientarea .editor-toolbar button:hover, html[data-theme="light"] body.rollin-clientarea .editor-toolbar a.active, html[data-theme="light"] body.rollin-clientarea .editor-toolbar button.active { background: rgba(106, 26, 176, 0.08) !important; color: #4a0e80 !important; border-color: transparent !important; } html[data-theme="light"] body.rollin-clientarea .editor-toolbar i.separator { border-left: 1px solid rgba(13, 10, 31, 0.10) !important; } html[data-theme="light"] body.rollin-clientarea .editor-statusbar { color: rgba(13, 10, 31, 0.55) !important; } html[data-theme="light"] body.rollin-clientarea .editor-preview, html[data-theme="light"] body.rollin-clientarea .editor-preview-side { background: #ffffff !important; color: #0d0a1f !important; } /* ----- Hero / Stat / Annouce / QA cards (clientareahome) ----- */ html[data-theme="light"] body.rollin-clientarea .rh-hero, html[data-theme="light"] body.rollin-clientarea .rh-stat, html[data-theme="light"] body.rollin-clientarea .rh-qa-card, html[data-theme="light"] body.rollin-clientarea .rh-announce, html[data-theme="light"] body.rollin-clientarea .rh-announce-item, html[data-theme="light"] body.rollin-clientarea .rh-explore, html[data-theme="light"] body.rollin-clientarea .rh-status-ribbon, html[data-theme="light"] body.rollin-clientarea .rh-card, html[data-theme="light"] body.rollin-clientarea .rh-panel { background: #ffffff !important; border: 1px solid rgba(13, 10, 31, 0.08) !important; color: #0d0a1f !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } html[data-theme="light"] body.rollin-clientarea .rh-hero { background: linear-gradient(135deg, rgba(106, 26, 176, 0.05), #ffffff 60%) !important; } /* ----- HINT ----- */ html[data-theme="light"] body.rollin-clientarea .hint { color: rgba(13, 10, 31, 0.60) !important; font-size: 12px !important; } /* ----- iti (telephone country selector) ----- */ html[data-theme="light"] body.rollin-clientarea .iti__country-list, html[data-theme="light"] body.rollin-clientarea .iti__dropdown-content { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.10) !important; color: #0d0a1f !important; } html[data-theme="light"] body.rollin-clientarea .iti__country:hover { background: rgba(106, 26, 176, 0.06) !important; } /* Mobile rules são theme-agnostic e ficam no bloco @media unificado acima */ /* ============================================================================= ============================================================================ KNOWLEDGE BASE — landing + categoria + artigo Theme-agnostic com counterparts dark/light. Layout inovador: hero search, suggestion chips, bento de categorias, popular articles, vote, related. ============================================================================ ============================================================================= */ /* Largura da KB — seletor com `html body section` pra brigar com qualquer rule do WHMCS Bootstrap ou rhost que tente constranger por ancestral. max-width 1440 dá MUITO respiro vs 1140 original. */ html body section.rollin-kb-page, html body section.rollin-kb-page.rollin-kb-article-page, html body section.rollin-kb-page.rollin-kb-category-page { max-width: 1440px !important; margin: 0 auto !important; padding: 0 32px !important; width: 100% !important; box-sizing: border-box !important; } @media (max-width: 768px) { html body section.rollin-kb-page { padding: 0 16px !important; } } /* Quando a página da KB estiver dentro do main-inner do shell, garante que o main-inner também aceite a largura nova (default dele = 1360). */ .rollin-main-inner:has(section.rollin-kb-page) { max-width: 1520px !important; } /* === HERO === */ .rollin-kb-hero { border-radius: 24px !important; padding: 56px 32px 48px !important; margin-bottom: 28px !important; text-align: center !important; position: relative !important; overflow: hidden !important; border: 1px solid !important; } html[data-theme="dark"] .rollin-kb-hero { background: radial-gradient(circle at 30% 0%, rgba(138, 43, 214, 0.18) 0%, rgba(31, 0, 64, 0.55) 50%, rgba(31, 0, 64, 0.30) 100%) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] .rollin-kb-hero { background: linear-gradient(135deg, rgba(106, 26, 176, 0.06) 0%, rgba(255, 255, 255, 0.95) 60%) !important; border-color: rgba(13, 10, 31, 0.08) !important; box-shadow: 0 4px 24px rgba(13, 10, 31, 0.04) !important; } .rollin-kb-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; background-image: radial-gradient(rgba(138, 43, 214, 0.12) 1px, transparent 1px) !important; background-size: 28px 28px !important; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%) !important; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%) !important; pointer-events: none !important; } html[data-theme="light"] .rollin-kb-hero::before { background-image: radial-gradient(rgba(106, 26, 176, 0.08) 1px, transparent 1px) !important; } .rollin-kb-hero-inner { position: relative !important; z-index: 1 !important; max-width: 720px !important; margin: 0 auto !important; } .rollin-kb-eyebrow { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 18px !important; border: 1px solid !important; } html[data-theme="dark"] .rollin-kb-eyebrow { background: rgba(138, 43, 214, 0.12) !important; border-color: rgba(138, 43, 214, 0.30) !important; color: #d18bff !important; } html[data-theme="light"] .rollin-kb-eyebrow { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.25) !important; color: #6a1ab0 !important; } .rollin-kb-eyebrow-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: currentColor !important; } .rollin-kb-title { font-size: clamp(28px, 4vw, 40px) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin: 0 0 14px !important; } html[data-theme="dark"] .rollin-kb-title { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-title { color: #0d0a1f !important; } /* Destaque do título — roxo sólido (sem gradient). Mantemos a classe pra preservar o markup; só trocamos o efeito. */ .rollin-kb-gradient { color: #6a1ab0 !important; background: none !important; -webkit-text-fill-color: #6a1ab0 !important; } html[data-theme="dark"] .rollin-kb-gradient { color: #c084fc !important; -webkit-text-fill-color: #c084fc !important; } .rollin-kb-subtitle { font-size: 15px !important; line-height: 1.55 !important; margin: 0 auto 32px !important; max-width: 540px !important; } html[data-theme="dark"] .rollin-kb-subtitle { color: rgba(255, 255, 255, 0.70) !important; } html[data-theme="light"] .rollin-kb-subtitle { color: rgba(13, 10, 31, 0.65) !important; } /* === SEARCH === */ .rollin-kb-search { position: relative !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px !important; border-radius: 16px !important; border: 1px solid !important; margin: 0 auto 16px !important; max-width: 640px !important; transition: border-color 160ms ease, box-shadow 160ms ease !important; } html[data-theme="dark"] .rollin-kb-search { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="light"] .rollin-kb-search { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.10) !important; box-shadow: 0 4px 16px rgba(13, 10, 31, 0.04) !important; } .rollin-kb-search:focus-within { border-color: var(--rh-purple) !important; box-shadow: 0 0 0 4px rgba(138, 43, 214, 0.15) !important; } .rollin-kb-search-icon { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; margin-left: 14px !important; } html[data-theme="dark"] .rollin-kb-search-icon { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-search-icon { color: rgba(13, 10, 31, 0.55) !important; } /* Input "naked" dentro do wrapper — especificidade alta pra vencer regras globais de input[type="search"] em html[data-theme="..."] */ html[data-theme="dark"] .rollin-kb-search input, html[data-theme="dark"] .rollin-kb-search input[type="search"], html[data-theme="dark"] .rollin-kb-search input[type="text"], html[data-theme="light"] .rollin-kb-search input, html[data-theme="light"] .rollin-kb-search input[type="search"], html[data-theme="light"] .rollin-kb-search input[type="text"] { flex: 1 1 auto !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 14px 8px !important; font-size: 15px !important; height: auto !important; min-height: 0 !important; border-radius: 0 !important; } html[data-theme="dark"] .rollin-kb-search input { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-search input { color: #0d0a1f !important; } html[data-theme="dark"] .rollin-kb-search input:focus, html[data-theme="light"] .rollin-kb-search input:focus { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } .rollin-kb-search input::placeholder { opacity: 0.55 !important; } /* Remove o "X" nativo do input[type=search] que aparece no Chrome */ .rollin-kb-search input::-webkit-search-cancel-button, .rollin-kb-search input::-webkit-search-decoration { -webkit-appearance: none !important; appearance: none !important; } .rollin-kb-search-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 11px 20px !important; background: var(--rh-purple) !important; color: #ffffff !important; border: none !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; flex-shrink: 0 !important; transition: background 160ms ease, transform 120ms ease !important; } html[data-theme="light"] .rollin-kb-search-btn { background: #6a1ab0 !important; } .rollin-kb-search-btn:hover { background: var(--rh-purple-deep) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .rollin-kb-search-btn:hover { background: #4a0e80 !important; } .rollin-kb-kbd { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; padding: 0 !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.18) !important; font-size: 11px !important; font-weight: 700 !important; } /* Compact search variant (cat/article pages) */ .rollin-kb-search--compact { max-width: none !important; margin-bottom: 24px !important; } /* === SUGGESTION CHIPS === */ .rollin-kb-suggestions { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; } .rollin-kb-suggestions-label { font-size: 12px !important; font-weight: 600 !important; margin-right: 4px !important; } html[data-theme="dark"] .rollin-kb-suggestions-label { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-suggestions-label { color: rgba(13, 10, 31, 0.55) !important; } .rollin-kb-chip { padding: 7px 14px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; border: 1px solid !important; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease !important; } html[data-theme="dark"] .rollin-kb-chip { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="dark"] .rollin-kb-chip:hover { background: rgba(138, 43, 214, 0.15) !important; border-color: rgba(138, 43, 214, 0.40) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .rollin-kb-chip { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.10) !important; color: rgba(13, 10, 31, 0.80) !important; } html[data-theme="light"] .rollin-kb-chip:hover { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.30) !important; color: #4a0e80 !important; transform: translateY(-1px) !important; } /* === QUICK ACTIONS === */ .rollin-kb-quick { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin-bottom: 36px !important; } @media (max-width: 768px) { .rollin-kb-quick { grid-template-columns: 1fr !important; } } .rollin-kb-quick-card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 18px 20px !important; border-radius: 16px !important; border: 1px solid !important; text-decoration: none !important; cursor: pointer !important; background: transparent !important; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important; text-align: left !important; width: 100% !important; } html[data-theme="dark"] .rollin-kb-quick-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="light"] .rollin-kb-quick-card { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; color: #0d0a1f !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } .rollin-kb-quick-card:hover { transform: translateY(-3px) !important; } html[data-theme="dark"] .rollin-kb-quick-card:hover { border-color: rgba(138, 43, 214, 0.40) !important; background: rgba(255, 255, 255, 0.07) !important; } html[data-theme="light"] .rollin-kb-quick-card:hover { border-color: rgba(106, 26, 176, 0.30) !important; box-shadow: 0 8px 20px rgba(13, 10, 31, 0.08) !important; } .rollin-kb-quick-icon { flex-shrink: 0 !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .rollin-kb-quick-icon i, .rollin-kb-quick-icon svg { width: 22px !important; height: 22px !important; } .rollin-kb-quick-icon--purple { background: rgba(138, 43, 214, 0.14) !important; color: #b855ff !important; } html[data-theme="light"] .rollin-kb-quick-icon--purple { background: rgba(106, 26, 176, 0.10) !important; color: #6a1ab0 !important; } .rollin-kb-quick-icon--green { background: rgba(37, 211, 102, 0.14) !important; color: #25d366 !important; } .rollin-kb-quick-icon--cyan { background: rgba(1, 250, 213, 0.14) !important; color: #01fad5 !important; } html[data-theme="light"] .rollin-kb-quick-icon--cyan { background: rgba(0, 168, 150, 0.10) !important; color: #006d5b !important; } .rollin-kb-quick-text { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .rollin-kb-quick-text strong { font-size: 14px !important; font-weight: 600 !important; } .rollin-kb-quick-text span { font-size: 12px !important; } html[data-theme="dark"] .rollin-kb-quick-text span { color: rgba(255, 255, 255, 0.60) !important; } html[data-theme="light"] .rollin-kb-quick-text span { color: rgba(13, 10, 31, 0.60) !important; } .rollin-kb-quick-arrow { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; opacity: 0.4 !important; transition: transform 200ms ease, opacity 200ms ease !important; } .rollin-kb-quick-card:hover .rollin-kb-quick-arrow { transform: translateX(4px) !important; opacity: 1 !important; } /* === SECTION HEADS === */ .rollin-kb-section-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 18px !important; } .rollin-kb-section-title { font-size: 22px !important; font-weight: 700 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; letter-spacing: -0.01em !important; } html[data-theme="dark"] .rollin-kb-section-title { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-section-title { color: #0d0a1f !important; } .rollin-kb-section-icon { width: 22px !important; height: 22px !important; color: #fb923c !important; } .rollin-kb-section-count { font-size: 12px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 999px !important; } html[data-theme="dark"] .rollin-kb-section-count { background: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="light"] .rollin-kb-section-count { background: rgba(13, 10, 31, 0.04) !important; color: rgba(13, 10, 31, 0.65) !important; } /* === CATEGORIAS GRID === */ .rollin-kb-categories { margin-bottom: 36px !important; } .rollin-kb-cat-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 14px !important; } .rollin-kb-cat { display: flex !important; flex-direction: column !important; padding: 24px !important; border-radius: 18px !important; border: 1px solid !important; text-decoration: none !important; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease !important; position: relative !important; overflow: hidden !important; } html[data-theme="dark"] .rollin-kb-cat { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="light"] .rollin-kb-cat { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; color: #0d0a1f !important; box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04) !important; } .rollin-kb-cat:hover { transform: translateY(-4px) !important; } html[data-theme="dark"] .rollin-kb-cat:hover { border-color: rgba(138, 43, 214, 0.40) !important; background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="light"] .rollin-kb-cat:hover { border-color: rgba(106, 26, 176, 0.30) !important; box-shadow: 0 12px 28px rgba(13, 10, 31, 0.10) !important; } .rollin-kb-cat-icon { width: 52px !important; height: 52px !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(138, 43, 214, 0.14) !important; color: #b855ff !important; margin-bottom: 16px !important; transition: transform 200ms ease, background 200ms ease !important; } html[data-theme="light"] .rollin-kb-cat-icon { background: rgba(106, 26, 176, 0.10) !important; color: #6a1ab0 !important; } .rollin-kb-cat:hover .rollin-kb-cat-icon { transform: rotate(-4deg) scale(1.05) !important; } .rollin-kb-cat-icon i, .rollin-kb-cat-icon svg { width: 26px !important; height: 26px !important; } .rollin-kb-cat-name { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 6px !important; letter-spacing: -0.01em !important; } .rollin-kb-cat-desc { font-size: 13px !important; line-height: 1.5 !important; margin: 0 0 16px !important; flex: 1 !important; } html[data-theme="dark"] .rollin-kb-cat-desc { color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="light"] .rollin-kb-cat-desc { color: rgba(13, 10, 31, 0.65) !important; } .rollin-kb-cat-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: auto !important; padding-top: 12px !important; border-top: 1px solid !important; } html[data-theme="dark"] .rollin-kb-cat-meta { border-top-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="light"] .rollin-kb-cat-meta { border-top-color: rgba(13, 10, 31, 0.06) !important; } .rollin-kb-cat-count { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; font-weight: 600 !important; } html[data-theme="dark"] .rollin-kb-cat-count { color: rgba(255, 255, 255, 0.60) !important; } html[data-theme="light"] .rollin-kb-cat-count { color: rgba(13, 10, 31, 0.60) !important; } .rollin-kb-cat-count i, .rollin-kb-cat-count svg { width: 13px !important; height: 13px !important; } .rollin-kb-cat-arrow { width: 28px !important; height: 28px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(138, 43, 214, 0.10) !important; color: #b855ff !important; transition: transform 200ms ease, background 200ms ease !important; } html[data-theme="light"] .rollin-kb-cat-arrow { background: rgba(106, 26, 176, 0.06) !important; color: #6a1ab0 !important; } .rollin-kb-cat-arrow i, .rollin-kb-cat-arrow svg { width: 14px !important; height: 14px !important; } .rollin-kb-cat:hover .rollin-kb-cat-arrow { background: var(--rh-purple) !important; color: #ffffff !important; transform: translateX(4px) !important; } /* === POPULAR ARTICLES === */ .rollin-kb-popular { margin-bottom: 36px !important; } .rollin-kb-popular-list { display: flex !important; flex-direction: column !important; gap: 8px !important; } .rollin-kb-popular-item { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px 20px !important; border-radius: 14px !important; border: 1px solid !important; text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important; } html[data-theme="dark"] .rollin-kb-popular-item { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="light"] .rollin-kb-popular-item { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.06) !important; color: #0d0a1f !important; } .rollin-kb-popular-item:hover { transform: translateX(4px) !important; } html[data-theme="dark"] .rollin-kb-popular-item:hover { background: rgba(138, 43, 214, 0.08) !important; border-color: rgba(138, 43, 214, 0.30) !important; } html[data-theme="light"] .rollin-kb-popular-item:hover { background: rgba(106, 26, 176, 0.04) !important; border-color: rgba(106, 26, 176, 0.25) !important; } .rollin-kb-popular-rank { flex-shrink: 0 !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(138, 43, 214, 0.14) !important; color: #b855ff !important; font-size: 14px !important; font-weight: 800 !important; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; } html[data-theme="light"] .rollin-kb-popular-rank { background: rgba(106, 26, 176, 0.08) !important; color: #6a1ab0 !important; } .rollin-kb-popular-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .rollin-kb-popular-title { font-size: 14px !important; font-weight: 600 !important; } .rollin-kb-popular-excerpt { font-size: 12px !important; line-height: 1.5 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } html[data-theme="dark"] .rollin-kb-popular-excerpt { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-popular-excerpt { color: rgba(13, 10, 31, 0.55) !important; } .rollin-kb-popular-arrow { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; opacity: 0.4 !important; } .rollin-kb-popular-item:hover .rollin-kb-popular-arrow { opacity: 1 !important; } /* === BREADCRUMB === */ .rollin-kb-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; margin-bottom: 18px !important; } .rollin-kb-breadcrumb a { display: inline-flex !important; align-items: center !important; gap: 6px !important; text-decoration: none !important; transition: color 140ms ease !important; } html[data-theme="dark"] .rollin-kb-breadcrumb a { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-breadcrumb a { color: rgba(13, 10, 31, 0.55) !important; } html[data-theme="dark"] .rollin-kb-breadcrumb a:hover { color: #b855ff !important; } html[data-theme="light"] .rollin-kb-breadcrumb a:hover { color: #6a1ab0 !important; } .rollin-kb-breadcrumb a i, .rollin-kb-breadcrumb a svg { width: 14px !important; height: 14px !important; } .rollin-kb-breadcrumb-sep { width: 14px !important; height: 14px !important; opacity: 0.4 !important; } .rollin-kb-breadcrumb-current { font-weight: 600 !important; } html[data-theme="dark"] .rollin-kb-breadcrumb-current { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-breadcrumb-current { color: #0d0a1f !important; } /* === SUBCATEGORIAS (pills) === */ .rollin-kb-subcats { margin-bottom: 28px !important; } .rollin-kb-subcats-label { display: block !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 12px !important; } html[data-theme="dark"] .rollin-kb-subcats-label { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-subcats-label { color: rgba(13, 10, 31, 0.55) !important; } .rollin-kb-subcats-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .rollin-kb-subcat { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 9px 14px !important; border-radius: 999px !important; border: 1px solid !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease !important; } html[data-theme="dark"] .rollin-kb-subcat { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="dark"] .rollin-kb-subcat:hover { background: rgba(138, 43, 214, 0.14) !important; border-color: rgba(138, 43, 214, 0.30) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .rollin-kb-subcat { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; color: #0d0a1f !important; } html[data-theme="light"] .rollin-kb-subcat:hover { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.30) !important; transform: translateY(-1px) !important; } .rollin-kb-subcat i, .rollin-kb-subcat svg { width: 14px !important; height: 14px !important; } .rollin-kb-subcat-count { padding: 1px 8px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; background: rgba(138, 43, 214, 0.18) !important; color: #b855ff !important; } html[data-theme="light"] .rollin-kb-subcat-count { background: rgba(106, 26, 176, 0.10) !important; color: #6a1ab0 !important; } /* === ARTICLE LIST (cat page) === */ .rollin-kb-article-list { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 36px !important; } .rollin-kb-article-row { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 18px 20px !important; border-radius: 14px !important; border: 1px solid !important; text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important; } html[data-theme="dark"] .rollin-kb-article-row { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="light"] .rollin-kb-article-row { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.06) !important; color: #0d0a1f !important; } .rollin-kb-article-row:hover { transform: translateX(4px) !important; } html[data-theme="dark"] .rollin-kb-article-row:hover { background: rgba(138, 43, 214, 0.08) !important; border-color: rgba(138, 43, 214, 0.30) !important; } html[data-theme="light"] .rollin-kb-article-row:hover { background: rgba(106, 26, 176, 0.04) !important; border-color: rgba(106, 26, 176, 0.25) !important; } .rollin-kb-article-icon { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(138, 43, 214, 0.14) !important; color: #b855ff !important; } html[data-theme="light"] .rollin-kb-article-icon { background: rgba(106, 26, 176, 0.08) !important; color: #6a1ab0 !important; } .rollin-kb-article-icon i, .rollin-kb-article-icon svg { width: 18px !important; height: 18px !important; } .rollin-kb-article-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .rollin-kb-article-title { font-size: 15px !important; font-weight: 600 !important; } .rollin-kb-article-excerpt { font-size: 13px !important; line-height: 1.55 !important; } html[data-theme="dark"] .rollin-kb-article-excerpt { color: rgba(255, 255, 255, 0.60) !important; } html[data-theme="light"] .rollin-kb-article-excerpt { color: rgba(13, 10, 31, 0.60) !important; } .rollin-kb-article-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; font-size: 11px !important; margin-top: 4px !important; } html[data-theme="dark"] .rollin-kb-article-meta { color: rgba(255, 255, 255, 0.50) !important; } html[data-theme="light"] .rollin-kb-article-meta { color: rgba(13, 10, 31, 0.50) !important; } .rollin-kb-article-meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; } .rollin-kb-article-meta i, .rollin-kb-article-meta svg { width: 12px !important; height: 12px !important; } .rollin-kb-article-arrow { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; opacity: 0.4 !important; align-self: center !important; transition: transform 200ms ease, opacity 200ms ease !important; } .rollin-kb-article-row:hover .rollin-kb-article-arrow { opacity: 1 !important; transform: translateX(2px) !important; } /* === ARTICLE PAGE === */ .rollin-kb-article-page { max-width: 820px !important; } .rollin-kb-article-head { padding-bottom: 28px !important; margin-bottom: 32px !important; border-bottom: 1px solid !important; } html[data-theme="dark"] .rollin-kb-article-head { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] .rollin-kb-article-head { border-bottom-color: rgba(13, 10, 31, 0.08) !important; } .rollin-kb-article-head-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 16px !important; } .rollin-kb-article-pill { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 11px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; background: rgba(138, 43, 214, 0.14) !important; border: 1px solid rgba(138, 43, 214, 0.30) !important; color: #d18bff !important; } html[data-theme="light"] .rollin-kb-article-pill { background: rgba(106, 26, 176, 0.06) !important; border-color: rgba(106, 26, 176, 0.25) !important; color: #6a1ab0 !important; } .rollin-kb-article-pill i, .rollin-kb-article-pill svg { width: 12px !important; height: 12px !important; } .rollin-kb-article-tags { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; } html[data-theme="dark"] .rollin-kb-article-tags { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-article-tags { color: rgba(13, 10, 31, 0.55) !important; } .rollin-kb-article-h1 { font-size: clamp(26px, 4vw, 36px) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; margin: 0 0 16px !important; } html[data-theme="dark"] .rollin-kb-article-h1 { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-article-h1 { color: #0d0a1f !important; } .rollin-kb-article-info { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; font-size: 13px !important; } html[data-theme="dark"] .rollin-kb-article-info { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-article-info { color: rgba(13, 10, 31, 0.55) !important; } .rollin-kb-article-info span { display: inline-flex !important; align-items: center !important; gap: 5px !important; } .rollin-kb-article-info i, .rollin-kb-article-info svg { width: 14px !important; height: 14px !important; } .rollin-kb-article-print { margin-left: auto !important; background: transparent !important; border: none !important; cursor: pointer !important; color: inherit !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 4px 8px !important; border-radius: 6px !important; transition: background 160ms ease !important; } html[data-theme="dark"] .rollin-kb-article-print:hover { background: rgba(255, 255, 255, 0.05) !important; } html[data-theme="light"] .rollin-kb-article-print:hover { background: rgba(13, 10, 31, 0.04) !important; } .rollin-kb-article-content { font-size: 16px !important; line-height: 1.75 !important; } html[data-theme="dark"] .rollin-kb-article-content { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] .rollin-kb-article-content { color: rgba(13, 10, 31, 0.85) !important; } .rollin-kb-article-content p { margin: 0 0 18px !important; } .rollin-kb-article-content h2, .rollin-kb-article-content h3, .rollin-kb-article-content h4 { margin: 32px 0 14px !important; font-weight: 700 !important; line-height: 1.3 !important; } html[data-theme="dark"] .rollin-kb-article-content h2, html[data-theme="dark"] .rollin-kb-article-content h3, html[data-theme="dark"] .rollin-kb-article-content h4 { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-article-content h2, html[data-theme="light"] .rollin-kb-article-content h3, html[data-theme="light"] .rollin-kb-article-content h4 { color: #0d0a1f !important; } .rollin-kb-article-content h2 { font-size: 24px !important; } .rollin-kb-article-content h3 { font-size: 20px !important; } .rollin-kb-article-content h4 { font-size: 17px !important; } .rollin-kb-article-content a { text-decoration: underline !important; text-underline-offset: 2px !important; } html[data-theme="dark"] .rollin-kb-article-content a { color: #b855ff !important; } html[data-theme="light"] .rollin-kb-article-content a { color: #6a1ab0 !important; } .rollin-kb-article-content ul, .rollin-kb-article-content ol { margin: 0 0 18px !important; padding-left: 28px !important; } .rollin-kb-article-content li { margin-bottom: 8px !important; } .rollin-kb-article-content img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; margin: 16px 0 !important; } .rollin-kb-article-content code { padding: 2px 7px !important; border-radius: 5px !important; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; font-size: 14px !important; } html[data-theme="dark"] .rollin-kb-article-content code { background: rgba(255, 255, 255, 0.06) !important; color: #01fad5 !important; } html[data-theme="light"] .rollin-kb-article-content code { background: rgba(13, 10, 31, 0.05) !important; color: #006d5b !important; } .rollin-kb-article-content pre { padding: 18px !important; border-radius: 12px !important; overflow-x: auto !important; margin: 16px 0 !important; } html[data-theme="dark"] .rollin-kb-article-content pre { background: rgba(0, 0, 0, 0.40) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] .rollin-kb-article-content pre { background: rgba(13, 10, 31, 0.04) !important; border: 1px solid rgba(13, 10, 31, 0.06) !important; } .rollin-kb-article-content pre code { background: transparent !important; padding: 0 !important; } .rollin-kb-article-content blockquote { margin: 20px 0 !important; padding: 14px 20px !important; border-radius: 10px !important; border-left: 3px solid !important; } html[data-theme="dark"] .rollin-kb-article-content blockquote { background: rgba(138, 43, 214, 0.08) !important; border-left-color: #b855ff !important; color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] .rollin-kb-article-content blockquote { background: rgba(106, 26, 176, 0.05) !important; border-left-color: #6a1ab0 !important; color: rgba(13, 10, 31, 0.85) !important; } .rollin-kb-edit-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: 24px !important; font-size: 13px !important; text-decoration: none !important; padding: 6px 12px !important; border-radius: 8px !important; } html[data-theme="dark"] .rollin-kb-edit-link { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.65) !important; } /* === VOTE === */ .rollin-kb-vote { margin: 36px 0 !important; padding: 24px !important; border-radius: 16px !important; border: 1px solid !important; text-align: center !important; } html[data-theme="dark"] .rollin-kb-vote { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] .rollin-kb-vote { background: #fafafc !important; border-color: rgba(13, 10, 31, 0.08) !important; } .rollin-kb-vote-q { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 16px !important; } .rollin-kb-vote-buttons { display: inline-flex !important; gap: 10px !important; flex-wrap: wrap !important; justify-content: center !important; } .rollin-kb-vote-yes, .rollin-kb-vote-no { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 22px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; border: 1px solid !important; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease !important; } .rollin-kb-vote-yes { background: rgba(0, 168, 150, 0.10) !important; border-color: rgba(0, 168, 150, 0.30) !important; color: #006d5b !important; } html[data-theme="dark"] .rollin-kb-vote-yes { background: rgba(1, 250, 213, 0.10) !important; border-color: rgba(1, 250, 213, 0.28) !important; color: #01fad5 !important; } .rollin-kb-vote-yes:hover { background: rgba(0, 168, 150, 0.20) !important; transform: translateY(-1px) !important; } .rollin-kb-vote-no { background: rgba(249, 115, 22, 0.08) !important; border-color: rgba(249, 115, 22, 0.28) !important; color: #c2410c !important; } html[data-theme="dark"] .rollin-kb-vote-no { color: #fb923c !important; } .rollin-kb-vote-no:hover { background: rgba(249, 115, 22, 0.15) !important; transform: translateY(-1px) !important; } .rollin-kb-vote-result { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #01fad5 !important; } html[data-theme="light"] .rollin-kb-vote-result { color: #006d5b !important; } .rollin-kb-toast { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 18px !important; border-radius: 10px !important; margin-bottom: 24px !important; font-size: 14px !important; font-weight: 500 !important; border: 1px solid !important; } .rollin-kb-toast--success { background: rgba(0, 168, 150, 0.08) !important; border-color: rgba(0, 168, 150, 0.30) !important; color: #006d5b !important; } html[data-theme="dark"] .rollin-kb-toast--success { background: rgba(1, 250, 213, 0.08) !important; border-color: rgba(1, 250, 213, 0.28) !important; color: #01fad5 !important; } /* === RELATED === */ .rollin-kb-related { margin: 36px 0 !important; padding-top: 28px !important; border-top: 1px solid !important; } html[data-theme="dark"] .rollin-kb-related { border-top-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] .rollin-kb-related { border-top-color: rgba(13, 10, 31, 0.08) !important; } .rollin-kb-related-title { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 18px !important; } html[data-theme="dark"] .rollin-kb-related-title { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-related-title { color: #0d0a1f !important; } .rollin-kb-related-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 12px !important; } .rollin-kb-related-card { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 18px !important; border-radius: 12px !important; border: 1px solid !important; text-decoration: none !important; transition: transform 200ms ease, border-color 200ms ease !important; } html[data-theme="dark"] .rollin-kb-related-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="light"] .rollin-kb-related-card { background: #ffffff !important; border-color: rgba(13, 10, 31, 0.08) !important; color: #0d0a1f !important; } .rollin-kb-related-card:hover { transform: translateY(-3px) !important; } html[data-theme="dark"] .rollin-kb-related-card:hover { border-color: rgba(138, 43, 214, 0.40) !important; } html[data-theme="light"] .rollin-kb-related-card:hover { border-color: rgba(106, 26, 176, 0.30) !important; } .rollin-kb-related-icon { width: 22px !important; height: 22px !important; color: #b855ff !important; } html[data-theme="light"] .rollin-kb-related-icon { color: #6a1ab0 !important; } .rollin-kb-related-card strong { font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; } .rollin-kb-related-card p { font-size: 12px !important; line-height: 1.5 !important; margin: 0 !important; } html[data-theme="dark"] .rollin-kb-related-card p { color: rgba(255, 255, 255, 0.55) !important; } html[data-theme="light"] .rollin-kb-related-card p { color: rgba(13, 10, 31, 0.60) !important; } .rollin-kb-related-cta { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-top: auto !important; font-size: 12px !important; font-weight: 600 !important; color: #b855ff !important; } html[data-theme="light"] .rollin-kb-related-cta { color: #6a1ab0 !important; } .rollin-kb-related-cta i, .rollin-kb-related-cta svg { width: 12px !important; height: 12px !important; } /* === EMPTY STATE === */ .rollin-kb-empty { text-align: center !important; padding: 60px 20px !important; border-radius: 18px !important; border: 1px dashed !important; margin-bottom: 28px !important; } html[data-theme="dark"] .rollin-kb-empty { background: rgba(255, 255, 255, 0.02) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="light"] .rollin-kb-empty { background: #fafafc !important; border-color: rgba(13, 10, 31, 0.10) !important; color: rgba(13, 10, 31, 0.65) !important; } .rollin-kb-empty-icon { width: 64px !important; height: 64px !important; border-radius: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(138, 43, 214, 0.10) !important; color: #b855ff !important; margin-bottom: 16px !important; } html[data-theme="light"] .rollin-kb-empty-icon { background: rgba(106, 26, 176, 0.06) !important; color: #6a1ab0 !important; } .rollin-kb-empty-icon i, .rollin-kb-empty-icon svg { width: 32px !important; height: 32px !important; } .rollin-kb-empty h2 { font-size: 20px !important; font-weight: 700 !important; margin: 0 0 8px !important; } html[data-theme="dark"] .rollin-kb-empty h2 { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-empty h2 { color: #0d0a1f !important; } .rollin-kb-empty p { font-size: 14px !important; margin: 0 0 18px !important; } .rollin-kb-empty-cta { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 22px !important; border-radius: 10px !important; background: var(--rh-purple) !important; color: #ffffff !important; font-weight: 600 !important; text-decoration: none !important; } html[data-theme="light"] .rollin-kb-empty-cta { background: #6a1ab0 !important; } .rollin-kb-empty-cta i, .rollin-kb-empty-cta svg { width: 16px !important; height: 16px !important; } /* === BOTTOM CTA === */ .rollin-kb-cta { display: flex !important; align-items: center !important; gap: 24px !important; padding: 28px 32px !important; border-radius: 20px !important; border: 1px solid !important; margin-top: 24px !important; flex-wrap: wrap !important; } html[data-theme="dark"] .rollin-kb-cta { background: linear-gradient(135deg, rgba(138, 43, 214, 0.12) 0%, rgba(31, 0, 64, 0.40) 100%) !important; border-color: rgba(138, 43, 214, 0.25) !important; } html[data-theme="light"] .rollin-kb-cta { background: linear-gradient(135deg, rgba(106, 26, 176, 0.06) 0%, #ffffff 80%) !important; border-color: rgba(106, 26, 176, 0.20) !important; box-shadow: 0 4px 20px rgba(13, 10, 31, 0.04) !important; } .rollin-kb-cta--compact { padding: 20px 24px !important; } .rollin-kb-cta-icon { flex-shrink: 0 !important; width: 56px !important; height: 56px !important; border-radius: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--rh-purple) !important; color: #ffffff !important; } html[data-theme="light"] .rollin-kb-cta-icon { background: #6a1ab0 !important; } .rollin-kb-cta-icon i, .rollin-kb-cta-icon svg { width: 28px !important; height: 28px !important; } .rollin-kb-cta-text { flex: 1 1 280px !important; min-width: 0 !important; } .rollin-kb-cta-text h3 { font-size: 18px !important; font-weight: 700 !important; margin: 0 0 4px !important; } html[data-theme="dark"] .rollin-kb-cta-text h3 { color: #ffffff !important; } html[data-theme="light"] .rollin-kb-cta-text h3 { color: #0d0a1f !important; } .rollin-kb-cta-text p { font-size: 13px !important; line-height: 1.55 !important; margin: 0 !important; } html[data-theme="dark"] .rollin-kb-cta-text p { color: rgba(255, 255, 255, 0.70) !important; } html[data-theme="light"] .rollin-kb-cta-text p { color: rgba(13, 10, 31, 0.65) !important; } .rollin-kb-cta-actions { display: inline-flex !important; gap: 10px !important; flex-wrap: wrap !important; } .rollin-kb-cta-primary, .rollin-kb-cta-secondary { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 11px 22px !important; border-radius: 12px !important; font-weight: 600 !important; text-decoration: none !important; transition: background 160ms ease, transform 120ms ease, border-color 160ms ease !important; } .rollin-kb-cta-primary { background: var(--rh-purple) !important; color: #ffffff !important; border: 1px solid var(--rh-purple) !important; } html[data-theme="light"] .rollin-kb-cta-primary { background: #6a1ab0 !important; border-color: #6a1ab0 !important; } .rollin-kb-cta-primary:hover { background: var(--rh-purple-deep) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .rollin-kb-cta-primary:hover { background: #4a0e80 !important; } .rollin-kb-cta-secondary { border: 1px solid !important; background: transparent !important; } html[data-theme="dark"] .rollin-kb-cta-secondary { border-color: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } html[data-theme="dark"] .rollin-kb-cta-secondary:hover { background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="light"] .rollin-kb-cta-secondary { border-color: rgba(13, 10, 31, 0.15) !important; color: #0d0a1f !important; } html[data-theme="light"] .rollin-kb-cta-secondary:hover { background: rgba(13, 10, 31, 0.04) !important; } /* Responsivo */ @media (max-width: 768px) { .rollin-kb-hero { padding: 36px 20px 32px !important; } .rollin-kb-search { flex-wrap: wrap !important; padding: 8px !important; } .rollin-kb-search input { padding: 10px 8px !important; font-size: 14px !important; } .rollin-kb-search-btn { width: 100% !important; justify-content: center !important; } .rollin-kb-cta { flex-direction: column !important; text-align: center !important; padding: 24px !important; } .rollin-kb-cta-actions { width: 100% !important; } .rollin-kb-cta-primary, .rollin-kb-cta-secondary { flex: 1 !important; justify-content: center !important; } } /* === Masquerade bar — admin navegando como cliente ============== */ .rh-masquerade-bar { position: sticky; top: 0; z-index: 100000; background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%); color: #ffffff; padding: 8px 0; font-family: 'Poppins', system-ui, sans-serif; box-shadow: 0 2px 12px rgba(13, 10, 31, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .rh-masquerade-bar-inner { max-width: 1360px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 12px; } .rh-masquerade-bar-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.30); color: #ffffff; } .rh-masquerade-bar-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rh-masquerade-bar-text strong { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; } .rh-masquerade-bar-text span { font-size: 12px; font-weight: 500; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rh-masquerade-bar-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.34); color: #ffffff !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; flex-shrink: 0; transition: background 160ms ease, transform 160ms ease; outline: none !important; } .rh-masquerade-bar-cta:hover { background: rgba(255, 255, 255, 0.30); color: #ffffff !important; transform: translateX(-2px); } .rh-masquerade-bar-cta:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.40); } /* Quando está em masquerade, empurra todo conteúdo pra baixo pro shell não cobrir o bar. Sticky cuida do resto enquanto rola. */ body.rollin-masquerading .rh-ca-shell { /* Shell já é layout absoluto/grid — bar fica como prelude no body */ } @media (max-width: 640px) { .rh-masquerade-bar-inner { gap: 8px; padding: 0 12px; } .rh-masquerade-bar-text strong { font-size: 12px; } .rh-masquerade-bar-text span { font-size: 11px; } .rh-masquerade-bar-cta { padding: 6px 10px; font-size: 11.5px; } } /* ======================================================================== VPS-PANEL — card "SERVIDOR VPS KVM" gerado pelo módulo ResellerClub VPS Usa