/** * WHMCS Twenty-One Theme — Awaken Global Custom Styles * * Installation: * Upload to: /home/benchm32/public_html/whmcs/templates/twenty-one/css/custom.css * Then add to /home/benchm32/public_html/whmcs/templates/twenty-one/header.tpl * inside : * * * Covers: store product pages, cart, checkout, order confirmation */ /* ── Variables ──────────────────────────────────────────────────────────────── */ :root { --ag-accent: #2563eb; --ag-accent-dk: #1d4ed8; --ag-accent-lt: #eff6ff; --ag-navy: #1a2744; --ag-navy-lt: #1e2d4d; --ag-blue-mid: #4a6fa5; --ag-text: #1e2d4d; --ag-text-muted: #64748b; --ag-border: #e2e8f0; --ag-bg: #ffffff; --ag-bg-subtle: #f8fafc; --ag-success: #16a34a; --ag-success-bg: #dcfce7; --ag-radius: 10px; --ag-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; } /* ── Base resets ────────────────────────────────────────────────────────────── */ body { font-family: var(--ag-font) !important; color: var(--ag-text) !important; background: var(--ag-bg-subtle) !important; } /* ── Navbar ─────────────────────────────────────────────────────────────────── */ .navbar, .navbar-default { background: var(--ag-navy) !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; } .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a { color: #e2e8f0 !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff !important; background: rgba(255,255,255,.08) !important; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover { color: #fff !important; background: var(--ag-accent) !important; } /* ── Page header / breadcrumb ───────────────────────────────────────────────── */ .page-header { background: var(--ag-navy) !important; color: #fff !important; padding: 2rem !important; border: none !important; margin-bottom: 0 !important; } .page-header h1, .page-header h2 { color: #fff !important; font-weight: 700 !important; font-size: 26px !important; } .breadcrumb { background: transparent !important; color: rgba(255,255,255,.6) !important; padding: .25rem 0 !important; } .breadcrumb > li + li::before { color: rgba(255,255,255,.4) !important; } .breadcrumb a { color: rgba(255,255,255,.8) !important; } .breadcrumb a:hover { color: #fff !important; } /* ── Product group / store listing ─────────────────────────────────────────── */ .product-overview-list .product-overview-item { background: var(--ag-bg) !important; border: 1px solid var(--ag-border) !important; border-radius: var(--ag-radius) !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; transition: box-shadow .2s, transform .2s !important; overflow: visible !important; } .product-overview-list .product-overview-item:hover { box-shadow: 0 4px 16px rgba(37,99,235,.12) !important; transform: translateY(-2px) !important; } .product-overview-item .product-name { font-size: 17px !important; font-weight: 700 !important; color: var(--ag-navy) !important; } .product-overview-item .product-price { font-size: 22px !important; font-weight: 800 !important; color: var(--ag-navy) !important; } .product-overview-item .price-then { font-size: 12px !important; color: var(--ag-text-muted) !important; } /* ── Universal Slider (product selection page) ──────────────────────────────── */ .slider-container { background: var(--ag-bg) !important; border: 1px solid var(--ag-border) !important; border-radius: var(--ag-radius) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; } .slider-label { color: var(--ag-navy) !important; font-weight: 600 !important; } .slider-price .price { color: var(--ag-navy) !important; font-weight: 800 !important; font-size: 28px !important; } input[type="range"] { accent-color: var(--ag-accent) !important; } /* ── Product features list ──────────────────────────────────────────────────── */ .product-features-list, .features-list { list-style: none !important; padding: 0 !important; } .product-features-list li, .features-list li { padding: .45rem 0 .45rem 1.6rem !important; position: relative !important; font-size: 14px !important; color: var(--ag-text) !important; border-bottom: 1px solid var(--ag-border) !important; } .product-features-list li:last-child, .features-list li:last-child { border-bottom: none !important; } .product-features-list li::before, .features-list li::before { content: "✓" !important; position: absolute !important; left: 0 !important; color: var(--ag-accent) !important; font-weight: 700 !important; } /* ── Buttons ────────────────────────────────────────────────────────────────── */ .btn-primary, .btn-success, .order-button, input[type="submit"].btn-primary { background: var(--ag-accent) !important; border-color: var(--ag-accent) !important; color: #fff !important; font-weight: 700 !important; border-radius: 8px !important; padding: 10px 24px !important; font-size: 14px !important; letter-spacing: .02em !important; transition: background .15s !important; } .btn-primary:hover, .btn-success:hover, .order-button:hover, input[type="submit"].btn-primary:hover { background: var(--ag-accent-dk) !important; border-color: var(--ag-accent-dk) !important; color: #fff !important; } .btn-default { border-color: var(--ag-border) !important; color: var(--ag-navy) !important; border-radius: 8px !important; } .btn-default:hover { background: var(--ag-bg-subtle) !important; border-color: #cbd5e1 !important; } /* ── Cart / order summary ────────────────────────────────────────────────────── */ .cart-items, .order-summary, .panel-default { background: var(--ag-bg) !important; border: 1px solid var(--ag-border) !important; border-radius: var(--ag-radius) !important; box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; } .panel-default > .panel-heading { background: var(--ag-navy) !important; color: #fff !important; border-radius: calc(var(--ag-radius) - 1px) calc(var(--ag-radius) - 1px) 0 0 !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: .04em !important; } .panel-default > .panel-heading a, .panel-default > .panel-heading .panel-title { color: #fff !important; } .cart-total, .order-total { font-weight: 800 !important; font-size: 18px !important; color: var(--ag-navy) !important; } .cart-items tbody tr:hover { background: var(--ag-bg-subtle) !important; } /* ── Cross-sells ────────────────────────────────────────────────────────────── */ .cross-sell-products, .crosssell-container { margin-top: 1.5rem !important; } .cross-sell-products .panel-heading, .crosssell-container .panel-heading { background: var(--ag-navy) !important; color: #fff !important; } .cross-sell-item, .crosssell-item { background: var(--ag-bg) !important; border: 1px solid var(--ag-border) !important; border-radius: var(--ag-radius) !important; padding: 1rem !important; transition: border-color .15s, box-shadow .15s !important; } .cross-sell-item:hover, .crosssell-item:hover { border-color: var(--ag-accent) !important; box-shadow: 0 2px 8px rgba(37,99,235,.1) !important; } .cross-sell-item .product-name, .crosssell-item .product-name { font-weight: 600 !important; color: var(--ag-navy) !important; font-size: 14px !important; } .cross-sell-item .product-price, .crosssell-item .product-price { color: var(--ag-accent) !important; font-weight: 700 !important; } /* ── Forms ───────────────────────────────────────────────────────────────────── */ .form-control { border: 1px solid var(--ag-border) !important; border-radius: 8px !important; color: var(--ag-text) !important; font-size: 14px !important; transition: border-color .15s, box-shadow .15s !important; } .form-control:focus { border-color: var(--ag-accent) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; outline: none !important; } .form-group label { font-weight: 600 !important; font-size: 13px !important; color: var(--ag-navy) !important; margin-bottom: .35rem !important; } /* ── Alerts ──────────────────────────────────────────────────────────────────── */ .alert-success { background: var(--ag-success-bg) !important; border-color: #86efac !important; color: #14532d !important; border-radius: var(--ag-radius) !important; } .alert-info { background: var(--ag-accent-lt) !important; border-color: #bfdbfe !important; color: var(--ag-navy) !important; border-radius: var(--ag-radius) !important; } .alert-danger { border-radius: var(--ag-radius) !important; } /* ── Steps / progress ────────────────────────────────────────────────────────── */ .order-progress, .checkout-steps { background: var(--ag-bg) !important; border-bottom: 1px solid var(--ag-border) !important; padding: .75rem 0 !important; } .order-progress .active, .checkout-steps .active { color: var(--ag-accent) !important; font-weight: 700 !important; } .order-progress .completed, .checkout-steps .completed { color: var(--ag-success) !important; } /* ── Footer ──────────────────────────────────────────────────────────────────── */ footer, .footer { background: var(--ag-navy) !important; color: rgba(255,255,255,.6) !important; border-top: none !important; } footer a, .footer a { color: rgba(255,255,255,.7) !important; } footer a:hover, .footer a:hover { color: #fff !important; } /* ── Responsive ──────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .page-header { padding: 1.25rem !important; } .page-header h1 { font-size: 20px !important; } .slider-price .price { font-size: 22px !important; } }