/* * Auctioneer — public visual system. * * Propshaft serves this file directly (no preprocessing). Organized as: tokens → * base/type → shell (header/footer/flash) → controls (buttons/forms) → catalog → * auction detail (gallery + sale instrument + bid ledger) → auth/account → motion. * * Design intent lives in specs scratchpad design-notes: a live community * auction. Brand color is INJECTED per deployment (--brand-primary, * default forest #1f5130) and used as the org's house color; a separate reserved * --live red signals TIME urgency only (closing window / anti-sniping), never brand. */ /* ----- Self-hosted fonts ------------------------------------------------ */ /* No external font requests (Principle VIII — offline-capable, self-hostable). Files live in app/assets/fonts (on the asset load path); Propshaft fingerprints them and rewrites these bare-filename url()s. Archivo Expanded + Inter are variable (weight ranges); Space Mono ships static 400/700. */ @font-face { font-family: "Archivo Expanded"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/assets/archivo-expanded-74876bef.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/inter-496a588b.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/space-mono-400-2fb0d22d.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/space-mono-700-27e084bd.woff2") format("woff2"); } /* ----- Tokens ----------------------------------------------------------- */ :root { /* --brand-primary is INJECTED inline from SystemConfiguration in the , which loads BEFORE this stylesheet. Declaring a default value here would win on source order (equal :root specificity, later wins) and silently override the injected color, so the default lives in the var() fallback instead. */ --brand: var(--brand-primary, #1f5130); --on-brand: #ffffff; --paper: #e9e8e2; /* page: warm-grey background */ --card: #fbfaf6; /* item card stock */ --surface: #ffffff; /* elevated panels */ --ink: #1a1b18; /* near-black warm text */ --ink-soft: #56574e; /* muted labels / secondary */ --line: #d6d5c9; /* hairline */ --brand-tint: color-mix(in srgb, var(--brand) 12%, var(--card)); --live: #c2261b; /* TIME URGENCY ONLY */ --live-tint: #fbe9e6; --live-ink: #7c1d15; /* AA-contrast dark red: readable text on --live-tint */ --r-tag: 3px; --r: 8px; --r-lg: 14px; --shadow: 0 1px 2px rgba(26, 27, 24, .04), 0 6px 18px rgba(26, 27, 24, .06); --shadow-lift: 0 2px 4px rgba(26, 27, 24, .06), 0 14px 30px rgba(26, 27, 24, .10); --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --maxw: 1120px; } /* ----- Base & type ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { display: block; max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.25rem 3rem; } h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 .5rem; overflow-wrap: break-word; /* long lot titles wrap rather than overflow on narrow screens */ } h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); } h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; } h3 { font-size: 1.1rem; font-weight: 700; } p { margin: 0 0 1rem; } a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } /* Eyebrow / kicker: the poster-bill label voice. */ .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .35rem; } .hint { color: var(--ink-soft); font-size: .9rem; } /* A resend-verification button_to sits inline in a .hint sentence; drop the form's box (it is display:block by default) so the button flows in the line instead of wrapping onto its own row (same technique as .header-nav .button_to). */ .hint .button_to { display: contents; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; } /* ----- Lot-tag: the notched auction ticket chip ------------------------- */ .lot-tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .6rem; background: var(--ink); color: #fff; border-radius: var(--r-tag); /* one clipped corner = the string-tied auction tag */ clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); } .lot-tag[data-state="open"] { background: var(--brand); color: var(--on-brand); } .lot-tag[data-state="scheduled"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .lot-tag[data-state="closed"], .lot-tag[data-state="cancelled"], .lot-tag[data-state="no_sale"] { background: var(--ink-soft); color: #fff; } /* terminal, non-sold */ .lot-tag[data-state="sold"] { background: var(--ink); color: #fff; } /* distinct from no_sale */ /* ----- Shell: header / footer / flash ----------------------------------- */ .site-header { background: var(--brand); color: var(--on-brand); } .site-nav { max-width: var(--maxw); margin: 0 auto; padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-header a, .site-header .brand-name { color: var(--on-brand); text-decoration: none; } .brand { display: inline-flex; align-items: center; } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; } .brand-logo { display: block; max-height: 44px; width: auto; } /* Only present when a logo is attached, so a name-only header is untouched by any of this. .site-nav already wraps, so the lockup drops onto its own row before it can crowd the auth links; what wrapping there does NOT solve is the lockup itself being wider than a phone, which is easy to hit (a 200x60 logo renders ~147px wide at the 44px cap, and org names run long). flex-wrap here lets the name fall under the logo rather than push the header sideways into a horizontal scroll, and the phone rule below trims both so it usually still fits on one line. The name is never display:none at any width. Once the logo went decorative (alt="" in layouts/_branding) this text is the home link's ONLY accessible name, so hiding it on small screens would ship an unnamed link (WCAG 2.4.4 / 4.1.2). Shrinking is the lever available here; hiding is not. */ .brand-lockup { gap: .6rem; flex-wrap: wrap; } @media (max-width: 600px) { .brand-lockup .brand-logo { max-height: 32px; } .brand-lockup .brand-name { font-size: 1.05rem; } } .header-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .header-nav a, .header-nav .link-button { font-weight: 500; font-size: .95rem; color: var(--on-brand); } .header-nav a:hover, .header-nav .link-button:hover { text-decoration: underline; } .header-nav .link-button { text-decoration: none; } /* Sign out is a button_to — a
wrapping the button. display:contents drops the form's box so the button becomes a direct flex child, aligning on the same baseline and gap as the sibling links instead of sitting in its own nested box. */ .header-nav .button_to { display: contents; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--brand); padding: .5rem 1rem; z-index: 1000; border-radius: 0 0 var(--r) 0; } .skip-link:focus { left: 0; } .flash { margin: 0 0 1.25rem; padding: .7rem 1rem; border-radius: var(--r); font-size: .95rem; border: 1px solid transparent; } .flash-notice { background: var(--brand-tint); color: var(--ink); border-color: color-mix(in srgb, var(--brand) 35%, transparent); } .flash-alert { background: var(--live-tint); color: var(--live-ink); border-color: color-mix(in srgb, var(--live) 35%, transparent); } .site-footer { border-top: 1px solid var(--line); margin-top: 2rem; } .site-footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem; color: var(--ink-soft); font-size: .9rem; } /* ----- Controls: buttons & forms ---------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem; width: 100%; max-width: 26rem; } input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 0; } .field { margin-bottom: 1.1rem; } .field label, .field > .form-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; } .field .hint { margin: .35rem 0 0; } .field-checkbox { display: flex; align-items: center; gap: .5rem; } .field-checkbox label { margin: 0; font-weight: 500; } .field-checkbox input { width: auto; } /* Checkbox group (e.g. admin settings "Picture types allowed"): a borderless fieldset whose legend reads like a field label and whose options are compact, inline checkbox rows. Selectors are specific enough to beat `.field label`. */ .checkbox-group { border: 0; padding: 0; margin: 0 0 1.1rem; } .checkbox-group > legend { display: block; font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .35rem; } .checkbox-group .checkbox { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-weight: 500; } .checkbox-group .checkbox input { width: auto; margin: 0; } /* Brand-color AA suggestion (admin settings): a click-to-apply swatch the brand-color controller reveals when the picked color fails contrast, so the admin applies the nearest compliant shade instead of guessing a darker one. */ .brand-color-suggestion { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } /* display:flex above would otherwise beat the UA `[hidden] { display:none }`, so the controller's hidden toggle needs this higher-specificity rule to actually hide it. */ .brand-color-suggestion[hidden] { display: none; } .brand-swatch-apply { display: inline-flex; align-items: center; gap: .4rem; font: inherit; cursor: pointer; padding: .15rem .5rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); font-family: var(--font-mono); } .brand-swatch-apply:hover { border-color: var(--brand); } .brand-swatch { width: 1rem; height: 1rem; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(26, 27, 24, .18); } /* Primary action: solid house color. button_to/submit/.btn share this. A bare