/* ============================================================ HostingSaint — Design Fixes Overlay Loaded last in to override theme/custom.css safely. Each block is scoped to a specific issue documented inline. ============================================================ */ /* ─────────────────────────────────────────────────────────── 1. Cart "Order Summary" card — header was unreadable Root cause: .order-summary had bg:#666 but the H2 inside is transparent dark text. Result: dark-on-dark heading. Fix: transparent wrapper, light H2 strip with brand accent. ─────────────────────────────────────────────────────────── */ .order-summary { background: transparent !important; border: 1px solid #e8ecf0; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(42, 54, 63, 0.06); } .order-summary > h2, .order-summary .font-size-30 { background: #fff; color: #2a363f; font-size: 18px; font-weight: 600; margin: 0; padding: 14px 20px; border-bottom: 3px solid #f37649; } .order-summary .summary-container { background: #fff !important; padding: 16px 20px; } /* Total amount typography — was huge, now proportional */ .order-summary .summary-container .h2, .order-summary .summary-container h2, .order-summary [class*="font-size-3"]:not(h2) { font-size: 22px !important; line-height: 1.2; font-weight: 700; } .order-summary .btn-primary, .order-summary .btn-success, .order-summary [class*="checkout"] { width: 100%; padding: 12px 16px; font-weight: 600; margin-top: 8px; } /* ─────────────────────────────────────────────────────────── 2. Login — input-group focus border seam The prepended icon span keeps grey border while the input shows orange focus border, creating a half-bordered look. Fix: when input inside .input-group-merge is focused, propagate focus styling to siblings so the whole pill is one unit. ─────────────────────────────────────────────────────────── */ .input-group-merge { border-radius: 6px; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .input-group-merge:focus-within { box-shadow: 0 0 0 3px rgba(243, 118, 73, 0.15); border-radius: 6px; } .input-group-merge:focus-within .input-group-text, .input-group-merge:focus-within .form-control { border-color: #f37649 !important; } .input-group-merge:focus-within .form-control { box-shadow: none !important; /* avoid double glow */ } .input-group-merge .input-group-text { transition: border-color 0.15s ease; } /* ─────────────────────────────────────────────────────────── 3. Mobile tap targets — header nav links were 24px tall WCAG/Material guideline: minimum 44px touch target. ─────────────────────────────────────────────────────────── */ @media (max-width: 991.98px) { .header .navbar-nav > li > a, .header .navbar-nav .nav-link, .header .nav-link { min-height: 44px; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; } .header .navbar-nav .dropdown-item { min-height: 40px; padding-top: 10px; padding-bottom: 10px; } } /* ─────────────────────────────────────────────────────────── 4. Cart sidebar (Categories / Actions / Currency) On mobile it stacks above the cart content — push it below. On desktop, narrow it slightly so the cart body has room. ─────────────────────────────────────────────────────────── */ @media (min-width: 992px) { .cart .sidebar, .cart aside.sidebar, body.bodycontainer .sidebar { max-width: 240px; } } @media (max-width: 991.98px) { .cart .sidebar, .cart aside.sidebar { order: 2; margin-top: 24px; } .cart .primary-content, .cart main { order: 1; } } /* ─────────────────────────────────────────────────────────── 5. Configure product form — heading and Continue button were misaligned (heading tiny in left column, big orange button floating far right). Restore consistent layout. ─────────────────────────────────────────────────────────── */ .cart .header-lined { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid #e8ecf0; padding-bottom: 12px; margin-bottom: 18px; } .cart .header-lined h1, .cart .header-lined h2, .cart .header-lined .h2 { font-size: 22px; font-weight: 600; margin: 0; color: #2a363f; } .cart .pull-right .btn-primary, .cart .float-right .btn-primary { padding: 10px 22px; font-weight: 600; } /* ─────────────────────────────────────────────────────────── 6. Form controls site-wide — consistent height & padding Many inputs inherit Bootstrap defaults; this normalises. ─────────────────────────────────────────────────────────── */ .form-control, select.form-control, .custom-select { min-height: 42px; padding: 8px 14px; font-size: 14px; border-radius: 6px; border: 1px solid #d1d5db; background-color: #fff; } .form-control:focus, select.form-control:focus, .custom-select:focus { border-color: #f37649; box-shadow: 0 0 0 3px rgba(243, 118, 73, 0.15); outline: 0; } .form-control::placeholder { color: #9ca3af; } textarea.form-control { min-height: 96px; } /* Buttons — consistent rounded look + tap target */ .btn { min-height: 40px; border-radius: 6px; font-weight: 500; } .btn-sm { min-height: 32px; } .btn-primary { background-color: #f37649; border-color: #f37649; } .btn-primary:hover, .btn-primary:focus { background-color: #e6663a; border-color: #e6663a; } /* ─────────────────────────────────────────────────────────── 7. Sticky-header offset for in-page anchors Prevents anchored links from landing under the sticky navbar. ─────────────────────────────────────────────────────────── */ :root { --hs-header-h: 92px; } [id], h1, h2, h3, h4 { scroll-margin-top: calc(var(--hs-header-h) + 16px); } /* ─────────────────────────────────────────────────────────── 8. Empty cart "₹0.00 INR" — was 60px+, ugly. Cap it. ─────────────────────────────────────────────────────────── */ .order-summary .total, .order-summary .total-amount, .order-summary [class*="total"][class*="amount"] { font-size: 26px !important; font-weight: 700; line-height: 1.2; } /* ─────────────────────────────────────────────────────────── 9. Mobile-wide tweaks for cart/configure tables and panels ─────────────────────────────────────────────────────────── */ @media (max-width: 575.98px) { .cart .table-responsive { font-size: 13px; } .cart .panel, .cart .card { border-radius: 6px; } .cart .panel-heading, .cart .card-header { font-size: 14px; padding: 10px 12px; } .cart h1 { font-size: 20px; } .cart h2 { font-size: 18px; } .order-summary { margin-top: 24px; } } /* ─────────────────────────────────────────────────────────── 10. View Invoice page — mobile-friendly action buttons row The .inv-actions buttons were tiny and hard to tap on mobile. ─────────────────────────────────────────────────────────── */ @media (max-width: 575.98px) { .inv-actions { display: flex; flex-direction: column; gap: 8px; } .inv-actions .btn { width: 100%; margin-left: 0 !important; padding: 10px 16px; font-size: 14px; text-align: center; } .inv-meta { flex-direction: column; } .pay-section-grid .pay-row { display: block; } .pay-section-grid .pay-label, .pay-section-grid .pay-value { display: block; width: 100% !important; } .bank-grid { grid-template-columns: 1fr !important; } .bank-cell { border-right: none !important; } }