/* ========================================================================== Japonic Trade — v2 stylesheet Lean, single file, no framework dependency (no Bootstrap/jQuery). ========================================================================== */ :root { --navy-900: #0b1626; --navy-800: #10203a; --navy-700: #16294a; --blue-500: #2f6fed; --blue-400: #5490ff; --gold-500: #e3ab41; --gold-400: #f0c46a; --gray-50: #f7f8fa; --gray-100: #eef1f5; --gray-300: #d5dbe3; --gray-500: #7c8798; --gray-700: #3c4757; --white: #ffffff; --danger: #e04b4b; --success: #2fb380; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 2px 8px rgba(11, 22, 38, 0.08); --shadow-md: 0 8px 24px rgba(11, 22, 38, 0.12); --shadow-lg: 0 20px 48px rgba(11, 22, 38, 0.18); --container: 1180px; --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; /* Theme-aware tokens. These are the ones component rules should use for page/card backgrounds and body text so light/dark/system switching works site-wide from one place. --white/--gray-* above stay as raw color constants (still used directly for things that must always be white/light regardless of theme, like text sitting on the permanently dark navy header/hero/footer). */ --page-bg: var(--white); --surface: var(--white); --surface-alt: var(--gray-50); --text-body: var(--gray-700); --text-muted: var(--gray-500); --heading-color: var(--navy-900); --border-subtle: var(--gray-100); --border-default: var(--gray-300); /* Custom boxes render taller than the declared 42px height in several browsers — a 's is, so that tall line-height was inflating the whole control instead. Reverting to the browser's own centering keeps the select pinned to the same 42px box as its sibling inputs. */ line-height: normal; } /* Search/Reset (and any other button dropped directly into this row) match the fields' height instead of their own shorter .btn-sm default, so the whole row sits on one visual baseline. */ .jt-deposits-search > .btn { height: 42px; padding: 0 20px; } @media (max-width: 640px) { .jt-deposits-search .field input[type="text"], .jt-deposits-search .field input[type="search"], .jt-deposits-search .field select { width: 100%; flex: 1 1 100%; } .jt-deposits-search > .btn { flex: 1 1 auto; } } .jt-deposits-totals { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-muted); } .jt-deposits-toolbar .btn-gold { margin-left: auto; } .jt-deposits-table td, .jt-deposits-table th { white-space: nowrap; } .jt-gallery-actions .btn { flex: 1 1 auto; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; background: var(--navy-900); overflow: hidden; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.is-active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; } /* Model + shipping-route caption for the real delivered-car slides (Ferrari 360, McLaren 720S, Huracán, Audi A5, M3 E92, Audi S8 + BMW 730Ld) — the generic stock-photo slides above them have no caption span at all, so this simply doesn't render for those. Own background rather than relying on contrast against the photo, since .hero-slides::after's darkening gradient renders on top of this (same stacking context, later in source order). */ .hero-slide-caption { /* Same gold used for the "Japanese Vehicle Export" highlight in the hero h1 (.hero-content h1 em), so the caption pill visually ties back to the headline instead of blending into the photo. Text switches to navy (same pairing as .btn-gold) since gold is too light for white text to read against. */ position: absolute; left: 24px; bottom: 28px; z-index: 3; max-width: min(78%, 420px); padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); border: 1px solid rgba(255, 255, 255, 0.35); color: var(--navy-900); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767px) { .hero-slide-caption { /* Bottom-anchored positions (even ones tracking the photo's own edge via 62.5vw math) ended up overlapping .hero-dots near the bottom of the photo. Simplest fix: pin the caption to the top-left corner of the photo instead — clear of the dots entirely, and still unambiguously "on" the image. */ left: 12px; top: 12px; bottom: auto; max-width: min(85%, 320px); font-size: 12px; padding: 6px 12px; } /* .teaser-media's own top-left corner is already taken by the "LIVE NOW" badge, so the top-left placement above (meant for the hero carousel's dots layout) collides with it here. Keep this caption at the bottom-left instead, on both web and mobile. */ .teaser-media .hero-slide-caption { left: 16px; top: auto; bottom: 20px; } } .hero-slides::after { /* This is the overlay that actually sits on the slide images (.hero-slides wraps .hero-slide img directly) — it was still at up to 0.95 opacity even after several passes lightening the separate .home-page .hero::after gradient in index.php, which is why those earlier changes barely showed: the two overlays stack, and this one was doing nearly all of the darkening. Cut roughly in half here so the cars are actually visible. */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,17,31,0.26) 0%, rgba(9,17,31,0.36) 55%, rgba(9,17,31,0.48) 100%), linear-gradient(90deg, rgba(9,17,31,0.4) 0%, rgba(9,17,31,0.16) 55%, rgba(9,17,31,0.35) 100%); z-index: 1; } @media (max-width: 767px) { .hero-slides::after { /* Per client request: no dark overlay/tint on the photos on mobile — they show at full brightness there. Desktop/tablet keep the gradient above unchanged. */ background: none; } } .hero-content { position: relative; z-index: 2; color: var(--white); max-width: 760px; padding: 140px 0 100px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 24px; } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(47,179,128,0.25); } /* Two-line variant: "Today's bidding has closed" on top, "Bidding for upcoming days is still open" underneath — same pill, stacked text instead of one long dashed sentence. Only used for the today's-bidding-closed state, not the holiday or open states. */ .hero-badge.is-two-line { align-items: flex-start; padding: 14px 20px; text-align: left; font-size: 16px; } .hero-badge-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; } /* line1 and line2 share this exact layout — dot, then gap, then text — so both dots line up on the same left edge and both lines of text line up right after them. (Previously line 1 had no dot of its own and relied on a single shared dot above the two lines, which left line 2's text indented further right than line 1's.) */ .hero-badge-line1, .hero-badge-line2 { display: flex; align-items: center; gap: 7px; text-align: left; } .hero-badge-line2 { font-weight: 500; font-size: 14px; letter-spacing: 0.02em; opacity: 0.9; } .hero-badge-line1 .dot, .hero-badge-line2 .dot { width: 8px; height: 8px; flex-shrink: 0; } /* Holiday / today's-bidding-closed state — see index.php's PHP-computed badge text right above the markup this styles. */ .hero-badge.is-closed .dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(224,75,75,0.25); } /* line2's dot stays green (bidding for upcoming days is still open) even though the badge overall is in its red "closed" state — higher specificity than .hero-badge.is-closed .dot above so it wins. */ .hero-badge.is-closed .hero-badge-line2 .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(47,179,128,0.25); } .hero-badge a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .hero-badge a:hover { color: var(--gold-400); } /* The specific holiday name + dates appended when the badge is showing automatically (today falls inside a scheduled jt_auction_calendar_notices window) — a touch lighter than the generic message next to it so the badge doesn't read as two competing headlines. */ .hero-badge-holiday-name { font-weight: 500; opacity: 0.85; } /* ---------- Bid countdown ("Bid ends in HH:MM:SS") — shared by index.php's hero, auctions.php's listing header, and auction-lot.php's bid panel. See assets/js/bid-countdown.js for the ticking logic; this file only ever touches .bid-countdown-time, so the data-i18n label span renders/translates independently of the ticking digits. */ .bid-countdown { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .bid-countdown-time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; } /* Default (light-page) look — auctions.php, auction-lot.php. */ .bid-countdown { padding: 6px 12px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border-default); color: var(--text-body); } .bid-countdown-time { color: var(--gold-500); } /* Hero variant — sits on the dark, photo-backed hero, so it borrows the same translucent-white pill treatment as .hero-badge instead of the light-page surface colors above. */ .hero-bid-countdown { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--white); font-size: 13px; font-weight: 600; margin-top: 10px; } .hero-bid-countdown .bid-countdown-time { color: var(--gold-400); } .hero-content h1 { /* Was clamp(34px, 5vw, 58px) — at that size the longer translated variants of hero.title_html (German/French/Italian/Spanish are all noticeably longer than the English copy) wrapped to 3+ lines inside the 640px-wide hero-content box. Smaller cap + a wider box (see .hero-content above, 640px -> 760px) keeps this to ~2 lines across every language without needing per-language font-size overrides. */ font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; font-weight: 800; margin: 0 0 20px; letter-spacing: -0.02em; } .hero-content h1 em { font-style: normal; color: var(--gold-400); } .hero-content p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0 0 34px; max-width: 520px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; } .hero-stats { display: flex; gap: 36px; flex-wrap: wrap; } .hero-stats .stat strong { display: block; font-size: 26px; font-weight: 800; color: var(--white); } .hero-stats .stat span { font-size: 13px; color: rgba(255,255,255,0.6); } .hero-dots { position: absolute; z-index: 2; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } @media (max-width: 767px) { .hero-dots { /* Back on the photo, bottom-center, per client request. The photo is object-fit:contain anchored to the top of the (much taller) hero box (see .home-page .hero-slide img in index.php), so its rendered height tracks viewport width (aspect-ratio 8/5 → 62.5vw) rather than the box's own height — anchor from the top with that same math instead of a fixed `bottom` offset so the dots stay on the image at any screen width. */ bottom: auto; top: calc(62.5vw - 24px); } } .hero-dots button { width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.35); border: none; transition: background 0.2s ease, width 0.2s ease; } .hero-dots button.is-active { background: var(--gold-400); width: 40px; } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--surface); border-bottom: 1px solid var(--border-subtle); } .trust-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 24px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; color: var(--text-body); } .trust-item .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; color: var(--blue-500); font-size: 20px; flex-shrink: 0; } /* ---------- Features ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .feature-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, background-color .2s ease; } .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .feature-card .icon-wrap { width: 64px; height: 64px; border-radius: 18px; overflow: hidden; margin-bottom: 22px; background: var(--surface-alt); } .feature-card .icon-wrap img { width: 100%; height: 100%; object-fit: cover; } .feature-card h3 { font-size: 20px; color: var(--heading-color); margin: 0 0 12px; font-weight: 700; } .feature-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); } .feature-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .feature-card ul li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-body); } .feature-card ul li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: rgba(47,111,237,0.12); flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 10px; } .feature-card-link { display: block; } .icon-wrap.icon-wrap-emoji { display: flex; align-items: center; justify-content: center; font-size: 28px; } /* ---------- Steps / how it works ---------- */ .steps { background: var(--navy-900); color: var(--white); border-radius: var(--radius-lg); padding: 64px 48px; position: relative; overflow: hidden; } .steps::before { content: ""; position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(47,111,237,0.35), transparent 70%); top: -160px; right: -120px; } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; z-index: 1; } .step-card .step-num { font-size: 13px; font-weight: 800; color: var(--gold-400); letter-spacing: 0.1em; margin-bottom: 14px; } .step-card h4 { font-size: 18px; margin: 0 0 10px; font-weight: 700; } .step-card p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.65); margin: 0; } /* ---------- Auctions teaser ---------- */ .auction-teaser-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } .teaser-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .teaser-media img { width: 100%; height: 420px; object-fit: cover; } .teaser-media .badge-live { position: absolute; top: 20px; left: 20px; background: var(--danger); color: var(--white); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 999px; display: flex; align-items: center; gap: 7px; } .teaser-media .badge-live .dot { width: 7px; height: 7px; background: var(--white); border-radius: 50%; animation: pulse 1.4s infinite; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} } .teaser-copy .checklist { margin: 26px 0 32px; display: flex; flex-direction: column; gap: 14px; } .teaser-copy .checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-body); font-weight: 500; } .teaser-copy .checklist li .tick { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: rgba(47,179,128,0.14); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } /* ---------- CTA banner ---------- */ .cta-banner { background: linear-gradient(135deg, #16294a, #0b1626 60%); border-radius: var(--radius-lg); padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; color: var(--white); flex-wrap: wrap; } .cta-banner h3 { font-size: 28px; margin: 0 0 10px; font-weight: 800; } .cta-banner p { margin: 0; color: rgba(255,255,255,0.7); max-width: 460px; } .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* .cta-banner's background is a fixed dark navy gradient regardless of site theme (see the rule above) — but .btn-outline's text color is var(--heading-color), which is dark navy in LIGHT mode. That put dark text on a dark background inside every closing CTA banner site-wide ("Talk to Us", "Sign In", "Auction Guide", etc., across index.php, shipping.php, about_us.php, stock_cars.php, and more) — unreadable in both light and dark mode, not just dark mode. Scoped override, same treatment .btn-ghost already uses for outline buttons that sit on a permanently-dark surface (e.g. the hero). */ .cta-banner .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.35); } .cta-banner .btn-outline:hover { color: var(--white); border-color: var(--white); background: rgba(255, 255, 255, 0.08); } /* Same bug, different always-dark container: .page-hero .container is a fixed dark navy gradient regardless of site theme (see the .page-hero rule above), so a .btn-outline placed inside one — e.g. "Create Member Account" on auctions.php / auctions_one.php's signed-out gate, reported as invisible after just such a click-through — rendered dark-navy text on that same dark navy background in light mode. Identical fix to .cta-banner .btn-outline just above. */ .page-hero .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.35); } .page-hero .btn-outline:hover { color: var(--white); border-color: var(--white); background: rgba(255, 255, 255, 0.08); } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-900); color: rgba(255,255,255,0.65); padding-top: 72px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand img { height: 36px; margin-bottom: 18px; } .footer-brand p { font-size: 14px; line-height: 1.7; max-width: 300px; } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .app-badges-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 26px 0 10px; } .app-badges { display: flex; gap: 10px; flex-wrap: wrap; } .app-badge { display: inline-flex; align-items: center; gap: 8px; background: #000; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 7px 14px 7px 12px; transition: transform .15s ease, border-color .15s ease; } .app-badge:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.4); } .app-badge svg { width: 20px; height: 20px; flex-shrink: 0; fill: #fff; } .app-badge .app-badge-text { display: flex; flex-direction: column; line-height: 1.15; } .app-badge .app-badge-eyebrow { font-size: 9px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.03em; } .app-badge .app-badge-name { font-size: 15px; font-weight: 600; color: #fff; font-family: -apple-system, Roboto, sans-serif; } /* Topbar placement (desktop). Lives in .topbar-right, immediately left of the theme/language switches — a slim single-line pair (icon + store name only, no "Download on the" eyebrow, no room for that in a 38px-tall bar) rather than the official two-line badge layout used in the mobile drawer (.app-badges-mobile). Hides itself below the 1200px mobile-drawer breakpoint since the drawer already carries its own full-size copy — see the max-width:1200px block further down. */ .app-badges-nav { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; gap: 8px; } .app-badges-nav .app-badge { padding: 4px 10px 4px 8px; flex-shrink: 0; } .app-badges-nav .app-badge svg { width: 14px; height: 14px; } .app-badges-nav .app-badge-eyebrow { display: none; } .app-badges-nav .app-badge-text { flex-direction: row; } .app-badges-nav .app-badge-name { font-size: 12px; white-space: nowrap; } /* Mobile slide-out menu placement — full size, top of the list */ .app-badges-mobile { display: flex; gap: 10px; margin-bottom: 26px; } .app-badges-mobile .app-badge { flex: 1; justify-content: center; padding: 10px 8px; } .app-badges-mobile .app-badge-eyebrow, .app-badges-mobile .app-badge-name { white-space: nowrap; } .footer-col h5 { color: var(--white); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 20px; } .footer-col ul { display: flex; flex-direction: column; gap: 12px; } .footer-col a { font-size: 14.5px; } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; font-size: 13px; flex-wrap: wrap; gap: 12px; } .footer-bottom .legal-links { display: flex; gap: 20px; } /* ---------- Modals (auth) ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(11,22,38,0.55); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-overlay.is-open { display: flex; } .modal-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px; position: relative; animation: modalIn 0.22s ease; } @keyframes modalIn { from { opacity:0; transform: translateY(10px) scale(0.98);} to {opacity:1; transform: translateY(0) scale(1);} } /* Wider variant for content that needs more horizontal room than a form — currently just banned-ips.php's scrape-evidence table (#jt-admin-scrape-evidence-modal). */ .modal-card-wide { max-width: 760px; } .modal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-alt); border: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 16px; } .modal-close:hover { background: var(--border-subtle); } .modal-card h3 { font-size: 22px; color: var(--heading-color); margin: 0 0 6px; font-weight: 800; } .modal-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 26px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-body); margin-bottom: 7px; } .field input, .field select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); font-size: 14.5px; transition: border-color 0.15s ease, box-shadow 0.15s ease; background: var(--surface); color: var(--text-body); } .field input:focus, .field select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47,111,237,0.12); } /* Locked fields (e.g. My Profile's email — the account's unique identifier, not editable after registration) — visually distinct from a normal enabled field so it doesn't look like a broken input, and no focus ring since there's nothing to focus into. */ .field input[readonly] { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; } .field input[readonly]:focus { outline: none; border-color: var(--border-default); box-shadow: none; } .field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .field-row a { font-size: 13px; font-weight: 600; color: var(--blue-500); } /* Live field validation feedback */ .field { position: relative; } .field-hint { display: block; font-size: 12px; margin-top: 6px; color: var(--text-muted); min-height: 15px; } .field.is-invalid input { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(224,75,75,0.1); } .field.is-invalid .field-hint { color: var(--danger); } .field.is-valid input { border-color: var(--success); } .field.is-valid .field-hint { color: var(--success); } /* Standalone status line outside a .field wrapper (e.g. auction-bids.php's "Sync App Bids" result message) — same color convention as the .field.is-invalid/.is-valid .field-hint rules above, just addressable directly since that button's status text isn't inside a form field. */ .field-hint.is-error { color: var(--danger); } .field-hint.is-success { color: var(--success); } .form-alert.is-error { animation: alertShake 0.4s ease; } @keyframes alertShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); } .divider-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .divider-or::before, .divider-or::after { content:""; flex:1; height:1px; background: var(--border-subtle); } .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background: var(--surface); font-weight: 600; font-size: 14.5px; color: var(--text-body); } .btn-google:hover { border-color: var(--text-muted); background: var(--surface-alt); } .modal-footer-link { text-align: center; margin-top: 22px; font-size: 14px; color: var(--text-muted); } .modal-footer-link button { color: var(--blue-500); font-weight: 700; background: none; border: none; padding: 0; } .form-alert { display: none; font-size: 13.5px; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; } .form-alert.is-error { display: block; background: rgba(224,75,75,0.1); color: #b83535; } .form-alert.is-success { display: block; background: rgba(47,179,128,0.12); color: #1d8e63; } .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin 0.7s linear infinite; } .btn-outline.btn-loading::after { border-color: rgba(47,111,237,0.3); border-top-color: var(--blue-500); } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Korean Cars: "What's included in this price?" info box ---------- */ .sc-trigger { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 0; border: none; background: none; color: var(--blue-500); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; } .sc-trigger:hover { text-decoration: underline; } .sc-trigger span[aria-hidden] { font-size: 14px; line-height: 1; } /* Icon-only variant used inside auctions_one.php's card price line. */ .sc-trigger-sm { margin-top: 0; margin-left: 6px; vertical-align: middle; font-size: 15px; } .stock-card-price { display: flex; align-items: center; } .sc-modal-card { max-width: 480px; } .sc-modal-title { font-size: 19px; color: var(--heading-color); margin: 0 0 16px; font-weight: 800; padding-right: 24px; } .sc-item-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .sc-item-list li { font-size: 15.5px; color: var(--text-body); line-height: 1.4; } .sc-item-subnote { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); } .sc-price-breakdown { border-top: 1px solid var(--border-subtle); padding-top: 18px; } .sc-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15.5px; } .sc-price-label { color: var(--text-muted); font-weight: 600; } .sc-price-value { color: var(--heading-color); font-weight: 700; } .sc-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 12px 0; } .sc-price-row-grand .sc-price-label, .sc-price-row-grand .sc-price-value { font-size: 17px; color: var(--heading-color); font-weight: 800; } .sc-vat-notice { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0; } @media (max-width: 480px) { .sc-modal-card { padding: 26px 22px; max-width: 100%; } .sc-modal-title { font-size: 17px; } } /* ---------- Reservation chat modal ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .chat-modal-card { display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 32px)); } .chat-modal-title { margin-bottom: 14px; } .chat-messages { flex: 1; overflow-y: auto; min-height: 220px; max-height: 46vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-alt); border: 1px solid var(--border-subtle); } .chat-loading, .chat-empty { text-align: center; margin: auto; } .chat-bubble { align-self: flex-start; max-width: 78%; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 14px 14px 14px 4px; padding: 8px 12px; color: var(--heading-color); } .chat-bubble-mine { align-self: flex-end; background: color-mix(in srgb, var(--gold-500) 20%, var(--surface)); border-color: var(--gold-500); border-radius: 14px 14px 4px 14px; } .chat-bubble-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: inherit; } .chat-bubble-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; } .chat-input-row { display: flex; gap: 8px; margin-top: 14px; } .chat-input-row input { flex: 1; } .chat-error { color: var(--danger); min-height: 15px; margin-top: 8px; } [dir="rtl"] .chat-bubble { align-self: flex-end; border-radius: 14px 14px 4px 14px; } [dir="rtl"] .chat-bubble-mine { align-self: flex-start; border-radius: 14px 14px 14px 4px; } [dir="rtl"] .chat-bubble-time { text-align: left; } @media (max-width: 480px) { .chat-modal-card { padding: 22px 16px; } .chat-bubble { max-width: 88%; } } /* ---------- Utility banner (config warning) ---------- */ .dev-banner { background: #fff4e0; color: #7a4a06; font-size: 13px; text-align: center; padding: 9px 16px; font-weight: 600; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .features-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .auction-teaser-grid { grid-template-columns: 1fr; } .teaser-media img { height: 320px; } } /* Raised from 900px: at in-between desktop widths, translated nav labels (DE/RU/AR/TR etc.) plus the flag emoji don't leave enough room for Sign In/Register to stay visible — see the .primary-nav comment above for the full story and why this is the fix instead of an overflow/scroll trick on the nav row. */ @media (max-width: 1200px) { .nav-links, .topbar-left .only-desktop { display: none; } .burger { display: inline-flex; } .nav-actions .btn { display: none; } .app-badges-nav { display: none; } .nav-links.is-open { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 84vw); background: var(--navy-900); padding: 100px 24px 40px; gap: 4px; box-shadow: -20px 0 50px rgba(0,0,0,0.35); z-index: 600; align-items: stretch; overflow-y: auto; } .nav-links.is-open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; margin-top: 4px; display: none; } .nav-links.is-open .has-dropdown.is-expanded .dropdown { display: block; } .nav-links.is-open .nav-link { color: rgba(255,255,255,0.85); justify-content: space-between; } .nav-links.is-open .dropdown a { color: rgba(255,255,255,0.75); } .nav-links.is-open .dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; } .nav-links.is-open .dropdown hr { border-top-color: rgba(255,255,255,0.1); } .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 490; } .nav-scrim.is-open { display: block; } .mobile-only-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); } } @media (min-width: 1201px) { .mobile-only-actions { display: none; } } @media (max-width: 720px) { .section { padding: 60px 0; } .features-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .steps { padding: 44px 24px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .cta-banner { flex-direction: column; text-align: center; padding: 40px 28px; } .cta-actions { justify-content: center; } .hero-content { padding: 120px 0 80px; } .hero-stats { gap: 24px; } .trust-strip .container { justify-content: center; } /* Tokyo time (.topbar-left) stays visible and left-aligned even at this width now that it's the only thing over there — used to be hidden here and the remaining .topbar-right centered, back when .topbar-left held the email address instead. */ } @media (max-width: 480px) { .hero-ctas .btn, .cta-actions .btn { width: 100%; } .hero-ctas, .cta-actions { flex-direction: column; } .modal-card { padding: 26px 22px; } } /* ===== UI modernization layer v2 ===== */ ::selection { background: rgba(47,111,237,.28); color: var(--heading-color); } body { min-height: 100vh; } .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .site-header { transition: background .25s ease, box-shadow .25s ease, transform .25s ease; } .site-header.is-scrolled { box-shadow: 0 10px 35px rgba(11,22,38,.12); } .brand img { transition: transform .25s ease; } .brand:hover img { transform: scale(1.025); } .nav-link { position: relative; } .nav-link::after { content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:3px; background:var(--blue-500); transform:scaleX(0); transition:transform .2s ease; } .nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); } .btn { position:relative; overflow:hidden; isolation:isolate; transform:translateZ(0); box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,22,38,.16); } .btn:active { transform:translateY(0) scale(.985); } .btn-ripple { position:absolute; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); background:rgba(255,255,255,.38); animation:ripple .55s ease-out; z-index:-1; } @keyframes ripple { to { transform:translate(-50%,-50%) scale(5); opacity:0; } } .hero-slide img { transform:scale(1.035); transition:transform 6s ease; } .hero-slide.is-active img { transform:scale(1); } .hero-content > * { opacity:0; transform:translateY(18px); animation:heroEnter .65s ease forwards; } .hero-content > *:nth-child(2){animation-delay:.08s}.hero-content > *:nth-child(3){animation-delay:.16s}.hero-content > *:nth-child(4){animation-delay:.24s}.hero-content > *:nth-child(5){animation-delay:.32s} @keyframes heroEnter { to { opacity:1; transform:none; } } .reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); } .reveal.is-visible { opacity:1; transform:none; } .feature-card,.step-card,.teaser-media { will-change:transform; } .feature-card:hover .icon-wrap img { transform:scale(1.08) rotate(-2deg); } .icon-wrap img { transition:transform .35s ease; } .trust-item .ico { transition:transform .2s ease; } .trust-item:hover .ico { transform:translateY(-2px) scale(1.08); } .back-to-top { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border:0; border-radius:14px; background:var(--navy-900); color:#fff; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px); transition:.2s ease; z-index:80; font-size:20px; } .back-to-top.is-visible { opacity:1; visibility:visible; transform:none; } .back-to-top:hover { transform:translateY(-3px); background:var(--blue-500); } .modal-overlay { opacity:0; transition:opacity .18s ease; } .modal-overlay.is-open { opacity:1; } .modal-card { max-height:min(720px,calc(100vh - 32px)); overflow:auto; } .field input:hover { border-color:#aeb8c6; } .site-footer a { transition:color .18s ease, transform .18s ease; } .footer-social .icon-btn:hover { transform:translateY(-3px); } @media (max-width:1200px){ .primary-nav { display:contents; } .nav-links { overflow-y:auto; overscroll-behavior:contain; } .nav-link::after { display:none; } } @media (max-width:600px){ .container { width:min(calc(100% - 28px),var(--container)); } .section { padding-block:64px; } .feature-card { padding:26px 22px; } .steps { padding:42px 22px; } .modal-card { padding:30px 22px; border-radius:18px; } .back-to-top { right:14px; bottom:14px; } } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.reveal,.hero-content>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.hero-slide img{transition:none!important}.btn:hover{transform:none} } /* ========================================================================== Content pages — About, Rules, Guide, Timeline, Contact, Shipping, Coming-soon ========================================================================== */ .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .info-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px; } /* Generic highlighted callout — used on Branches for the "looking for us in person" note, reusable anywhere a page needs one soft-emphasis box without the weight of a full .info-card. */ .info-note { background: var(--surface-alt); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px 28px; margin-top: 12px; max-width: 780px; margin-left: auto; margin-right: auto; } .info-note strong { display: block; color: var(--heading-color); font-size: 16px; margin-bottom: 8px; } .info-note p { margin: 0; color: var(--text-body); line-height: 1.65; } .info-note p + p { margin-top: 8px; } /* Danger variant — reused on firebase-status.php when the service account itself isn't configured at all (nothing else to check yet). */ .info-note-danger { background: rgba(224,75,75,0.08); border-color: rgba(224,75,75,0.35); } .info-note-danger strong { color: #b83535; } /* FAQ accordion — plain
/, no JS required. Grouped into .faq-category blocks so more questions can be dropped in later without touching this CSS. */ .faq-list { max-width: 820px; margin: 0 auto; } .faq-category { margin-bottom: 36px; } .faq-category:last-child { margin-bottom: 0; } .faq-category-title { font-size: 19px; font-weight: 800; color: var(--heading-color); margin: 0 0 14px; } .faq-item { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden; } .faq-item:last-child { margin-bottom: 0; } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 15.5px; color: var(--heading-color); transition: background-color 0.15s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 22px; line-height: 1; font-weight: 400; color: var(--gold-400); } .faq-item[open] summary::after { content: "\2212"; } .faq-item[open] summary { border-bottom: 1px solid var(--border-subtle); } .faq-item summary:hover { background: var(--surface-alt); } .faq-answer { padding: 16px 22px 20px; color: var(--text-muted); line-height: 1.65; } .faq-answer a { color: var(--blue-500); font-weight: 600; } @media (max-width: 560px) { .faq-item summary { padding: 15px 18px; font-size: 14.5px; } .faq-answer { padding: 12px 18px 16px; } } /* Centered intro paragraph used at the top of a content page (About Us, directly under the sticky .page-hero) — bigger and calmer than body copy so it reads as a one-line "who we are" summary rather than a regular paragraph, without needing its own
. */ .lead-text { max-width: 680px; margin: 0 auto 40px; text-align: center; font-size: 18px; line-height: 1.7; color: var(--text-body); } @media (max-width: 560px) { .lead-text { font-size: 16px; margin-bottom: 28px; } } /* Timeline */ .timeline { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; } .timeline-item { display: flex; gap: 22px; position: relative; padding-bottom: 36px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .timeline-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-800); color: var(--gold-400); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; border: 2px solid var(--gold-400); } .timeline-line { flex: 1; width: 2px; background: var(--border-default); margin-top: 6px; min-height: 24px; } .timeline-item:last-child .timeline-line { display: none; } .timeline-body { padding-top: 2px; } .timeline-body .timeline-range { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-500); margin-bottom: 4px; } .timeline-body h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--heading-color); } .timeline-body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); } .timeline-note { max-width: 760px; margin: 28px auto 0; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--text-muted); font-size: 13.5px; text-align: center; } /* Guide tables */ .guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; } .guide-table { width: 100%; border-collapse: collapse; } .guide-table tr { border-bottom: 1px solid var(--border-subtle); } .guide-table tr:last-child { border-bottom: none; } .guide-table td { padding: 10px 8px; font-size: 14px; vertical-align: top; } .guide-table td:first-child { font-weight: 800; color: var(--heading-color); white-space: nowrap; width: 1%; padding-right: 16px; } .guide-table td:last-child { color: var(--text-muted); } .guide-section-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin: 0 0 14px; } .guide-note { padding: 14px 18px; border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--text-muted); font-size: 13.5px; } /* Rules */ .rules-section { margin-bottom: 40px; } .rules-section:last-child { margin-bottom: 0; } .rules-section h3 { font-size: 20px; font-weight: 800; color: var(--heading-color); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--gold-400); display: inline-block; } .rules-list { display: flex; flex-direction: column; gap: 14px; counter-reset: rule; } .rules-list li { display: flex; gap: 14px; font-size: 15px; line-height: 1.7; color: var(--text-body); counter-increment: rule; } .rules-list li::before { content: counter(rule); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-800); color: var(--gold-400); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; } /* Rule items whose content is more than a single line of text (e.g. the Account Deposit rule's IBAN callout) wrap the + any following block (like .iban-box) in .rules-li-body. Since .rules-list li is itself a flex row (numbered badge + content), without this the badge, text, and IBAN box would all sit side by side as separate flex items — .rules-li-body groups them into one flex item so the IBAN box stacks below the text instead of beside it. */ .rules-li-body { flex: 1 1 auto; min-width: 0; } /* Deposit-tier table (auction_rules.php's Account Deposit rule) — the EUR-deposit -> max-YEN-bid schedule, shown as its own bordered card directly under the IBAN box so it reads as a distinct sub-block of that rule rather than more prose. Mirrors .country-card/.country-row's existing label/value row pattern (border-bottom rows, muted label, right-aligned value) rather than a literal , since that pattern already collapses cleanly to a single column on narrow screens without a separate mobile layout. */ .deposit-tiers { margin-top: 12px; border: 1px solid var(--gold-400); border-radius: var(--radius-md); overflow: hidden; max-width: 460px; box-shadow: var(--shadow-sm); } .deposit-tiers-head { background: var(--surface-alt); padding: 10px 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--heading-color); border-bottom: 1px solid var(--gold-400); } .deposit-tiers-intro { margin: 0; padding: 10px 16px 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); } .deposit-tiers-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; font-size: 14.5px; border-bottom: 1px solid var(--border-subtle); } .deposit-tiers-row:last-child { border-bottom: none; } .deposit-tiers-row:nth-of-type(even):not(.deposit-tiers-row-head) { background: var(--surface-alt); } .deposit-tiers-row-head { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: transparent !important; } .deposit-tiers-row:not(.deposit-tiers-row-head) span:first-child { font-weight: 700; color: var(--heading-color); display: flex; align-items: center; gap: 8px; } .deposit-tiers-row:not(.deposit-tiers-row-head) span:first-child::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); flex-shrink: 0; } .deposit-tiers-row:not(.deposit-tiers-row-head) span:last-child { font-family: 'Courier New', Courier, monospace; font-weight: 800; font-size: 15px; color: var(--heading-color); letter-spacing: 0.02em; } .deposit-tiers-note { margin: 0; padding: 10px 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); background: var(--surface-alt); border-top: 1px solid var(--gold-400); } .deposit-tiers-note::before { content: '\24d8\00A0'; font-weight: 700; color: var(--gold-500); } @media (max-width: 560px) { .deposit-tiers { max-width: none; } .deposit-tiers-row { font-size: 13.5px; padding: 10px 14px; } } /* Inline links inside rule text (e.g. r2's "Auction Guide" link) would otherwise be invisible — the base `a { color: inherit; text-decoration: none; }` rule (line 124) means an in-text link renders as plain body text with no visual cue it's clickable until you hover it. Give prose-embedded links here the site's standard interactive-blue accent (var(--blue-500), already used for hover states/active nav elsewhere) plus an underline so they read as links at a glance. */ .rules-list li a { color: var(--blue-500); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .rules-list li a:hover, .rules-list li a:focus-visible { color: var(--gold-500); } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; } .contact-grid form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-direct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .contact-direct-head h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--heading-color); } .contact-direct { display: flex; flex-direction: column; gap: 18px; } .contact-direct-item { display: flex; gap: 14px; align-items: flex-start; } .contact-direct-item .icon-wrap { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .contact-direct-item strong { display: block; color: var(--heading-color); font-size: 14px; } .contact-direct-item span { color: var(--text-muted); font-size: 14px; } /* IBAN visibility — the account number members actually need to type correctly into their own bank's transfer form deserves more weight than a plain table row. .iban-value (contact_us.php's info panel) bumps size/weight/spacing inline; .iban-box (deposits.php's payment card) pulls it out into its own tinted callout with a Copy button, since deposits.php is the page members are actually paying from. */ .iban-value { font-family: 'Courier New', Courier, monospace; font-weight: 700; letter-spacing: 0.03em; } .iban-box { background: var(--surface-alt); border: 1px solid var(--gold-400); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; } .iban-box-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .iban-box-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .iban-box-value { font-family: 'Courier New', Courier, monospace; font-weight: 800; font-size: 19px; letter-spacing: 0.04em; color: var(--heading-color); word-break: break-all; } .iban-copy-btn { flex-shrink: 0; } @media (max-width: 560px) { .iban-box-value { font-size: 16px; } } /* Follow Us — real outline glyphs (see contact_us.php's $jt_ci_social_svg) in a refined circular button, distinct from the plain-letter .icon-btn the footer uses: a soft shadow and a lift-on-hover instead of just a flat color swap reads as more considered/professional. */ .contact-social { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); } .contact-social-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .contact-social-icons { display: flex; gap: 12px; } .contact-social-icon { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); color: var(--heading-color); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .contact-social-icon svg { width: 18px; height: 18px; } .contact-social-icon:hover { background: var(--gold-400); color: var(--navy-900); border-color: var(--gold-400); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Shipping by country */ .country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .country-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 24px; scroll-margin-top: 110px; } .country-card h3 { margin: 0 0 16px; font-size: 19px; font-weight: 800; color: var(--heading-color); } .country-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; } .country-row:last-child { border-bottom: none; } .country-row .label { color: var(--text-muted); font-weight: 600; flex-shrink: 0; } .country-row .value { color: var(--text-body); text-align: right; } .country-card.is-other { display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--navy-900); } .country-card.is-other h3 { color: #fff; } .country-card.is-other p { color: rgba(255,255,255,0.65); font-size: 14px; margin: 0 0 16px; } @media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } .guide-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .country-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .country-grid { grid-template-columns: 1fr; } .contact-grid form .field-row { grid-template-columns: 1fr; } .timeline-item { gap: 14px; } .info-card { padding: 22px 18px; } } /* ========================================================================== RTL support (Arabic) ========================================================================== */ [dir="rtl"] { text-align: right; } [dir="rtl"] .lang-menu { right: auto; left: 0; } [dir="rtl"] .lang-option { text-align: right; } [dir="rtl"] .theme-menu { right: auto; left: 0; } [dir="rtl"] .theme-option { text-align: right; } [dir="rtl"] .dropdown { left: auto; right: 0; } [dir="rtl"] .dropdown a { flex-direction: row-reverse; } [dir="rtl"] .topbar-left, [dir="rtl"] .topbar-right, [dir="rtl"] .nav, [dir="rtl"] .nav-actions, [dir="rtl"] .hero-ctas, [dir="rtl"] .cta-actions, [dir="rtl"] .footer-social, [dir="rtl"] .checklist li, [dir="rtl"] .trust-item, [dir="rtl"] .field-row, [dir="rtl"] .checkbox-row, [dir="rtl"] .account-chip, [dir="rtl"] .app-badges-nav, [dir="rtl"] .app-badges-mobile, [dir="rtl"] .modal-footer-link { direction: rtl; } [dir="rtl"] .nav-links { padding-right: 0; } [dir="rtl"] .hero-stats, [dir="rtl"] .features-grid, [dir="rtl"] .steps-grid, [dir="rtl"] .footer-grid, [dir="rtl"] .auction-teaser-grid { direction: rtl; } [dir="rtl"] .cta-banner { grid-template-columns: auto minmax(0, 1fr); } [dir="rtl"] .back-to-top { right: auto; left: 22px; } [dir="rtl"] .modal-close { right: auto; left: 18px; } [dir="rtl"] .btn .lucide, [dir="rtl"] .eyebrow::before { order: 2; } @media (max-width: 600px) { [dir="rtl"] .back-to-top { left: 14px; right: auto; } } [dir="rtl"] .value-grid, [dir="rtl"] .guide-grid, [dir="rtl"] .contact-grid, [dir="rtl"] .country-grid { direction: rtl; } [dir="rtl"] .timeline-item, [dir="rtl"] .rules-list li, [dir="rtl"] .contact-direct-item, [dir="rtl"] .country-row { direction: rtl; } [dir="rtl"] .guide-table td:first-child { padding-right: 0; padding-left: 16px; } [dir="rtl"] .country-row .value { text-align: left; } [dir="rtl"] .rules-section h3 { border-bottom-color: var(--gold-400); } /* ---------- Stock cars: results + table ---------- */ .stock-results-count { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; } .stock-results-count strong { color: var(--heading-color); } /* ---------- My Cars: search / filter bar ---------- */ .cars-filter-bar { background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 24px 20px; margin-bottom: 22px; } .cars-filter-grid { display: grid; /* A wider minimum (was 170px) so a lone select/date field never gets squeezed narrower than a text field sitting next to it — every field in the bar now settles on the same handful of practical widths instead of drifting to whatever its content happened to need. */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 18px; } .cars-filter-grid .field { margin-bottom: 0; } .cars-filter-grid .field label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; } /* Text/select/date all share one fixed height + box-sizing so they line up exactly, regardless of each browser's own native chrome (a native 's calendar segment/icon otherwise each reserve their own, inconsistent amount of internal space, which is what was making some fields look narrower or "taller" than their neighbors even though the CSS width was already 100% for all of them). */ .cars-filter-grid .field input, .cars-filter-grid .field select { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px; font-size: 13.5px; line-height: 42px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background-color: var(--surface); color: var(--text-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cars-filter-grid .field input::placeholder { color: var(--text-muted); opacity: 0.8; } .cars-filter-grid .field input:hover, .cars-filter-grid .field select:hover { border-color: #aeb8c6; } .cars-filter-grid .field input:focus, .cars-filter-grid .field select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12); } /* Custom dropdown arrow, drawn the same way in every browser, instead of each OS's own native select chrome (Windows/Chrome renders that noticeably narrower and squarer than macOS/Safari, which was the main source of the "narrow" selects next to the plain text fields). */ .cars-filter-grid .field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 13px center; background-size: 13px; cursor: pointer; /* The 42px line-height above (meant to vertically-center plain text inputs) renders native
. */ /* justify-content: space-between (the first version of this) pushed "Sort by Year" all the way to the far edge of this — which is as wide as the Make/Model data column below it (thumbnail + title + sub-text), so the gap ended up much bigger than intended. Fixed gap instead, so the link sits a modest distance from Make / Model regardless of how wide the column happens to be. */ .jt-th-make-model { display: flex; align-items: center; justify-content: flex-start; gap: 24px; } .jt-th-sub-sort { font-size: 11px; text-transform: none; letter-spacing: normal; font-weight: 500; white-space: nowrap; } .jt-th-sub-sort, .jt-th-sub-sort a { color: var(--text-muted); } .jt-th-sub-sort:hover { color: var(--blue-500); } /* Bid Number / Grade on one line, Year / Mileage on the next — see the auctions.php list-view row markup (.jt-auction-row-sub wraps two .jt-sub-line spans). Only affects rows using this modifier class, so the plain single-line .stock-table-sub used elsewhere (my-favorites.php, stock_cars.php, etc.) is unaffected. */ .jt-auction-row-sub { display: flex; flex-direction: column; gap: 1px; } .jt-sub-line { display: block; } .stock-th-index { width: 1%; padding-right: 8px !important; text-align: center; color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .stock-table-thumb { position: relative; display: block; width: 108px; height: 78px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); transition: box-shadow .15s ease; } .stock-table-thumb:hover, .stock-table-thumb:focus-visible { box-shadow: 0 0 0 2px var(--blue-500); } .stock-table-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Row-number badge overlaid on the thumbnail — only shown on the mobile card layout, where the dedicated # column is hidden (see the 700px media query below) since stacking it as its own labeled block broke onto two lines and cluttered the card. */ .stock-row-badge { display: none; align-items: center; justify-content: center; position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: rgba(11, 22, 38, 0.78); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 1; } .stock-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-body); vertical-align: middle; } .stock-table tr:last-child td { border-bottom: none; } .stock-table-title { display: block; font-weight: 700; color: var(--heading-color); text-decoration: none; } .stock-table-title:hover, .stock-table-title:focus-visible { color: var(--blue-500); text-decoration: underline; } .stock-table-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .stock-table td strong { color: var(--heading-color); font-size: 15px; } .stock-card-price-muted { font-size: 13px; font-weight: 600; color: var(--text-muted); } /* ---------- One Price Cars: card grid (auctions_one.php) ---------- A photo-first card grid rather than the Stock Cars table layout — these listings come from Encar's own live API (no local DB row to sort/paginate cheaply the way Stock Cars can), so a browsable grid fits the data better than a dense sortable table. */ .stock-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; margin-bottom: 8px; } .stock-card { display: flex; flex-direction: column; background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .stock-card:hover, .stock-card:focus-visible { border-color: var(--blue-500); transform: translateY(-2px); } .stock-card-photo { position: relative; /* anchors .jt-fav-btn-corner below */ aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; } .stock-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .stock-card-nophoto { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%); } .stock-card-body { padding: 14px 16px 16px; } .stock-card-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--heading-color); line-height: 1.3; } .stock-card-sub { margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); } .stock-card-price { margin: 0; font-size: 16px; } .stock-card-price strong { color: var(--heading-color); } /* ---------- Favorites star toggle ---------- Shared component across every place a favorite button appears: card-corner overlay (Japan Auctions / Korean Cars list+grid photos), a plain icon button in a table action cell (Japan Auctions table view), and a labeled icon+text button next to a detail page's h1 (auction-lot.php / one-price-car.php). See assets/js/favorites.js for the click/toggle behavior — this only styles on/off state via the .is-active class it applies. */ .jt-fav-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; font-size: 13px; line-height: 1; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .jt-fav-btn:hover { border-color: var(--blue-500); color: var(--blue-500); } .jt-fav-btn:disabled { opacity: 0.6; cursor: default; } .jt-fav-btn .jt-fav-icon { font-size: 15px; line-height: 1; } .jt-fav-btn.is-active { border-color: #eab308; background: rgba(234, 179, 8, 0.12); color: #b5860a; } [data-theme="dark"] .jt-fav-btn.is-active { background: rgba(234, 179, 8, 0.2); color: #fbbf24; } /* Card-corner variant: icon-only circle floating over a card's photo. */ .jt-fav-btn-corner { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); z-index: 2; } [data-theme="dark"] .jt-fav-btn-corner { background: rgba(24, 24, 27, 0.85); } .jt-fav-btn-corner .jt-fav-icon { font-size: 17px; } /* Labeled variant: detail-page title row, icon + text. */ .jt-detail-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; } .jt-detail-title-row h1 { margin: 0; } .jt-fav-btn-labeled { padding: 8px 14px; } /* Japan Auctions table view: fav button sits next to the View & Bid button / Bidding Closed badge in the same action cell. */ .jt-table-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .jt-table-action-row .jt-fav-btn { padding: 6px 8px; } /* ---------- Korean Cars: filter panel (auctions_one.php) ---------- Own component rather than reusing .jt-deposits-search / .jt-adv-filters-grid (the shared "quick search row + collapsible advanced filters" shape used by auctions.php / my-bids.php / auction-bids.php). This page only ever has three range filters and no quick-search row or
toggle, so forcing it into the shared classes needed a pile of specificity overrides (see the old ".jt-deposits-search > .jt-adv-filters-grid" comments above) and still left a real bug: the Apply/Clear button wrapper carried both ".field" (from the shared grid, 2-class selector) and its own ".jt-adv-filters-apply-group" (1-class selector) — the 2-class selector's flex-direction:column always won regardless of source order, so the buttons silently stacked instead of sitting side by side, and the whole filter row had no card/border of its own since it inherited the borderless, transparent quick-search row styling. This block is fully self-contained: a bordered, shadowed card with its own grid and its own action row, so nothing here can be knocked sideways by rules meant for a different page's filter bar, and nothing here can knock those other pages sideways either. */ .op-filters { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 24px; } .op-filters-title { margin: 0 0 18px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .op-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 20px; } .op-filter-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .op-filter-field label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .op-range-pair { display: flex; align-items: center; gap: 8px; min-width: 0; } .op-range-pair input { min-width: 0; flex: 1 1 0; width: auto; height: 42px; padding: 0 12px; font-size: 13.5px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background-color: var(--surface); color: var(--text-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .op-range-pair input:hover { border-color: #aeb8c6; } .op-range-pair input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12); } .op-range-pair span { color: var(--text-muted); font-size: 13px; flex: 0 0 auto; } /* Brand/Model/Transmission/Fuel Type/Body Type selects — same field shell as .op-range-pair input (height/border/radius) so a select sitting next to a range-pair field reads as part of the same grid, not a mismatched control dropped in. */ .op-filter-field select { height: 42px; width: 100%; padding: 0 36px 0 12px; font-size: 13.5px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background-color: var(--surface); color: var(--text-body); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .op-filter-field select:hover { border-color: #aeb8c6; } .op-filter-field select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12); } .op-filter-field select:disabled { cursor: not-allowed; opacity: 0.55; background-color: var(--surface-alt); } .op-filters-actions { display: flex; flex-direction: row; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .op-filters-actions .btn { height: 42px; padding: 0 22px; } @media (max-width: 640px) { .op-filters { padding: 18px; } .op-filters-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .op-filters-actions { flex-direction: row; } .op-filters-actions .btn { flex: 1; } } @media (max-width: 420px) { .op-filters-grid { grid-template-columns: 1fr; } } /* Invoice document buttons (Total/Vehicle/Service/Freight) — My Cars list + car detail page, each opening invoice.php in a new tab. */ .invoice-btn-group { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .invoice-btn { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--blue-500); background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 4px 10px; white-space: nowrap; text-align: center; transition: background .15s ease, border-color .15s ease; } .invoice-btn:hover, .invoice-btn:focus-visible { background: var(--surface-alt); border-color: var(--blue-500); } @media (max-width: 700px) { .stock-table thead { display: none; } .stock-table, .stock-table tbody, .stock-table tr, .stock-table td { display: block; width: 100%; } .stock-table tr { margin-bottom: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .stock-table td { border-bottom: 1px solid var(--border-subtle); padding: 10px 16px; } .stock-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; } /* The row-index column becomes an overlay badge on the thumbnail instead (see .stock-row-badge) — stacking it as its own labeled block broke the number onto a second line and added a redundant full-width row above every card. */ .stock-table td.stock-th-index { display: none; } .stock-th-photo { padding: 0; } .stock-table-thumb { width: 100%; height: 170px; border-radius: 0; } .stock-row-badge { display: flex; } .stock-th-action { text-align: center; } } .stock-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } .stock-page-link { padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--border-default); color: var(--text-body); font-weight: 600; font-size: 14px; } .stock-page-link:hover { border-color: var(--blue-500); color: var(--blue-500); } .stock-page-link.is-disabled { opacity: 0.4; pointer-events: none; } .stock-page-status { font-size: 13.5px; color: var(--text-muted); font-weight: 600; } /* ---------- Stock car detail page ---------- */ .stock-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; } /* Grid items default to min-width:auto, not 0 — meaning a track can be forced wider than its 1.3fr/1fr share if the item's own content has a larger intrinsic (min-content) width, and that width is recalculated every time a replaced element inside it (an ) finishes loading. On a car with many photos (my-car-details.php can run 40+, admin-uploaded one at a time — unlike auction-lot.php's feed-supplied, usually-fewer set) that recalculation happens dozens of times in a row as the gallery/thumbnail images load in, and each one nudges the column — and the aspect-ratio photo box sized as a % of it — a little wider than the last, which is exactly what reads as the page "growing itself" with no scroll or gesture involved. Confirmed directly: removing this grid's layout stopped the main photo from doing it. min-width: 0 is the standard fix — it lets the track actually honor its 1.3fr/1fr share instead of expanding to fit content, the same way flex items need min-width: 0 for the analogous flexbox issue (see .rules-li-body/.op-range-pair/ .jt-bid-input-wrap elsewhere in this file, all the same fix for the same underlying default). */ .stock-detail-grid > * { min-width: 0; } .stock-gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; background: var(--surface-alt); } .stock-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .stock-gallery-main.is-zoomable { cursor: zoom-in; } .stock-gallery-zoom-hint { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20, 24, 32, 0.55); color: #fff; font-size: 15px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; } .stock-gallery-main.is-zoomable:hover .stock-gallery-zoom-hint, .stock-gallery-main.is-zoomable:focus-visible .stock-gallery-zoom-hint { opacity: 1; transform: translateY(0); } /* ---------- Stock car photo lightbox ---------- */ .stock-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10, 12, 16, 0.94); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .stock-lightbox.is-open { opacity: 1; visibility: visible; } .stock-lightbox-stage { position: relative; width: min(92vw, 1100px); height: min(78vh, 780px); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; } #stock-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transform-origin: 50% 50%; will-change: transform; } #stock-lightbox-img.is-zoomed { cursor: grab; } #stock-lightbox-img.is-panning { cursor: grabbing; } .stock-lightbox-close, .stock-lightbox-nav { position: absolute; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .stock-lightbox-close:hover, .stock-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); } .stock-lightbox-close { top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; z-index: 2; } .stock-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; z-index: 2; } .stock-lightbox-prev { left: 14px; } .stock-lightbox-next { right: 14px; } .stock-lightbox-footer { margin-top: 14px; display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.75); font-size: 13px; } .stock-lightbox-counter { font-weight: 700; color: #fff; } @media (max-width: 640px) { .stock-lightbox-nav { width: 40px; height: 40px; font-size: 22px; } .stock-lightbox-prev { left: 6px; } .stock-lightbox-next { right: 6px; } .stock-lightbox-footer { flex-direction: column; gap: 4px; text-align: center; padding: 0 16px; } } .stock-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; } /* Same min-width:auto grid-item default fixed above for .stock-detail-grid, applied here too — this 5-column grid is the other place a photo-heavy my-car-details.php car (40+ thumbnails loading in one at a time) can keep nudging wider as each thumbnail image finishes loading and its intrinsic size gets re-measured. Targets direct children generically since the grid item differs by page: .stock-gallery-thumb-wrap on my-car-details.php, the bare .stock-gallery-thumb button itself on auction-lot.php/stock_car.php (see the comment on .stock-gallery-thumb-wrap just below). */ .stock-gallery-thumbs > * { min-width: 0; } .stock-gallery-thumb-wrap { position: relative; aspect-ratio: 4 / 3; } /* aspect-ratio pinned directly on the button, not just on .stock-gallery-thumb-wrap above — my-car-details.php wraps this button in that wrap div (it needs position:relative there to host the admin badge/checkbox overlays), but auction-lot.php and stock_car.php render this button as a bare grid item with no wrap at all. Without a definite height from somewhere, `height:100%` here can't resolve against .stock-gallery-thumbs' auto-sized grid row, so it fell back to each photo's own natural aspect ratio — one unusually tall auction-sheet scan (a normal occurrence; the diagram/damage-code sheet photo especially) would inflate that whole row's height via CSS Grid's default align-items:stretch, visibly stretching every other thumbnail in the same row along with it. Setting aspect-ratio here directly makes every thumbnail button a fixed 4:3 box regardless of its own photo's shape or which page renders it, so this fix covers all three pages through this one shared selector. */ .stock-gallery-thumb { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; padding: 0; background: var(--surface-alt); } .stock-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .stock-gallery-thumb.is-active { border-color: var(--blue-500); } /* Auction lot detail — Damage Code Reference, collapsed by default, sitting under the photo thumbnails inside .stock-gallery so members can cross-check codes on the auction-sheet scan (usually the first gallery photo) without leaving the page. Marker/rotation styling modeled on .payment-history above; card chrome (border/background) is new since this needs to read as a standalone card, not an inline toggle like .payment-history or a borderless section like .jt-adv-filters. */ .jt-damage-ref { margin-top: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-alt); padding: 12px 16px; } .jt-damage-ref summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--heading-color); list-style: none; user-select: none; } .jt-damage-ref summary::-webkit-details-marker { display: none; } .jt-damage-ref summary::before { content: "▸"; display: inline-block; margin-right: 8px; font-size: 11px; color: var(--text-muted); transition: transform 0.15s ease; } .jt-damage-ref[open] summary::before { transform: rotate(90deg); } .jt-damage-ref summary:hover { color: var(--blue-500); } .jt-damage-ref-body { margin-top: 12px; } .jt-damage-ref-body .field-hint { margin: 0 0 10px; } .jt-damage-ref-body .guide-table { background: var(--surface); border-radius: var(--radius-sm); } .jt-damage-ref-body .guide-table td { padding: 8px 10px; font-size: 13px; } .jt-damage-ref-body .guide-note { margin: 12px 0; } /* AI Inspection Sheet Translation — auction-lot.php, right under .jt-damage-ref above (same card chrome). Only rendered at all when jt_auction_inspection_translation() (inc/auctions.php) finds a non-empty result for this lot's own Firestore vehicle doc — most lots won't have one yet, since it's generated on-demand from the app, not the web. Pure-CSS tab switching (radio + :checked + general sibling combinator) rather than JS. The AI Inspection Issues modal further down reuses these same .jt-itr-tab/.jt-itr-panel/.jt-itr-radio BASE styles for its own, separate tab group — safe to share styling because the actual show/hide toggle rules below are keyed to this section's specific #jt-itr-* ids, not the shared classes, and the AI Issues modal has its own distinct #jt-aiiss-* ids (see that block further down) so the two groups never collide even when both are present on the same page at once. */ .jt-itr { margin-top: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-alt); padding: 12px 16px; } .jt-itr h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--heading-color); } .jt-itr .field-hint { margin: 0 0 12px; } .jt-itr-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .jt-itr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .jt-itr-tab { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .jt-itr-tab:hover { color: var(--heading-color); } .jt-itr-panel { display: none; font-size: 14px; line-height: 1.65; color: var(--text-body); } .jt-itr-panel h5 { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--heading-color); } .jt-itr-panel h5:first-child { margin-top: 0; } .jt-itr-panel p { margin: 0 0 10px; } .jt-itr-panel ul { margin: 0 0 10px 20px; padding: 0; } .jt-itr-panel li { margin-bottom: 4px; } /* One static rule per fixed language code (tr/en/de/fr/nl/es/ru) — see JT_INSPECTION_TRANSLATION_LANGS in inc/auctions.php for why these ids are safe to hardcode rather than generate dynamically. */ #jt-itr-tr:checked ~ .jt-itr-tabs label[for="jt-itr-tr"], #jt-itr-en:checked ~ .jt-itr-tabs label[for="jt-itr-en"], #jt-itr-de:checked ~ .jt-itr-tabs label[for="jt-itr-de"], #jt-itr-fr:checked ~ .jt-itr-tabs label[for="jt-itr-fr"], #jt-itr-nl:checked ~ .jt-itr-tabs label[for="jt-itr-nl"], #jt-itr-es:checked ~ .jt-itr-tabs label[for="jt-itr-es"], #jt-itr-ru:checked ~ .jt-itr-tabs label[for="jt-itr-ru"] { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: #1a1a1a; border-color: var(--gold-500); } #jt-itr-tr:checked ~ .jt-itr-panel[data-lang="tr"], #jt-itr-en:checked ~ .jt-itr-panel[data-lang="en"], #jt-itr-de:checked ~ .jt-itr-panel[data-lang="de"], #jt-itr-fr:checked ~ .jt-itr-panel[data-lang="fr"], #jt-itr-nl:checked ~ .jt-itr-panel[data-lang="nl"], #jt-itr-es:checked ~ .jt-itr-panel[data-lang="es"], #jt-itr-ru:checked ~ .jt-itr-panel[data-lang="ru"] { display: block; } /* AI Inspection Issues — button trigger (near the Damage Code Reference section) + the modal it opens (further down, near the Estimated Cost Calculator modal in the markup). See jt_auction_inspection_ai_issues() in inc/auctions.php: a short structured list of AI-detected issues, distinct from the free-text AI Inspection Sheet Translation above. Modal tab group reuses .jt-itr-tab/.jt-itr-panel/.jt-itr-radio base styles (see that block's own comment above) with its own #jt-aiiss-* ids. */ /* Shared row for the AI Inspection Report + AI Inspection Sheet Translation trigger buttons — side by side per direct request, wrapping to two lines on narrow screens rather than each button claiming its own full-width row. */ .jt-ai-triggers-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .jt-aiiss-trigger { display: inline-flex; align-items: center; gap: 8px; } .jt-aiiss-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: #1a1a1a; font-size: 11px; font-weight: 800; } .jt-aiiss-modal-card { max-width: 560px; max-height: 80vh; overflow-y: auto; } .jt-aiiss-vin { margin: 0 0 12px; font-size: 13px; color: var(--text-body); } .jt-aiiss-panel ul { margin: 0; padding: 0 0 0 20px; } .jt-aiiss-panel li { margin-bottom: 8px; font-size: 14px; line-height: 1.55; } #jt-aiiss-tr:checked ~ .jt-itr-tabs label[for="jt-aiiss-tr"], #jt-aiiss-en:checked ~ .jt-itr-tabs label[for="jt-aiiss-en"], #jt-aiiss-de:checked ~ .jt-itr-tabs label[for="jt-aiiss-de"], #jt-aiiss-fr:checked ~ .jt-itr-tabs label[for="jt-aiiss-fr"], #jt-aiiss-nl:checked ~ .jt-itr-tabs label[for="jt-aiiss-nl"], #jt-aiiss-es:checked ~ .jt-itr-tabs label[for="jt-aiiss-es"], #jt-aiiss-ru:checked ~ .jt-itr-tabs label[for="jt-aiiss-ru"] { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: #1a1a1a; border-color: var(--gold-500); } #jt-aiiss-tr:checked ~ .jt-itr-panel[data-lang="tr"], #jt-aiiss-en:checked ~ .jt-itr-panel[data-lang="en"], #jt-aiiss-de:checked ~ .jt-itr-panel[data-lang="de"], #jt-aiiss-fr:checked ~ .jt-itr-panel[data-lang="fr"], #jt-aiiss-nl:checked ~ .jt-itr-panel[data-lang="nl"], #jt-aiiss-es:checked ~ .jt-itr-panel[data-lang="es"], #jt-aiiss-ru:checked ~ .jt-itr-panel[data-lang="ru"] { display: block; } /* Similar Cars — auction-lot.php, right under .jt-damage-ref above (same left-column card chrome). Deliberately a plain always-visible
    , NOT another
    accordion like .jt-damage-ref — these are comparables the member is meant to actually see, not reference material tucked away until asked for. */ .jt-similar-cars { margin-top: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-alt); padding: 12px 16px; } .jt-similar-cars h4 { margin: 0 0 10px; font-weight: 700; font-size: 14px; color: var(--heading-color); } .jt-similar-cars-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .jt-similar-cars-item { background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; } .jt-similar-cars-makemodel { display: flex; flex-direction: column; line-height: 1.3; } .jt-similar-cars-makemodel strong { font-size: 13px; color: var(--heading-color); } .jt-similar-cars-makemodel span { font-size: 13px; color: var(--text-muted); } .jt-similar-cars-meta { margin-top: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.6; } /* One Price Cars detail page — Encar readside-enrichment sections (warranty/condition badges, dealer contact, underbody photo grid). Plain, non-interactive (unlike .stock-gallery-thumbs above), so no is-active/click state is needed. */ .op-detail-section { margin-top: 28px; } .op-detail-section h3 { margin-bottom: 10px; } .op-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .op-dealer-block { font-size: 14px; color: var(--text-muted); line-height: 1.6; } .op-dealer-block strong { color: var(--text-body); } .op-underbody-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; } .op-underbody-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--surface-alt); } /* Admin-only per-photo delete checkbox, overlaid on its thumbnail — a sibling of the thumbnail button (not nested inside it, since a checkbox inside a