/* ============================================================
LOUDSEATS THEME — v1.0
Import this file on every page.
All brand colors, typography, and UI component styles live here.
============================================================ */
/* ── GOOGLE FONTS ── */
/* Add this to every HTML :
*/
/* ── CSS VARIABLES ── */
:root {
/* Brand colors */
--ls-red: #E8192C;
--ls-red-dark: #B8101F;
--ls-gold: #FFB81C;
--ls-gold-dark: #C88E00;
--ls-black: #0D0D0D;
/* Surface colors */
--ls-white: #FFFFFF;
--ls-smoke: #F5F3EF; /* page background */
--ls-ash: #EDEAE5; /* card tear, secondary surfaces */
--ls-stone: #D4D0CA; /* borders */
--ls-slate: #6B6560; /* secondary text */
--ls-mist: #9E9890; /* tertiary text, labels */
/* Typography */
--ls-font-display: 'Oswald', sans-serif; /* headlines, prices, game names */
--ls-font-body: 'Barlow', sans-serif; /* body copy, descriptions */
--ls-font-label: 'Barlow Condensed', sans-serif; /* badges, pills, UI labels */
/* Semantic listing colors */
--ls-sell: #E8192C; /* same as red */
--ls-trade: #2563EB;
--ls-snf: #9333EA; /* Sunday Night Football purple */
--ls-wanted: #16A34A;
}
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--ls-font-body);
background: var(--ls-smoke);
color: var(--ls-black);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ============================================================
TICKET STUB SHAPE SYSTEM
The core brand motif. Apply .ls-stub-shape to any element,
then add and
as the first and last
children inside the element.
CRITICAL: The notch color MUST match the element's
surrounding background (not its own background).
Set --ls-notch-bg inline or via a parent class.
============================================================ */
.ls-stub-shape {
position: relative;
border-radius: 6px;
}
.ls-notch-l,
.ls-notch-r {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
/* NO border — clean cutout, no ring */
background: var(--ls-notch-bg, var(--ls-smoke));
z-index: 4;
pointer-events: none;
flex-shrink: 0;
}
.ls-notch-l { left: -5px; }
.ls-notch-r { right: -5px; }
/* Notch size variants */
.ls-notch-sm .ls-notch-l,
.ls-notch-sm .ls-notch-r { width: 8px; height: 8px; left: -4px; right: -4px; }
.ls-notch-lg .ls-notch-l,
.ls-notch-lg .ls-notch-r { width: 14px; height: 14px; left: -7px; right: -7px; }
.ls-notch-xl .ls-notch-l,
.ls-notch-xl .ls-notch-r { width: 18px; height: 18px; left: -9px; right: -9px; }
/* ============================================================
STUB BUTTONS
Primary CTA buttons with ticket stub notch cutouts.
Usage:
============================================================ */
.ls-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: 6px;
border: none;
font-family: var(--ls-font-label);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.ls-btn:hover { opacity: 0.88; }
.ls-btn:active { opacity: 0.75; transform: scale(0.98); }
/* Size variants */
.ls-btn-sm { font-size: 10px; padding: 6px 13px; }
.ls-btn-md { font-size: 11px; padding: 8px 16px; }
.ls-btn-lg { font-size: 13px; padding: 12px 22px; border-radius: 8px; }
.ls-btn-xl { font-size: 14px; padding: 15px 28px; border-radius: 8px; width: 100%; }
/* Color variants */
.ls-btn-red { background: var(--ls-red); color: #fff; }
.ls-btn-gold { background: var(--ls-gold); color: var(--ls-black); }
.ls-btn-black { background: var(--ls-black); color: #fff; }
.ls-btn-green { background: var(--ls-wanted); color: #fff; }
.ls-btn-blue { background: var(--ls-trade); color: #fff; }
.ls-btn-outline {
background: transparent;
color: var(--ls-slate);
border: 1px solid var(--ls-stone);
}
/* ============================================================
GAME FILTER CHIPS
Scrollable horizontal row of stub-shaped game selectors.
Usage:
============================================================ */
.ls-chip-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 10px 20px 14px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: var(--ls-white);
}
.ls-chip-row::-webkit-scrollbar { display: none; }
.ls-game-chip {
flex-shrink: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 7px 13px;
border-radius: 6px;
border: 1px solid var(--ls-stone);
background: var(--ls-smoke);
cursor: pointer;
text-align: center;
min-width: 70px;
transition: background 0.15s, border-color 0.15s;
/* Notch punches through to the chip row background (white) */
--ls-notch-bg: var(--ls-white);
}
.ls-game-chip.ls-chip-active {
background: var(--ls-black);
border-color: var(--ls-black);
/* Notch still punches through to chip row bg */
--ls-notch-bg: var(--ls-white);
}
.ls-game-chip.ls-chip-pre {
border-style: dashed;
border-color: var(--ls-mist);
}
.ls-game-chip.ls-chip-pre .ls-notch-l,
.ls-game-chip.ls-chip-pre .ls-notch-r {
/* No border on notches — clean cutout */
border: none;
}
.ls-game-chip.ls-chip-pre.ls-chip-active {
border-style: solid;
border-color: var(--ls-black);
background: var(--ls-black);
}
.ls-chip-date {
font-family: var(--ls-font-label);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ls-mist);
margin-bottom: 2px;
}
.ls-game-chip.ls-chip-active .ls-chip-date { color: rgba(255,255,255,0.5); }
.ls-chip-opp {
font-family: var(--ls-font-display);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ls-black);
line-height: 1.1;
}
.ls-game-chip.ls-chip-active .ls-chip-opp { color: #fff; }
.ls-game-chip.ls-chip-pre .ls-chip-opp { color: var(--ls-slate); }
.ls-game-chip.ls-chip-pre.ls-chip-active .ls-chip-opp { color: #fff; }
.ls-chip-flag {
font-family: var(--ls-font-label);
font-size: 8px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 2px;
color: var(--ls-mist);
}
.ls-chip-flag-pre { color: var(--ls-mist); }
.ls-chip-flag-prime { color: var(--ls-red); }
.ls-chip-flag-mnf { color: #2563eb; }
.ls-chip-flag-snf { color: #9333ea; }
/* Active chip — all flags go white */
.ls-game-chip.ls-chip-active .ls-chip-flag { color: rgba(255,255,255,0.65) !important; }
.ls-game-chip.ls-chip-active .ls-chip-flag { color: rgba(255,255,255,0.6); }
/* ============================================================
TYPE FILTER PILLS
Standard oval pills — no stub notches, intentionally different.
Usage:
============================================================ */
.ls-pill-row {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 9px 16px;
background: var(--ls-smoke);
border-bottom: 1px solid var(--ls-stone);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ls-pill-row::-webkit-scrollbar { display: none; }
.ls-pill {
flex-shrink: 0;
font-family: var(--ls-font-label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 13px;
border-radius: 20px;
border: 1px solid var(--ls-stone);
background: var(--ls-white);
color: var(--ls-slate);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.ls-pill-active { background: var(--ls-black); border-color: var(--ls-black); color: #fff; }
.ls-pill-kp { background: var(--ls-gold); border-color: var(--ls-gold); color: var(--ls-black); font-weight: 800; }
.ls-pill-sell { background: rgba(232,25,44,0.08); border-color: rgba(232,25,44,0.3); color: var(--ls-red); }
.ls-pill-trade { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.3); color: var(--ls-trade); }
.ls-pill-wanted { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.3); color: var(--ls-wanted); }
/* ============================================================
BADGES — inline status indicators
============================================================ */
.ls-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--ls-font-label);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
}
.ls-badge-stm { background: rgba(232,25,44,0.08); color: var(--ls-red); border: 0.5px solid rgba(232,25,44,0.2); }
.ls-badge-kp { background: rgba(255,184,28,0.12); color: var(--ls-gold-dark); border: 0.5px solid rgba(255,184,28,0.3); }
.ls-badge-trade { background: rgba(37,99,235,0.08); color: var(--ls-trade); border: 0.5px solid rgba(37,99,235,0.2); }
.ls-badge-wanted { background: rgba(22,163,74,0.08); color: var(--ls-wanted); border: 0.5px solid rgba(22,163,74,0.2); }
.ls-badge-cert { background: rgba(0,0,0,0.04); color: var(--ls-slate); border: 0.5px solid var(--ls-stone); }
.ls-badge-mod { background: rgba(37,99,235,0.08); color: var(--ls-trade); border: 0.5px solid rgba(37,99,235,0.2); }
/* ============================================================
LISTING CARD — TICKET STUB SHAPE
Canonical layout — mobile and desktop.
CARD STRUCTURE (in order):
1. .ls-card-badges — STM / Kingdom / Trade / Wanted badges
2. .ls-card-game — Game name (largest text)
3. .ls-card-gametime — Date · Time CT (red)
4. .ls-card-venue — Arrowhead Stadium (muted)
5. .ls-seat-row — Sec / Row / Seats / Qty chips
6. .ls-perks — Tailgate, Parking, Photo perk tags
── perforation line ──
7. .ls-card-tear — Seller info (left) + stub CTA button (right)
Spacing:
- Body padding: 10px top, 13px sides, 63px bottom (clears tear)
- Badge row → 4px gap → game name
- Tear height: 52px
Mobile: perf line horizontal at bottom
Desktop (.ls-card-desktop): perf line vertical on right,
tear becomes a sidebar column (168px wide)
Usage:
============================================================ */
/* MOBILE — horizontal perf at bottom */
.ls-card {
background: var(--ls-white);
border: 1px solid var(--ls-stone);
border-radius: 10px;
position: relative;
overflow: visible;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ls-card.ls-card-kingdom { border-left: 3px solid var(--ls-gold); }
.ls-card.ls-card-sell { }
.ls-card.ls-card-trade { border-left: 3px solid var(--ls-trade); }
.ls-card.ls-card-wanted { border-left: 3px solid var(--ls-wanted); }
/* Perforation line */
.ls-card::before {
content: '';
position: absolute;
left: 0; right: 0;
bottom: 52px;
height: 1px;
background: repeating-linear-gradient(
90deg,
var(--ls-stone) 0, var(--ls-stone) 5px,
transparent 5px, transparent 10px
);
z-index: 2;
}
/* Notches on perf — match outer page background */
.ls-card-notch-l,
.ls-card-notch-r {
position: absolute;
bottom: 44px;
width: 14px; height: 14px;
/* No border — clean hole */
background: var(--ls-smoke);
border-radius: 50%;
z-index: 3;
}
.ls-card-notch-l { left: -7px; }
.ls-card-notch-r { right: -7px; }
/* Canonical body padding — 10px top, 13px sides, 52px bottom (clears the 52px
tear). The "Details & seat map →" cue is the last body child and fills the
band directly above the tear, so the old 63px breathing gap is no longer
dead space. */
.ls-card-body {
padding: 10px 13px 52px;
}
.ls-card-tear {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 52px;
padding: 0 13px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ls-ash);
border-radius: 0 0 9px 9px;
}
/* DESKTOP — vertical perf on right side */
@media (min-width: 768px) {
.ls-card-desktop {
display: grid;
grid-template-columns: 1fr auto;
}
.ls-card-desktop::before {
/* Override: vertical perf on right */
left: auto; right: 168px;
top: 0; bottom: 0;
width: 1px; height: auto;
background: repeating-linear-gradient(
to bottom,
var(--ls-stone) 0, var(--ls-stone) 5px,
transparent 5px, transparent 10px
);
}
.ls-card-desktop .ls-card-notch-l,
.ls-card-desktop .ls-card-notch-r {
bottom: auto;
left: auto;
right: 161px;
width: 14px; height: 14px;
background: var(--ls-smoke);
}
.ls-card-desktop .ls-card-notch-l { top: -7px; }
.ls-card-desktop .ls-card-notch-r { bottom: -7px; top: auto; }
.ls-card-desktop .ls-card-body { padding-bottom: 13px; }
.ls-card-desktop .ls-card-tear {
position: static;
width: 168px;
height: auto;
border-radius: 0 9px 9px 0;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 14px 16px;
}
}
/* ============================================================
CARD INTERIOR — CANONICAL COMPONENT STYLES
============================================================ */
/* 1. Badges — 4px gap below before game name */
.ls-card-badges {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 4px;
}
/* 2. Game name */
.ls-card-game {
font-family: var(--ls-font-display);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ls-black);
line-height: 1.05;
margin-bottom: 1px;
}
/* Desktop: slightly larger */
@media (min-width: 768px) {
.ls-card-game { font-size: 1.25rem; }
}
/* 3. Game time — red, bold */
.ls-card-gametime {
font-family: var(--ls-font-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ls-red);
margin-bottom: 1px;
}
/* 4. Venue */
.ls-card-venue {
font-family: var(--ls-font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ls-mist);
margin-bottom: 7px;
}
/* 5. Seat chips row */
.ls-seat-row {
display: flex;
gap: 10px;
margin-bottom: 6px;
}
.ls-seat-chip { display: flex; flex-direction: column; }
.ls-seat-lbl {
font-family: var(--ls-font-label);
font-size: 8px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ls-mist);
}
.ls-seat-val {
font-family: var(--ls-font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--ls-black);
line-height: 1.1;
}
/* 6. Perk tags */
.ls-perks { display: flex; gap: 4px; flex-wrap: wrap; }
.ls-perk {
font-family: var(--ls-font-label);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 3px;
background: var(--ls-ash);
color: var(--ls-slate);
border: 0.5px solid var(--ls-stone);
}
.ls-perk-gold {
background: rgba(255,184,28,0.1);
color: var(--ls-gold-dark);
border-color: rgba(255,184,28,0.3);
}
/* Price display (top right of card) */
.ls-price-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
margin-left: 10px;
}
.ls-price-type {
font-family: var(--ls-font-label);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ls-mist);
}
.ls-price {
font-family: var(--ls-font-display);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
color: var(--ls-red);
}
.ls-price-sell { color: var(--ls-red); }
.ls-price-trade { color: var(--ls-trade); font-size: 1.2rem; line-height: 1.2; }
.ls-price-wanted { color: var(--ls-wanted); }
.ls-price-sub {
font-family: var(--ls-font-label);
font-size: 9px;
font-weight: 500;
color: var(--ls-mist);
text-align: right;
}
/* 7. Tear — seller info + CTA */
.ls-seller { display: flex; align-items: center; gap: 7px; }
.ls-seller-av {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--ls-red);
display: flex; align-items: center; justify-content: center;
font-family: var(--ls-font-display);
font-size: 0.65rem; font-weight: 700; color: #fff;
flex-shrink: 0;
}
/* Desktop seller avatar slightly larger */
@media (min-width: 768px) {
.ls-seller-av { width: 30px; height: 30px; font-size: 0.75rem; }
}
.ls-seller-name {
font-family: var(--ls-font-body);
font-size: 12px; font-weight: 600;
color: var(--ls-black); line-height: 1.2;
}
.ls-seller-stars {
font-family: var(--ls-font-label);
font-size: 9px; font-weight: 500;
color: var(--ls-gold-dark);
}
.ls-seller-deals {
font-family: var(--ls-font-label);
font-size: 9px; font-weight: 500;
letter-spacing: 0.04em;
color: var(--ls-mist);
}
/* ============================================================
CARD INTERIOR COMPONENTS
============================================================ */
/* Badges row */
.ls-card-badges {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 4px;
}
/* Game name */
.ls-card-game {
font-family: var(--ls-font-display);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ls-black);
line-height: 1.05;
margin-bottom: 1px;
}
/* Game time — red, prominent */
.ls-card-gametime {
font-family: var(--ls-font-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ls-red);
margin-bottom: 1px;
}
/* Venue/date line */
.ls-card-venue {
font-family: var(--ls-font-label);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ls-mist);
margin-bottom: 7px;
}
/* Seat chips row */
.ls-seat-row {
display: flex;
gap: 10px;
margin-bottom: 6px;
}
.ls-seat-chip { display: flex; flex-direction: column; }
.ls-seat-lbl {
font-family: var(--ls-font-label);
font-size: 8px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--ls-mist);
}
.ls-seat-val {
font-family: var(--ls-font-display);
font-size: 0.9rem; font-weight: 600;
color: var(--ls-black); line-height: 1.1;
}
/* Perk tags */
.ls-perks { display: flex; gap: 4px; flex-wrap: wrap; }
.ls-perk {
font-family: var(--ls-font-label);
font-size: 9px; font-weight: 600;
letter-spacing: 0.04em;
padding: 2px 7px; border-radius: 3px;
background: var(--ls-ash);
color: var(--ls-slate);
border: 0.5px solid var(--ls-stone);
}
.ls-perk-gold {
background: rgba(255,184,28,0.1);
color: var(--ls-gold-dark);
border-color: rgba(255,184,28,0.3);
}
/* Price display */
.ls-price-wrap { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.ls-price-type {
font-family: var(--ls-font-label);
font-size: 9px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ls-mist);
}
.ls-price {
font-family: var(--ls-font-display);
font-size: 1.6rem; font-weight: 700;
letter-spacing: 0.02em; line-height: 1;
color: var(--ls-red);
}
.ls-price-sell { color: var(--ls-red); }
.ls-price-trade { color: var(--ls-trade); font-size: 1.2rem; line-height: 1.2; }
.ls-price-wanted { color: var(--ls-wanted); }
.ls-price-sub {
font-family: var(--ls-font-label);
font-size: 9px; font-weight: 500;
color: var(--ls-mist); text-align: right;
}
/* Seller info in tear */
.ls-seller { display: flex; align-items: center; gap: 7px; }
.ls-seller-av {
width: 26px; height: 26px; border-radius: 50%;
background: var(--ls-red);
display: flex; align-items: center; justify-content: center;
font-family: var(--ls-font-display); font-size: 0.65rem; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.ls-seller-name { font-family: var(--ls-font-body); font-size: 12px; font-weight: 600; color: var(--ls-black); line-height: 1.2; }
.ls-seller-stars { font-family: var(--ls-font-label); font-size: 9px; font-weight: 500; color: var(--ls-gold-dark); }
/* ============================================================
LOGO / NAV
============================================================ */
.ls-logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.ls-logo-stub {
position: relative;
flex-shrink: 0;
}
.ls-logo-stub svg { display: block; }
.ls-logo-wave {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.ls-wave-bar {
border-radius: 2px;
background: #fff;
animation: ls-wave 1.25s ease-in-out infinite;
}
@keyframes ls-wave {
0%,100% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.3); opacity: 0.5; }
}
.ls-wordmark {
font-family: var(--ls-font-display);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ls-black);
line-height: 1;
}
.ls-wordmark-seats { color: var(--ls-red); font-weight: 400; }
.ls-wordmark-light .ls-wordmark { color: #fff; }
.ls-wordmark-light .ls-wordmark-seats { color: rgba(255,255,255,0.75); }
/* ============================================================
SOUNDWAVE ANIMATION (reusable)
============================================================ */
.ls-soundwave {
display: flex;
align-items: center;
gap: 4px;
}
.ls-soundwave .ls-wave-bar:nth-child(1) { animation-delay: 0.00s; }
.ls-soundwave .ls-wave-bar:nth-child(2) { animation-delay: 0.10s; }
.ls-soundwave .ls-wave-bar:nth-child(3) { animation-delay: 0.20s; }
.ls-soundwave .ls-wave-bar:nth-child(4) { animation-delay: 0.05s; }
.ls-soundwave .ls-wave-bar:nth-child(5) { animation-delay: 0.15s; }
.ls-soundwave .ls-wave-bar:nth-child(6) { animation-delay: 0.25s; }
.ls-soundwave .ls-wave-bar:nth-child(7) { animation-delay: 0.08s; }
.ls-soundwave .ls-wave-bar:nth-child(8) { animation-delay: 0.18s; }
/* ============================================================
UTILITY
============================================================ */
.ls-red { color: var(--ls-red); }
.ls-gold { color: var(--ls-gold-dark); }
.ls-muted { color: var(--ls-mist); }
.ls-display { font-family: var(--ls-font-display); }
.ls-label { font-family: var(--ls-font-label); }
/* Kingdom Preferred gold treatment */
.ls-kingdom-banner {
background: linear-gradient(135deg, #FFF8E7 0%, #FFF1C2 100%);
border: 1px solid rgba(255,184,28,0.4);
border-radius: 10px;
padding: 16px 20px;
}
/* Disclaimer box */
.ls-disclaimer {
background: var(--ls-ash);
border: 1px solid var(--ls-stone);
border-radius: 10px;
padding: 12px 14px;
}