/* EZhaggle stylesheet — hand-written, no build step. This file is the source AND the embedded asset; edit it directly. The look: a "deal sheet" — showroom paper by day, night drive by dark. Every color token is a light-dark() pair resolved by color-scheme; the user override sets data-theme on (see base.html). Non-color theme differences (shadows, image lifts, the toggle icon) live in the two dark-override blocks below the tokens. Type is Overpass (OFL), the open digitization of North American highway-sign lettering — embedded latin subset, variable weight. */ @font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/overpass-var.woff2") format("woff2"); } @font-face { font-family: "Overpass"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/overpass-italic-var.woff2") format("woff2"); } /* ---------- reset (replaces Tailwind preflight; templates assume it) ---------- */ *, ::after, ::before, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, optgroup, select, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; } button, [type="button"], [type="submit"], [type="reset"] { appearance: button; } textarea { resize: vertical; } ::placeholder { color: var(--color-dim); opacity: 1; } :disabled { cursor: default; } .normal-case { text-transform: none; } /* ---------- theme tokens ---------- */ :root { color-scheme: light dark; /* brand — from the logo art: haggle green, EZ orange */ --color-haggle-green: light-dark(#2e7d43, #56bd74); --color-haggle-green-bright: light-dark(#1f6231, #79d494); --color-haggle-green-deep: light-dark(#1d5c2e, #2e7d43); --color-green-fill: light-dark(#2e8348, #3aa25b); --color-on-green: light-dark(#ffffff, #0c130e); --color-haggle-ez: light-dark(#a4570a, #e29a41); --color-ez-bright: light-dark(#8a4a08, #eeb066); /* surfaces — paper by day, green-tinted charcoal by night */ --color-bg: light-dark(#f5f4ee, #151814); --color-card: light-dark(#fffefb, #1c211c); --color-field: light-dark(#ffffff, #161a16); --color-panel: light-dark(#eceade, #242a24); --color-border: light-dark(#e2dfd2, #2b312b); --color-border-strong: light-dark(#cbc8b8, #3c433c); --color-control: light-dark(#a8a696, #4f574e); /* ink ramp */ --color-dim: light-dark(#83816f, #7d857a); --color-muted: light-dark(#615f52, #9ba295); --color-body: light-dark(#37392f, #ccd2c7); --color-bright: light-dark(#20241d, #eef1ea); --color-text: light-dark(#191d16, #f2f4ee); /* status hues (borders/backgrounds derive via color-mix) */ --color-danger: light-dark(#b03030, #e88a82); --color-warn: light-dark(#8f6400, #dcb44a); --color-info: light-dark(#2f5fa8, #86aae0); /* non-color knobs; the dark blocks flip these */ --shadow-card: 0 1px 2px rgba(28, 26, 18, 0.05), 0 4px 12px -6px rgba(28, 26, 18, 0.08); --shadow-pop: 0 6px 24px -8px rgba(28, 26, 18, 0.22); --shadow-press: inset 0 1px 2px rgba(28, 26, 18, 0.05); --img-lift: none; --show-sun: none; --show-moon: block; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Non-color dark overrides, once for the system preference and once for the explicit toggle. Keep the two blocks identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-card: none; --shadow-pop: 0 8px 28px -8px rgba(0, 0, 0, 0.6); --shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.3); --img-lift: brightness(1.65) saturate(0.9); --show-sun: block; --show-moon: none; } } :root[data-theme="dark"] { --shadow-card: none; --shadow-pop: 0 8px 28px -8px rgba(0, 0, 0, 0.6); --shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.3); --img-lift: brightness(1.65) saturate(0.9); --show-sun: block; --show-moon: none; } /* ---------- base ---------- */ body { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); line-height: 1.55; overflow-x: hidden; } ::selection { background: var(--color-haggle-green); color: var(--color-on-green); } :focus-visible { outline: 2px solid var(--color-haggle-green); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .spinner { animation-duration: 1.2s !important; } } .brand-ez { color: var(--color-haggle-ez); } .brand-name { color: var(--color-haggle-green); } /* The signature: green meets orange — the two halves of the wordmark, the two sides of a deal. Split dead center, under the wordmark. */ .handshake-rule, .divider-multi, .divider-warm { height: 2px; border: none; background: linear-gradient( to right, transparent, var(--color-haggle-green) 18%, var(--color-haggle-green) calc(50% - 1px), var(--color-haggle-ez) calc(50% + 1px), var(--color-haggle-ez) 82%, transparent ); } .divider-multi { margin: 0.9rem 0; } .divider-warm { margin: 1rem 0 0; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-card); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.7rem 2rem; } .site-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(to right, var(--color-haggle-green) calc(50% - 1px), var(--color-haggle-ez) calc(50% + 1px)); } .header-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; } .header-left .wheel img { height: 2.4rem; width: auto; display: block; filter: var(--img-lift); } .header-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--color-body); text-decoration: none; white-space: nowrap; } .header-link:hover { color: var(--color-haggle-green); } /* Unread-messages presence dot: a plain orange signal, no glow. */ .unread-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--color-haggle-ez); } .wordmark img { height: 2.5rem; width: auto; display: block; } .wordmark { text-decoration: none; } .header-right { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; } .theme-toggle { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-border); border-radius: 0.5rem; color: var(--color-muted); cursor: pointer; } .theme-toggle:hover { border-color: var(--color-haggle-green); color: var(--color-haggle-green); } .theme-toggle .sun { display: var(--show-sun); } .theme-toggle .moon { display: var(--show-moon); } .auth-pill { display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 700; padding: 0.45rem 0.9rem; border: 1px solid var(--color-border); border-radius: 0.5rem; text-decoration: none; cursor: pointer; background: none; white-space: pre; } .auth-pill:hover { border-color: var(--color-haggle-green); } .account-menu { position: relative; } .account-menu summary { list-style: none; } .account-menu summary::-webkit-details-marker { display: none; } .account-menu[open] .auth-pill { border-color: var(--color-haggle-green); } .account-dropdown { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 14rem; background: var(--color-card); border: 1px solid var(--color-border-strong); border-radius: 0.5rem; padding: 0.75rem; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 0.5rem; } .account-email { margin: 0 0 0.1rem; font-size: 0.8rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .site-header { grid-template-columns: 1fr 1fr; padding: 0.7rem 0.75rem; } .wordmark { order: 3; grid-column: 1 / -1; justify-self: center; } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); background: var(--color-card); padding: 1.75rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem; } .release { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-dim); text-align: center; } .canadian { justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--color-muted); } .canadian img { height: 1.4rem; width: auto; } /* ---------- layout ---------- */ main { flex: 1; display: flex; flex-direction: column; min-height: 0; } .page { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.5rem 0.75rem; display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .page { padding: 2rem 1.25rem; gap: 2rem; } } .page.narrow { max-width: 56rem; } /* ---------- type helpers ---------- */ .eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-haggle-ez); margin: 0; } .card-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } /* ---------- buttons ---------- */ .btn-glow { display: inline-block; border: 1px solid transparent; background: var(--color-green-fill); border-radius: 0.5rem; padding: 0.6rem 1.25rem; font-size: 0.85rem; font-weight: 700; color: var(--color-on-green); text-decoration: none; cursor: pointer; transition: background-color 0.15s; } .btn-glow:hover { background: var(--color-haggle-green-deep); } .btn-glow .brand-ez, .btn-glow .brand-name { color: inherit; } .btn-pill { display: inline-block; border: 1px solid var(--color-border-strong); border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--color-body); text-decoration: none; background: var(--color-card); cursor: pointer; } .btn-pill:hover { border-color: var(--color-haggle-green); color: var(--color-haggle-green); } .btn-ghost { display: inline-block; border: 1px solid var(--color-border-strong); background: none; border-radius: 0.5rem; padding: 0.5rem 0.9rem; font-size: 0.78rem; font-weight: 600; color: var(--color-body); text-decoration: none; cursor: pointer; } .btn-ghost:hover { border-color: var(--color-control); background: var(--color-panel); } .btn-danger { display: inline-block; border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 7%, transparent); border-radius: 0.5rem; padding: 0.6rem 1.25rem; font-size: 0.8rem; font-weight: 600; color: var(--color-danger); text-decoration: none; cursor: pointer; } .btn-danger:hover { border-color: color-mix(in srgb, var(--color-danger) 70%, transparent); background: color-mix(in srgb, var(--color-danger) 14%, transparent); } .btn-inline-add { margin-top: 0.5rem; border: none; background: none; padding: 0; font-size: 0.78rem; font-weight: 600; color: var(--color-haggle-green); cursor: pointer; } .btn-inline-add:hover { text-decoration: underline; text-underline-offset: 2px; } /* ---------- rules and dividers ---------- */ .rule-row { display: flex; align-items: center; justify-content: center; gap: 1rem; } .rule-green { flex: 1; max-width: 12rem; height: 2px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-haggle-green) 55%, transparent)); } .rule-green.mirror { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--color-haggle-green) 55%, transparent)); } .rule-orange { flex: 1; max-width: 12rem; height: 2px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-haggle-ez) 55%, transparent)); } .rule-orange.mirror { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--color-haggle-ez) 55%, transparent)); } /* ---------- landing ---------- */ .hero { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 1024px) { .hero { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .hero-logo { display: flex; flex-direction: column; align-items: center; } .hero-logo .logo-row { display: flex; align-items: center; gap: 1rem; width: 100%; } .hero-logo img { max-height: 11rem; width: auto; } .hero-headline { margin: 1.25rem 0 0; text-align: center; font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-bright); } .hero-copy h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--color-bright); } .hero-copy p { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--color-body); } .hero-copy .punch { font-size: 1.2rem; font-weight: 800; color: var(--color-haggle-ez); margin-top: 0.75rem; } .tagline { text-align: center; font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 700; font-style: italic; color: var(--color-haggle-ez); margin: 0; } .cards { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cards.three { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; padding: 1.25rem; min-width: 0; box-shadow: var(--shadow-card); } .card.dimmer { background: color-mix(in srgb, var(--color-card) 55%, var(--color-bg)); box-shadow: none; } .step-card-body { display: grid; gap: 1rem; align-items: start; flex: 1; } @media (min-width: 768px) { .step-card-body { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); } } .step-card-body img { border-radius: 0.5rem; } .card h3.green { color: var(--color-haggle-green); } .card h3.orange { color: var(--color-haggle-ez); } .card p { font-size: 0.85rem; color: var(--color-body); margin: 0.5rem 0 0; } .card .card-actions { margin-top: 1rem; } .cta-block { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .cta-lead { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; color: var(--color-haggle-green); margin: 0; } .pull-quote { max-width: 56rem; font-size: 0.95rem; color: var(--color-body); margin: 0; } .pull-quote .quote { font-style: italic; color: var(--color-haggle-ez); } .fee-heading { text-align: center; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 800; margin: 0; color: var(--color-bright); } .fee-body { display: grid; gap: 1.5rem; margin-top: 1.25rem; align-items: center; } @media (min-width: 768px) { .fee-body { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } } .fee-figure { text-align: center; } .fee-figure .pct { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; margin: 0.4rem 0; font-variant-numeric: tabular-nums; } .fee-figure .rule-white { height: 1px; background: var(--color-border-strong); } .fee-figure .anchor { margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-haggle-ez); } .fee-points { margin: 0; padding-left: 1.25rem; font-size: 0.88rem; color: var(--color-body); list-style: disc; } .fee-points li { margin: 0.4rem 0; } .fee-points li::marker { color: var(--color-haggle-green); } .footnote { text-align: center; font-size: 0.75rem; font-style: italic; color: var(--color-muted); margin: 0; } /* ---------- how it works ---------- */ .page-header { display: grid; gap: 1.25rem; align-items: center; } @media (min-width: 768px) { .page-header { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } } .page-header img { border-radius: 0.75rem; } .page-header h1 { margin: 0.6rem 0 0; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-bright); } .page-header .intro { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--color-muted); } .steps-heading { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--color-bright); } .steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid color-mix(in srgb, var(--color-haggle-green) 35%, transparent); display: flex; flex-direction: column; gap: 1.5rem; } .steps li { position: relative; counter-increment: step; padding-left: 0.75rem; } .steps li::before { content: counter(step); position: absolute; left: -2.35rem; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--color-green-fill); color: var(--color-on-green); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .steps h3 { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-haggle-green); } .steps p { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--color-body); } .inline-link-orange { color: var(--color-haggle-ez); font-weight: 600; } .inline-link-green { color: var(--color-haggle-green); font-weight: 600; } .inline-link-muted { color: var(--color-muted); } .inline-link-orange:hover, .inline-link-green:hover, .inline-link-muted:hover { text-decoration: underline; text-underline-offset: 2px; } .link-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; font-size: 0.85rem; } .link-row .sep { color: var(--color-control); } .centered { text-align: center; } /* ---------- reviews ---------- */ .review-card { background: var(--color-card); } .review-card h2 { margin: 0; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-haggle-green); } .review-card .content { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--color-body); } .review-card .vehicle { margin: 0.75rem 0 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-bright); } .review-card .posted { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--color-haggle-ez); } .review-card .attribution { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--color-muted); } .review-card .attribution .dot { color: var(--color-dim); } .notice-box { border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; padding: 1.5rem; text-align: center; font-size: 0.9rem; color: var(--color-muted); } .notice-box.error { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-card)); color: var(--color-danger); } /* ---------- status pages (404, auth errors) ---------- */ .status-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4rem 1rem; } .status-page .inner { max-width: 28rem; text-align: center; } .status-page .code { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-haggle-green); } .status-page h1 { margin: 0.75rem 0 0; font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-bright); } .status-page .detail { margin: 1rem 0 0; font-size: 0.9rem; color: var(--color-muted); } .status-page .actions { margin-top: 1.5rem; } /* ---------- sign-in gate ---------- */ .gate h1 { margin: 0.5rem 0 0; font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-bright); } .gate-card { margin-top: 1.5rem; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; padding: 1.5rem; box-shadow: var(--shadow-card); } .gate-card h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-bright); } .gate-card p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-muted); } .gate-actions { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .gate-alt { font-size: 0.78rem; } /* ---------- buyer: deal list & form shells ---------- */ .deals-header { border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; padding: 1rem 1.25rem 1.25rem; box-shadow: var(--shadow-card); } .deals-header h1 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-bright); } .deals-header > p { margin: 0.25rem 0 1rem; font-size: 0.88rem; color: var(--color-muted); } .deal-form-header { text-align: center; } .deal-form-header h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 800; color: var(--color-bright); } .deal-form-header > p { margin: 0.5rem auto 0; max-width: 36rem; font-size: 0.9rem; color: var(--color-muted); } .deal-form-header .back-link { margin: 0 0 0.75rem; text-align: left; font-size: 0.8rem; } /* ---------- EZdeal form ---------- */ .ezdeal-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-banner { border-radius: 0.5rem; padding: 0.8rem 1rem; font-size: 0.85rem; } .form-banner.error { border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent); background: color-mix(in srgb, var(--color-danger) 7%, var(--color-card)); color: var(--color-danger); } /* Form sections read as worksheet blocks: card, label header, hairline. */ .deal-section { position: relative; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; padding: 1.25rem; box-shadow: var(--shadow-card); } .deal-section-head { margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; } .deal-section-head h2 { margin: 0; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-haggle-green); } .deal-section-head p { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--color-muted); } .deal-section-body { display: flex; flex-direction: column; gap: 1rem; } .field { min-width: 0; flex: 1; } .field-row { display: grid; gap: 1rem; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .field-help { margin: 0.25rem 0 0.4rem; font-size: 0.78rem; color: var(--color-muted); } .field-warn { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--color-warn); } .field-label .hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-dim); } .input { width: 100%; border: 1px solid var(--color-border-strong); background: var(--color-field); border-radius: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.9rem; color: var(--color-text); font-family: inherit; box-shadow: var(--shadow-press); } .input:focus { outline: none; border-color: var(--color-haggle-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-haggle-green) 20%, transparent); } textarea.input { min-height: 5rem; resize: vertical; } .input-with-button { display: flex; gap: 0.5rem; } .input-with-button .btn-ghost { flex-shrink: 0; } .link-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } /* Year range shows only for used/either; the trade description only with a trade. Pure CSS so the no-JS fallback still behaves. */ .deal-section:has(input[name="new_used"][value="new"]:checked) .year-range { display: none; } .deal-section:has(input[name="trade_in"][value="no"]:checked) .trade-description { display: none; } .form-actions { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .form-actions { flex-direction: row; align-items: center; justify-content: space-between; } } .form-actions-left, .form-actions-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .confirm-actions { display: flex; justify-content: center; align-items: center; gap: 0.75rem; } /* ---------- deal list cards ---------- */ .deal-group { display: flex; flex-direction: column; gap: 1rem; } .deal-group-title { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-dim); } .deal-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .deal-card { border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; box-shadow: var(--shadow-card); } .deal-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--color-border); padding: 0.75rem 1.1rem; } .deal-card-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--color-haggle-green); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-haggle-green) 35%, transparent); text-underline-offset: 2px; } .deal-card-link:hover { color: var(--color-haggle-green-bright); } .deal-card-body { padding: 1rem 1.1rem 1.2rem; } .progress-heading { color: var(--color-muted); letter-spacing: 0.08em; margin-bottom: 0.75rem; } /* Unread count: a quiet orange counter. */ .unread-pill { display: inline-flex; min-width: 1.35rem; min-height: 1.35rem; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--color-haggle-ez) 50%, transparent); border-radius: 9999px; padding: 0 0.35rem; background: color-mix(in srgb, var(--color-haggle-ez) 10%, transparent); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-haggle-ez); } /* Status chips: squared corners, like a rubber stamp on the paperwork. */ .status-chip { flex-shrink: 0; border: 1px solid; border-radius: 0.25rem; padding: 0.22rem 0.55rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .chip-draft { border-color: var(--color-border-strong); background: var(--color-panel); color: var(--color-muted); } .chip-submitted { border-color: color-mix(in srgb, var(--color-info) 45%, transparent); background: color-mix(in srgb, var(--color-info) 9%, transparent); color: var(--color-info); } .chip-assigned { border-color: color-mix(in srgb, light-dark(#0e7a72, #4cc0b3) 45%, transparent); background: color-mix(in srgb, light-dark(#0e7a72, #4cc0b3) 9%, transparent); color: light-dark(#0e7a72, #4cc0b3); } .chip-in-progress { border-color: color-mix(in srgb, var(--color-warn) 45%, transparent); background: color-mix(in srgb, var(--color-warn) 9%, transparent); color: var(--color-warn); } .chip-proposed { border-color: color-mix(in srgb, light-dark(#6b4fc0, #ab97e6) 45%, transparent); background: color-mix(in srgb, light-dark(#6b4fc0, #ab97e6) 9%, transparent); color: light-dark(#6b4fc0, #ab97e6); } .chip-accepted { border-color: color-mix(in srgb, var(--color-haggle-green) 50%, transparent); background: color-mix(in srgb, var(--color-haggle-green) 10%, transparent); color: var(--color-haggle-green); } .chip-completed { border-color: transparent; background: var(--color-green-fill); color: var(--color-on-green); } .chip-declined { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 9%, transparent); color: var(--color-danger); } .chip-rejected { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 9%, transparent); color: var(--color-danger); } .chip-cancelled { border-color: var(--color-border-strong); background: var(--color-panel); color: var(--color-dim); } /* ---------- deal progress bar ---------- */ .deal-progress { width: 100%; } .progress-track { display: flex; align-items: flex-start; overflow-x: auto; padding: 0.25rem 0.125rem 0.5rem; scrollbar-width: none; } .progress-track::-webkit-scrollbar { display: none; } .progress-step { display: flex; min-width: 3.4rem; flex: 1 0 auto; flex-direction: column; align-items: center; } .progress-connector { flex: 1 1 100%; min-width: 0.5rem; height: 2px; margin: 0.95rem 0.15rem 0; border-radius: 9999px; } .progress-connector.on { background: var(--color-haggle-green); } .progress-connector.bad { background: linear-gradient(to right, color-mix(in srgb, var(--color-haggle-green) 60%, transparent), color-mix(in srgb, var(--color-danger) 70%, transparent)); } .progress-connector.off { background: var(--color-border-strong); } .progress-circle { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; background: var(--color-card); } .progress-circle.done { border-color: transparent; background: var(--color-green-fill); color: var(--color-on-green); } .progress-circle.current { border-color: var(--color-haggle-ez); color: var(--color-haggle-ez); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-haggle-ez) 22%, transparent); } .progress-circle.upcoming { border-color: var(--color-border-strong); color: var(--color-dim); } .progress-circle.bad { border-color: color-mix(in srgb, var(--color-danger) 60%, transparent); background: color-mix(in srgb, var(--color-danger) 9%, var(--color-card)); color: var(--color-danger); } .progress-circle.cancel { border-color: var(--color-control); background: var(--color-panel); color: var(--color-muted); } .progress-label { margin-top: 0.5rem; max-width: 4.5rem; text-align: center; font-size: 0.68rem; font-weight: 600; line-height: 1.2; } .progress-label.done { color: var(--color-body); } .progress-label.current { color: var(--color-haggle-ez); font-weight: 700; } .progress-label.upcoming { color: var(--color-dim); } .progress-label.bad { color: var(--color-danger); } .progress-label.cancel { color: var(--color-muted); } .progress-caption { margin: 0.75rem 0 0; border-left: 2px solid; padding-left: 0.75rem; font-size: 0.8rem; line-height: 1.5; } .progress-caption.bad { border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); color: var(--color-danger); } .progress-caption.warn { border-color: color-mix(in srgb, var(--color-warn) 55%, transparent); color: var(--color-warn); } /* ---------- deal detail ---------- */ .detail-title { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-bright); } .back-link { margin: 0; font-size: 0.8rem; } .draft-banner { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid color-mix(in srgb, var(--color-haggle-ez) 35%, transparent); background: color-mix(in srgb, var(--color-haggle-ez) 6%, var(--color-card)); border-radius: 0.5rem; padding: 0.75rem 1rem; } @media (min-width: 640px) { .draft-banner { flex-direction: row; align-items: center; justify-content: space-between; } } .draft-banner p { margin: 0; font-size: 0.85rem; color: var(--color-body); } .btn-edit { flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--color-haggle-ez) 50%, transparent); background: none; border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.78rem; font-weight: 600; color: var(--color-haggle-ez); text-decoration: none; cursor: pointer; } .btn-edit:hover { background: color-mix(in srgb, var(--color-haggle-ez) 10%, transparent); } /* The deal sheet: one document card, handshake rule on its top edge. */ .detail-card { position: relative; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; box-shadow: var(--shadow-card); } .detail-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(to right, var(--color-haggle-green) calc(50% - 1px), var(--color-haggle-ez) calc(50% + 1px)); } .action-card { padding: 1rem 1.25rem 1.25rem; } .detail-heading { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-haggle-green); } .action-card p { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--color-muted); } .action-buttons { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .btn-complete { border: 1px solid transparent; background: var(--color-green-fill); border-radius: 0.5rem; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 700; color: var(--color-on-green); cursor: pointer; } .btn-complete:hover { background: var(--color-haggle-green-deep); } .detail-progress { border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-panel) 40%, var(--color-card)); padding: 1.25rem 1.25rem 1rem; } .buyer-caption { margin: 0.75rem 0 0; border-left: 2px solid color-mix(in srgb, var(--color-haggle-green) 45%, transparent); padding-left: 0.75rem; font-size: 0.85rem; line-height: 1.5; color: var(--color-body); } .detail-body { display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem 1.25rem; } .detail-header { border-bottom: 1px solid var(--color-border); padding-bottom: 1.25rem; } .detail-header h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-bright); } .detail-section h3 { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-haggle-green); } .detail-section dl { margin: 0; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-panel) 25%, var(--color-card)); border-radius: 0.5rem; padding: 0 1rem; } .detail-row { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 0.8rem 0; } .detail-row + .detail-row { border-top: 1px solid var(--color-border); } @media (min-width: 640px) { .detail-row { grid-template-columns: minmax(0, 11.5rem) 1fr; column-gap: 1.5rem; } } .detail-row dt { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-dim); padding-top: 0.2rem; } .detail-row dd { margin: 0; min-width: 0; font-size: 0.92rem; font-weight: 500; line-height: 1.5; color: var(--color-bright); font-variant-numeric: tabular-nums; } .detail-row dd.multiline { white-space: pre-wrap; font-weight: 400; color: var(--color-body); } .detail-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .detail-links a { font-weight: 500; color: var(--color-haggle-green); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-haggle-green) 35%, transparent); text-underline-offset: 2px; } .detail-links a:hover { text-decoration-color: var(--color-haggle-green); } .detail-links .unsafe-link { color: var(--color-dim); overflow-wrap: anywhere; } /* ---------- message thread ---------- */ .thread { overflow: hidden; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.5rem; } .thread > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.1rem; cursor: pointer; list-style: none; } .thread > summary::-webkit-details-marker { display: none; } .thread > summary::after { content: "\25BE"; color: var(--color-dim); } .thread[open] > summary::after { content: "\25B4"; } .thread-title { font-size: 0.88rem; font-weight: 600; color: var(--color-body); } .thread-counts { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; } .thread-total { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--color-dim); } .thread-body { border-top: 1px solid var(--color-border); padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; background: color-mix(in srgb, var(--color-panel) 20%, var(--color-card)); } .thread-nav { margin: 0; font-size: 0.75rem; } .thread-nav a { color: var(--color-muted); } .thread-nav a:hover { color: var(--color-text); } .thread-empty { margin: 1.5rem 0; text-align: center; font-size: 0.85rem; color: var(--color-dim); } .thread-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 26rem; overflow-y: auto; overscroll-behavior-y: contain; } .bubble-row { display: flex; } .bubble-row.mine { justify-content: flex-end; } .bubble { max-width: 80%; border: 1px solid; border-radius: 0.6rem; padding: 0.6rem 0.8rem; } .bubble.mine { border-color: color-mix(in srgb, var(--color-haggle-green) 40%, transparent); background: color-mix(in srgb, var(--color-haggle-green) 7%, var(--color-card)); } .bubble.other { border-color: color-mix(in srgb, var(--color-haggle-ez) 40%, transparent); background: color-mix(in srgb, var(--color-haggle-ez) 6%, var(--color-card)); } .bubble.system { border-color: var(--color-border-strong); background: var(--color-panel); } .bubble-meta { margin: 0; display: flex; flex-wrap: wrap; column-gap: 0.5rem; align-items: baseline; font-size: 0.75rem; } .bubble.mine .bubble-meta { justify-content: flex-end; } .bubble-sender { font-weight: 600; overflow-wrap: anywhere; } .bubble.mine .bubble-sender { color: var(--color-haggle-green); } .bubble.other .bubble-sender { color: var(--color-haggle-ez); } .bubble.system .bubble-sender { color: var(--color-muted); } .bubble-time { font-size: 0.7rem; color: var(--color-dim); } .bubble-body { margin: 0.35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.5; color: var(--color-bright); } .bubble-proposal { margin: 0.35rem 0 0; font-size: 0.8rem; } .bubble-proposal a { font-weight: 600; color: var(--color-haggle-green); text-decoration: underline; text-underline-offset: 2px; } /* The read-receipt form: with unread it shows a button; otherwise it is invisible and only exists for the htmx toggle trigger. */ .thread-read { margin: 0; } .thread-read.auto-only { display: none; } .thread-composer { border-top: 1px solid var(--color-border); padding-top: 0.75rem; } .composer-row { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 640px) { .composer-row { flex-direction: row; align-items: flex-end; } .composer-row .btn-complete { flex-shrink: 0; min-width: 6.5rem; } } .composer-error { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--color-danger); } .composer-hint { margin: 0.4rem 0 0; font-size: 0.7rem; color: var(--color-dim); } /* ---------- simulated checkout ---------- */ .checkout { align-items: center; } .checkout-card { position: relative; overflow: hidden; width: 100%; max-width: 28rem; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.75rem; padding: 1.5rem; box-shadow: var(--shadow-card); } .checkout-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(to right, var(--color-haggle-green) calc(50% - 1px), var(--color-haggle-ez) calc(50% + 1px)); } .checkout-head h1 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-bright); } .checkout-head p { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--color-muted); } .checkout-safety { border: 1px solid color-mix(in srgb, var(--color-haggle-green) 30%, transparent); background: color-mix(in srgb, var(--color-haggle-green) 6%, transparent); border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.78rem; } .fee-box { margin-top: 1.25rem; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-panel) 30%, var(--color-card)); border-radius: 0.5rem; padding: 0.85rem 1rem; } .fee-box .card-label { color: var(--color-dim); } .fee-amount { margin: 0.25rem 0 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; } .fee-note { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--color-dim); } .fee-deal { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--color-muted); } .mock-card-fields { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .checkout-actions { margin-top: 1.5rem; display: flex; flex-direction: column-reverse; gap: 0.6rem; } @media (min-width: 640px) { .checkout-actions { flex-direction: row; justify-content: flex-end; align-items: center; } } /* ---------- admin shell ---------- */ .admin-shell { width: 100%; max-width: 90rem; margin: 0 auto; padding: 1.25rem 1rem; } .admin-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.25rem; } .admin-tabs a { padding: 0.55rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-tabs a:hover { color: var(--color-text); } .admin-tabs a[aria-current="page"] { color: var(--color-haggle-green); border-bottom-color: var(--color-haggle-green); } .admin-readonly { margin-left: auto; align-self: center; padding: 0.2rem 0.6rem; border: 1px solid color-mix(in srgb, var(--color-haggle-ez) 45%, transparent); border-radius: 0.25rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-haggle-ez); } .admin-content { display: flex; flex-direction: column; gap: 1.25rem; } /* ---------- admin kit: page heads, toolbars, tables ---------- */ .admin-page-head h1 { margin: 0.25rem 0 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-bright); } .admin-page-head .admin-lede { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--color-muted); max-width: 48rem; } .admin-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; } .admin-head-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-card); } .admin-toolbar .input { width: auto; min-width: 14rem; flex: 1; } .admin-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--color-body); cursor: pointer; white-space: nowrap; } .admin-check input { accent-color: var(--color-green-fill); } .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-card); box-shadow: var(--shadow-card); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .admin-table th { padding: 0.6rem 0.75rem; text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-dim); border-bottom: 1px solid var(--color-border-strong); white-space: nowrap; } .admin-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-body); } .admin-table tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover { background: color-mix(in srgb, var(--color-panel) 45%, transparent); } .admin-table a { color: var(--color-haggle-green); font-weight: 600; text-decoration: none; } .admin-table a:hover { text-decoration: underline; text-underline-offset: 2px; } .admin-table .num { text-align: right; font-variant-numeric: tabular-nums; } .admin-table .stamp { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-muted); } .admin-table .dim { color: var(--color-dim); } .admin-empty { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-dim); } .pager { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ---------- admin kit: entity pages ---------- */ .entity-grid { display: grid; gap: 1.25rem; align-items: start; } @media (min-width: 1024px) { .entity-grid { grid-template-columns: minmax(0, 1fr) 20rem; } } .entity-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .entity-rail { display: flex; flex-direction: column; gap: 1rem; } .rail-card { border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-card); padding: 1rem 1.1rem; box-shadow: var(--shadow-card); } .rail-card h2 { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-dim); } .rail-rows { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .rail-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.82rem; } .rail-row dt { color: var(--color-dim); } .rail-row dd { margin: 0; color: var(--color-body); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .rail-actions { display: flex; flex-direction: column; gap: 0.5rem; } .admin-section { border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-card); padding: 1.1rem 1.25rem 1.25rem; box-shadow: var(--shadow-card); } .admin-section > h2 { margin: 0 0 0.9rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-haggle-green); } .admin-section .deal-section-body { gap: 1rem; } .lifecycle-row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.4rem 0; } .lifecycle-row + .lifecycle-row { border-top: 1px solid var(--color-border); } .lifecycle-stamp { font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--color-body); } .lifecycle-stamp.unset { color: var(--color-dim); } .lifecycle-buttons { display: inline-flex; gap: 0.4rem; } .lifecycle-buttons .btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; } .action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--color-border-strong); padding-top: 1rem; margin-top: 0.25rem; } /* ---------- admin kit: audit log ---------- */ .audit-entry { padding: 0.6rem 0; } .audit-entry + .audit-entry { border-top: 1px solid var(--color-border); } .audit-meta { margin: 0; font-size: 0.78rem; color: var(--color-muted); } .audit-actor { color: var(--color-haggle-green); font-weight: 600; } .audit-actions { color: var(--color-body); } .audit-changes { margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; } .audit-change { display: flex; gap: 0.6rem; font-size: 0.78rem; align-items: baseline; } .audit-change dt { flex-shrink: 0; min-width: 9rem; color: var(--color-dim); } .audit-change dd { margin: 0; overflow-wrap: anywhere; color: var(--color-body); } .audit-change del { color: var(--color-danger); text-decoration-color: color-mix(in srgb, var(--color-danger) 60%, transparent); } .audit-change ins { color: var(--color-haggle-green); text-decoration: none; } .audit-more { margin-top: 0.75rem; } .agent-avatar { max-width: 100%; border-radius: 0.5rem; border: 1px solid var(--color-border-strong); margin-bottom: 0.75rem; } .life-on { color: var(--color-haggle-green); font-weight: 700; } .life-bad { color: var(--color-danger); font-weight: 700; } .brand-tier > summary { cursor: pointer; list-style: none; } .brand-tier > summary::-webkit-details-marker { display: none; } .brand-tier > summary h2 { display: inline; } .brand-tier > summary::after { content: " \25BE"; color: var(--color-dim); } .brand-tier[open] > summary::after { content: " \25B4"; } .brand-tier .table-wrap { margin-top: 0.9rem; border: none; background: transparent; box-shadow: none; } .tier-group { margin-top: 0.75rem; } .admin-toolbar .tab-active { border-color: var(--color-haggle-green); color: var(--color-haggle-green); } /* ---------- EZfinder ---------- */ .finder-title { margin: 0; font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.02em; } .section { border: 1px solid var(--color-border); background: var(--color-card); border-radius: 0.5rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .section > summary, .subsection > summary { cursor: pointer; padding: 1rem 1.25rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; list-style: none; } .section > summary::-webkit-details-marker, .subsection > summary::-webkit-details-marker { display: none; } .section > summary::after, .subsection > summary::after { content: " \25BE"; color: var(--color-dim); } .section[open] > summary::after, .subsection[open] > summary::after { content: " \25B4"; } .section-body { padding: 0 1.25rem 1.25rem; } .section-heading h2 { margin: 1rem 0 0; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .section-heading p { margin: 0.15rem 0 0.75rem; font-size: 0.78rem; color: var(--color-muted); } .purpose-grid { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .purpose-grid { grid-template-columns: repeat(3, 1fr); } } /* Each questionnaire flavor keeps an accent, tuned per theme and pulled from one temperature family instead of the prototype's neon zoo. */ .subsection { border: 1px solid var(--color-border); border-radius: 0.5rem; margin-top: 0.75rem; --accent: var(--color-haggle-green); --accent-bright: var(--color-haggle-green-bright); --on-accent: var(--color-on-green); } .subsection > summary { color: var(--accent); } .accent-mechanical { --accent: light-dark(#0f7480, #52bfcc); --accent-bright: light-dark(#0a5a64, #74d2dd); --on-accent: light-dark(#ffffff, #0c1314); } .accent-commute { --accent: light-dark(#5757c9, #9d9dee); --accent-bright: light-dark(#4343ad, #b6b6f4); --on-accent: light-dark(#ffffff, #0e0e18); } .accent-utility { --accent: light-dark(#68761d, #b4c74e); --accent-bright: light-dark(#535e14, #c5d670); --on-accent: light-dark(#ffffff, #121407); } .accent-ownership { --accent: light-dark(#a13c8c, #dd85c9); --accent-bright: light-dark(#832f72, #e7a3d7); --on-accent: light-dark(#ffffff, #180d15); } .accent-fun { --accent: light-dark(#bb3a45, #ee8089); --accent-bright: light-dark(#9c2f39, #f29ca3); --on-accent: light-dark(#ffffff, #180d0e); } .accent-refinements { --accent: light-dark(#1f6fae, #6fb4e6); --accent-bright: light-dark(#175a8f, #92c6ec); --on-accent: light-dark(#ffffff, #0c1218); } .card-grid { display: grid; gap: 0.75rem; padding: 0 1rem 1rem; } @media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .toggle-card.wide { grid-column: 1 / -1; } } .toggle-card { border: 1px solid var(--color-border-strong); background: var(--color-card); border-radius: 0.5rem; padding: 0.9rem; } .toggle-card:hover { border-color: var(--color-control); } .toggle-card:has(.card-toggle:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--color-card)); } .toggle-head { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .toggle-head .card-toggle { position: absolute; opacity: 0; pointer-events: none; } .toggle-title { flex: 1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); } .toggle-state { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .toggle-state .on { display: none; color: var(--accent); } .toggle-state .off { color: var(--color-dim); } .toggle-card:has(.card-toggle:checked) .toggle-state .on { display: inline; } .toggle-card:has(.card-toggle:checked) .toggle-state .off { display: none; } .toggle-body { margin-top: 0.75rem; } .toggle-card:not(:has(.card-toggle:checked)) .toggle-body { opacity: 0.45; } .field-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 0.5rem; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { display: inline-flex; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { padding: 0.45rem 0.7rem; border: 1px solid var(--color-border-strong); border-radius: 0.35rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; user-select: none; } .chip input:checked + span { background: var(--accent, var(--color-green-fill)); border-color: var(--accent, var(--color-green-fill)); color: var(--on-accent, var(--color-on-green)); } .chip input:focus-visible + span { outline: 2px solid var(--accent, var(--color-haggle-green)); outline-offset: 1px; } .slider-field { min-width: 0; } .slider-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 0.4rem; } .slider-field input[type="range"] { width: 100%; height: 0.375rem; appearance: none; background: var(--color-panel); border-radius: 0.5rem; accent-color: var(--accent, var(--color-green-fill)); cursor: pointer; } .slider-field input[type="range"]::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--accent, var(--color-green-fill)); } .slider-field input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border: none; border-radius: 9999px; background: var(--accent, var(--color-green-fill)); } .slider-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-dim); } .slider-meta output { font-weight: 700; font-size: 0.9rem; color: var(--accent, var(--color-haggle-green)); font-variant-numeric: tabular-nums; } .toggle-card input[type="text"], .toggle-card textarea { width: 100%; border: 1px solid var(--color-border-strong); background: var(--color-field); border-radius: 0.35rem; padding: 0.6rem; font-size: 0.85rem; color: var(--color-text); font-family: inherit; } .toggle-card textarea { height: 5rem; resize: vertical; } .toggle-card input[type="text"]:focus, .toggle-card textarea:focus { outline: none; border-color: var(--accent, var(--color-haggle-green)); } .finder-submit { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.75rem; border: none; border-radius: 0.5rem; padding: 1.15rem; font-size: 1rem; font-weight: 700; background: var(--color-green-fill); color: var(--color-on-green); cursor: pointer; transition: background-color 0.15s; } .finder-submit:hover { background: var(--color-haggle-green-deep); } .finder-overlay { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(4px); } .finder-overlay.htmx-request { display: flex; } .overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .overlay-inner p { margin: 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .spinner { width: 3rem; height: 3rem; border: 4px solid var(--color-haggle-green); border-top-color: transparent; border-radius: 9999px; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .terminal-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow-card); } .terminal-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--color-panel); } .terminal-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); } .dots { display: inline-flex; gap: 0.35rem; } .dots .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; } .dots .red { background: color-mix(in srgb, var(--color-danger) 45%, transparent); } .dots .yellow { background: color-mix(in srgb, var(--color-warn) 45%, transparent); } .dots .green { background: color-mix(in srgb, var(--color-haggle-green) 45%, transparent); } .terminal-body { padding: 1.25rem; } .terminal-footer { display: block; padding: 1.5rem; border-top: 1px solid var(--color-border); text-align: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-dim); text-decoration: none; } .terminal-footer:hover { color: var(--color-text); } .result-error { border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent); background: color-mix(in srgb, var(--color-danger) 5%, var(--color-card)); border-radius: 0.5rem; padding: 1rem; } .result-error-heading { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-danger); } .result-error-message { margin: 0; font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--color-danger); white-space: pre-wrap; } /* Markdown output (the sanitized recommendation). */ .prose { font-size: 0.9rem; line-height: 1.65; color: var(--color-body); } .prose h1, .prose h2, .prose h3, .prose h4 { color: var(--color-bright); font-weight: 700; line-height: 1.3; margin: 1.25em 0 0.5em; } .prose h1 { font-size: 1.25rem; } .prose h2 { font-size: 1.1rem; } .prose h3 { font-size: 1rem; } .prose p { margin: 0.6em 0; } .prose strong { color: var(--color-text); } .prose a { color: var(--color-haggle-green); text-decoration: underline; text-underline-offset: 2px; } .prose ul, .prose ol { padding-left: 1.4em; margin: 0.6em 0; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin: 0.25em 0; } .prose code { background: var(--color-panel); border-radius: 0.2rem; padding: 0.1em 0.35em; font-size: 0.9em; } .prose blockquote { border-left: 3px solid var(--color-border-strong); margin: 0.75em 0; padding-left: 1em; color: var(--color-muted); } .prose table { border-collapse: collapse; margin: 0.75em 0; width: 100%; display: block; overflow-x: auto; } .prose th, .prose td { border: 1px solid var(--color-border-strong); padding: 0.4em 0.7em; text-align: left; } .prose th { color: var(--color-bright); background: var(--color-panel); } .prose hr { border: none; height: 1px; background: var(--color-border-strong); margin: 1.25em 0; } /* ---------- Account & agent application ---------- */ /* Required-field marker on form labels. */ .req { color: var(--color-haggle-ez); font-weight: 700; } /* Application status banner (submitted / approved / denied / withdrawn). */ .status-banner { border-radius: 0.5rem; padding: 0.9rem 1.1rem; font-size: 0.85rem; border: 1px solid var(--color-border-strong); background: var(--color-card); color: var(--color-muted); } .status-banner p { margin: 0; } .status-banner-title { margin: 0 0 0.25rem; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); } .status-banner.ok { border-color: color-mix(in srgb, var(--color-haggle-green) 40%, transparent); background: color-mix(in srgb, var(--color-haggle-green) 6%, var(--color-card)); } .status-banner.ok .status-banner-title { color: var(--color-haggle-green); } .status-banner.info { border-color: color-mix(in srgb, var(--color-haggle-ez) 40%, transparent); background: color-mix(in srgb, var(--color-haggle-ez) 5%, var(--color-card)); } .status-banner.info .status-banner-title { color: var(--color-haggle-ez); } .status-banner.bad { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-card)); } .status-banner.bad .status-banner-title { color: var(--color-danger); } /* Brand-specialization picker: tier heading with its select-all, then a wrapping grid of checkbox chips. */ .tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; } .brand-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* ---------- Proposal composer & review ---------- */ /* Finance/lease field groups keyed off the structure select (pure CSS, like the EZdeal year-range toggle). Lease shows both groups. */ .proposal-form .finance-fields, .proposal-form .lease-fields { display: none; } .proposal-form:has(select[name="payment_structure"] option[value="finance"]:checked) .finance-fields { display: grid; } .proposal-form:has(select[name="payment_structure"] option[value="lease"]:checked) .finance-fields, .proposal-form:has(select[name="payment_structure"] option[value="lease"]:checked) .lease-fields { display: grid; } /* Dealer typeahead results: one full-width button per hit. */ .dealer-results { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; } .dealer-hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; width: 100%; text-align: left; border: 1px solid var(--color-border-strong); background: var(--color-card); border-radius: 0.5rem; padding: 0.55rem 0.75rem; cursor: pointer; font: inherit; color: var(--color-text); } .dealer-hit:hover { border-color: var(--color-haggle-green); } .dealer-name { font-weight: 700; } .dealer-address { font-size: 0.78rem; color: var(--color-muted); } .dealer-unrated { margin-left: auto; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-warn); } /* The selected catalogue dealer, read-only with a Clear action. */ .dealer-selected { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border: 1px solid color-mix(in srgb, var(--color-haggle-green) 40%, transparent); background: color-mix(in srgb, var(--color-haggle-green) 5%, var(--color-card)); border-radius: 0.5rem; padding: 0.7rem 0.9rem; } .dealer-selected p { margin: 0; } /* Drafts and proposal cards on the workspace / deal detail. */ .draft-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .proposal-cards { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .proposal-card { border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.8rem 1rem; background: var(--color-card); } .proposal-card.dimmed { opacity: 0.55; } .proposal-price { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--color-muted); font-variant-numeric: tabular-nums; } /* The buyer's reject flow folds out under the accept action. */ .reject-details { margin-top: 0.75rem; } .reject-details summary { cursor: pointer; font-size: 0.8rem; color: var(--color-muted); } .reject-details form { margin-top: 0.75rem; }