/** * store-modern.css * Enhances the School Store page to match the site's existing theme. * Uses site CSS variables: --thm-primary, --thm-hover, --thm-text, --thm-radius * Add LAST in after all other stylesheets. */ /* ── 1. Bootstrap 3 → 5 shims (fixes broken search bar & buttons) ─────── */ .input-group-addon { display: flex; align-items: center; padding: .375rem .75rem; background: #e9ecef; border: 1px solid #ced4da; border-right: 0; border-radius: 4px 0 0 4px; white-space: nowrap; color: #495057; } .input-group-btn { display: flex; align-items: stretch; flex: 0 0 auto; } .input-group-btn > .btn { border-radius: 0; } .input-group-btn:last-child > .btn { border-radius: 0 4px 4px 0; } .input-group-btn:first-child > .btn { border-radius: 4px 0 0 4px; } .input-group-btn + .input-group-btn > .btn { margin-left: -1px; } .btn-default { color: #343a40; background: #f8f9fa; border: 1px solid #ced4da; } .btn-default:hover { background: #e2e6ea; border-color: #adb5bd; } .col-xs-6 { flex: 0 0 50%; max-width: 50%; } .col-xs-12 { flex: 0 0 100%; max-width: 100%; } .text-right { text-align: right !important; } .ml-auto { margin-left: auto !important; } .mb-md { margin-bottom: 20px !important; } .mb-xs { margin-bottom: 5px !important; } .mb-sm { margin-bottom: 10px !important; } .mb-lg { margin-bottom: 30px !important; } .mb-none { margin-bottom: 0 !important; } .mt-md { margin-top: 20px !important; } .mt-sm { margin-top: 10px !important; } .mt-none { margin-top: 0 !important; } .hidden { display: none !important; } /* ── 2. Search bar fix ────────────────────────────────────────────────── */ .input-group.input-group-lg { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; } .input-group.input-group-lg > .input-group-addon { font-size: 1.125rem; min-width: 48px; border-right: 0; } .input-group.input-group-lg > .form-control { flex: 1 1 auto; min-width: 0; font-size: 1.125rem; border-left: 0; border-right: 0; border-radius: 0; height: auto; } .input-group.input-group-lg > .input-group-btn > .btn { font-size: 1.125rem; padding: .5rem 1.1rem; height: 100%; border-radius: 0; } .input-group.input-group-lg > .input-group-btn:last-child > .btn:last-child { border-radius: 0 4px 4px 0; } /* ── 3. Product card — modern lift ───────────────────────────────────── */ .product-card-modern { background: #fff; border: 1px solid #eef0f2; border-radius: 12px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; height: 100%; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .product-card-modern:hover { box-shadow: 0 12px 32px rgba(0,0,0,.13); transform: translateY(-4px); } /* ── 4. Image container — enforce height so placeholder renders ───────── */ .product-image-container { position: relative; height: 190px; /* explicit px so flex children get 100% */ min-height: 190px; background: #f4f6f8; overflow: hidden; border-bottom: 1px solid #f0f0f0; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; } .product-card-modern:hover .product-image { transform: scale(1.06); } /* Placeholder (No Image) — centred, themed colour */ .product-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 190px; /* match container */ color: #c8cdd4; background: #f4f6f8; } .product-image-placeholder i { font-size: 2.4rem; } .product-image-placeholder p { margin: 8px 0 0; font-size: 12px; letter-spacing: .5px; } /* ── 5. Category badge ────────────────────────────────────────────────── */ .product-category-badge { position: absolute; top: 10px; right: 10px; background: var(--thm-primary, #ff685c); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .3px; box-shadow: 0 2px 6px rgba(0,0,0,.15); z-index: 2; } /* ── 6. Quick View overlay ────────────────────────────────────────────── */ .btn-quick-view-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.38); color: #fff; border: none; border-radius: 0; opacity: 0; transition: opacity .2s ease; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; letter-spacing: .3px; cursor: pointer; } .btn-quick-view-overlay .qv-text { display: flex; align-items: center; gap: 7px; } .product-card-modern:hover .btn-quick-view-overlay { opacity: 1; } .btn-quick-view-overlay:hover { background: rgba(0,0,0,.50); color: #fff; } @media (hover: none) { /* touch devices — always show */ .btn-quick-view-overlay { opacity: 1; background: rgba(0,0,0,.22); } } /* ── 7. Product info section ─────────────────────────────────────────── */ .product-info { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; } .product-title { font-size: 15px; font-weight: 700; color: var(--thm-text, #232323); margin: 0 0 4px; line-height: 1.35; } .product-code { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; } .product-price-stock { margin-bottom: 12px; } .product-price { display: block; font-size: 21px; font-weight: 800; color: var(--thm-primary, #ff685c); letter-spacing: -.3px; } .product-stock { display: block; font-size: 12px; margin-top: 4px; font-weight: 500; } .product-actions { margin-top: auto; } /* ── 8. Qty input-group (small, in card) ─────────────────────────────── */ .product-actions .input-group.input-group-sm { display: flex; flex-wrap: nowrap; align-items: stretch; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; } .product-actions .input-group.input-group-sm > .input-group-btn, .product-actions .input-group.input-group-sm > .form-control { border: none; border-radius: 0; box-shadow: none; } .product-actions .input-group.input-group-sm > .input-group-btn { flex: 0 0 auto; } .product-actions .input-group.input-group-sm > .form-control { flex: 1 1 auto; min-width: 34px; text-align: center; font-size: .85rem; background: #fafafa; border-left: 1px solid #dee2e6 !important; border-right: 1px solid #dee2e6 !important; } .product-actions .input-group-btn > .btn-default { padding: .25rem .55rem; font-size: .85rem; background: #f8f9fa; border: none; color: #555; } .product-actions .input-group-btn > .btn-default:hover { background: #e9ecef; } /* Cart button — use site primary colour */ .product-actions .input-group-btn:last-child > .btn-primary { border-radius: 0; background: var(--thm-primary, #ff685c); border-color: var(--thm-primary, #ff685c); font-size: .8rem; padding: .25rem .6rem; white-space: nowrap; font-weight: 600; } .product-actions .input-group-btn:last-child > .btn-primary:hover { background: var(--thm-hover, #f04133); border-color: var(--thm-hover, #f04133); } /* ── 9. Page header strip ────────────────────────────────────────────── */ .panel-body > .row.mb-md:first-child h3 { font-size: 1.6rem; font-weight: 800; color: var(--thm-text, #232323); } .panel-body > .row.mb-md:first-child h3 i { color: var(--thm-primary, #ff685c); } .panel-body > .row.mb-md:first-child p.text-muted { font-size: .95rem; margin-top: 2px; } /* ── 10. Search bar cosmetic polish ──────────────────────────────────── */ #product-search { border-left: 0; border-right: 0; } #product-search:focus { box-shadow: none; border-color: #ced4da; } #btn-search { background: var(--thm-primary, #ff685c); border-color: var(--thm-primary, #ff685c); font-weight: 600; } #btn-search:hover { background: var(--thm-hover, #f04133); border-color: var(--thm-hover, #f04133); } #btn-clear-search { background: #f8f9fa; border-color: #ced4da; color: #555; } /* ── 11. Responsive tweaks ───────────────────────────────────────────── */ @media (max-width: 767px) { .product-image-container, .product-image-placeholder { height: 155px; min-height: 155px; } .product-title { font-size: 13px; } .product-price { font-size: 18px; } .product-info { padding: 10px 12px 12px; } } @media (max-width: 480px) { .product-image-container, .product-image-placeholder { height: 135px; min-height: 135px; } .product-actions .input-group.input-group-sm { flex-wrap: wrap; } .product-actions .input-group-btn:last-child { flex: 1 1 100%; border-top: 1px solid #dee2e6; } .product-actions .input-group-btn:last-child > .btn-primary { width: 100%; justify-content: center; padding: .35rem; border-radius: 0 0 6px 6px; } } /* ── 12. Quick View modal ────────────────────────────────────────────── */ #quickViewModal .input-group.input-group-sm { display: flex; flex-wrap: nowrap; align-items: stretch; } #quickViewModal .input-group.input-group-sm .input-group-btn { flex: 0 0 auto; } #quickViewModal .input-group.input-group-sm .form-control { flex: 1 1 auto; border-radius: 0; text-align: center; } #quickViewModal .input-group-btn:first-child > .btn { border-radius: 4px 0 0 4px; border-right: 0; } #quickViewModal .input-group-btn:last-child > .btn { border-radius: 0 4px 4px 0; border-left: 0; } .qv-main-image { width: 100%; max-height: 300px; object-fit: contain; border: 1px solid #eee; border-radius: 6px; padding: 6px; } .qv-placeholder { min-height: 200px; border: 1px dashed #ddd; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #bbb; } .qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .qv-thumb { width: 64px; height: 64px; object-fit: cover; border: 2px solid transparent; border-radius: 4px; cursor: pointer; } .qv-thumb.active { border-color: var(--thm-primary, #ff685c); }