/* ============================================================ PapilioHost — LIGHT MODE (opt-in via ) Mirrors papiliohost.com light palette. Dark stays the default. Loaded AFTER papilio.css so it wins. ============================================================ */ /* ---------- 1. TOKEN REMAP ---------- */ html.pl-light{ --bg:#eef5fd; --surface:#ffffff; --surface-2:#e6f0fb; --surface-3:#e0ecf8; --border:rgba(2,132,199,.18); --border-soft:rgba(2,132,199,.10); --text:#08182a; --text-2:#43596f; --text-3:#7c93a9; --brand:#0ea5e9; --brand-2:#0284c7; --brand-glow:rgba(14,165,233,.18); --accent:#0ea5e9; --accent-ink:#ffffff; --green:#059669; --green-bg:rgba(5,150,105,.12); --red:#e11d48; --red-bg:rgba(225,29,72,.10); --amber:#b45309; --amber-bg:rgba(180,83,9,.12); --blue:#0284c7; --blue-bg:rgba(2,132,199,.12); --violet:#6366f1;--violet-bg:rgba(99,102,241,.12); --shadow:0 1px 2px rgba(2,132,199,.10); --shadow-lg:0 20px 46px -22px rgba(8,24,42,.30); } /* ---------- 2. GLOBAL / HARDCODED OVERRIDES ---------- */ html.pl-light a:hover{color:var(--brand-2)} html.pl-light ::selection{background:rgba(14,165,233,.24);color:#08182a} html.pl-light .pl-app::before{ background:radial-gradient(38% 34% at 16% 10%,rgba(14,165,233,.09),transparent 70%), radial-gradient(36% 40% at 88% 24%,rgba(99,102,241,.06),transparent 72%), radial-gradient(44% 38% at 62% 98%,rgba(2,132,199,.05),transparent 70%)} html.pl-light .pl-app::after{ background-image:linear-gradient(rgba(2,132,199,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(2,132,199,.06) 1px,transparent 1px)} html.pl-light .pl-top{background:rgba(255,255,255,.78)} /* ---------- AUTH / LOGIN ---------- */ html.pl-light .pl-authwrap{ background:radial-gradient(900px 620px at 10% 6%,rgba(14,165,233,.12),transparent 58%), radial-gradient(760px 720px at 88% 96%,rgba(2,132,199,.10),transparent 58%), radial-gradient(600px 600px at 60% 40%,rgba(99,102,241,.07),transparent 60%), linear-gradient(155deg,#ffffff 0%,#eef5fd 55%,#e6f0fb 100%)} html.pl-light .pl-hero{border-right:1px solid rgba(2,132,199,.12)} html.pl-light [dir=rtl] .pl-hero{border-right:0;border-left:1px solid rgba(2,132,199,.12)} html.pl-light .pl-hero::after{ background-image:linear-gradient(rgba(2,132,199,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(2,132,199,.05) 1px,transparent 1px);opacity:.6} html.pl-light .pl-orb{opacity:.35} html.pl-light .pl-orb.o1{background:radial-gradient(circle,#38bdf8,transparent 70%)} html.pl-light .pl-orb.o2{background:radial-gradient(circle,#0ea5e9,transparent 70%)} html.pl-light .pl-orb.o3{background:radial-gradient(circle,#818cf8,transparent 70%)} html.pl-light .pl-fly{opacity:.28;filter:drop-shadow(0 6px 14px rgba(2,132,199,.35))} html.pl-light .pl-hero-mark{ background:linear-gradient(160deg,rgba(14,165,233,.20),rgba(14,165,233,.04)); border:1px solid rgba(14,165,233,.28); box-shadow:0 22px 54px -18px rgba(14,165,233,.35),inset 0 1px 0 rgba(255,255,255,.6)} html.pl-light .pl-hero-mark img{filter:drop-shadow(0 4px 10px rgba(14,165,233,.35))} html.pl-light .pl-hero-brand{color:#08182a} html.pl-light .pl-hero-tag{color:#43596f} html.pl-light .pl-hero-feats li{color:#22405c} html.pl-light .pl-hero-feats .ic{background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.22)} html.pl-light .pl-hero-status{color:#047857;background:rgba(5,150,105,.10);border:1px solid rgba(5,150,105,.28)} html.pl-light .pl-hero-status .dot{background:#059669;box-shadow:0 0 9px #059669} html.pl-light .pl-authpane{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.72))} html.pl-light .pl-authpane .card{ background:rgba(255,255,255,.85) !important; border:1px solid var(--border) !important; box-shadow:0 40px 100px -46px rgba(8,24,42,.30),0 1px 0 rgba(255,255,255,.7) inset !important} html.pl-light .pl-authpane .card .h3,html.pl-light .pl-authpane .card h3{color:#08182a} html.pl-light .pl-authpane .card-footer{background:rgba(2,132,199,.04) !important} html.pl-light .pl-authpane .input-group{background:rgba(255,255,255,.88);border-color:var(--border)} html.pl-light .pl-authpane .input-group-text{background:transparent !important} html.pl-light .pl-authpane .input-group .form-control{background:transparent !important} html.pl-light .pl-authpane .form-control{background:rgba(255,255,255,.9) !important} html.pl-light .pl-authpane .input-group .btn-reveal-pw:hover{background:rgba(2,132,199,.07) !important} html.pl-light .pl-authpane .btn-block,html.pl-light .pl-authpane #login{box-shadow:0 10px 30px -10px rgba(14,165,233,.5)} html.pl-light #googleLoginBtn,html.pl-light #magicLoginToggle{background:#fff !important;color:var(--text) !important} html.pl-light #googleLoginBtn:hover,html.pl-light #magicLoginToggle:hover{background:var(--surface-2) !important;color:var(--brand-2) !important} html.pl-light #magicLoginForm input{background:#fff !important} html.pl-light #registration .form-control,html.pl-light #registration .field,html.pl-light #registration select,html.pl-light #registration input[type=text],html.pl-light #registration input[type=email],html.pl-light #registration input[type=tel],html.pl-light #registration input[type=password]{background:#fff !important} html.pl-light #registration input[name=marketingoptin],html.pl-light #registration .accepttos{background:#fff} html.pl-light #order-standard_cart input.form-control,html.pl-light #order-standard_cart input.field,html.pl-light #order-standard_cart select,html.pl-light #order-standard_cart .form-control{background:#fff !important} html.pl-light .pl-authpane .btn-reveal-pw{background:rgba(2,132,199,.06) !important;border-color:var(--border) !important;color:var(--text-2) !important} html.pl-light .pl-authpane .btn-reveal-pw:hover{background:rgba(2,132,199,.12) !important;color:var(--brand-2) !important} /* ---------- SIDEBAR ---------- */ html.pl-light .pl-brand{color:#08182a} html.pl-light .pl-brand .mk{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff} html.pl-light .pl-nav a.active{background:linear-gradient(90deg,rgba(14,165,233,.14),var(--surface-3) 60%);color:var(--brand-2)} html.pl-light .pl-nav a .pl-badge{color:#fff} html.pl-light .pl-side-user .av{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff} html.pl-light .pl-side-user .out:hover{color:var(--brand-2)} /* ---------- TOPBAR ---------- */ html.pl-light .pl-icbtn:hover{color:var(--brand-2)} html.pl-light .pl-avatar{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff} /* ---------- GLOBAL COMPONENTS ---------- */ html.pl-light .table td a,html.pl-light .table-list td a{color:var(--brand-2) !important} html.pl-light .btn-primary:hover,html.pl-light .btn-info:hover{color:#fff !important} html.pl-light .btn-default:hover,html.pl-light .btn-secondary:hover{color:var(--brand-2) !important} html.pl-light .btn-success{color:#fff !important} html.pl-light .btn-danger{color:#fff !important} html.pl-light .form-control:focus{color:var(--text) !important} html.pl-light input:-webkit-autofill,html.pl-light input:-webkit-autofill:hover,html.pl-light input:-webkit-autofill:focus,html.pl-light input:-webkit-autofill:active,html.pl-light textarea:-webkit-autofill,html.pl-light select:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset !important; -webkit-text-fill-color:var(--text) !important;caret-color:var(--text) !important} html.pl-light .alert-success{color:#065f46 !important;border-color:rgba(5,150,105,.3) !important} html.pl-light .alert-danger{color:#9f1239 !important;border-color:rgba(225,29,72,.3) !important} html.pl-light .alert-warning{color:#92400e !important;border-color:rgba(180,83,9,.3) !important} html.pl-light .alert-info{color:#075985 !important;border-color:rgba(2,132,199,.3) !important} html.pl-light .badge-success,html.pl-light .label-success{color:#047857 !important} html.pl-light .badge-danger,html.pl-light .label-danger{color:#be123c !important} html.pl-light .badge-warning,html.pl-light .label-warning{color:#b45309 !important} html.pl-light .badge-info,html.pl-light .label-info,html.pl-light .badge-primary{color:#0369a1 !important} html.pl-light .nav-tabs .nav-link.active{color:var(--brand-2)} html.pl-light .modal .close:hover,html.pl-light .alert:not(.verification-banner) .close:hover{color:var(--text) !important} html.pl-light .dropdown-item:hover{color:var(--brand-2) !important} html.pl-light .dataTables_paginate .paginate_button:hover,html.pl-light .page-link:hover{color:var(--brand-2) !important} html.pl-light .status-active,html.pl-light .status-paid,html.pl-light .label-success{color:#047857 !important} html.pl-light .status-pending,html.pl-light .status-unpaid{color:#0369a1 !important} html.pl-light .status-suspended,html.pl-light .status-cancelled,html.pl-light .status-terminated,html.pl-light .status-overdue{color:#be123c !important} html.pl-light .verification-banner,html.pl-light .verification-banner.email-verification{border:1px solid rgba(180,83,9,.28) !important} html.pl-light .verification-banner .close:hover{color:var(--text) !important} html.pl-light .pl-login-logo .mk{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff} /* ---------- DASHBOARD / CARDS ---------- */ html.pl-light .pl-welcome{ background:linear-gradient(115deg,rgba(14,165,233,.12),rgba(2,132,199,.04) 42%,transparent 68%),var(--surface)} html.pl-light .pl-welcome-art svg{filter:drop-shadow(0 6px 20px rgba(14,165,233,.22))} html.pl-light .pl-stat::after{background:radial-gradient(circle,rgba(14,165,233,.10),transparent 70%)} html.pl-light .pl-chip.blue{color:#0369a1} html.pl-light .pl-chip.green{color:#047857} html.pl-light .pl-chip.amber{color:#b45309} html.pl-light .pl-chip.red{color:#be123c} html.pl-light .pl-srv-ic{background:rgba(14,165,233,.10);border:1px solid rgba(14,165,233,.22)} html.pl-light .pl-pill.on{color:#047857;background:var(--green-bg)} html.pl-light .pl-pill.pend{color:#0369a1;background:var(--blue-bg)} html.pl-light .pl-pill.off{color:var(--text-2);background:var(--surface-3)} html.pl-light .pl-b:hover{color:var(--brand-2)} html.pl-light .pl-b.primary:hover{color:#fff} html.pl-light .pl-svc:hover .pl-b.primary{color:#fff} html.pl-light .pl-stat:hover,html.pl-light .pl-svc:hover,html.pl-light .pl-srv:hover{border-color:rgba(14,165,233,.4) !important} /* ---------- PRELOADER ---------- */ html.pl-light #plLoader{ background:radial-gradient(620px 420px at 50% 42%,rgba(14,165,233,.10),transparent 60%),var(--bg)} html.pl-light .pl-load-mark::before{background:radial-gradient(circle,rgba(14,165,233,.28),transparent 62%)} html.pl-light .pl-load-mark img{filter:drop-shadow(0 8px 22px rgba(14,165,233,.35))} html.pl-light .pl-load-txt{ background:linear-gradient(90deg,#0284c7 0%,#0ea5e9 50%,#0284c7 100%);background-size:200% 100%; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} html.pl-light .pl-load-bar{background:rgba(2,132,199,.14)} html.pl-light .pl-load-bar i{background:linear-gradient(90deg,#0284c7,#38bdf8);box-shadow:0 0 10px rgba(14,165,233,.5)} /* mobile sidebar scrim — slate-tinted for light */ html.pl-light body.pl-side-open::before{background:rgba(8,24,42,.42)} /* light-mode depth: cards must lift off the pale page bg */ html.pl-light .card,html.pl-light .panel,html.pl-light .pl-srv,html.pl-light .pl-stat, html.pl-light .pl-welcome,html.pl-light #order-standard_cart .pl-plan,html.pl-light .pl-authpane .card{ box-shadow:0 6px 20px -8px rgba(8,24,42,.14),0 1px 3px rgba(8,24,42,.06) !important} html.pl-light #order-standard_cart .pl-plan,html.pl-light .pl-srv,html.pl-light .pl-stat{border-color:rgba(2,132,199,.20) !important} html.pl-light #order-standard_cart .pl-plan::after,html.pl-light .pl-stat::after{background:radial-gradient(circle,rgba(14,165,233,.08),transparent 70%)} html.pl-light #order-standard_cart .cart-sidebar .panel,html.pl-light #order-standard_cart .cart-sidebar .list-group{box-shadow:0 6px 20px -8px rgba(8,24,42,.14) !important} /* invoice page — light-mode polish for hardcoded status colors */ html.pl-light .pl-invoice-body{background:var(--bg) !important} html.pl-light .pl-inv-status.status-unpaid,html.pl-light .pl-inv-status.status-collections,html.pl-light .invoice-container .invoice-status .unpaid{color:#be123c !important;background:rgba(225,29,72,.1)} html.pl-light .pl-inv-status.status-paid,html.pl-light .invoice-container .invoice-status .paid{color:#047857 !important;background:rgba(5,150,105,.1)} html.pl-light .pl-inv-hero,html.pl-light .pl-inv-box,html.pl-light .pl-inv-items,html.pl-light .pl-inv-ledger{box-shadow:0 6px 20px -8px rgba(8,24,42,.12) !important} html.pl-light .pl-inv-btn:hover{color:var(--brand-2) !important} /* ---------- THEME TOGGLE BUTTON (sun/moon) ---------- */ #plThemeToggle .sun{display:none} #plThemeToggle .moon{display:inline-flex} html.pl-light #plThemeToggle .sun{display:inline-flex} html.pl-light #plThemeToggle .moon{display:none} /* logo legibility on light bg: deepen the sky blue slightly */ html.pl-light .pl-brand img,html.pl-light .pl-login-logo img,html.pl-light .pl-inv-hero-l img,html.pl-light .pl-load-mark img{filter:brightness(.82) saturate(1.28)} /* ---------- SUPPORT TICKET reply + secondary buttons — light-mode polish ---------- */ /* message editor: a clean WHITE compose box, not a blue block */ html.pl-light .CodeMirror{background:#fff !important;color:var(--text) !important;border-color:var(--border) !important} html.pl-light .editor-toolbar{background:var(--surface-2) !important;border-color:var(--border) !important} html.pl-light .editor-toolbar button{color:var(--text-2) !important} html.pl-light .editor-toolbar button:hover,html.pl-light .editor-toolbar button.active{background:#fff !important;color:var(--brand-2) !important} html.pl-light .editor-preview,html.pl-light .editor-preview-side{background:#fff !important} html.pl-light .ticket-reply .posted-by{background:var(--surface-2) !important;border-color:var(--border-soft) !important} /* attachment "Choose file" + Browse button — defined, not washed out */ html.pl-light .custom-file-label{background:#fff !important;border-color:var(--border) !important;color:var(--text-2) !important} html.pl-light .custom-file-label::after{background:var(--surface-3) !important;color:var(--brand-2) !important;border-left:1px solid var(--border) !important} /* secondary / default buttons (Cancel, Add More, Browse) — distinct white buttons */ html.pl-light .btn-default,html.pl-light .btn-secondary,html.pl-light .btn-outline-secondary,html.pl-light .input-group-append .btn{background:#fff !important;border:1px solid var(--border) !important;color:var(--text-2) !important;box-shadow:0 1px 2px rgba(8,24,42,.06)} html.pl-light .btn-default:hover,html.pl-light .btn-secondary:hover,html.pl-light .btn-outline-secondary:hover,html.pl-light .input-group-append .btn:hover{background:var(--surface-2) !important;color:var(--brand-2) !important;border-color:rgba(2,132,199,.4) !important}