/* ========================================= InnoviaTech — WHMCS Custom Template ========================================= All colors are defined as CSS variables in :root. To create a light theme, override the variables inside a [data-theme="light"] selector. ========================================= */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap'); /* ═══════════════════════════════════════ DESIGN TOKENS (CSS Variables) ═══════════════════════════════════════ */ :root { /* Backgrounds */ --bg: #0b0f1a; --surface: #111827; --surface2: #1a2236; /* Brand / Accent */ --blue: #3b82f6; --blue-light: #60a5fa; --blue-dim: rgba(59, 130, 246, .12); --blue-hover: #2563eb; --blue-focus-ring: rgba(59, 130, 246, .1); --blue-border-hover: rgba(96, 165, 250, .3); --blue-border-hover-lg: rgba(96, 165, 250, .4); /* Text */ --text: #f1f5f9; --muted: #64748b; --subtle: #94a3b8; --white: #ffffff; /* Borders */ --border: rgba(255, 255, 255, .06); /* Status */ --status-success: #22c55e; --status-success-bg: rgba(34, 197, 94, .1); --status-success-border: rgba(34, 197, 94, .3); --status-success-text: #86efac; --status-danger: #ef4444; --status-warning: #f59e0b; --status-warning-text: #000000; --status-info: #06b6d4; --status-open: #5cb85c; --status-closed: #d9534f; /* Shadows */ --shadow-sm: rgba(0, 0, 0, .08); --shadow-md: rgba(0, 0, 0, .15); --shadow-lg: rgba(0, 0, 0, .5); --shadow-xl: rgba(0, 0, 0, .6); --shadow-modal-backdrop: rgba(0, 0, 0, .75); /* Overlays */ --overlay-bg: rgba(11, 15, 26, .85); /* Scrollbar */ --scrollbar-thumb: rgba(255, 255, 255, .1); --scrollbar-thumb-hover: rgba(255, 255, 255, .2); /* Misc */ --btn-default-hover: #286090; --btn-admin: #ef4444; --pagination-hover: #269abc; /* Navigation */ --nav-bg: rgba(11, 15, 26, 0.85); --featured-bg: linear-gradient(160deg, #111827 0%, #0f1d35 100%); /* Layout */ --radius: 8px; --max-w: 1200px; } /* ═══════════════════════════════════════ LIGHT THEME OVERRIDES Apply by setting data-theme="light" on or . Only variables that differ from the dark defaults are listed. ═══════════════════════════════════════ */ [data-theme="light"] { /* Backgrounds */ --bg: #f8fafc; --surface: #ffffff; --surface2: #e2e8f0; /* Brand / Accent — slightly darker blue for light bg contrast */ --blue: #2563eb; --blue-light: #3b82f6; --blue-dim: rgba(37, 99, 235, .1); --blue-hover: #1d4ed8; --blue-focus-ring: rgba(37, 99, 235, .12); --blue-border-hover: rgba(59, 130, 246, .4); --blue-border-hover-lg: rgba(59, 130, 246, .55); /* Text */ --text: #0f172a; --muted: #64748b; --subtle: #475569; /* --white stays #ffffff in both themes */ /* Borders */ --border: rgba(15, 23, 42, .1); /* Navigation */ --nav-bg: rgba(255, 255, 255, 0.85); --featured-bg: linear-gradient(160deg, #ffffff 0%, #f0f4f8 100%); /* Overlays & Scrollbar */ --overlay-bg: rgba(248, 250, 252, .92); --scrollbar-thumb: rgba(0, 0, 0, .12); --scrollbar-thumb-hover: rgba(0, 0, 0, .22); /* Shadows — softer on light backgrounds */ --shadow-sm: rgba(0, 0, 0, .05); --shadow-md: rgba(0, 0, 0, .09); --shadow-lg: rgba(0, 0, 0, .18); --shadow-xl: rgba(0, 0, 0, .22); --shadow-modal-backdrop: rgba(0, 0, 0, .5); /* Misc */ --btn-default-hover: #1d4ed8; --pagination-hover: #1e40af; /* Status colours intentionally unchanged — they read fine on both themes */ } /* ═══════════════════════════════════════ BASE RESETS ═══════════════════════════════════════ */ body, h1, h2, h3, h4, h5, h6, p, a, span, input, button { font-family: 'Outfit', sans-serif !important; } .glyphicon { font-family: "Glyphicons Halflings" !important; } body { background: var(--bg) !important; color: var(--text) !important; line-height: 1.6; margin: 0; padding: 0; transition: background-color 0.3s ease, color 0.3s ease; } a { text-decoration: none !important; transition: color .15s; } a:focus{ outline:none; } input:focus { border: 1px solid var(--blue); } hr { border-color: var(--border) !important; } /* ═══════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ═══════════════════════════════════════ BUTTONS ═══════════════════════════════════════ */ .btn-info { background-color: var(--blue); } .btn-default { background-color: var(--blue); color: var(--white); border: none; } .btn-default:hover { background-color: var(--btn-default-hover); color: var(--white); } .it-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; border: none; line-height: 1; } .it-btn--primary { background: var(--blue); color: var(--white) !important; } .it-btn--primary:hover { background: var(--blue-hover); transform: translateY(-1px); } .it-btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--subtle) !important; } .it-btn--ghost:hover { border-color: var(--blue); color: var(--text) !important; } .it-btn--admin { background: var(--btn-admin); color: var(--white) !important; border-radius: 50%; padding: 8px; width: 32px; height: 32px; } #btnShowSidebar { background-color: var(--blue); color: var(--white); border: none; } #btnShowSidebar:focus { outline:none; } /* ═══════════════════════════════════════ LABELS & BADGES ═══════════════════════════════════════ */ .label-primary, .badge { background: var(--blue) !important; color: var(--white) !important; border-radius: 12px !important; font-weight: 600; padding: 3px 8px; font-size: 10px; } .label-success { background: var(--status-success) !important; border-radius: 12px !important; } .label-danger { background: var(--status-danger) !important; border-radius: 12px !important; } .label-warning { background: var(--status-warning) !important; color: var(--status-warning-text) !important; border-radius: 12px !important; } .label-info { background: var(--status-info) !important; border-radius: 12px !important; } .it-badge { background: var(--blue); color: var(--white); font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 4px; } /* ═══════════════════════════════════════ TOPBAR ═══════════════════════════════════════ */ .it-topbar { background: var(--bg); padding: 12px 24px; position: relative; z-index: 101; /* Ensure dropdowns float over the navbar */ } .it-topbar__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .it-logo img { height: 36px; width: auto; } .it-topnav { display: flex; align-items: center; gap: 16px; } .it-topnav__link { color: var(--subtle) !important; font-size: 13px; font-weight: 500; } .it-topnav__link:hover { color: var(--text) !important; } @media (max-width: 768px) { .it-topbar { padding: 8px 12px; } .it-topbar__inner { flex-direction: row; flex-wrap: nowrap; gap: 8px; justify-content: space-between; } .it-logo img { height: 24px; /* Shrink logo slightly */ } .it-topnav { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; width: auto; } .it-topnav__link { font-size: 11px; /* Shrink text links */ } .view-cart-btn { padding: 6px 10px; border-radius: 50%; /* Make it round */ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .view-cart-btn i { margin: 0 !important; font-size: 13px; } .view-cart-btn .cart-text { display: none; /* Hide text, show only icon */ margin-left:5px !important; } .theme-toggle { width: 32px; height: 32px; font-size: 14px; padding: 0; } .it-btn--admin { width: 32px; height: 32px; padding: 0; } } /* ═══════════════════════════════════════ NAVBAR ═══════════════════════════════════════ */ .it-navbar { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; padding: 0 24px; } .it-navbar__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; position: relative; min-height: 54px; } .it-navbar__collapse { display: flex; align-items: center; width: 100%; } .it-navbar__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; } .it-navbar__links > li > a { color: var(--subtle) !important; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius); display: block; } .it-navbar__links > li > a:hover, .it-navbar__links > li.active > a, .it-navbar__links > li.open > a { color: var(--text) !important; background: var(--surface2); } .navbar-cart-item { margin-left: auto; } .navbar-cart-item .navbar-cart-btn > i ,.navbar-cart-item .navbar-cart-btn > span{ color:var(--white); } .navbar-cart-btn { display: inline-flex !important; align-items: center; gap: 6px; background: var(--blue) !important; color: var(--white) !important; border-radius: var(--radius); padding: 8px 16px !important; font-weight: 600; } .navbar-cart-btn:hover { background: var(--blue-hover) !important; color: var(--white) !important; } /* Dropdown */ .dropdown-menu { background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: 0 10px 30px var(--shadow-lg) !important; padding: 6px 0 !important; margin-top: 4px !important; } .dropdown-menu > li > a { color: var(--subtle) !important; font-size: 13px; padding: 8px 16px !important; } .dropdown-menu > li > a:hover { color: var(--text) !important; background: var(--blue-dim) !important; } .dropdown-menu .nav-divider, .dropdown-menu .divider { height: 1px; margin: 6px 0; overflow: hidden; background-color: var(--border); border: none; } /* Mobile Toggle */ .it-navbar__toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; margin-left: auto; position: relative; z-index: 1050; } .it-navbar__toggle span { display: block; width: 22px; height: 2px; background: var(--subtle); margin: 5px 0; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Transform to X when opened */ .it-navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .it-navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .it-navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 991px) { .it-topbar__inner { flex-direction: row; justify-content: space-between; } .it-topnav { flex-wrap: nowrap; } .it-navbar__inner { flex-wrap: wrap; /* Allows collapse menu to drop below the button securely */ padding: 8px 0; } .it-navbar__toggle { display: block; margin-right: 0; } .it-navbar__collapse { flex-direction: column; align-items: center; width: 100%; padding: 16px 0; display: none; } .it-navbar__collapse.in, .it-navbar__collapse.show { display: flex !important; overflow: visible !important; } .it-navbar__links { flex-direction: column; align-items: center; width: 100%; } .it-navbar__links > li { width: 100%; text-align: center; position: relative; /* Crucial for absolute dropdowns below it */ margin-left: 0 !important; /* Reset auto margins */ } .navbar-cart-btn { justify-content: center; } .dropdown-menu { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; text-align: center; width: 75%; /* Reduced width to make it a bit smaller */ min-width: 200px; /* Ensure it doesn't get too narrow on tiny screens */ max-width: 320px; /* Set a maximum width */ z-index: 1050 !important; box-shadow: 0 16px 40px rgba(0,0,0,0.4) !important; } .panel-actions > .list-group .list-group-item { display: flow !important; border: none !important; text-align: left; margin: none; } .panel-actions > .list-group { padding: 0; overflow-x: hidden; } } /* ═══════════════════════════════════════ SIDEBAR (shared rules) Targets: .card-sidebar, .panel.panel-sidebar, .sidebar-collapsed .panel/card, .panel.hidden-lg, .panel.hidden-md ═══════════════════════════════════════ */ /* --- Panel / Card Base --- */ .card-sidebar, .panel.panel-sidebar, .sidebar-collapsed .panel, .sidebar-collapsed .card, .panel.hidden-lg, .panel.hidden-md { border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 12px var(--shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; } /* --- Hover on full-sidebar panels only (not mobile/collapsed variants) --- */ .card-sidebar:hover, .panel.panel-sidebar:hover { box-shadow: 0 4px 20px var(--shadow-md); border-color: var(--blue-border-hover); } /* --- Panel / Card Header --- */ .card-sidebar .panel-heading, .card-sidebar .card-header, .panel.panel-sidebar .panel-heading, .sidebar-collapsed .panel-heading, .sidebar-collapsed .card-header, .panel.hidden-lg .panel-heading, .panel.hidden-md .panel-heading { background: var(--surface2); border-bottom: 2px solid var(--blue); padding: 14px 18px; border-radius: 0; } /* --- Panel Title --- */ .card-sidebar .panel-title, .panel.panel-sidebar .panel-title, .sidebar-collapsed .panel-title, .panel.hidden-lg .panel-title, .panel.hidden-md .panel-title { color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: 8px; } /* --- Icon in title --- */ .card-sidebar .panel-title i:not(.panel-minimise):not(.card-minimise), .panel.panel-sidebar .panel-title i:not(.panel-minimise) { opacity: 0.7; font-size: 13px; color: var(--blue-light); } /* --- Collapse chevron --- */ .card-sidebar .panel-minimise, .card-sidebar .card-minimise, .panel.panel-sidebar .panel-minimise { color: var(--muted); font-size: 11px; cursor: pointer; transition: color .2s ease, transform .2s ease; margin-left: auto; float: right; } .card-sidebar .panel-minimise:hover, .card-sidebar .card-minimise:hover, .panel.panel-sidebar .panel-minimise:hover { color: var(--text); } .card-sidebar .panel-minimise.minimised, .card-sidebar .card-minimise.minimised, .panel.panel-sidebar .panel-minimise.minimised { transform: rotate(180deg); } /* --- Badge in header --- */ .card-sidebar .panel-title .badge, .panel.panel-sidebar .panel-title .badge { background: var(--blue); color: var(--white); font-size: 10px; border-radius: 10px; padding: 2px 7px; font-weight: 600; } /* --- Panel / Card Body --- */ .card-sidebar .panel-body, .card-sidebar .card-body, .panel.panel-sidebar .panel-body { padding: 0; background: var(--surface); } .sidebar-collapsed .panel-body, .sidebar-collapsed .card-body, .panel.hidden-lg .panel-body, .panel.hidden-md .panel-body { padding: 12px 14px; background: var(--surface); } /* --- List Group --- */ .card-sidebar .list-group, .panel.panel-sidebar .list-group { margin-bottom: 0; border-top: none; border-radius: 0; } .card-sidebar .list-group-item, .panel.panel-sidebar .list-group-item { border: none; border-bottom: 1px solid var(--border); border-radius: 0 !important; padding: 11px 18px; font-size: 13.5px; color: var(--subtle); background: transparent; transition: all .2s ease; /*display: flex;*/ align-items: center; gap: 10px; text-decoration: none; width: 100%; } .card-sidebar .list-group-item:last-child, .panel.panel-sidebar .list-group-item:last-child { border-bottom: none; } .card-sidebar .list-group-item i, .panel.panel-sidebar .list-group-item i { color: var(--muted); font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; transition: color .2s ease; } /* --- Hover state --- */ .card-sidebar a.list-group-item:hover, .card-sidebar a.list-group-item-action:hover, .panel.panel-sidebar a.list-group-item:hover { background: var(--surface2); color: var(--text); text-decoration: none; } .card-sidebar a.list-group-item:hover i, .panel.panel-sidebar a.list-group-item:hover i { color: var(--blue-light); } /* --- Active state --- */ .card-sidebar a.list-group-item.active, .card-sidebar a.list-group-item.active:focus, .card-sidebar a.list-group-item.active:hover, .panel.panel-sidebar a.list-group-item.active, .panel.panel-sidebar a.list-group-item.active:focus, .panel.panel-sidebar a.list-group-item.active:hover { background: var(--surface2); outline: none !important; border-left: 3px solid var(--blue) !important; border-bottom-color: var(--border); color: var(--text); font-weight: 600; padding-left: 15px; } .card-sidebar a.list-group-item.active i, .card-sidebar a.list-group-item.active:hover i, .panel.panel-sidebar a.list-group-item.active i, .panel.panel-sidebar a.list-group-item.active:hover i { color: var(--blue); } /* --- Disabled state --- */ .card-sidebar .list-group-item.disabled, .card-sidebar .list-group-item.disabled:hover { color: var(--muted); background: transparent; cursor: not-allowed; opacity: 0.5; } /* --- Badge on list items --- */ .card-sidebar .list-group-item .badge, .panel.panel-sidebar .list-group-item .badge { margin-left: auto; background: var(--surface2); color: var(--subtle); font-weight: 600; font-size: 11px; border-radius: 10px; padding: 2px 7px; border: 1px solid var(--border); float: right; } .card-sidebar a.list-group-item.active .badge, .panel.panel-sidebar a.list-group-item.active .badge { background: var(--blue); color: var(--white); border-color: var(--blue); } /* --- Panel Footer --- */ .card-sidebar .panel-footer, .card-sidebar .card-footer, .panel.panel-sidebar .panel-footer, .panel-footer { background: var(--surface2); border-top: 1px solid var(--border); border: none; padding: 10px 16px; font-size: 12px; color: var(--muted); } /* --- Collapsed sidebar form controls --- */ .sidebar-collapsed .form-control, .sidebar-collapsed .custom-select, .panel.hidden-lg .form-control, .panel.hidden-md .form-control { border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13.5px; background: var(--surface2); transition: all .2s ease; } .sidebar-collapsed .form-control:focus, .sidebar-collapsed .custom-select:focus, .panel.hidden-lg .form-control:focus, .panel.hidden-md .form-control:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-focus-ring); outline: none; } .sidebar-collapsed .pull-right.form-inline { margin-top: 8px; } .sidebar-collapsed .pull-right select.form-control { font-size: 12.5px; border-radius: 6px; padding: 5px 9px; height: auto; } /* --- Category selector (panel/card) --- */ .panel .custom-select, .card .custom-select { border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; color: var(--text) !important; background: var(--surface2); width: 100%; transition: all .2s ease; } .panel .custom-select option, .card .custom-select option { color: var(--muted); } .panel .custom-select:focus, .card .custom-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-focus-ring); outline: none; } /* --- Collapsible card body transition --- */ .collapsable-card-body { transition: max-height .3s ease, opacity .3s ease; overflow: hidden; } .collapsable-card-body.collapsed { max-height: 0; opacity: 0; pointer-events: none; } /* ═══════════════════════════════════════ HOME BANNER (Domain Search) ═══════════════════════════════════════ */ .it-banner { padding: 80px 24px 40px; text-align: center; } .it-banner__inner { max-width: 700px; margin: 0 auto; } .it-banner__title { font-size: 32px; font-weight: 700; margin-bottom: 32px; letter-spacing: -0.5px; } .it-search__wrap { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 40px; overflow: hidden; transition: border-color .2s, box-shadow .2s; } .it-search__wrap:focus-within { border-color: var(--blue-border-hover-lg); box-shadow: 0 0 0 3px var(--blue-focus-ring); } .it-search__input { flex: 1; background: transparent; border: none; color: var(--text); padding: 16px 24px; font-size: 15px; outline: none; } .it-search__input::placeholder { color: var(--muted); } .it-search__btns { display: flex; } .it-search__btn { border: none; padding: 0 28px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .it-search__btn--primary { background: var(--blue); color: var(--white); } .it-search__btn--primary:hover { background: var(--blue-hover); } .it-search__btn--ghost { background: transparent; color: var(--blue-light); border-left: 1px solid var(--border); } .it-search__btn--ghost:hover { background: var(--blue-dim); color: var(--text); } @media (max-width: 600px) { .it-banner { padding: 48px 24px 32px; } .it-banner__title { font-size: 24px; } .it-search__wrap { flex-direction: column; border-radius: 12px; } .it-search__btns { flex-direction: column; } .it-search__btn { width: 100%; padding: 14px; border-left: none; border-top: 1px solid var(--border); } } /* ═══════════════════════════════════════ SHORTCUTS ═══════════════════════════════════════ */ .it-shortcuts { padding: 0 24px 60px; } .it-shortcuts__inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; } .it-shortcuts__label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .it-shortcuts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .it-shortcuts__list a { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); padding: 10px 20px; border-radius: 30px; color: var(--subtle); font-size: 14px; font-weight: 500; } .it-shortcuts__list a:hover { background: var(--surface2); border-color: var(--blue-border-hover); color: var(--text); transform: translateY(-1px); } .it-shortcuts__list a i { color: var(--blue-light); font-size: 14px; } /* ═══════════════════════════════════════ MAIN CONTENT AREA ═══════════════════════════════════════ */ .it-main { padding: 40px 24px; max-width: var(--max-w); margin: 0 auto; } /* ═══════════════════════════════════════ WHMCS PANELS ═══════════════════════════════════════ */ .panel { background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: none !important; } .panel-heading { background: var(--surface2) !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; padding: 14px 20px !important; border-radius: var(--radius) var(--radius) 0 0 !important; } .panel-body { padding: 20px !important; } .panel-actions > .list-group .list-group-item:focus { border: none; } /* ═══════════════════════════════════════ FORMS ═══════════════════════════════════════ */ .form-control { background-color: var(--surface2) !important; border: 1px solid transparent !important; border-radius: 6px; color: var(--text) !important; box-shadow: none !important; height: auto !important; } .form-control:focus { border: 1px solid var(--blue) !important; } .form-control::placeholder { color: var(--text); } .marketing-email-optin { background-color: var(--surface2); } .bootstrap-switch-handle-off { background-color: var(--status-danger) !important; color: var(--white) !important; } /* Registration page */ div.header-lined h1 { color: var(--text); } #registration .sub-heading span { color: var(--white); background-color: var(--blue-light); } #registration .field, #registration .form-control { border: 1px solid transparent; color: var(--text); } #registration .field:focus, #registration .form-control:focus { border: 1px solid var(--blue); } #registration .prepend-icon .field { color: var(--text); background-color: var(--surface2); } #registration .prepend-icon .field::placeholder { color: var(--text); } #order-standard_cart label { color: var(--text) !important; } /* ═══════════════════════════════════════ CART & ORDER FLOW ═══════════════════════════════════════ */ #order-standard_cart .view-cart-tabs .nav-tabs { border: none; } #order-standard_cart .view-cart-tabs .nav-tabs > li > a { border: none; background-color: var(--blue) !important; color: var(--white); } #order-standard_cart .view-cart-tabs .tab-content { background-color: var(--surface) !important; border-radius: 6px; } #order-standard_cart .view-cart-items { border: none !important; } #order-standard_cart .view-cart-empty { background-color: var(--surface); } #order-standard_cart .view-cart-items-header { background-color: var(--surface2) !important; } #order-standard_cart .sub-heading span { background-color: var(--blue-light); color: var(--white) !important; } #order-standard_cart .view-cart-items .item { background-color: var(--surface) !important; } #order-standard_cart .empty-cart { margin-bottom: 10px; padding: 10px 0 15px 0; } #order-standard_cart .order-summary .btn-continue-shopping { color: var(--blue) !important; } #order-standard_cart .product-info { background-color: var(--surface) !important; border: none !important; border-radius: 8px !important; padding: 15px !important; } /* Cart Sidebar / Summary */ .secondary-cart-sidebar .order-summary { background-color: var(--surface2) !important; padding: 15px; border-radius: 8px; margin-bottom: 20px; } .secondary-cart-body > form { background-color: var(--surface); margin-bottom: 15px; border-radius: 8px; } .secondary-cart-body .product-info { background-color: var(--surface2) !important; border-radius: 8px; padding: 10px; margin-bottom: 20px; } .secondary-cart-body .product-title { border-bottom: 1px solid var(--muted); padding-bottom: 20px; } .secondary-cart-sidebar .order-summary .summary-container { background-color: var(--surface2) !important; } /* ═══════════════════════════════════════ DOMAIN SELECTION ═══════════════════════════════════════ */ .domain-selection-options .option, .domain-selection-options .option-selected { background-color: var(--surface2) !important; } .domain-selection-options .option-selected { border: 1px solid var(--blue); } .input-group-addon { border: none; color: var(--white); background-color: var(--blue) !important; } .tld-filters a.badge-success{ background-color:#5cb85c !important; } #owndomainsld, #transfersld, #registersld, #owndomaintld, #transfertld, #registertld { background: var(--surface) !important; } #inputDomain { border: 1px solid transparent; } #inputDomain:focus { border: 1px solid var(--blue); } /* ═══════════════════════════════════════ MARKDOWN EDITOR (Submit Ticket) ═══════════════════════════════════════ */ .md-editor > textarea.markdown-editor { border: none !important; background-color: var(--surface) !important; } .md-editor > textarea.markdown-editor:focus { border: none; } .md-editor > .btn-toolbar { background-color: var(--surface2) !important; } .md-editor .md-footer { background-color: var(--surface2) !important; } .md-editor { border: none; } .md-editor.active { border: 1px solid var(--blue) !important; } /* ═══════════════════════════════════════ TICKETS ═══════════════════════════════════════ */ .status-active, .status-completed, .status-open { color: var(--text); background-color: var(--status-open); } .status-closed { color: var(--text); background-color: var(--status-closed); } .status { border: none; } .ticket-reply .user { background-color: var(--surface); border-bottom: 1px solid var(--border); } .ticket-reply { background-color: var(--surface); border-radius: 8px; padding: 10px; border: none; } .ticket-reply:hover { border: 1px solid var(--blue); } #inputAddCcEmail { background-color: var(--surface) !important; } /* Ticket filter sidebar items */ #Primary_Sidebar-Ticket_List_Status_Filter-Open, #Primary_Sidebar-Ticket_List_Status_Filter-Customer-Reply, #Primary_Sidebar-Ticket_List_Status_Filter-Closed, #Primary_Sidebar-Ticket_List_Status_Filter-Answered { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-items: baseline; border-bottom: 1px solid var(--border) !important; margin: 0 !important; } .view-filter-btns > .list-group { flex-direction: column !important; } /* ═══════════════════════════════════════ ANNOUNCEMENTS ═══════════════════════════════════════ */ .announcement-single { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 24px !important; margin-bottom: 20px; } .announcement-single h3 { margin-top: 0 !important; font-size: 18px !important; } .announcement-single h3 a { color: var(--text) !important; } .announcement-single h3 a:hover { color: var(--blue-light) !important; } .announcement-single blockquote { border-left: 2px solid var(--blue-dim) !important; padding-left: 16px !important; margin: 12px 0 0 0 !important; font-size: 14px; color: var(--muted) !important; } .announcement-container { background-color: var(--surface); border-radius: 10px; padding: 20px; } /* ═══════════════════════════════════════ TABLES & DATATABLES ═══════════════════════════════════════ */ .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--surface); } .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--surface2); } .table > tbody > tr > th { border: solid 1px transparent; } .table > thead:first-child > tr:first-child > th { background-color: var(--surface2); } table.table-list tbody { border-bottom: 1px solid var(--border); } table.table-list tbody td { background-color: var(--surface2) !important; } .dataTables_wrapper .dataTables_length label .form-control { color: var(--text); background-color: var(--blue) !important; } .dataTables_wrapper .dataTables_info { background-color: var(--surface2); border-bottom: 2px solid var(--border); } .dataTables_wrapper table.table-list thead th { color: var(--text); } .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--muted) !important; } .dataTables_wrapper .dataTables_filter label .form-control { background-color: var(--surface) !important; background: url(../../../assets/img/search.png) var(--surface) no-repeat 10px 10px; background-size: 15px; } .dataTables_wrapper .dataTables_length { background-color: var(--surface2); } /* ═══════════════════════════════════════ PAGINATION ═══════════════════════════════════════ */ .pagination > li > a, .pagination > li > span { background: var(--blue) !important; border: none; color: var(--text) !important; margin: 0 1px; } .pagination > li > a:hover { background: var(--pagination-hover) !important; color: var(--text) !important; } .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover { border: 1px solid var(--blue) !important; } .pagination > .active > a, .pagination > .active > span { background: var(--blue) !important; border-color: var(--blue) !important; color: var(--text) !important; } /* ═══════════════════════════════════════ BREADCRUMBS ═══════════════════════════════════════ */ .breadcrumb { background: transparent !important; padding: 8px 0 !important; margin-bottom: 24px !important; font-size: 12px; } .breadcrumb > li { color: var(--muted); } .breadcrumb > li > a { color: var(--blue-light) !important; } .breadcrumb > .active { color: var(--subtle) !important; } /* ═══════════════════════════════════════ MODALS & OVERLAYS ═══════════════════════════════════════ */ .modal-content { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: 0 20px 60px var(--shadow-xl) !important; color: var(--text) !important; } .modal-backdrop { background: var(--shadow-modal-backdrop) !important; } .modal-header { border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important; } .modal-footer { border-top: 1px solid var(--border) !important; padding: 16px 20px !important; background: var(--surface) !important; border-radius: 0 0 var(--radius) var(--radius) !important; } .modal-title { color: var(--text) !important; font-size: 16px !important; font-weight: 600 !important; } .close { color: var(--muted) !important; opacity: 1 !important; text-shadow: none !important; font-size: 18px !important; } .close:hover { color: var(--text) !important; } #fullpage-overlay { background: var(--overlay-bg) !important; backdrop-filter: blur(4px); } #fullpage-overlay .msg { color: var(--subtle) !important; font-weight: 500; } /* ═══════════════════════════════════════ PRICING CARDS (product-recommendation) ═══════════════════════════════════════ */ .product-recommendations-container > .product-recommendations > p { display: none !important; } .product-recommendations { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 32px; } .product-recommendation { display: flex; flex-direction: column; background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; padding: 40px 32px !important; width: 100%; max-width: 340px; text-align: center; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important; margin: 0 !important; } .product-recommendation:hover { transform: translateY(-5px) !important; border-color: var(--blue) !important; box-shadow: 0 16px 32px var(--shadow-md) !important; } .product-recommendation .header { display: flex; flex-direction: column; border: none !important; padding: 0 !important; background: transparent !important; margin: 0 !important; } .product-recommendation .content { display: flex; flex-direction: column; order: 1; padding: 0 !important; } .product-recommendation .cta { display: flex; flex-direction: column; order: 3; margin: 0 !important; padding: 0 !important; } .product-recommendation .expander { display: none !important; } .product-recommendation .headline { font-size: 24px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 8px !important; white-space: normal !important; } .product-recommendation .tagline { color: var(--muted) !important; font-size: 14px !important; font-weight: 400 !important; margin-bottom: 24px !important; white-space: normal !important; line-height: 1.5; } .product-recommendation .cta .price { font-size: 40px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0 0 24px 0 !important; line-height: 1.1; display: flex; flex-direction: column; align-items: center; } .product-recommendation .cta .price .breakdown-price { display: block; } .product-recommendation .cta .price .setup-fee { font-size: 13px !important; color: var(--muted) !important; font-weight: 500 !important; margin-top: 4px; } .product-recommendation .body { order: 2; display: block !important; padding: 0 !important; border: none !important; background: transparent !important; margin: 0 0 24px 0 !important; text-align: left; color: var(--subtle) !important; font-size: 14px !important; line-height: 1.6; } .product-recommendation .body p { margin: 0 !important; } .product-recommendation .btn-add { width: 100% !important; padding: 14px 20px !important; border-radius: 25px !important; background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .2s, border-color .2s !important; box-shadow: none !important; margin: 0 !important; } .product-recommendation .btn-add:hover { background: var(--blue-dim) !important; border-color: var(--blue) !important; color: var(--text) !important; } .product-recommendation .btn-add .arrow { display: none !important; } .product-recommendation:hover .btn-add { background: var(--blue) !important; color: var(--white) !important; border-color: var(--blue) !important; } /* Product Added panel */ .product-added-panel { background: var(--status-success-bg) !important; border: 1px solid var(--status-success-border) !important; border-radius: 12px !important; padding: 20px !important; text-align: center; margin-bottom: 32px !important; } .product-added-panel .text-muted { color: var(--status-success-text) !important; font-weight: 600 !important; font-size: 16px; margin-bottom: 8px; display: block; } .product-added-panel .product-name { color: var(--text) !important; font-weight: 700; } .product-added-panel .product-price { color: var(--blue-light) !important; font-weight: 600; } @media (max-width: 768px) { .product-recommendation { max-width: 100%; padding: 32px 24px !important; } } /* ═══════════════════════════════════════ CLIENT HOME (Logged In) ═══════════════════════════════════════ */ .tiles .tile { background-color: var(--surface2); color: var(--text); } .tiles .tile:hover { background-color: var(--blue); } [data-theme="light"] .tiles .tile:hover .icon,.tiles .tile:hover .title,.tiles .tile:hover .stat{ color: var(--white); } .tile .icon, .tile .title, .tile .stat { color: var(--text); } /* User Management */ #invitePermissions { margin-bottom: 20px; border-radius: 8px; background-color: var(--surface); border: none; } #invitePermissions > label { margin: 2px; } .email-preferences-container { background-color: var(--surface2); padding: 10px 20px; border-radius: 8px; } /* Recent panel */ .recentpanel > a { background-color: var(--surface); border: none; } .recentpanel > a:hover{ background-color: var(--blue); } .recentpanel > a > span, .recentpanel > a > label{ color: var(--text); } .recentpanel > a:hover > span > small { color:var(--text); } [data-theme="light"] .recentpanel > a:hover > span { color:white; } [data-theme="light"] .recentpanel > a:hover > span > small { color:white; } .client-home-panels .panel > .list-group { border: none; padding: 4px; } [data-theme="light"] .client-home-panels .panel>.panel-heading .panel-title .btn:hover{ color:var(--white); } /* Addons Panel */ .panel-addon > .panel-price { padding:0px 20px 0px 20px; } .panel-addon > .panel-add{ padding:0px 20px 20px 20px; } .sub-heading > .primary-bg-color{ background-color:transparent; text-decoration: underline } /* Notifications */ .popover-user-notifications ul li.none { color: var(--subtle); } /* ═══════════════════════════════════════ FOOTER ═══════════════════════════════════════ */ .it-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 32px 24px; text-align: center; } .it-footer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; } .it-footer__top-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; color: var(--muted) !important; transition: background .15s, color .15s, transform .15s; } .it-footer__top-btn:hover { background: var(--surface2); color: var(--text) !important; transform: translateY(-2px); } .it-footer__copy { color: var(--muted); font-size: 13px; margin: 0; } /* ═══════════════════════════════════════ THEME TOGGLE BUTTON Wire up by placing a .theme-toggle button in your WHMCS header template. Toggle data-theme="light" / "dark" on via JS. ═══════════════════════════════════════ */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--subtle); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--blue-light); background: var(--blue-dim); transform: rotate(15deg); } /* ═══════════════════════════════════════ LIGHT THEME — ELEMENT-SPECIFIC OVERRIDES Anything that cannot be handled by variable swapping alone. ═══════════════════════════════════════ */ [data-theme="light"] .language-popover.popover.bottom>.arrow:after{ border-bottom-color:var(--text); } .language-popover.popover.bottom>.arrow:after{ border-bottom-color:var(--surface); } .language-popover{ background-color:var(--surface); } [data-theme="light"] .language-popover { background-color:var(--text); } /* Navbar backdrop on light theme */ [data-theme="light"] .it-navbar, [data-theme="light"] .it-topbar { background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Dropdown shadow is too dark on light bg */ [data-theme="light"] .dropdown-menu { box-shadow: 0 10px 30px var(--shadow-md) !important; } /* Sidebar card hover border is too subtle on light */ [data-theme="light"] .card-sidebar:hover, [data-theme="light"] .panel.panel-sidebar:hover { border-color: var(--blue-border-hover); } /* Orb decorative elements — reduce opacity on light bg */ [data-theme="light"] .orb { opacity: 0.3; } [data-theme="light"] .orb.small { opacity: 0.25; } /* ═══════════════════════════════════════ DARK THEME — ELEMENT-SPECIFIC OVERRIDES Applied when data-theme="dark" is explicit (not just :root default). ═══════════════════════════════════════ */ /* Featured card glow on dark */ [data-theme="dark"] .featured { animation: featuredGlowDark 3s ease-in-out infinite alternate; } @keyframes featuredGlowDark { from { box-shadow: 0 0 20px rgba(59, 130, 246, .2), 0 8px 32px rgba(0, 0, 0, .4); } to { box-shadow: 0 0 48px rgba(59, 130, 246, .45), 0 8px 32px rgba(0, 0, 0, .4); } } /* Stat number hover on dark gets full white + glow */ [data-theme="dark"] .stat-item:hover .num { color: var(--white); text-shadow: 0 0 20px rgba(96, 165, 250, .7); } /* Discount badge text on dark */ [data-theme="dark"] .discount-badge { color: #4ade80; } [data-theme="light"] #order-standard_cart .view-cart-items-header{ color:var(--text); } [data-theme="light"] #order-standard_cart .order-summary h2{ color:var(--text); } [data-theme="light"] .dataTables_wrapper .dataTables_info { color:var(--text); } [data-theme="light"] .dataTables_wrapper .dataTables_paginate .pagination>li>a{ color:var(--white) !important; } .view-cart-btn .cart-text { margin-left:5px !important; }