/* ========================================================================== PREMIUM THEME — Mídia Play / WHMCS 9 · Twenty-One -------------------------------------------------------------------------- Tema CLARO e a base (:root). O escuro entra por prefers-color-scheme e a escolha manual (data-theme no , gravada em localStorage) vence ambos. Everything is driven by the custom properties in the token block below — change a token, the whole surface follows. Load order matters: this file MUST come after theme.min.css. ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* --- Surfaces --- */ --pt-bg: #f1f5f9; --pt-bg-deep: #e7edf4; --pt-bg-elev: #ffffff; --pt-card: #ffffff; --pt-card-hover: #f8fafc; --pt-card-inset: #f4f7fb; /* --- Lines --- */ --pt-border: rgba(15, 23, 42, .10); --pt-border-strong: rgba(15, 23, 42, .18); --pt-divider: rgba(15, 23, 42, .07); /* --- Type --- */ --pt-text: #1e293b; --pt-text-strong: #0f172a; --pt-text-dim: #64748b; --pt-text-mute: #94a3b8; /* --- Brand --- */ --pt-brand: #059669; --pt-brand-hover: #10B981; --pt-brand-active: #047857; --pt-brand-soft: rgba(16, 185, 129, .10); --pt-brand-ring: rgba(16, 185, 129, .28); --pt-on-brand: #ffffff; --pt-on-danger: #ffffff; /* --- Semantic --- */ --pt-amber: #d97706; --pt-amber-soft: rgba(245, 158, 11, .10); --pt-amber-ring: rgba(245, 158, 11, .30); --pt-red: #dc2626; --pt-red-soft: rgba(239, 68, 68, .09); --pt-red-ring: rgba(239, 68, 68, .28); --pt-blue: #2563eb; --pt-blue-soft: rgba(59, 130, 246, .09); --pt-violet: #7c3aed; --pt-violet-soft: rgba(139, 92, 246, .09); /* --- Elevation --- */ --pt-shadow-sm: 0 2px 6px -2px rgba(15, 23, 42, .10); --pt-shadow: 0 10px 30px -10px rgba(15, 23, 42, .18); --pt-shadow-lg: 0 28px 68px -20px rgba(15, 23, 42, .26); --pt-shadow-xl: 0 44px 96px -28px rgba(15, 23, 42, .30); --pt-shadow-card: 0 0 0 1px var(--pt-border), 0 24px 64px -26px rgba(15, 23, 42, .28), 0 2px 8px -3px rgba(15, 23, 42, .14); --pt-glow-brand: 0 0 0 1px var(--pt-brand-ring), 0 16px 40px -14px rgba(16, 185, 129, .40); --pt-glow-brand-xl: 0 0 0 1px rgba(16, 185, 129, .40), 0 0 28px -6px rgba(16, 185, 129, .35), 0 22px 60px -20px rgba(16, 185, 129, .45); /* --- Tokens de componente (evitam seletores de tema espalhados) --- */ --pt-inset-translucent: rgba(255, 255, 255, .72); --pt-auth-glow-a: rgba(16, 185, 129, .12); --pt-auth-glow-b: rgba(59, 130, 246, .10); --pt-alert-bg: linear-gradient(120deg, #fff5f5, #fff9f2 62%); --pt-alert-icon-bg: rgba(239, 68, 68, .10); --pt-alert-icon-fg: #dc2626; --pt-alert-title: #991b1b; --pt-alert-sub: #b45309; /* --- Geometry --- */ --pt-radius-sm: 12px; --pt-radius: 20px; --pt-radius-lg: 28px; --pt-radius-xl: 36px; --pt-radius-card: 16px; --pt-radius-pill: 999px; /* --- Motion --- */ --pt-ease: cubic-bezier(.4, 0, .2, 1); --pt-speed: .22s; /* --- Type scale --- */ --pt-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------------------- Camada 2 — automatico: obedece o sistema operacional do usuario. O :not([data-theme="light"]) garante que a escolha manual por Claro nao seja atropelada quando o SO esta em escuro. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pt-bg: #0f172a; --pt-bg-deep: #0b1120; --pt-bg-elev: #131f38; --pt-card: #1e293b; --pt-card-hover: #24334a; --pt-card-inset: #17233a; --pt-border: rgba(148, 163, 184, .14); --pt-border-strong: rgba(148, 163, 184, .28); --pt-divider: rgba(148, 163, 184, .10); --pt-text: #e2e8f0; --pt-text-strong: #f8fafc; --pt-text-dim: #94a3b8; --pt-text-mute: #64748b; --pt-brand: #10B981; --pt-brand-hover: #34d399; --pt-brand-active: #059669; --pt-brand-soft: rgba(16, 185, 129, .12); --pt-brand-ring: rgba(16, 185, 129, .32); --pt-on-brand: #05261b; --pt-on-danger: #ffffff; --pt-amber: #f59e0b; --pt-amber-soft: rgba(245, 158, 11, .12); --pt-amber-ring: rgba(245, 158, 11, .30); --pt-red: #ef4444; --pt-red-soft: rgba(239, 68, 68, .12); --pt-red-ring: rgba(239, 68, 68, .30); --pt-blue: #3b82f6; --pt-blue-soft: rgba(59, 130, 246, .12); --pt-violet: #8b5cf6; --pt-violet-soft: rgba(139, 92, 246, .12); --pt-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, .38); --pt-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); --pt-shadow-lg: 0 28px 68px -16px rgba(0, 0, 0, .70); --pt-shadow-xl: 0 44px 96px -24px rgba(0, 0, 0, .78); --pt-shadow-card: 0 0 0 1px var(--pt-border), 0 24px 64px -20px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .4); --pt-glow-brand: 0 0 0 1px var(--pt-brand-ring), 0 16px 40px -12px rgba(16, 185, 129, .55); --pt-glow-brand-xl: 0 0 0 1px rgba(16, 185, 129, .45), 0 0 28px -4px rgba(16, 185, 129, .45), 0 22px 60px -18px rgba(16, 185, 129, .70); --pt-inset-translucent: rgba(15, 23, 42, .38); --pt-auth-glow-a: rgba(16, 185, 129, .16); --pt-auth-glow-b: rgba(59, 130, 246, .12); --pt-alert-bg: radial-gradient(32rem 16rem at 4% -40%, rgba(239, 68, 68, .22), transparent 64%), linear-gradient(120deg, #2a1416, #1e1113 62%); --pt-alert-icon-bg: rgba(239, 68, 68, .16); --pt-alert-icon-fg: #fca5a5; --pt-alert-title: #fecaca; --pt-alert-sub: rgba(254, 202, 202, .72); } } /* -------------------------------------------------------------------------- Camada 3 — manual: o atributo posto pelo JS sempre vence. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --pt-bg: #0f172a; --pt-bg-deep: #0b1120; --pt-bg-elev: #131f38; --pt-card: #1e293b; --pt-card-hover: #24334a; --pt-card-inset: #17233a; --pt-border: rgba(148, 163, 184, .14); --pt-border-strong: rgba(148, 163, 184, .28); --pt-divider: rgba(148, 163, 184, .10); --pt-text: #e2e8f0; --pt-text-strong: #f8fafc; --pt-text-dim: #94a3b8; --pt-text-mute: #64748b; --pt-brand: #10B981; --pt-brand-hover: #34d399; --pt-brand-active: #059669; --pt-brand-soft: rgba(16, 185, 129, .12); --pt-brand-ring: rgba(16, 185, 129, .32); --pt-on-brand: #05261b; --pt-on-danger: #ffffff; --pt-amber: #f59e0b; --pt-amber-soft: rgba(245, 158, 11, .12); --pt-amber-ring: rgba(245, 158, 11, .30); --pt-red: #ef4444; --pt-red-soft: rgba(239, 68, 68, .12); --pt-red-ring: rgba(239, 68, 68, .30); --pt-blue: #3b82f6; --pt-blue-soft: rgba(59, 130, 246, .12); --pt-violet: #8b5cf6; --pt-violet-soft: rgba(139, 92, 246, .12); --pt-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, .38); --pt-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); --pt-shadow-lg: 0 28px 68px -16px rgba(0, 0, 0, .70); --pt-shadow-xl: 0 44px 96px -24px rgba(0, 0, 0, .78); --pt-shadow-card: 0 0 0 1px var(--pt-border), 0 24px 64px -20px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .4); --pt-glow-brand: 0 0 0 1px var(--pt-brand-ring), 0 16px 40px -12px rgba(16, 185, 129, .55); --pt-glow-brand-xl: 0 0 0 1px rgba(16, 185, 129, .45), 0 0 28px -4px rgba(16, 185, 129, .45), 0 22px 60px -18px rgba(16, 185, 129, .70); --pt-inset-translucent: rgba(15, 23, 42, .38); --pt-auth-glow-a: rgba(16, 185, 129, .16); --pt-auth-glow-b: rgba(59, 130, 246, .12); --pt-alert-bg: radial-gradient(32rem 16rem at 4% -40%, rgba(239, 68, 68, .22), transparent 64%), linear-gradient(120deg, #2a1416, #1e1113 62%); --pt-alert-icon-bg: rgba(239, 68, 68, .16); --pt-alert-icon-fg: #fca5a5; --pt-alert-title: #fecaca; --pt-alert-sub: rgba(254, 202, 202, .72); } :root[data-theme="light"] { /* --- Surfaces --- */ --pt-bg: #f1f5f9; --pt-bg-deep: #e7edf4; --pt-bg-elev: #ffffff; --pt-card: #ffffff; --pt-card-hover: #f8fafc; --pt-card-inset: #f4f7fb; /* --- Lines --- */ --pt-border: rgba(15, 23, 42, .10); --pt-border-strong: rgba(15, 23, 42, .18); --pt-divider: rgba(15, 23, 42, .07); /* --- Type --- */ --pt-text: #1e293b; --pt-text-strong: #0f172a; --pt-text-dim: #64748b; --pt-text-mute: #94a3b8; /* --- Brand --- */ --pt-brand: #059669; --pt-brand-hover: #10B981; --pt-brand-active: #047857; --pt-brand-soft: rgba(16, 185, 129, .10); --pt-brand-ring: rgba(16, 185, 129, .28); --pt-on-brand: #ffffff; --pt-on-danger: #ffffff; /* --- Semantic --- */ --pt-amber: #d97706; --pt-amber-soft: rgba(245, 158, 11, .10); --pt-amber-ring: rgba(245, 158, 11, .30); --pt-red: #dc2626; --pt-red-soft: rgba(239, 68, 68, .09); --pt-red-ring: rgba(239, 68, 68, .28); --pt-blue: #2563eb; --pt-blue-soft: rgba(59, 130, 246, .09); --pt-violet: #7c3aed; --pt-violet-soft: rgba(139, 92, 246, .09); /* --- Elevation --- */ --pt-shadow-sm: 0 2px 6px -2px rgba(15, 23, 42, .10); --pt-shadow: 0 10px 30px -10px rgba(15, 23, 42, .18); --pt-shadow-lg: 0 28px 68px -20px rgba(15, 23, 42, .26); --pt-shadow-xl: 0 44px 96px -28px rgba(15, 23, 42, .30); --pt-shadow-card: 0 0 0 1px var(--pt-border), 0 24px 64px -26px rgba(15, 23, 42, .28), 0 2px 8px -3px rgba(15, 23, 42, .14); --pt-glow-brand: 0 0 0 1px var(--pt-brand-ring), 0 16px 40px -14px rgba(16, 185, 129, .40); --pt-glow-brand-xl: 0 0 0 1px rgba(16, 185, 129, .40), 0 0 28px -6px rgba(16, 185, 129, .35), 0 22px 60px -20px rgba(16, 185, 129, .45); /* --- Tokens de componente (evitam seletores de tema espalhados) --- */ --pt-inset-translucent: rgba(255, 255, 255, .72); --pt-auth-glow-a: rgba(16, 185, 129, .12); --pt-auth-glow-b: rgba(59, 130, 246, .10); --pt-alert-bg: linear-gradient(120deg, #fff5f5, #fff9f2 62%); --pt-alert-icon-bg: rgba(239, 68, 68, .10); --pt-alert-icon-fg: #dc2626; --pt-alert-title: #991b1b; --pt-alert-sub: #b45309; } /* ========================================================================== 2. GLOBAL SHELL The two redesigned pages live inside the stock header/footer, so the shell has to follow them into dark mode or the result reads as broken. ========================================================================== */ html { color-scheme: light; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body.primary-bg-color, body { background: var(--pt-bg) !important; color: var(--pt-text); font-family: var(--pt-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ambient depth — two very soft brand washes behind the content. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 30rem at 12% -8%, rgba(16, 185, 129, .10), transparent 60%), radial-gradient(50rem 28rem at 92% 4%, rgba(59, 130, 246, .08), transparent 62%); } /* Camadas explicitas. A regra generica antiga (body > * { z-index: 1 }) colocava o header e o #main-body no mesmo nivel - e como o #main-body vem depois no DOM, ele pintava por cima dos dropdowns do menu. */ body > * { position: relative; } #header { position: relative; z-index: 9999; } .master-breadcrumb { position: relative; z-index: 9990; } #main-body { position: relative; z-index: 1; } #footer, .footer { position: relative; z-index: 1; } #main-body { background: transparent !important; padding-top: 28px; padding-bottom: 56px; } /* --- Header / navigation --- */ #header .topbar { background: var(--pt-bg-deep) !important; border-bottom: 1px solid var(--pt-divider); } #header .navbar, #header .navbar.navbar-light { background: var(--pt-bg-deep) !important; border-bottom: 1px solid var(--pt-border); } #header .navbar .nav-link, #header .topbar .btn, #header .navbar-nav > li > a { color: var(--pt-text-dim) !important; transition: color var(--pt-speed) var(--pt-ease); } #header .navbar .nav-link:hover, #header .navbar .nav-link:focus, #header .navbar-nav > li > a:hover, #header .topbar .btn:hover { color: var(--pt-text-strong) !important; } #header .navbar .nav-item.active > .nav-link { color: var(--pt-brand) !important; } .btn-active-client, .active-client .input-group-text { background: var(--pt-card) !important; border-color: var(--pt-border) !important; color: var(--pt-text) !important; } /* --- Sidebars --- */ .panel.panel-sidebar, .card.card-sidebar, #main-body .panel, #secondary-sidebar .panel { background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-sm); color: var(--pt-text); overflow: hidden; } .panel-sidebar .panel-heading, .card-sidebar .card-header { background: var(--pt-card-inset) !important; border-bottom: 1px solid var(--pt-divider) !important; color: var(--pt-text-strong) !important; } .list-group-item { background: transparent !important; border-color: var(--pt-divider) !important; color: var(--pt-text-dim) !important; transition: background var(--pt-speed) var(--pt-ease), color var(--pt-speed) var(--pt-ease); } .list-group-item:hover, .list-group-item-action:hover { background: var(--pt-card-hover) !important; color: var(--pt-text-strong) !important; } .list-group-item.active { background: var(--pt-brand-soft) !important; color: var(--pt-brand) !important; border-color: var(--pt-border) !important; } /* --- Footer --- */ #footer, .footer { background: var(--pt-bg-deep) !important; border-top: 1px solid var(--pt-border); color: var(--pt-text-mute); } #footer a { color: var(--pt-text-dim); } #footer a:hover { color: var(--pt-brand); } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { color: var(--pt-text-strong); } a { color: var(--pt-brand); transition: color var(--pt-speed) var(--pt-ease); } a:hover, a:focus { color: var(--pt-brand-hover); text-decoration: none; } hr { border-top-color: var(--pt-divider); } .text-muted { color: var(--pt-text-mute) !important; } /* --- Focus ring (accessibility) --- */ a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--pt-brand); outline-offset: 2px; border-radius: var(--pt-radius-sm); } /* ========================================================================== 3. PRIMITIVES — buttons, alerts, badges, forms, dropdowns ========================================================================== */ /* --- Buttons --- */ .pt-scope .btn, .btn { border-radius: var(--pt-radius-sm); font-weight: 600; letter-spacing: .01em; transition: background var(--pt-speed) var(--pt-ease), border-color var(--pt-speed) var(--pt-ease), color var(--pt-speed) var(--pt-ease), transform var(--pt-speed) var(--pt-ease), box-shadow var(--pt-speed) var(--pt-ease); } .pt-scope .btn:active { transform: translateY(1px); } .pt-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .68rem 1.15rem; font-size: .875rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; border-radius: var(--pt-radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: all var(--pt-speed) var(--pt-ease); } .pt-btn i { font-size: .95em; } .pt-btn--block { width: 100%; } .pt-btn--sm { padding: .45rem .8rem; font-size: .8rem; } .pt-btn--lg { padding: .85rem 1.6rem; font-size: .95rem; } .pt-btn--primary { background: var(--pt-brand); border-color: var(--pt-brand); color: var(--pt-on-brand); box-shadow: 0 6px 18px -8px var(--pt-brand-ring); } .pt-btn--primary:hover, .pt-btn--primary:focus { background: var(--pt-brand-hover); border-color: var(--pt-brand-hover); color: var(--pt-on-brand); transform: translateY(-1px); box-shadow: var(--pt-glow-brand); } .pt-btn--primary:active { transform: translateY(0); background: var(--pt-brand-active); } .pt-btn--ghost { background: transparent; border-color: var(--pt-border-strong); color: var(--pt-text-dim); } .pt-btn--ghost:hover { background: var(--pt-card-hover); border-color: var(--pt-brand); color: var(--pt-text-strong); } .pt-btn--soft { background: var(--pt-brand-soft); border-color: var(--pt-brand-ring); color: var(--pt-brand); } .pt-btn--soft:hover { background: var(--pt-brand); color: var(--pt-on-brand); } .pt-btn--amber { background: var(--pt-amber); border-color: var(--pt-amber); color: #2b1a00; } .pt-btn--amber:hover { filter: brightness(1.08); color: #2b1a00; transform: translateY(-1px); } .pt-btn--danger { background: transparent; border-color: var(--pt-red-ring); color: var(--pt-red); } .pt-btn--danger:hover { background: var(--pt-red); border-color: var(--pt-red); color: var(--pt-on-danger); } .pt-btn.disabled, .pt-btn[disabled] { opacity: .5; pointer-events: none; } /* --- Alerts --- */ .pt-scope .alert, #main-body .alert { border-radius: var(--pt-radius); border: 1px solid var(--pt-border); background: var(--pt-card); color: var(--pt-text); box-shadow: var(--pt-shadow-sm); padding: 1rem 1.15rem; } #main-body .alert-success { border-left: 3px solid var(--pt-brand); background: var(--pt-brand-soft); color: var(--pt-text); } #main-body .alert-info { border-left: 3px solid var(--pt-blue); background: var(--pt-blue-soft); color: var(--pt-text); } #main-body .alert-warning { border-left: 3px solid var(--pt-amber); background: var(--pt-amber-soft); color: var(--pt-text); } #main-body .alert-danger, #main-body .alert-error { border-left: 3px solid var(--pt-red); background: var(--pt-red-soft); color: var(--pt-text); } /* --- Badges --- */ .pt-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: var(--pt-radius-pill); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; } .pt-badge--brand { background: var(--pt-brand-soft); color: var(--pt-brand); border: 1px solid var(--pt-brand-ring); } .pt-badge--amber { background: var(--pt-amber-soft); color: var(--pt-amber); border: 1px solid var(--pt-amber-ring); } .pt-badge--red { background: var(--pt-red-soft); color: var(--pt-red); border: 1px solid var(--pt-red-ring); } .pt-badge--blue { background: var(--pt-blue-soft); color: var(--pt-blue); border: 1px solid var(--pt-border-strong); } .pt-badge--muted { background: var(--pt-card-inset); color: var(--pt-text-mute); border: 1px solid var(--pt-border); } /* --- Forms --- */ #main-body .form-control, #main-body .custom-select { background: var(--pt-card-inset); border: 1px solid var(--pt-border-strong); border-radius: var(--pt-radius-sm); color: var(--pt-text); transition: border-color var(--pt-speed) var(--pt-ease), box-shadow var(--pt-speed) var(--pt-ease); } #main-body .form-control:focus { background: var(--pt-card-inset); border-color: var(--pt-brand); box-shadow: 0 0 0 3px var(--pt-brand-ring); color: var(--pt-text); } #main-body .form-control::placeholder { color: var(--pt-text-mute); } #main-body label, #main-body .col-form-label { color: var(--pt-text-dim); } /* --- Tables --- */ #main-body .table { color: var(--pt-text); } #main-body .table th { border-color: var(--pt-divider) !important; color: var(--pt-text-mute); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } #main-body .table td { border-color: var(--pt-divider) !important; } #main-body .table-hover tbody tr:hover { background: var(--pt-card-hover); color: var(--pt-text-strong); } /* --- Dropdowns (used for the retention menu) --- */ .pt-scope .dropdown-menu { background: var(--pt-bg-elev); border: 1px solid var(--pt-border-strong); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-lg); padding: .4rem; min-width: 230px; animation: ptFadeSlide .18s var(--pt-ease); } .pt-scope .dropdown-item { border-radius: var(--pt-radius-sm); color: var(--pt-text-dim); font-size: .85rem; font-weight: 500; padding: .58rem .7rem; display: flex; align-items: center; gap: .6rem; transition: background var(--pt-speed) var(--pt-ease), color var(--pt-speed) var(--pt-ease); } .pt-scope .dropdown-item:hover, .pt-scope .dropdown-item:focus { background: var(--pt-card-hover); color: var(--pt-text-strong); } .pt-scope .dropdown-item--danger { color: var(--pt-text-mute); } .pt-scope .dropdown-item--danger:hover, .pt-scope .dropdown-item--danger:focus { background: var(--pt-red-soft); color: var(--pt-red); } .pt-scope .dropdown-item.disabled { opacity: .45; pointer-events: none; } .pt-scope .dropdown-header { color: var(--pt-text-mute); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .55rem .7rem .3rem; } .pt-scope .dropdown-divider { border-top-color: var(--pt-divider); margin: .35rem .2rem; } @keyframes ptFadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 4. PAGE HEADER + THEME TOGGLE ========================================================================== */ .pt-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .pt-pagehead__eyebrow { display: block; color: var(--pt-brand); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; } .pt-pagehead__title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: var(--pt-text-strong); line-height: 1.15; } .pt-pagehead__sub { margin: .45rem 0 0; color: var(--pt-text-dim); font-size: .92rem; } .pt-pagehead__actions { display: flex; align-items: center; gap: .6rem; } /* --- Toggle --- */ .pt-themetoggle { display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .95rem; background: var(--pt-card); border: 1px solid var(--pt-border-strong); border-radius: var(--pt-radius-pill); color: var(--pt-text-dim); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all var(--pt-speed) var(--pt-ease); } .pt-themetoggle:hover { color: var(--pt-text-strong); border-color: var(--pt-brand); background: var(--pt-card-hover); } .pt-themetoggle i { font-size: .95rem; } /* O rotulo mostra o tema para o qual o clique VAI mudar, nao o atual. Precisa das tres camadas: base clara, automatico do SO, escolha manual. */ .pt-themetoggle .pt-themetoggle__dark, .pt-themetoggle .pt-themetoggle__light { display: none; } /* base = claro -> oferece escuro */ .pt-themetoggle .pt-themetoggle__dark { display: inline-flex; align-items: center; gap: .5rem; } /* SO escuro (sem escolha manual por claro) -> oferece claro */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pt-themetoggle .pt-themetoggle__dark { display: none; } html:not([data-theme="light"]) .pt-themetoggle .pt-themetoggle__light { display: inline-flex; align-items: center; gap: .5rem; } } /* escolha manual vence os dois de cima */ html[data-theme="dark"] .pt-themetoggle .pt-themetoggle__dark { display: none; } html[data-theme="dark"] .pt-themetoggle .pt-themetoggle__light { display: inline-flex; align-items: center; gap: .5rem; } html[data-theme="light"] .pt-themetoggle .pt-themetoggle__light { display: none; } html[data-theme="light"] .pt-themetoggle .pt-themetoggle__dark { display: inline-flex; align-items: center; gap: .5rem; } /* ========================================================================== 5. DASHBOARD — stat tiles ========================================================================== */ .pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } @media (max-width: 991px) { .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } } @media (max-width: 575px) { .pt-stat { padding: 1.05rem 1.05rem .95rem; } .pt-stat__icon { width: 34px; height: 34px; margin-bottom: .7rem; font-size: .9rem; } .pt-stat__value { font-size: 1.7rem; } } @media (max-width: 359px) { .pt-stats { grid-template-columns: 1fr; } } .pt-stat { position: relative; display: block; padding: 1.35rem 1.4rem 1.25rem; background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-sm); overflow: hidden; text-decoration: none; isolation: isolate; transition: transform var(--pt-speed) var(--pt-ease), border-color var(--pt-speed) var(--pt-ease), box-shadow var(--pt-speed) var(--pt-ease), background var(--pt-speed) var(--pt-ease); } .pt-stat::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(22rem 12rem at 100% 0%, var(--pt-stat-tint, var(--pt-brand-soft)), transparent 70%); transition: opacity var(--pt-speed) var(--pt-ease); } .pt-stat:hover { transform: translateY(-3px); border-color: var(--pt-stat-accent, var(--pt-brand)); box-shadow: var(--pt-shadow-lg); text-decoration: none; } .pt-stat:hover::after { opacity: 1; } .pt-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: .95rem; border-radius: var(--pt-radius-sm); background: var(--pt-stat-tint, var(--pt-brand-soft)); color: var(--pt-stat-accent, var(--pt-brand)); font-size: 1rem; } .pt-stat__value { font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--pt-text-strong); font-variant-numeric: tabular-nums; } .pt-stat__label { margin-top: .4rem; color: var(--pt-text-dim); font-size: .82rem; font-weight: 500; } .pt-stat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pt-stat-accent, var(--pt-brand)); opacity: .55; transition: opacity var(--pt-speed) var(--pt-ease); } .pt-stat:hover .pt-stat__bar { opacity: 1; } .pt-stat--services { --pt-stat-accent: var(--pt-brand); --pt-stat-tint: var(--pt-brand-soft); } .pt-stat--domains { --pt-stat-accent: var(--pt-blue); --pt-stat-tint: var(--pt-blue-soft); } .pt-stat--quotes { --pt-stat-accent: var(--pt-violet); --pt-stat-tint: var(--pt-violet-soft); } .pt-stat--tickets { --pt-stat-accent: var(--pt-violet); --pt-stat-tint: var(--pt-violet-soft); } .pt-stat--invoices { --pt-stat-accent: var(--pt-amber); --pt-stat-tint: var(--pt-amber-soft); } /* Services tile is the hero of the dashboard. */ .pt-stat--services { background: linear-gradient(150deg, var(--pt-brand-soft), var(--pt-card) 46%); border-color: var(--pt-brand-ring); } .pt-stat--services .pt-stat__value { color: var(--pt-brand); } .pt-stat--services .pt-stat__bar { opacity: 1; } /* Unpaid invoices demand attention only when there actually are any. */ .pt-stat--invoices.is-due { background: linear-gradient(150deg, var(--pt-amber-soft), var(--pt-card) 46%); border-color: var(--pt-amber-ring); } .pt-stat--invoices.is-due .pt-stat__value { color: var(--pt-amber); } .pt-stat--invoices.is-due .pt-stat__icon { background: var(--pt-amber); color: #2b1a00; } /* ========================================================================== 6. DASHBOARD — home panel cards The $panels output is untouched; only the shell around it changed. ========================================================================== */ .pt-panels { display: block; } .pt-panels__full { display: block; } .pt-panels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; } @media (max-width: 991px) { .pt-panels__grid { grid-template-columns: 1fr; gap: 1rem; } } .pt-panels__col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } @media (max-width: 991px) { .pt-panels__col { gap: 1rem; } } /* --- The card itself --- */ .pt-panels .card, .pt-panel { position: relative; background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-sm); color: var(--pt-text); overflow: hidden; margin: 0; transition: transform var(--pt-speed) var(--pt-ease), border-color var(--pt-speed) var(--pt-ease), box-shadow var(--pt-speed) var(--pt-ease); } .pt-panels__full .pt-panel { margin-bottom: 1.25rem; } .pt-panel:hover { border-color: var(--pt-border-strong); box-shadow: var(--pt-shadow); } /* Accent rail — colour comes from the panel's own getExtra('color'). */ .pt-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pt-panel-accent, var(--pt-border-strong)); opacity: .85; } .pt-panel.card-accent-green { --pt-panel-accent: var(--pt-brand); } .pt-panel.card-accent-blue { --pt-panel-accent: var(--pt-blue); } .pt-panel.card-accent-red { --pt-panel-accent: var(--pt-red); } .pt-panel.card-accent-gold, .pt-panel.card-accent-orange { --pt-panel-accent: var(--pt-amber); } .pt-panel.card-accent-purple { --pt-panel-accent: var(--pt-violet); } .pt-panel .card-header { background: transparent !important; border-bottom: 1px solid var(--pt-divider) !important; padding: 1.05rem 1.3rem; } .pt-panel .card-title { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--pt-text-strong); margin: 0; } .pt-panel .card-title > i { color: var(--pt-panel-accent, var(--pt-brand)); font-size: .95rem; width: 1.1em; text-align: center; } .pt-panel .card-title .badge { background: var(--pt-card-inset); color: var(--pt-text-dim); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-pill); font-size: .68rem; font-weight: 700; padding: .22rem .55rem; } .pt-panel .card-title .float-right { order: 1; /* button is first in WHMCS markup - push it past the label */ margin-left: auto; float: none; } .pt-panel .card-title .float-right .btn { text-decoration: none; background: var(--pt-brand-soft) !important; border: 1px solid var(--pt-brand-ring) !important; color: var(--pt-brand) !important; border-radius: var(--pt-radius-pill); font-size: .72rem; font-weight: 600; padding: .3rem .75rem; } .pt-panel .card-title .float-right .btn:hover { background: var(--pt-brand) !important; color: var(--pt-on-brand) !important; } .pt-panel .card-body { padding: 1.15rem 1.3rem; color: var(--pt-text-dim); font-size: .88rem; } .pt-panel .card-body a { color: var(--pt-brand); } .pt-panel .card-body p:last-child { margin-bottom: 0; } .pt-panel .list-group { border-radius: 0; } .pt-panel .list-group-item { display: block; text-decoration: none; background: transparent !important; border: 0 !important; border-top: 1px solid var(--pt-divider) !important; padding: .8rem 1.3rem; font-size: .86rem; color: var(--pt-text-dim) !important; } .pt-panel .list-group-item:first-child { border-top: 0 !important; } .pt-panel .list-group-item i { color: var(--pt-text-mute); width: 1.1em; text-align: center; } .pt-panel .list-group-item:hover i { color: var(--pt-panel-accent, var(--pt-brand)); } .pt-panel .list-group-item .badge { float: right; background: var(--pt-card-inset); border: 1px solid var(--pt-border); color: var(--pt-text-dim); border-radius: var(--pt-radius-pill); padding: .2rem .55rem; font-size: .68rem; } .pt-panel .card-footer { background: var(--pt-card-inset) !important; border-top: 1px solid var(--pt-divider) !important; padding: .85rem 1.3rem; font-size: .82rem; color: var(--pt-text-mute); } /* WHMCS always emits the footer div; collapse it when it has nothing in it. */ .pt-panel .card-footer:empty { display: none; } /* --- Emphasis: Active Services --- */ .pt-panel--services { border-color: var(--pt-brand-ring); box-shadow: 0 0 0 1px var(--pt-brand-ring), var(--pt-shadow); background: linear-gradient(160deg, var(--pt-brand-soft), transparent 38%), var(--pt-card); } .pt-panel--services::before { background: var(--pt-brand); opacity: 1; height: 3px; } .pt-panel--services .card-title, .pt-panel--services .card-title > i { color: var(--pt-brand); } .pt-panel--services .list-group-item:hover { background: var(--pt-brand-soft) !important; } /* --- Emphasis: Unpaid Invoices (amber alert, red when overdue) --- */ .pt-panel--invoices { border-color: var(--pt-amber-ring); box-shadow: 0 0 0 1px var(--pt-amber-ring), var(--pt-shadow); background: linear-gradient(160deg, var(--pt-amber-soft), transparent 38%), var(--pt-card); } .pt-panel--invoices::before { background: var(--pt-amber); opacity: 1; height: 3px; } .pt-panel--invoices .card-title, .pt-panel--invoices .card-title > i { color: var(--pt-amber); } .pt-panel--invoices .card-title .badge { background: var(--pt-amber); border-color: var(--pt-amber); color: #2b1a00; } .pt-panel--invoices .card-title .float-right .btn { background: var(--pt-amber) !important; border-color: var(--pt-amber) !important; color: #2b1a00 !important; } .pt-panel--invoices .card-title .float-right .btn:hover { filter: brightness(1.1); } .pt-panel--invoices .list-group-item:hover { background: var(--pt-amber-soft) !important; } .pt-panel--invoices .list-group-item .badge { background: var(--pt-amber-soft); border-color: var(--pt-amber-ring); color: var(--pt-amber); } .pt-panel--invoices.is-overdue { border-color: var(--pt-red-ring); box-shadow: 0 0 0 1px var(--pt-red-ring), var(--pt-shadow); background: linear-gradient(160deg, var(--pt-red-soft), transparent 38%), var(--pt-card); } .pt-panel--invoices.is-overdue::before { background: var(--pt-red); } .pt-panel--invoices.is-overdue .card-title, .pt-panel--invoices.is-overdue .card-title > i { color: var(--pt-red); } /* --- Addon / hook output --- */ .pt-addons > div + div { margin-top: 1.25rem; } .pt-addons .card, .pt-addons .panel { background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); color: var(--pt-text); } /* ========================================================================== 7. PRODUCT DETAILS — hero ========================================================================== */ .pt-service { display: block; } .pt-hero { position: relative; padding: 1.75rem; margin-bottom: 1.5rem; background: radial-gradient(38rem 20rem at 88% -30%, var(--pt-brand-soft), transparent 62%), var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow); overflow: hidden; } .pt-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pt-brand), transparent 65%); } @media (max-width: 575px) { .pt-hero { padding: 1.25rem; } } .pt-hero__top { display: flex; align-items: flex-start; gap: 1.15rem; flex-wrap: wrap; } .pt-hero__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--pt-radius); background: var(--pt-brand-soft); border: 1px solid var(--pt-brand-ring); color: var(--pt-brand); font-size: 1.4rem; } .pt-hero__id { flex: 1 1 260px; min-width: 0; } .pt-hero__group { display: block; color: var(--pt-text-mute); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; } .pt-hero__name { margin: 0; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; color: var(--pt-text-strong); line-height: 1.2; word-break: break-word; } .pt-hero__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .65rem; } .pt-hero__domain { display: inline-flex; align-items: center; gap: .4rem; color: var(--pt-text-dim); font-size: .85rem; } .pt-hero__actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-left: auto; } @media (max-width: 767px) { .pt-hero__actions { margin-left: 0; width: 100%; } } /* --- Status pill --- */ .pt-status { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: var(--pt-radius-pill); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--pt-card-inset); border: 1px solid var(--pt-border); color: var(--pt-text-dim); } .pt-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .pt-status--active { background: var(--pt-brand-soft); border-color: var(--pt-brand-ring); color: var(--pt-brand); } .pt-status--active .pt-status__dot { box-shadow: 0 0 0 0 var(--pt-brand-ring); animation: ptPulse 2.4s infinite; } .pt-status--pending { background: var(--pt-blue-soft); border-color: var(--pt-border-strong); color: var(--pt-blue); } .pt-status--suspended { background: var(--pt-amber-soft); border-color: var(--pt-amber-ring); color: var(--pt-amber); } .pt-status--terminated, .pt-status--cancelled, .pt-status--fraud { background: var(--pt-red-soft); border-color: var(--pt-red-ring); color: var(--pt-red); } @keyframes ptPulse { 0% { box-shadow: 0 0 0 0 var(--pt-brand-ring); } 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* --- Discrete "Ações" gear --- */ .pt-gear { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 40px; min-width: 40px; padding: 0 .8rem; background: transparent; border: 1px solid var(--pt-border-strong); border-radius: var(--pt-radius-sm); color: var(--pt-text-mute); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all var(--pt-speed) var(--pt-ease); } .pt-gear:hover, .pt-gear:focus, .show > .pt-gear { background: var(--pt-card-hover); border-color: var(--pt-border-strong); color: var(--pt-text-strong); } .pt-gear::after { display: none; } /* kill Bootstrap's caret */ .pt-gear__label { display: inline; } @media (max-width: 575px) { .pt-gear__label { display: none; } } /* --- Hero compacto: usado quando o spotlight do app ja abriu a pagina --- */ .pt-hero--compact { padding: 1.35rem 1.5rem; border-radius: var(--pt-radius); background: var(--pt-card); box-shadow: var(--pt-shadow-sm); } .pt-hero--compact::before { opacity: .35; } .pt-hero--compact .pt-hero__icon { width: 42px; height: 42px; font-size: 1.05rem; border-radius: var(--pt-radius-sm); } .pt-hero--compact .pt-hero__name { font-size: clamp(1.1rem, .95rem + .7vw, 1.35rem); } .pt-hero--compact .pt-meta { margin-top: 1.15rem; } @media (max-width: 575px) { .pt-hero--compact { padding: 1.1rem; } } /* ========================================================================== 8. PRODUCT DETAILS — billing meta grid ========================================================================== */ .pt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-top: 1.6rem; background: var(--pt-border); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); overflow: hidden; } .pt-meta__cell { background: var(--pt-card); padding: .95rem 1.05rem; min-width: 0; } .pt-meta__label { display: block; color: var(--pt-text-mute); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .38rem; } .pt-meta__value { color: var(--pt-text-strong); font-size: .95rem; font-weight: 600; word-break: break-word; } .pt-meta__value--brand { color: var(--pt-brand); } .pt-meta__value--amber { color: var(--pt-amber); } .pt-meta__cell--warn { background: var(--pt-amber-soft); } .pt-meta__cell--warn .pt-meta__value { color: var(--pt-amber); } /* ========================================================================== 9. SYNCBOX SPOTLIGHT The module's own client area output is the point of this page — it gets the largest, brightest surface and sits above everything else. ========================================================================== */ .pt-spotlight { position: relative; margin-bottom: 1.5rem; background: radial-gradient(46rem 24rem at 14% -20%, rgba(16, 185, 129, .16), transparent 60%), radial-gradient(38rem 22rem at 92% 120%, rgba(59, 130, 246, .10), transparent 62%), var(--pt-card); border: 1px solid var(--pt-brand-ring); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-glow-brand), var(--pt-shadow-lg); overflow: hidden; } .pt-spotlight::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pt-brand), var(--pt-blue)); } .pt-spotlight__head { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding: 1.4rem 1.75rem; border-bottom: 1px solid var(--pt-divider); } .pt-spotlight__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--pt-radius-sm); background: var(--pt-brand); color: var(--pt-on-brand); font-size: 1.05rem; box-shadow: 0 8px 22px -8px var(--pt-brand-ring); } .pt-spotlight__titles { min-width: 0; } .pt-spotlight__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--pt-text-strong); } .pt-spotlight__sub { margin: .18rem 0 0; color: var(--pt-text-dim); font-size: .84rem; } .pt-spotlight__badge { margin-left: auto; } @media (max-width: 767px) { .pt-spotlight__badge { margin-left: 0; } } .pt-spotlight__body { padding: 1.75rem; } @media (max-width: 575px) { .pt-spotlight__head { padding: 1.1rem 1.15rem; } .pt-spotlight__body { padding: 1.15rem; } } /* --- Taming whatever markup the module prints --- */ .pt-modulearea { color: var(--pt-text); text-align: left; font-size: .92rem; } .pt-modulearea h1, .pt-modulearea h2, .pt-modulearea h3, .pt-modulearea h4, .pt-modulearea h5 { color: var(--pt-text-strong); letter-spacing: -.01em; } .pt-modulearea hr { border-top-color: var(--pt-divider); } .pt-modulearea code, .pt-modulearea kbd, .pt-modulearea pre { background: var(--pt-card-inset); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); color: var(--pt-brand); padding: .18rem .45rem; font-size: .88em; } .pt-modulearea pre { padding: .9rem 1rem; overflow-x: auto; } .pt-modulearea .well, .pt-modulearea .panel, .pt-modulearea .card { background: var(--pt-card-inset); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: none; color: var(--pt-text); } .pt-modulearea .table { color: var(--pt-text); margin-bottom: 0; } .pt-modulearea .table th, .pt-modulearea .table td { border-color: var(--pt-divider) !important; padding: .7rem .85rem; } .pt-modulearea .form-control { background: var(--pt-card-inset); border-color: var(--pt-border-strong); color: var(--pt-text); } .pt-modulearea .input-group-text { background: var(--pt-card-inset); border-color: var(--pt-border-strong); color: var(--pt-text-dim); } /* The module's own primary action (SSO) inherits the brand. */ .pt-modulearea .btn-primary, .pt-modulearea .btn-success { background: var(--pt-brand) !important; border-color: var(--pt-brand) !important; color: var(--pt-on-brand) !important; font-weight: 600; border-radius: var(--pt-radius-sm); padding: .7rem 1.4rem; box-shadow: 0 8px 22px -10px var(--pt-brand-ring); transition: all var(--pt-speed) var(--pt-ease); } .pt-modulearea .btn-primary:hover, .pt-modulearea .btn-success:hover { background: var(--pt-brand-hover) !important; border-color: var(--pt-brand-hover) !important; transform: translateY(-1px); box-shadow: var(--pt-glow-brand); } .pt-modulearea .btn-default, .pt-modulearea .btn-secondary { background: transparent !important; border: 1px solid var(--pt-border-strong) !important; color: var(--pt-text-dim) !important; border-radius: var(--pt-radius-sm); } .pt-modulearea .btn-default:hover, .pt-modulearea .btn-secondary:hover { background: var(--pt-card-hover) !important; color: var(--pt-text-strong) !important; } .pt-modulearea .btn-lg { font-size: 1rem; padding: .85rem 1.8rem; } /* ========================================================================== 10. PRODUCT DETAILS — cards, tabs, info rows ========================================================================== */ .pt-card { background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-sm); margin-bottom: 1.5rem; overflow: hidden; } .pt-card__head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--pt-divider); } .pt-card__head i { color: var(--pt-brand); } .pt-card__title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--pt-text-strong); letter-spacing: -.01em; } .pt-card__body { padding: 1.4rem; } @media (max-width: 575px) { .pt-card__head { padding: .9rem 1.1rem; } .pt-card__body { padding: 1.1rem; } } /* --- Tabs --- */ .pt-tabs.nav-tabs { display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; border: 0; gap: .35rem; margin: 0 0 1.15rem; } .pt-tabs.nav-tabs .nav-item { margin: 0; } .pt-tabs.nav-tabs .nav-link { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid transparent; border-radius: var(--pt-radius-pill); padding: .55rem 1.05rem; font-size: .84rem; font-weight: 600; color: var(--pt-text-mute); background: transparent; transition: all var(--pt-speed) var(--pt-ease); } .pt-tabs.nav-tabs .nav-link:hover { color: var(--pt-text-strong); background: var(--pt-card-hover); border-color: var(--pt-border); } .pt-tabs.nav-tabs .nav-link.active { background: var(--pt-brand-soft) !important; border-color: var(--pt-brand-ring) !important; color: var(--pt-brand) !important; } .pt-tabpanes { background: var(--pt-card) !important; border: 1px solid var(--pt-border); border-radius: var(--pt-radius); box-shadow: var(--pt-shadow-sm); padding: 1.4rem; } @media (max-width: 575px) { .pt-tabpanes { padding: 1.1rem; } } /* --- Definition rows (domain, config options, custom fields) --- */ .pt-rows { display: block; } .pt-row { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--pt-divider); text-align: left; } .pt-row:last-child { border-bottom: 0; } .pt-row__label { color: var(--pt-text-mute); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: .1rem; } .pt-row__value { color: var(--pt-text); font-size: .9rem; word-break: break-word; min-width: 0; } @media (max-width: 575px) { .pt-row { grid-template-columns: 1fr; gap: .25rem; } } .pt-linkrow { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--pt-divider); } /* --- Downloads / addons / password tabs --- */ .pt-section-title { margin: 0 0 1.25rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--pt-text-strong); } .pt-download { padding: 1.15rem 1.3rem; background: var(--pt-card); border: 1px solid var(--pt-border); border-radius: var(--pt-radius); margin-bottom: 1rem; transition: border-color var(--pt-speed) var(--pt-ease); } .pt-download:hover { border-color: var(--pt-brand-ring); } .pt-download h4 { font-size: .95rem; font-weight: 700; margin: 0 0 .35rem; } .pt-download p { color: var(--pt-text-dim); font-size: .86rem; } .pt-addon { margin-bottom: 1.15rem; } .pt-addon .card, .pt-addon.pt-card { border-radius: var(--pt-radius); } .pt-addon .status-active { color: var(--pt-brand); } .pt-addon .status-suspended { color: var(--pt-amber); } .pt-addon .status-terminated, .pt-addon .status-cancelled { color: var(--pt-red); } /* --- Resource usage dials --- */ .pt-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; text-align: center; } .pt-usage h4 { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-text-mute); margin-bottom: .9rem; } .pt-usage p { color: var(--pt-text-dim); font-size: .85rem; margin-top: .6rem; } /* ========================================================================== 11. UTILITIES + ACCESSIBILITY ========================================================================== */ .pt-hide { display: none !important; } .pt-mt-0 { margin-top: 0 !important; } .pt-mb-0 { margin-bottom: 0 !important; } .pt-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--pt-text-mute); font-size: .9rem; } .pt-empty i { display: block; font-size: 1.8rem; margin-bottom: .75rem; opacity: .45; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .pt-stat:hover, .pt-btn:hover { transform: none; } } @media print { body::before, .pt-themetoggle, .pt-gear, .pt-hero__actions { display: none !important; } .pt-hero, .pt-card, .pt-spotlight, .pt-panel { box-shadow: none; border-color: #ccc; } } /* --- Page toolbar (back link + theme switch) --- */ .pt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } /* ========================================================================== 12. FULL-WIDTH MODE (syncbox) Mata a sidebar do WHMCS e devolve 100% da largura ao conteudo. Dois mecanismos: :has() para navegadores modernos (sem flash) e a classe .pt-fullwidth no , aplicada por script, como garantia universal. ========================================================================== */ /* IMPORTANTE: as regras :has() ficam SEPARADAS das regras de fallback. Num navegador sem suporte a :has(), o seletor invalido derrubaria a lista inteira - inclusive o fallback - e a sidebar continuaria aparecendo. */ body.pt-fullwidth #main-body .row > .col-lg-4.col-xl-3 { display: none !important; } #main-body .row:has(.pt-fullwidth-flag) > .col-lg-4.col-xl-3 { display: none !important; } body.pt-fullwidth #main-body .primary-content { flex: 0 0 100%; max-width: 100%; width: 100%; } #main-body .primary-content:has(.pt-fullwidth-flag) { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Conteudo centralizado, com uma medida confortavel em telas grandes. */ body.pt-fullwidth .pt-service { max-width: 1120px; margin-left: auto; margin-right: auto; } .primary-content:has(.pt-fullwidth-flag) .pt-service { max-width: 1120px; margin-left: auto; margin-right: auto; } .pt-fullwidth-flag { display: none !important; } /* ========================================================================== 13. BOTAO "APP" - o elemento mais luminoso da tela ========================================================================== */ .pt-btn--app, .pt-modulearea .btn-primary, .pt-modulearea .btn-success, .pt-modulearea a.btn-lg { box-sizing: border-box; max-width: 100%; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: 1.1rem 2.4rem !important; font-size: 1.06rem !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.2; text-decoration: none !important; border: 0 !important; border-radius: var(--pt-radius) !important; color: #04241a !important; background: linear-gradient(135deg, #34d399 0%, #10B981 45%, #059669 100%) !important; box-shadow: var(--pt-glow-brand-xl) !important; overflow: hidden; isolation: isolate; cursor: pointer; animation: ptBreathe 3.6s var(--pt-ease) infinite; transition: transform var(--pt-speed) var(--pt-ease), box-shadow var(--pt-speed) var(--pt-ease), filter var(--pt-speed) var(--pt-ease); } /* Brilho que atravessa o botao. */ .pt-btn--app::after, .pt-modulearea .btn-primary::after, .pt-modulearea .btn-success::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: -1; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: ptSheen 4.2s var(--pt-ease) infinite; } .pt-btn--app:hover, .pt-modulearea .btn-primary:hover, .pt-modulearea .btn-success:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(16, 185, 129, .6), 0 0 40px -2px rgba(16, 185, 129, .6), 0 30px 74px -20px rgba(16, 185, 129, .85) !important; color: #04241a !important; animation-play-state: paused; } .pt-btn--app:active, .pt-modulearea .btn-primary:active { transform: translateY(-1px) scale(1); } .pt-btn--app i, .pt-modulearea .btn-primary i { font-size: 1.05em; } @keyframes ptBreathe { 0%, 100% { box-shadow: var(--pt-glow-brand-xl); } 50% { box-shadow: 0 0 0 1px rgba(16, 185, 129, .5), 0 0 36px 0 rgba(16, 185, 129, .55), 0 26px 66px -18px rgba(16, 185, 129, .78); } } @keyframes ptSheen { 0%, 62% { left: -60%; } 92%, 100% { left: 130%; } } /* ========================================================================== 14. DASHBOARD HERO BANNER - servicos ativos em destaque total ========================================================================== */ .pt-herobanner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; padding: 2.4rem 2.6rem; margin-bottom: 1.75rem; border: 1px solid var(--pt-brand-ring); border-radius: var(--pt-radius-lg); background: radial-gradient(48rem 26rem at 6% -30%, rgba(16, 185, 129, .22), transparent 62%), radial-gradient(40rem 24rem at 96% 130%, rgba(59, 130, 246, .16), transparent 64%), linear-gradient(140deg, var(--pt-bg-elev), var(--pt-card) 70%); box-shadow: var(--pt-shadow-lg), 0 0 0 1px rgba(16, 185, 129, .10); overflow: hidden; } .pt-herobanner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pt-brand), var(--pt-blue) 70%, transparent); } @media (max-width: 991px) { .pt-herobanner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; } } @media (max-width: 575px) { .pt-herobanner { padding: 1.35rem; border-radius: var(--pt-radius); } } .pt-herobanner__main { min-width: 0; } .pt-herobanner__eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--pt-brand); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; } .pt-herobanner__eyebrow .pt-status__dot { animation: ptPulse 2.4s infinite; } .pt-herobanner__title { margin: 0; font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: var(--pt-text-strong); word-break: break-word; } .pt-herobanner__sub { margin: .7rem 0 0; color: var(--pt-text-dim); font-size: .98rem; max-width: 46ch; } .pt-herobanner__cta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; } /* No celular a acao principal ocupa a linha toda - alvo de toque generoso. */ @media (max-width: 575px) { .pt-herobanner__cta { flex-direction: column; align-items: stretch; gap: .6rem; } .pt-herobanner__cta .pt-btn { width: 100%; } .pt-btn--app { padding: 1.05rem 1.5rem !important; } } /* Coluna direita: os demais servicos, acesso em 1 clique. */ .pt-herobanner__list { display: flex; flex-direction: column; gap: .6rem; min-width: 0; } .pt-svc { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.05rem; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); background: var(--pt-inset-translucent); color: var(--pt-text-dim); text-decoration: none; transition: all var(--pt-speed) var(--pt-ease); } .pt-svc:hover { border-color: var(--pt-brand); background: var(--pt-brand-soft); color: var(--pt-text-strong); transform: translateX(3px); text-decoration: none; } .pt-svc__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--pt-brand-soft); color: var(--pt-brand); font-size: .85rem; } .pt-svc__name { flex: 1 1 auto; min-width: 0; font-size: .89rem; font-weight: 600; color: var(--pt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-svc__go { color: var(--pt-text-mute); font-size: .8rem; transition: color var(--pt-speed) var(--pt-ease); } .pt-svc:hover .pt-svc__go { color: var(--pt-brand); } .pt-svc .badge { background: var(--pt-brand-soft); border: 1px solid var(--pt-brand-ring); color: var(--pt-brand); border-radius: var(--pt-radius-pill); font-size: .66rem; font-weight: 700; padding: .18rem .5rem; flex: 0 0 auto; } .pt-herobanner__more { margin-top: .3rem; font-size: .8rem; font-weight: 600; color: var(--pt-text-mute); text-align: center; } /* ========================================================================== 15. ENGRENAGEM DISCRETA (retencao) ========================================================================== */ .pt-gear--bare { width: 34px; min-width: 34px; height: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--pt-text-mute); opacity: .5; border-radius: 10px; } .pt-gear--bare:hover, .pt-gear--bare:focus, .show > .pt-gear--bare { opacity: 1; background: var(--pt-card-hover); border-color: var(--pt-border); color: var(--pt-text-dim); } .pt-gear--bare .pt-gear__label { display: none; } /* ========================================================================== 16. CORRECOES CRITICAS — header, dropdowns, breadcrumb ========================================================================== */ /* --- Dropdowns do menu por cima de tudo --- */ #header .dropdown, #header .nav-item.dropdown { position: relative; } #header .dropdown-menu, #header .collapsable-dropdown-menu, .navbar .dropdown-menu { z-index: 10050 !important; background: var(--pt-bg-elev) !important; border: 1px solid var(--pt-border-strong) !important; border-radius: var(--pt-radius) !important; box-shadow: var(--pt-shadow-lg) !important; padding: .4rem !important; margin-top: .5rem; color: var(--pt-text); } /* O markup do twenty-one usa