/* ============================================================================
Nevada Gun Auctions — Design Reference for BidSquare
----------------------------------------------------------------------------
Drop this file into your stylesheet pipeline as a starting point, OR read it
top to bottom as documentation. Every token and pattern below is copied from
what's actually shipped on the WordPress site so the embedded BidSquare view
reads as one continuous house identity.
Live site: https://nevadagunauction.com
Staging: https://nevadagunauctions.kinsta.cloud
Mount target: https://nevadagunauctions.kinsta.cloud/auctions/
(see the .bidsquare-mount-section .mount-frame inside that page)
Three things to know first:
1. The chrome (header + footer) is rendered by WordPress. You don't need to
reproduce it — just inherit from the page. Anything in this file scoped
to the chrome is here for reference only, in case you want a hosted view
that matches when opened standalone.
2. There is one body class that flips the chrome's background between
translucent (over-hero) and solid black:
body.nga-opaque-chrome .cmd-header { background: var(--nga-ink); }
The Auctions page (BidSquare's mount) already has it set, so BidSquare
embeds get the solid black variant by default. No action needed.
3. Fairplex Wide / Fairplex Narrow / Corbel are the production fonts via
Adobe Typekit. Until the kit is provisioned, the stack falls back to
Roboto Slab + Inter (Google Fonts) and renders acceptably. When the kit
is ready, the same `--font-display` / `--font-sans` tokens still resolve.
Section index:
----------------------------------------------------------------------------
1. Color tokens
2. Typography tokens (families + fluid scale)
3. Base + layout container
4. Headings + body type
5. Eyebrows, mono, contact-line meta
6. Buttons
7. Section header (eyebrow + h2 + see-all link)
8. Lot card (the canonical product unit)
9. Status pills (open / bidding / live)
10. Category tile
11. Past-results row
12. Form fields (search + newsletter pattern)
13. Live-strip pill (only visible when sale is live)
14. Animations
15. Breakpoints + responsive notes
============================================================================ */
/* ============================================================================
1. COLOR TOKENS
----------------------------------------------------------------------------
Use the semantic --fg / --bg / --accent aliases when possible — they let
downstream theming flip without renaming every selector.
The palette is warm-paper editorial: parchment surfaces, warm-black ink,
one gold accent. Oxblood is reserved for live-auction state. Gunmetal and
moss are accent earth tones used sparingly.
============================================================================ */
:root {
/* Brand */
--nga-gold: #B08437; /* primary accent — reserved, used sparingly */
--nga-gold-dark: #8E6826; /* hover/press for gold; eyebrow color */
--nga-gold-light: #D4A45A; /* highlights on dark surfaces */
/* Ink (warm black) */
--nga-ink: #1A1814; /* primary text + dark UI fill */
--nga-ink-soft: #2D2820; /* secondary text */
/* Parchment / bone / mist */
--nga-parchment: #F4EEE0; /* page background */
--nga-parchment-deep: #E8DFC9; /* deeper card / section fill */
--nga-bone: #FBF7EE; /* softest surface, default card bg */
--nga-mist: #C9C2B0; /* rules, dividers, muted text */
/* Earth accents */
--nga-oxblood: #8B2A24; /* LIVE auction red, alerts */
--nga-oxblood-deep: #6B1F1A;
--nga-clay: #A66A3D; /* warm terra, subcategory cue */
--nga-gunmetal: #3B3A36; /* cool deep, dark UI surface */
--nga-moss: #5A6240; /* success / optional 4th earth tone */
/* Semantic aliases — prefer these */
--fg: var(--nga-ink);
--fg-soft: var(--nga-ink-soft);
--fg-muted: var(--nga-mist);
--bg: var(--nga-parchment);
--bg-surface: var(--nga-bone);
--bg-deep: var(--nga-parchment-deep);
--accent: var(--nga-gold);
--accent-hover: var(--nga-gold-dark);
--danger: var(--nga-oxblood);
--success: var(--nga-moss);
--rule: var(--nga-ink);
--rule-soft: var(--nga-mist);
}
/* ============================================================================
2. TYPOGRAPHY TOKENS
----------------------------------------------------------------------------
Three families:
- Fairplex Wide → display / headlines (Adobe Typekit: "fairplex-wide")
- Fairplex Narrow → long-form body / catalog copy
- Corbel → sans utility, eyebrows, UI chrome
- JetBrains Mono → ornamental caps, lot IDs, ⌘K chip, monospace meta
Until Typekit is provisioned, the stack falls back to Roboto Slab + Inter
(Google Fonts). Same token names — no rename needed when fonts swap.
Type scale is a fluid clamp() ladder, ratio ~1.2. Use --step-* on body /
componentry rather than hard-coded sizes.
============================================================================ */
:root {
--font-display: "fairplex-wide", "Fairplex Wide OT", "Roboto Slab", Georgia, serif;
--font-serif: "fairplex-wide", "Fairplex Wide OT", "Roboto Slab", Georgia, serif;
--font-narrow: "fairplex-narrow", "Fairplex Narrow OT", "Roboto Slab", Georgia, serif;
--font-sans: "corbel", "Corbel", "Inter", "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
--step--2: clamp(.68rem, .66rem + .1vw, .75rem); /* micro / caption */
--step--1: clamp(.82rem, .78rem + .15vw, .9rem); /* small / eyebrow */
--step-0: clamp(1rem, .95rem + .2vw, 1.1rem); /* body */
--step-1: clamp(1.18rem, 1.1rem + .4vw, 1.35rem); /* lead / h5 */
--step-2: clamp(1.4rem, 1.3rem + .6vw, 1.75rem); /* h4 */
--step-3: clamp(1.8rem, 1.55rem + 1vw, 2.4rem); /* h3 */
--step-4: clamp(2.4rem, 2rem + 1.8vw, 3.5rem); /* h2 */
--step-5: clamp(3rem, 2.4rem + 3vw, 5.25rem); /* h1 */
--step-6: clamp(4rem, 3rem + 4.5vw, 7rem); /* hero */
}
/* Recommended for non-Typekit users — already enqueued on the WP site:
When Typekit is provisioned, replace with:
*/
/* ============================================================================
3. BASE + LAYOUT CONTAINER
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, textarea { font-family: inherit; }
/* Page container — centers content, gives a fluid gutter, caps at 1520px.
Use as the inner wrapper of any full-bleed section. */
.nga-page {
max-width: 1520px;
margin: 0 auto;
padding: 0 clamp(1.75rem, 4vw, 3rem);
position: relative;
z-index: 1;
}
/* ============================================================================
4. HEADINGS + BODY TYPE
----------------------------------------------------------------------------
Headlines are display-serif (Fairplex Wide). h5/h6 swap to sans for label
weight. Bodies are serif. .lead and italics are used liberally for editorial
voice.
============================================================================ */
h1, .h1 {
font-family: var(--font-display);
font-size: var(--step-5);
font-weight: 700;
line-height: 1.05;
letter-spacing: .01em;
color: var(--fg);
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--step-4);
font-weight: 700;
line-height: 1.08;
color: var(--fg);
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 700;
line-height: 1.1;
color: var(--fg);
}
h4, .h4 {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 700;
line-height: 1.15;
color: var(--fg);
}
h5, .h5 {
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--fg);
}
h6, .h6 {
font-family: var(--font-sans);
font-size: var(--step--1);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .22em;
color: var(--fg);
}
p, .body {
font-family: var(--font-serif);
font-size: var(--step-0);
line-height: 1.55;
color: var(--fg);
max-width: 68ch;
}
.lead {
font-size: var(--step-1);
line-height: 1.5;
color: var(--fg-soft);
font-style: italic;
}
/* ============================================================================
5. EYEBROWS / MONO META / CONTACT-LINE
----------------------------------------------------------------------------
Sans-uppercase eyebrows sit above headlines on every section. Mono is used
for lot IDs, hours, kbd chips, and any "data-feeling" label.
============================================================================ */
.eyebrow {
font-family: var(--font-sans);
font-size: var(--step--1);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .28em;
color: var(--nga-gold-dark);
}
.mono {
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: .02em;
text-transform: uppercase;
}
/* Contact-line: label-on-top + value-below, used in footer and contact pages */
.contact-line {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.5;
margin: 0 0 6px;
}
.contact-line .k {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
text-transform: uppercase; color: var(--nga-gold-light);
display: block; margin-bottom: 2px;
}
/* ============================================================================
6. BUTTONS
----------------------------------------------------------------------------
One small family: outline default + solid gold variant. Sharp corners, no
border-radius — sharp corners are part of the editorial brand.
============================================================================ */
.nga-btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-weight: 700;
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
padding: 10px 18px;
border: 1px solid var(--nga-ink);
background: transparent; color: var(--nga-ink);
transition: all .15s ease-out;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
}
.nga-btn:hover {
background: var(--nga-ink);
color: var(--nga-parchment);
}
.nga-btn.gold {
background: var(--nga-gold);
color: var(--nga-ink);
border-color: var(--nga-gold);
}
.nga-btn.gold:hover {
background: var(--nga-gold-dark);
border-color: var(--nga-gold-dark);
color: var(--nga-parchment);
}
/* "See all →" link button used in section headers */
.see-all {
font-family: var(--font-sans); font-size: 11px; letter-spacing: .24em;
text-transform: uppercase; font-weight: 700;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 18px;
border: 1px solid currentColor;
color: var(--nga-ink);
transition: all .15s ease-out;
white-space: nowrap;
text-decoration: none;
}
.see-all:hover { background: var(--nga-ink); color: var(--nga-parchment); }
.see-all .arrow { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0; }
/* ============================================================================
7. SECTION HEADER
----------------------------------------------------------------------------
Pattern: eyebrow → h2 → italic sub (left column) + see-all button (right).
Underlined with a 1px ink rule. Wraps to single column when narrow.
============================================================================ */
.section-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px;
margin-bottom: clamp(28px, 3.5vw, 48px);
padding-bottom: 18px;
border-bottom: 1px solid var(--nga-ink);
flex-wrap: wrap;
}
.section-header .lead-col { max-width: 62ch; }
.section-header .eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em;
text-transform: uppercase; color: var(--nga-gold-dark);
margin-bottom: 10px;
}
.section-header h2 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.05; letter-spacing: .005em;
margin: 0 0 10px;
}
.section-header .sub {
font-family: var(--font-serif); font-size: 15px; line-height: 1.55;
color: var(--nga-ink-soft); margin: 0;
font-style: italic;
}
/* ============================================================================
8. LOT CARD — the canonical product unit
----------------------------------------------------------------------------
Used for catalog grids ("On the block"), category landing pages, search
results, related lots. Hover lifts 2px and softens the shadow.
Structure (nest inside a .lot-grid for layout):
.lot-card
.image
.lot-tag (top-left: lot number on ink)
.lot-status (top-right: "Open" gold OR "Bidding" oxblood-pulse)
![]()
(object-fit: contain, padding 18px 22px on white)
.body
.maker (mono uppercase, gold-dark)
.title (display 17px bold)
.era (italic, soft ink)
.bid-row
.k / .v (current bid + activity, mono labels)
============================================================================ */
.lot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: clamp(14px, 1.6vw, 24px);
}
.lot-card {
background: var(--nga-bone);
border: 1px solid var(--nga-mist);
position: relative;
display: flex; flex-direction: column;
transition: transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
cursor: pointer;
text-decoration: none;
}
.lot-card:hover {
transform: translateY(-2px);
border-color: var(--nga-ink);
box-shadow: 0 10px 32px rgba(26, 24, 20, .12);
}
.lot-card .image {
position: relative;
aspect-ratio: 1 / 1;
background: #ffffff;
overflow: hidden;
border-bottom: 1px solid var(--nga-mist);
}
.lot-card .image img {
width: 100%; height: 100%;
object-fit: contain;
padding: 18px 22px;
filter: drop-shadow(0 2px 6px rgba(26, 24, 20, .1));
transition: transform .4s ease-out;
}
.lot-card:hover .image img { transform: scale(1.04); }
.lot-card .lot-tag {
position: absolute; top: 0; left: 0;
padding: 4px 10px;
background: var(--nga-ink); color: var(--nga-parchment);
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase;
}
.lot-card .body {
padding: 14px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
flex: 1;
}
.lot-card .maker {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--nga-gold-dark);
}
.lot-card .title {
font-family: var(--font-display); font-weight: 700;
font-size: 17px; line-height: 1.2;
color: var(--nga-ink);
}
.lot-card .era {
font-family: var(--font-serif); font-style: italic;
font-size: 13px; color: var(--nga-ink-soft);
}
.lot-card .bid-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: auto; padding-top: 10px;
border-top: 1px solid var(--nga-mist);
}
.lot-card .bid-row .k {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
text-transform: uppercase; color: var(--nga-ink-soft);
display: block; margin-bottom: 2px;
}
.lot-card .bid-row .v {
font-family: var(--font-display); font-weight: 700;
font-size: 16px; color: var(--nga-ink);
}
.lot-card .bid-row .bids { text-align: right; }
.lot-card .bid-row .bids .v { color: var(--nga-gold-dark); }
/* ============================================================================
9. STATUS PILLS — "Open" vs "Bidding" (live)
----------------------------------------------------------------------------
Two states, both in the top-right of a lot card image. Gold = open for
bidding (default). Oxblood + pulsing dot = live auction in progress.
The "live" state should only render when the active sale is actually live.
The chrome's `body.nga-live` class is set when the WP Customizer's
"Live session running" toggle is on — BidSquare can read that to decide
whether to render the live variant on lot cards.
============================================================================ */
.lot-status {
position: absolute; top: 0; right: 0;
padding: 4px 10px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase;
background: var(--nga-gold);
color: var(--nga-ink);
}
.lot-status.live {
background: var(--nga-oxblood);
color: var(--nga-parchment);
display: inline-flex; align-items: center; gap: 6px;
}
.lot-status.live::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
animation: pulse 1.6s ease-in-out infinite;
}
/* ============================================================================
10. CATEGORY TILE
----------------------------------------------------------------------------
3:4 portrait tile with full-bleed background photo, dark gradient overlay,
and bottom-left label stack: era → name → count → arrow. Hover lifts 3px
and saturates the photo slightly.
============================================================================ */
.cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(12px, 1.4vw, 20px);
}
.cat-tile {
position: relative;
aspect-ratio: 3 / 4;
border: 1px solid var(--nga-ink);
overflow: hidden;
display: block;
transition: transform .25s ease-out;
text-decoration: none;
}
.cat-tile:hover { transform: translateY(-3px); }
.cat-tile .bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform .5s ease-out, filter .3s ease-out;
filter: saturate(.85) contrast(1.05);
}
.cat-tile:hover .bg { transform: scale(1.05); filter: saturate(1) contrast(1.1); }
.cat-tile .overlay {
position: absolute; inset: 0;
background: linear-gradient(
175deg,
rgba(26, 24, 20, .2) 0%,
rgba(26, 24, 20, .45) 55%,
rgba(26, 24, 20, .88) 100%
);
}
.cat-tile .label {
position: absolute; left: 20px; right: 20px; bottom: 20px;
color: var(--nga-parchment);
display: flex; flex-direction: column; gap: 6px;
}
.cat-tile .label .eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
text-transform: uppercase; color: var(--nga-gold-light);
}
.cat-tile .label .name {
font-family: var(--font-display); font-weight: 700;
font-size: 24px; line-height: 1.1;
text-shadow: 0 2px 12px rgba(26, 24, 20, .6);
}
.cat-tile .label .count {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--nga-mist);
}
.cat-tile .label .arrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-sans); font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; font-weight: 700;
color: var(--nga-gold-light);
margin-top: 6px;
transform: translateX(0);
transition: transform .2s ease-out;
}
.cat-tile:hover .label .arrow { transform: translateX(6px); }
.cat-tile .label .arrow .char { font-family: var(--font-serif); font-size: 16px; }
/* ============================================================================
11. PAST-RESULTS ROW
----------------------------------------------------------------------------
Editorial list view used for the "From the hammer" / realized-prices
section. 80px thumbnail · meta column · estimate · realized.
Realized prices that closed above the high estimate get the .over class:
oxblood color + an arrow suffix.
============================================================================ */
.results-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--nga-mist);
}
.result-row {
display: grid;
grid-template-columns: 80px 1.4fr 1fr auto;
gap: clamp(12px, 2vw, 28px);
align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--nga-mist);
transition: background .15s ease-out, padding .15s ease-out;
cursor: pointer;
text-decoration: none;
}
.result-row:hover { background: var(--nga-bone); padding-left: 14px; padding-right: 14px; }
.result-row .thumb {
width: 80px; height: 80px;
background: #fff;
border: 1px solid var(--nga-mist);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.result-row .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.result-row .meta .maker {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--nga-gold-dark);
}
.result-row .meta .title {
font-family: var(--font-display); font-weight: 700;
font-size: 17px; line-height: 1.2; margin-top: 2px;
color: var(--nga-ink);
}
.result-row .meta .session {
font-family: var(--font-serif); font-style: italic;
font-size: 12px; color: var(--nga-ink-soft);
margin-top: 2px;
}
.result-row .est {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
color: var(--nga-ink-soft); text-transform: uppercase;
}
.result-row .est .k {
display: block; font-size: 9px; letter-spacing: .22em;
color: var(--nga-mist); margin-bottom: 3px;
}
.result-row .realized { text-align: right; }
.result-row .realized .k {
display: block;
font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
text-transform: uppercase; color: var(--nga-gold-dark);
margin-bottom: 3px;
}
.result-row .realized .v {
font-family: var(--font-display); font-weight: 700;
font-size: 22px; color: var(--nga-ink);
}
.result-row .realized .v.over { color: var(--nga-oxblood); }
.result-row .realized .v.over::after {
content: " \2191";
font-family: var(--font-serif); font-weight: 400;
font-size: 14px; letter-spacing: 0; color: var(--nga-oxblood);
vertical-align: 1px;
}
@media (max-width: 720px) {
.result-row {
grid-template-columns: 60px 1fr;
grid-template-rows: auto auto;
gap: 10px 14px;
}
.result-row .thumb { grid-row: span 2; width: 60px; height: 80px; }
.result-row .est { grid-column: 2; font-size: 11px; }
.result-row .realized { grid-column: 2; text-align: left; }
.result-row .realized .v { font-size: 18px; }
}
/* ============================================================================
12. FORM FIELDS — search field + newsletter pattern
----------------------------------------------------------------------------
Ground rules: square corners, 1px ink border, parchment fill, italic
placeholders. The chrome's search field over dark uses the `dark` variant
below.
============================================================================ */
/* Light-on-light search (in-page search, modal) */
.nga-search {
display: flex; align-items: center; gap: 14px;
background: var(--nga-bone);
border: 1px solid var(--nga-ink);
padding: 12px 18px;
}
.nga-search input {
flex: 1; border: 0; background: transparent;
font-family: var(--font-serif);
font-size: clamp(15px, 1.1vw, 16px);
color: var(--nga-ink);
}
.nga-search input:focus { outline: none; }
.nga-search input::placeholder { color: var(--nga-mist); font-style: italic; }
.nga-search:focus-within { outline: 2px solid var(--nga-gold); outline-offset: -1px; }
/* Light-on-dark search (chrome over dark band, e.g. hero overlay) */
.nga-search.dark {
background: rgba(251, 247, 238, 0.18);
border-color: rgba(244, 238, 224, 0.5);
}
.nga-search.dark input { color: var(--nga-parchment); }
.nga-search.dark input::placeholder { color: rgba(244, 238, 224, 0.6); }
.nga-search.dark:hover { background: rgba(251, 247, 238, 0.28); }
/* Newsletter pattern: input + submit fused in a 1-row 1px-ink frame */
.nga-newsletter-form {
display: flex; gap: 0;
border: 1px solid var(--nga-ink);
background: var(--nga-parchment);
}
.nga-newsletter-form input {
flex: 1; border: 0; background: transparent;
padding: 16px 18px;
font-family: var(--font-serif); font-size: 15px; color: var(--nga-ink);
}
.nga-newsletter-form input:focus { outline: none; background: var(--nga-bone); }
.nga-newsletter-form input::placeholder { color: var(--nga-mist); font-style: italic; }
.nga-newsletter-form button {
padding: 0 22px;
background: var(--nga-ink); color: var(--nga-parchment);
font-family: var(--font-sans); font-size: 11px; letter-spacing: .24em;
text-transform: uppercase; font-weight: 700;
border-left: 1px solid var(--nga-ink);
transition: background .15s ease-out;
white-space: nowrap;
cursor: pointer;
}
.nga-newsletter-form button:hover { background: var(--nga-gold-dark); }
/* ============================================================================
13. LIVE-STRIP PILL (chrome-only, for reference)
----------------------------------------------------------------------------
The chrome surfaces an oxblood "Live now" pill + session title + lot meta +
"Join live room →" CTA in a sticky band below the cmd-header during active
sales. BidSquare can use the same pill style anywhere live state needs to
surface inside the embed.
============================================================================ */
.nga-live-pill {
display: inline-flex; align-items: center; gap: 8px;
background: var(--nga-oxblood);
color: var(--nga-parchment);
padding: 4px 10px;
font-family: var(--font-mono);
font-size: 10px; letter-spacing: .25em;
text-transform: uppercase;
}
.nga-live-pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
animation: pulse 1.6s ease-in-out infinite;
}
/* ============================================================================
14. ANIMATIONS
============================================================================ */
@keyframes pulse {
50% { opacity: .35; }
}
/* ============================================================================
15. BREAKPOINTS + RESPONSIVE NOTES
----------------------------------------------------------------------------
The site uses mobile-first defaults with three breakpoints in the chrome,
plus a few component-level breakpoints. Use these consistently:
≤ 720px — small mobile; result rows + consign CTA stack
≤ 820px — large mobile; press-block stacks, newsletter stacks,
tophat meta hides
≤ 899px — chrome enters mobile-drawer mode (logo stacked centered,
full-width search, MENU button)
900–1199 — tablet; chrome search collapses to icon trigger,
nav stays inline
≥ 1200px — desktop; full chrome with inline nav + persistent search
No fixed heights anywhere. Section vertical rhythm is `clamp(56px, 7vw, 96px)`.
Card grids use `repeat(auto-fill, minmax(N, 1fr))` for natural reflow.
All borders are 1px, no border-radius (sharp corners are part of the brand).
The only rounded element is the `.nga-live-pill` (full pill at 999px).
============================================================================ */
/* ============================================================================
ASSETS
----------------------------------------------------------------------------
Brand mark — use the silhouette skull for everything except the footer
brand row (which uses the painted detailed version). Both are bundled with
the WordPress theme:
/wp-content/themes/bricks-child/assets/img/skull-simple-white.svg (line skull on dark bg)
/wp-content/themes/bricks-child/assets/img/skull-simple.svg (line skull on light bg)
/wp-content/themes/bricks-child/assets/img/skull-detailed.png (painted skull, footer)
The "Nevada Gun Auctions" wordmark is set in Fairplex Wide and re-typesets
freely — it is not a logo lockup. Don't substitute another serif if Fairplex
fails to load; the Roboto Slab fallback is acceptable but degraded.
Iconography is restricted to: skull (logo), social icons (IG/FB/X/YT in
that order in the footer), and four utility glyphs (search, hamburger,
close ×, caret). No emoji. No decorative icons.
============================================================================ */