/* BidSpot — The Bidding House for Website Traffic */ /* Auction Lot Card Styling & Leaderboard Layout */ /* Relies on css/variables.css being linked before this file in . */ /* .main-content grid layout lives in css/main.css — was duplicated here with slightly different values, which is exactly the kind of split that makes a bug like the mobile overflow (fixed below) hard to track down. */ .leaderboard-container { display: flex; flex-direction: column; gap: 16px; min-width: 0; /* grid items default to min-width:auto — without this, the 1fr track grows to fit unshrinkable descendants instead of the viewport, which was the actual cause of the mobile overflow */ } /* Auction Lot Card (Thin Hairline Border 1px, Generous Padding, Zero Drop Shadows) */ .leaderboard-card { display: flex; align-items: center; gap: 22px; background: var(--bg-card); border: 1px solid var(--border-card); padding: 24px 28px; border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--transition-normal), background-color var(--transition-normal); position: relative; overflow: visible; margin-top: 10px; } .leaderboard-card:hover { background: var(--bg-card-hover); border-color: var(--accent-primary); box-shadow: none; } /* Hover "Place Bid" Pill Button Centered at Top */ .hover-claim-pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, 6px) scale(0.95); opacity: 0; pointer-events: none; background: var(--accent-primary); color: #ffffff; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; padding: 6px 18px; border-radius: var(--radius-full); border: none; outline: none; cursor: pointer; white-space: nowrap; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 6px; z-index: 10; transition: opacity var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast); } .leaderboard-card:hover .hover-claim-pill { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .hover-claim-pill:hover { background: var(--accent-primary-hover); transform: translate(-50%, -50%) scale(1.04); } .hover-claim-pill .gavel-icon-svg { stroke: #ffffff; flex-shrink: 0; } /* Lot Badges (Serif LOT #1 Header) */ .card-rank { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: var(--accent-primary); padding: 6px 14px; border-radius: var(--radius-sm); background: var(--badge-bg); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.04em; white-space: nowrap; } /* Unified Lot Badges & Rank Card Component (#1..#N) */ /* Logo / Letter Avatar */ .card-logo { width: 50px; height: 50px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; color: #ffffff; flex-shrink: 0; } /* Card Content Details */ .card-details { flex: 1; min-width: 0; } .card-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-width: 0; /* flex items default to min-width:auto — without this, a nowrap child below forces this row (and the whole card) to overflow */ } .card-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .card-tagline { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.45; margin-bottom: 10px; } .card-meta { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; } /* Deliberately the one highlighted item in the meta row: it's the only piece of card metadata that's also a filter, so it reads as accent-colored and clickable rather than blending into the muted timestamp/clicks text beside it. */ .category-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-light); border: 1px solid var(--accent-border); padding: 3px 11px; border-radius: var(--radius-full); font-weight: 600; color: var(--accent-primary); transition: background-color var(--transition-fast), color var(--transition-fast); } .category-tag:hover { background: var(--accent-primary); border-color: var(--accent-primary); color: #ffffff; } .meta-link { color: var(--text-secondary); font-weight: 500; transition: color var(--transition-fast); } .meta-link:hover { color: var(--accent-primary); } .meta-details-btn { color: var(--text-muted); transition: color var(--transition-fast); } .meta-details-btn:hover { color: var(--accent-primary); } /* Price Display Section in Playfair Display Serif */ .card-price-section { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .card-price-label { font-family: var(--font-serif); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .card-price { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 800; color: var(--accent-primary); letter-spacing: -0.02em; } .btn-outbid-small { padding: 6px 16px; border-radius: var(--radius-full); background: var(--accent-light); color: var(--accent-primary); border: 1px solid var(--accent-border); font-weight: 600; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition-fast); } .btn-outbid-small:hover { background: var(--accent-primary); color: #ffffff; border-color: var(--accent-primary); } /* Below desktop width the single nowrap line is too short to identify a listing by ("Insight Drop – You're losing customer…"), so titles wrap to two lines instead. Applies from tablet down, not just phones — a long name truncates at 768px too. */ @media (max-width: 900px) { .card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.05rem; line-height: 1.3; } .card-title-row { flex-wrap: wrap; gap: 6px; } } @media (max-width: 640px) { /* Phone layout, three stacked rows instead of one squeezed line: row 1 [#rank] [logo] ............... FLOOR BID / ₹100 row 2 title, tagline and meta, across the full width row 3 the bid button Sharing one row with the rank badge, logo and price left the title block about 230px on a 375px screen, so every listing name was cut to "Insight…". */ .leaderboard-card { flex-wrap: wrap; padding: 18px; gap: 10px 12px; /* The crown sits at top:-12px; row-gap alone doesn't reserve space for it. */ margin-top: 18px; } .card-rank { order: 1; } .card-logo { order: 2; } .card-price-section { order: 3; margin-left: auto; align-items: flex-end; text-align: right; } .card-details { order: 4; flex-basis: 100%; } .card-meta { gap: 8px 10px; font-size: 0.75rem; } /* :hover doesn't fire reliably on touch — make the bid pill a normal static button under the card content instead of a hidden-until-hover overlay. */ .hover-claim-pill { position: static; opacity: 1; pointer-events: auto; transform: none; width: 100%; justify-content: center; order: 10; margin-top: 4px; } .leaderboard-card:hover .hover-claim-pill { transform: none; } } /* Any touch-primary device (tablets included, regardless of width) gets the same always-visible bid button — :hover is unreliable on touch at any screen size. */ @media (hover: none) { .hover-claim-pill { position: static; opacity: 1; pointer-events: auto; transform: none; width: 100%; justify-content: center; order: 10; margin-top: 12px; } } /* Founding Bidder — one of the first listings ever to clear a payment. Awarded automatically (see approve_listing_and_award_founding in schema.sql), so it's a factual marker of being early rather than anything granted by hand. Styled apart from the maroon accent so it doesn't read as just another category tag. */ .founding-badge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: var(--gold-bg); border: 1px solid var(--gold-border); color: var(--gold-text); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; } .founding-badge svg { fill: currentColor; }