/* ============================================================================ Frontend Pro — premium style overlay (scoped, upgrade-safe) Scopes via classes: fp-store / fp-order / fp-ca / fp-rtl Designed against the real Hostting dynamic-store markup. ========================================================================== */ :root { --fp-accent:#4f46e5; --fp-accent-2:#6366f1; --fp-accent-d:#4338ca; --fp-ink:#0b1220; --fp-body:#334155; --fp-soft:#64748b; --fp-line:#e7e9ee; --fp-bg:#ffffff; --fp-bg-soft:#f7f8fb; --fp-ok:#16a34a; --fp-r:16px; --fp-r-sm:11px; --fp-sh:0 1px 2px rgba(11,18,32,.04),0 10px 30px -14px rgba(11,18,32,.18); --fp-sh-lg:0 24px 60px -22px rgba(11,18,32,.32); --fp-font:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial, "Noto Kufi Arabic","Noto Naskh Arabic",Tahoma,sans-serif; } .fp-on body,.fp-on input,.fp-on button,.fp-on select,.fp-on textarea{ font-family:var(--fp-font);-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .fp-on a{transition:color .15s ease} .fp-on :focus-visible{outline:2px solid var(--fp-accent);outline-offset:2px} /* =========================================================================== DYNAMIC STORE (/store/*) — premium redesign ========================================================================== */ .fp-store .dynamic-landing-page{ --primary-color:var(--fp-accent); --accent-color:var(--fp-accent-2); --gradient:linear-gradient(135deg,var(--fp-accent),var(--fp-accent-2)); color:var(--fp-body); font-family:var(--fp-font); } .fp-store .dynamic-landing-page h1, .fp-store .dynamic-landing-page h2, .fp-store .dynamic-landing-page h3{color:var(--fp-ink);} .fp-store section{padding:clamp(48px,7vw,96px) 20px;} .fp-store .background-light{background:var(--fp-bg-soft);} .fp-store .background-main{background:var(--fp-bg);} .fp-store .hero-content, .fp-store .pricing-container, .fp-store .features-table-container, .fp-store .showcase-container{max-width:1180px;margin:0 auto;} /* — Hero — */ .fp-store .hero-section{padding:clamp(56px,8vw,110px) 20px;} .fp-store .hero-section::before{ opacity:.06;background:var(--gradient); } .fp-store .hero-brand{gap:22px;} .fp-store .hero-logo-image{max-height:64px;width:auto;} .fp-store .hero-title{ font-size:clamp(30px,4.6vw,52px);font-weight:800; letter-spacing:-.025em;line-height:1.12;margin:0 0 14px; background:var(--gradient);-webkit-background-clip:text; background-clip:text;color:transparent; } .fp-store .hero-subtitle{ font-size:clamp(16px,1.6vw,20px);color:var(--fp-soft); max-width:680px;margin:0 auto;line-height:1.6; } .fp-store .hero-description{color:var(--fp-soft);max-width:640px;margin:14px auto 0;} .fp-store .hero-accent{ width:72px;height:5px;border-radius:99px;margin:26px auto 0; background:var(--gradient); } /* — Pricing cards — */ .fp-store .pricing-title, .fp-store .features-table-title, .fp-store .showcase-title{ font-size:clamp(25px,3.4vw,38px);font-weight:800; letter-spacing:-.02em;text-align:center;margin:0 0 12px; } .fp-store .pricing-subtitle, .fp-store .features-table-subtitle{ text-align:center;color:var(--fp-soft);font-size:17px; max-width:620px;margin:0 auto 52px;line-height:1.6; } .fp-store .pricing-grid{ display:grid;gap:26px;align-items:stretch; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); } .fp-store .pricing-card{ display:flex;flex-direction:column;background:#fff; border:1px solid var(--fp-line);border-radius:var(--fp-r); padding:34px 28px;box-shadow:var(--fp-sh);position:relative; transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease,border-color .22s ease; } .fp-store .pricing-card:hover{ transform:translateY(-8px);box-shadow:var(--fp-sh-lg); border-color:var(--fp-accent); } /* Make the 2nd card the visual hero (typical 3-tier hosting layout) */ .fp-store .pricing-grid .pricing-card:nth-child(2){ border:1.5px solid var(--fp-accent); box-shadow:0 0 0 4px rgba(79,70,229,.10),var(--fp-sh); } .fp-store .pricing-grid .pricing-card:nth-child(2)::before{ content:"RECOMMENDED";position:absolute;top:-12px;left:50%; transform:translateX(-50%);background:var(--gradient);color:#fff; font-size:11px;font-weight:800;letter-spacing:.12em; padding:6px 16px;border-radius:99px;white-space:nowrap; } .fp-store .pricing-header{ text-align:center;padding-bottom:20px; border-bottom:1px solid var(--fp-line);margin-bottom:20px; } .fp-store .plan-name{ font-size:14px;font-weight:700;text-transform:uppercase; letter-spacing:.14em;color:var(--fp-soft);margin:0 0 14px; } .fp-store .plan-price{display:flex;justify-content:center;align-items:baseline;gap:4px;} .fp-store .price-amount{ font-size:clamp(32px,3.6vw,44px);font-weight:800; color:var(--fp-ink);letter-spacing:-.02em; } .fp-store .plan-description{color:var(--fp-soft);font-size:14px;margin:14px 0 0;line-height:1.6;} .fp-store .plan-features{list-style:none;padding:0;margin:0 0 26px;flex:1;} .fp-store .feature-item{ display:flex;align-items:flex-start;gap:11px; padding:10px 0;font-size:14.5px;color:var(--fp-body); border-bottom:1px solid #f1f3f7; } .fp-store .feature-item:last-child{border-bottom:0;} .fp-store .feature-check,.fp-store .fa-check{color:var(--fp-ok);margin-top:2px;} .fp-store .feature-cross,.fp-store .fa-times{color:#cbd5e1;margin-top:2px;} .fp-store .plan-action{margin-top:auto;} .fp-store .plan-button, .fp-store .table-cta-button{ display:block;width:100%;cursor:pointer; background:var(--fp-accent);color:#fff;border:0; border-radius:var(--fp-r-sm);padding:14px 18px; font-size:15px;font-weight:700;letter-spacing:.01em; box-shadow:0 8px 20px -10px var(--fp-accent); transition:background .15s ease,transform .12s ease,box-shadow .2s ease; } .fp-store .plan-button:hover, .fp-store .table-cta-button:hover{ background:var(--fp-accent-d);transform:translateY(-2px); box-shadow:0 14px 26px -10px var(--fp-accent); } .fp-store .pricing-grid .pricing-card:nth-child(2) .plan-button{ background:var(--gradient); } /* — Showcase / product preview — */ .fp-store .showcase-container{ display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);align-items:center; } .fp-store .product-showcase--reverse .showcase-container{direction:rtl;} .fp-store .product-showcase--reverse .showcase-content{direction:ltr;} .fp-store .showcase-title{text-align:start;} .fp-store .showcase-subtitle{color:var(--fp-soft);font-size:18px;margin:0 0 16px;} .fp-store .showcase-description{color:var(--fp-body);line-height:1.7;} .fp-store .showcase-image img{ border-radius:var(--fp-r);box-shadow:var(--fp-sh-lg); } /* — Comparison table — */ .fp-store .table-wrapper{ overflow-x:auto;border:1px solid var(--fp-line); border-radius:var(--fp-r);box-shadow:var(--fp-sh);background:#fff; } .fp-store .comparison-table{width:100%;border-collapse:collapse;min-width:680px;} .fp-store .comparison-table th, .fp-store .comparison-table td{ padding:16px 18px;text-align:center; border-bottom:1px solid var(--fp-line); } .fp-store .comparison-table thead th{ background:var(--fp-ink);color:#fff;position:sticky;top:0; font-size:12px;text-transform:uppercase;letter-spacing:.05em; } .fp-store .product-name{margin:0;font-size:16px;font-weight:700;color:#fff;} .fp-store .feature-name{ text-align:start;font-weight:600;color:var(--fp-ink); background:var(--fp-bg-soft);position:sticky;left:0; } .fp-store .feature-row:hover td{background:rgba(79,70,229,.045);} .fp-store .comparison-table .feature-check{color:var(--fp-ok);} .fp-store .comparison-table .feature-cross{color:#cbd5e1;} .fp-store .service-price{font-size:22px;font-weight:800;color:var(--fp-ink);} .fp-store .price-row td,.fp-store .buy-row td{background:var(--fp-bg-soft);} /* =========================================================================== ORDER FORM + CART ========================================================================== */ .fp-order #products .product,.fp-order .order-summary, .fp-order .summary-container,.fp-order .panel,.fp-order .cart-card{ border:1px solid var(--fp-line)!important; border-radius:var(--fp-r)!important;box-shadow:var(--fp-sh); } .fp-order #products .product:hover{border-color:var(--fp-accent)!important;} .fp-order .ordersummary .total,.fp-order .order-summary .total, .fp-order .cartTotal{font-weight:800;color:var(--fp-ink);} .fp-order .btn-primary,.fp-order #btnCompleteProductConfig, .fp-order .checkout-button,.fp-order #checkout{ background:var(--fp-accent)!important;border-color:var(--fp-accent)!important; border-radius:var(--fp-r-sm)!important;font-weight:700!important; padding:11px 22px!important; } .fp-order .btn-primary:hover,.fp-order #checkout:hover{ background:var(--fp-accent-d)!important; } .fp-order input.form-control,.fp-order select.form-control{ border-radius:9px;border:1px solid var(--fp-line); } .fp-order input.form-control:focus,.fp-order select.form-control:focus{ border-color:var(--fp-accent);box-shadow:0 0 0 3px rgba(79,70,229,.15); } /* =========================================================================== CLIENT AREA ========================================================================== */ .fp-ca .panel,.fp-ca .card,.fp-ca .home-panels .panel, .fp-ca .client-home-panels .panel{ border:1px solid var(--fp-line);border-radius:var(--fp-r); box-shadow:var(--fp-sh);overflow:hidden; } .fp-ca .panel-heading,.fp-ca .card-header{font-weight:700;letter-spacing:-.01em;} .fp-ca .panel:hover{box-shadow:var(--fp-sh-lg);} .fp-ca .btn-primary,.fp-ca .primary-button{ background:var(--fp-accent);border-color:var(--fp-accent); border-radius:var(--fp-r-sm);font-weight:700; } .fp-ca .btn-primary:hover{background:var(--fp-accent-d);border-color:var(--fp-accent-d);} .fp-ca .table{border-radius:var(--fp-r-sm);overflow:hidden;} .fp-ca .table thead th{ background:var(--fp-bg-soft);border-bottom:2px solid var(--fp-line); text-transform:uppercase;font-size:12px;letter-spacing:.04em;color:var(--fp-soft); } .fp-ca .table tbody tr:hover td{background:rgba(79,70,229,.035);} .fp-ca .logincontainer,.fp-ca .register-container{ border:1px solid var(--fp-line);border-radius:var(--fp-r); box-shadow:var(--fp-sh);padding:8px; } .fp-ca a{color:var(--fp-accent);} .fp-ca a:hover{color:var(--fp-accent-d);} /* =========================================================================== GULF / RTL ========================================================================== */ html[dir="rtl"] .fp-store .feature-name, .fp-rtl .fp-store .feature-name{text-align:right;} html[dir="rtl"] .fp-store .feature-item, .fp-rtl .feature-item{flex-direction:row-reverse;} html[dir="rtl"] .fp-store .plan-price, .fp-rtl .plan-price{direction:ltr;} html[dir="rtl"] .fp-store .showcase-title, .fp-rtl .fp-store .showcase-title{text-align:right;} html[dir="rtl"] body,.fp-rtl body{ font-family:"Noto Kufi Arabic","Noto Naskh Arabic",Tahoma, "Segoe UI",var(--fp-font); } html[dir="rtl"] .fp-ca .table thead th, .fp-rtl .fp-ca .table thead th{text-align:right;} /* =========================================================================== Responsive + motion ========================================================================== */ @media (max-width:900px){ .fp-store .showcase-container{grid-template-columns:1fr;} .fp-store .product-showcase--reverse .showcase-container{direction:ltr;} } @media (max-width:768px){ .fp-store .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;} .fp-store .pricing-grid .pricing-card:nth-child(2){transform:none;} } @media (prefers-reduced-motion:reduce){ .fp-on *,.fp-store .pricing-card{transition:none!important;} } /* =========================================================================== Client-area list tables visible (Services / Invoices / Domains / Quotes…) WHMCS ships these s with `w-hidden` and the theme is meant to drop that class after DataTables initialises. On this install the reveal fails, so the table — with ALL its data — stays display:none while only the "Showing 1 to 1 of N" pager renders ("no data" symptom). Once DataTables has wrapped a table (.dataTables_wrapper exists) we force it visible. The pre-init raw table is NOT inside a wrapper, so it stays correctly hidden. ========================================================================== */ .dataTables_wrapper table.dataTable{display:table!important;} .dataTables_wrapper table.dataTable.w-hidden{display:table!important;} .dataTables_wrapper table.dataTable thead{display:table-header-group!important;} .dataTables_wrapper table.dataTable tbody{display:table-row-group!important;} .dataTables_wrapper table.dataTable tbody tr{display:table-row!important;}