/* ── Base ─────────────────────────────────────────────────────────────────── */ :root { --bs-body-font-size: 0.9375rem; } /* ── Logo & layout ────────────────────────────────────────────────────────── */ .logo-s { height: 64px !important; } header { z-index: 1; } header .navbar-brand img { height: 64px; } /* ── 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; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn-md { padding-top: .75rem; padding-bottom: .75rem; } /* ── Company logo circle (profile page header) ───────────────────────────── */ .card-logo-profile { width: 6rem; height: 6rem; min-width: 6rem; } .card-logo-profile img { max-width: 6rem; max-height: 6rem; 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 ─────────────────────────────────────────────────────────────── */ /* ── 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 * * ──────────────────────────────────────────────────────────────────────────── */ /* Form pages use Bootstrap shadow class directly */ /* 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; } .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 ────────────────────────────────────────────────────────────── */ /* ── 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 ───────────────────────────────────────────────────────────────── */ .company-logo-card { width: 100%; padding-top: 100%; position: relative; } .company-logo-card-img, .company-logo-card-initial { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .company-logo-card-img { max-width: 80%; max-height: 80%; object-fit: contain; } .company-logo-card-initial { font-size: 1.5rem; color: #6c757d; font-weight: 600; line-height: 1; } .account-bg { background-color: #f8f9fa; }