/* ── Base ─────────────────────────────────────────────────────────────────── */ :root { --bs-body-font-size: 0.9375rem; } /* ── Logo & layout ────────────────────────────────────────────────────────── */ .logo-s { height: 18px !important; } header { z-index: 1; } header .navbar-brand img { height: 18px; } /* ── Navbar search (non-home pages) ──────────────────────────────────────── */ header .navbar form { width: 100%; background: #f3f3f3 !important; } header .navbar form input::placeholder { color: #999999; } @media (min-width: 992px) { header .navbar form { width: 26%; min-width: 20rem; } } /* ── Icons ────────────────────────────────────────────────────────────────── */ .ico { width: 1rem; height: 1rem; } .ico-lg { width: 1.25rem; height: 1.25rem; } .ico-xl { width: 1.5rem; height: 1.5rem; } .ico path { fill: #666666; } .ico-light path { fill: #cccccc; } .ico-warning path { fill: #ffcc00; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn-md { padding-top: .75rem; padding-bottom: .75rem; } /* ── Company logo circle (profile page header) ───────────────────────────── */ .company-logo-circle { width: 5rem; height: 5rem; min-width: 5rem; } .company-logo-circle img { max-width: calc(5rem - .5rem); max-height: calc(5rem - .5rem); object-fit: contain; } /* ── Card logo (product detail page: supplier card) ─────────────────────── */ .card-logo-product { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; } .card-logo-product img { max-width: calc(3.5rem - 2px); max-height: calc(3.5rem - 2px); object-fit: contain; } /* ── Product thumbnails ───────────────────────────────────────────────────── */ .ratio-1x1 img.card-img-top { object-fit: cover; } /* ── Text utilities ───────────────────────────────────────────────────────── */ .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .x-small { font-size: .75rem; } .cursor-zoom-in { cursor: zoom-in; } /* ── Breadcrumb (scrollable on mobile) ───────────────────────────────────── */ .breadcrumb-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .breadcrumb-scroll::-webkit-scrollbar { display: none; } .breadcrumb-scroll .breadcrumb-item { white-space: nowrap; } /* ── Pagination ───────────────────────────────────────────────────────────── */ .page-item.active a { background: var(--bs-secondary); border-color: var(--bs-secondary); } /* ── Social icons (homepage footer) ──────────────────────────────────────── */ .social-icons svg { width: 1.5rem; height: 1.5rem; } .social-icons svg path { fill: #666666; } /* ── Dropdown ─────────────────────────────────────────────────────────────── */ .dropdown-item:active { background-color: var(--bs-dark); } /* ── AdSense slots ────────────────────────────────────────────────────────── */ .adslot_1 { width: 728px; height: 90px; } @media (max-width: 992px) { .adslot_1 { width: 320px; height: 50px; } } /* ── Homepage search banner ───────────────────────────────────────────────── */ .search-banner { height: 20rem; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('/assets/img/bg-search.jpg?v=1.1') center bottom / cover no-repeat; } .search-banner form { max-width: 40rem; } /* ── BACKGROUNDS: light grey page, white content areas (original design) ─── * * Original pattern: = white, certain sections = bg-light (#f8f9fa) * * Forms and cards = white (bg-white) so they pop against grey backgrounds * * ──────────────────────────────────────────────────────────────────────────── */ /* Account pages: grey body, white form box */ .account-page { background-color: #f8f9fa; min-height: 100vh; } .account-page .form-box { background: #fff; border-radius: .5rem; padding: 2rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); } /* Auth pages (login, register, forgot): grey body, white card */ .auth-body { background-color: #f8f9fa; } .auth-card { background: #fff; border-radius: .5rem; padding: 2rem 2.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); max-width: 420px; margin: 3rem auto; } /* Company profile: alternating white / light sections */ /* bg-light already handles this */ /* Search / category / companies listing pages */ /* These are white; individual items have no shadow (matches original) */ /* ── Accordion ────────────────────────────────────────────────────────────── */ .accordion-item { border-color: #eeeeee; } .accordion-button:not(.collapsed) { color: inherit; background-color: #ffffff; } .accordion-button:after { background-image: url("data:image/svg+xml,") !important; background-size: 16px; } /* ── Borders ──────────────────────────────────────────────────────────────── */ .border-light { border-color: #eeeeee !important; } @media (min-width: 992px) { .border-lg { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-lg-0 { border: 0 !important; } .bg-lg-light { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } .position-lg-absolute { position: absolute !important; } .translate-lg-middle-y { transform: translateY(-50%) !important; } } /* ── DL inline ────────────────────────────────────────────────────────────── */ .dl-inline dt { float: left; clear: left; margin-right: .35rem; } .dl-inline dd:after { content: ""; clear: both; display: block; } /* ── Upload area ──────────────────────────────────────────────────────────── */ .upload-area { cursor: pointer; background: #f8f9fa; border: 2px dashed #dee2e6 !important; border-radius: .5rem; transition: border-color .15s, background .15s; min-height: 80px; display: flex; align-items: center; justify-content: center; } .upload-area:hover, .upload-area:focus { border-color: #0d6efd !important; background: #eff6ff; outline: none; } /* ── Mobile ───────────────────────────────────────────────────────────────── */ @media (max-width: 991px) { .container-p0 { padding: 0; } }