/* * World Cup 2026 — shared chrome for the standalone "World Cup" pages * (/home, /events, /signup, /membership, /ticket_exchange, the Devise auth * pages, billing). Those pages are now built predominantly with Tailwind * utilities on the wc-* theme tokens (font-bebas/barlow/wc, text-wc-*, bg-wc-*). * * What remains here is only the bits the cascade still needs as plain * (unlayered) CSS: * • the .wc-page wrapper + paper grain (applied to by the layout) * • form-field + button primitives (.wc-field, .wc-check, .wc-btn*, .wc-form, * .wc-auth-errors, .wc-field-hint/-msg) — kept unlayered so they beat the * global `body[data-wc] .wc-page a` link reset that would otherwise override * inline Tailwind borders/weight on elements * • the paper background, empty state, and pagination shared by the /events * and /ticket_exchange lists (.wc-events-bg, .wc-events-empty, .wc-side-cal) */ .wc-page { --wc-red: #D10A25; --wc-off: #EDE5CC; --wc-ink: #0A0A0A; --wc-muted: #888; background: var(--wc-off); color: var(--wc-ink); font-family: 'Space Mono', monospace; overflow-x: hidden; } /* No global `* { margin:0; padding:0 }` reset here: it would be unlayered CSS and silently beat every Tailwind padding/margin utility on the page. Tailwind preflight already applies box-sizing:border-box and zeroes element margins. */ .wc-page { scroll-behavior: smooth; } /* ── PAPER GRAIN — static texture, no animation ── A fine multiply layer gives the off-white fields a printed-paper tooth; a softer overlay layer adds subtle grain that also reads over the dark sections. Fixed + pointer-events:none so it never intercepts clicks. */ .wc-page::before { content: ''; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; mix-blend-mode: multiply; } .wc-page::after { content: ''; position: fixed; inset: 0; z-index: 8999; pointer-events: none; opacity: 0.16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); background-size: 300px; mix-blend-mode: overlay; } /* Calendar-subscribe affordance tucked under the nav. */ .wc-side-cal { margin-top: 34px; } .wc-side-cal-label { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--wc-muted); margin-bottom: 14px; } .wc-form { display: flex; flex-direction: column; gap: 22px; } .wc-field { display: flex; flex-direction: column; gap: 2px; } .wc-field label { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wc-ink); } .wc-field input[type="email"], .wc-field input[type="password"], .wc-field input[type="text"], .wc-field input[type="tel"], .wc-field input[type="number"], .wc-field select, .wc-field textarea { font-family: 'Space Mono', monospace; font-size: 0.95rem; color: var(--wc-ink); background: #fff; border: 2px solid var(--wc-ink); border-radius: 0; box-shadow: none; padding: 13px 15px; /* Nudge the box right so its left border lines up with where the monospace label text visually begins (which is inset from the field's true edge); right edge stays anchored via the matching width reduction. */ width: calc(100% - 3px); margin-left: 3px; } .wc-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; padding-right: 38px; } .wc-field input:focus, .wc-field select:focus, .wc-field textarea:focus { outline: none; border-color: var(--wc-red); box-shadow: 3px 3px 0 rgba(209,10,37,0.18); } .wc-field input:disabled, .wc-field select:disabled { background-color: #e9e2cc; color: var(--wc-muted); cursor: not-allowed; } /* Helper copy under a field. */ .wc-field-hint { font-family: 'Space Mono', monospace; font-size: 0.74rem; line-height: 1.55; color: var(--wc-muted); } .wc-field-hint strong { color: var(--wc-ink); } /* ── Validation errors: highlight the invalid control + inline message ── */ /* Rails wraps invalid fields in `.field_with_errors`; the field_error_proc initializer disables that, but this keeps the wrapper from disrupting the field layout in the meantime (and as a belt-and-suspenders safety net). */ .wc-page .field_with_errors { display: contents; } .wc-field.is-error input, .wc-field.is-error select, .wc-field.is-error textarea { border-color: var(--wc-red); background: rgba(209,10,37,0.04); } .wc-field.is-error label { color: var(--wc-red); } .wc-field-msg { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--wc-red); margin-top: 6px; } .wc-check.is-error input[type="checkbox"] { border-color: var(--wc-red); } .wc-check.is-error .wc-check-label { color: var(--wc-red); } /* ── BUTTONS — shared CTA treatment for forms on the paper field ── wc-btn is the dark default; wc-btn-red the primary CTA (also used by the Devise auth + ticket-offer forms); wc-btn-ghost the secondary outline; wc-btn-line-danger the outline danger (ticket removal). */ .wc-btn { display: inline-block; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wc-off); background: var(--wc-ink); text-decoration: none; cursor: pointer; padding: 16px 30px; border: 2px solid var(--wc-ink); transition: box-shadow 0.15s, transform 0.05s, opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s; } .wc-btn:hover { box-shadow: 4px 4px 0 var(--wc-red); color: var(--wc-off); } .wc-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wc-red); } .wc-btn:disabled { cursor: not-allowed; box-shadow: none; transform: none; } .wc-btn-red { background: var(--wc-red); border-color: var(--wc-red); color: #fff; } .wc-btn-red:hover { box-shadow: 4px 4px 0 var(--wc-ink); color: #fff; } .wc-btn-ghost { background: transparent; color: var(--wc-ink); } .wc-btn-ghost:hover { box-shadow: 3px 3px 0 var(--wc-ink); color: var(--wc-ink); } /* Outline danger — for the "remove tickets" action. */ .wc-btn-line-danger { background: none; color: var(--wc-red); border-color: var(--wc-red); } .wc-btn-line-danger:hover { background: var(--wc-red); border-color: var(--wc-red); color: #fff; } /* Validation errors above the form. */ .wc-auth-errors { border: 2px solid var(--wc-red); background: rgba(209,10,37,0.06); padding: 14px 16px; margin-bottom: 28px; } .wc-auth-errors ul { list-style: none; } .wc-auth-errors li { font-family: 'Space Mono', monospace; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--wc-red); } /* ════════════════════════════════ EVENTS / TICKET LISTS ════════════════════════════════ */ /* Shared paper background, empty state, and Kaminari pagination theming for the /events (Schedule) and /ticket_exchange lists. The list rows themselves are inline Tailwind on each page. */ .wc-events-bg { min-height: 70vh; background: var(--wc-off); position: relative; z-index: 1; } .wc-events-empty { font-family: 'Space Mono', monospace; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--wc-muted); padding: 48px 0; border-bottom: 1px solid rgba(10,10,10,0.1); } /* Kaminari pagination on the Past tab, themed to the mono palette. */ .wc-events-bg .pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; } .wc-events-bg .pagination a, .wc-events-bg .pagination span { padding: 8px 12px; border: 1px solid rgba(10,10,10,0.15); color: var(--wc-muted); text-decoration: none; } .wc-events-bg .pagination a:hover { color: var(--wc-ink); border-color: var(--wc-ink); } .wc-events-bg .pagination .current { background: var(--wc-ink); color: var(--wc-off); border-color: var(--wc-ink); } /* Checkbox opt-in rows (membership, youth, code of conduct). */ .wc-check { display: flex; gap: 12px; align-items: flex-start; } .wc-check input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex: none; border-radius: 0; border: 2px solid var(--wc-ink); accent-color: var(--wc-red); cursor: pointer; }