/* shared.css — design-system primitives shared across production pages. * * Loaded by every production page (about, dashboard, watch, curate-new, * curate, explore) and the auth pages (login, register, verify). * * Per-page CSS (page-specific atoms: topic rows, ctable, game-row, etc.) * stays in each page's own */ /* ─── Base scaffolding ────────────────────────────────────────────────── */ /* Sticky-footer scaffold (CSS Grid): main fills 1fr so the footer never has visible body-background below it on short pages. Grid is used over flex to avoid flex-basis interfering with main's max-width. */ html, body { min-height: 100vh; } body { background-color: #FCF9EF; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; } body > header, body > main, body > footer { width: 100%; } /* ─── Material Symbols (canonical icon set per design system) ─────────── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-size: 20px; } /* ─── Status palette ──────────────────────────────────────────────────── */ .status-sage { background-color: #A3B18A; } .status-sage-soft { background-color: #C8D2B6; } .status-slate-blue { background-color: #4A6D88; } .status-burnt-sienna { background-color: #E2725B; } .status-matte-gold { background-color: #C5A059; } .status-powder-pink { background-color: #E6B8B8; } .text-sage { color: #A3B18A; } .text-slate-blue { color: #4A6D88; } .text-burnt-sienna { color: #E2725B; } .text-matte-gold { color: #C5A059; } .text-powder-pink { color: #E6B8B8; } .border-sage { border-color: #A3B18A; } .border-matte-gold { border-color: #C5A059; } /* ─── Form atoms (field-row + label + input + textarea + counter) ─────── */ .field-row { display: grid; grid-template-columns: 130px 1fr; align-items: start; gap: 16px; padding: 12px 0; } .field-label { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #474747; padding-top: 10px; } input.field-input, textarea.field-textarea { width: 100%; border: 1px solid #1c1c16; background: #fcf9ef; padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 13px; color: #1c1c16; outline: none; } textarea.field-textarea { min-height: 110px; resize: none; line-height: 1.55; } input.field-input:focus, textarea.field-textarea:focus { background: #fff; border-color: #000; } input.field-input::placeholder, textarea.field-textarea::placeholder { font-style: italic; color: #5e5e5e; opacity: 1; } textarea.field-textarea:read-only { background: #f7f4e9; color: #5e5e5e; cursor: not-allowed; border-color: #c6c6c6; } /* Locked textarea: suppress every focus signal (Tailwind forms plugin injects a blue --tw-ring-shadow + border-color on focus that we must reset; outline is already none). Pair with tabIndex=-1 in JS to keep keyboard nav from landing here. */ textarea.field-textarea:read-only:focus { background: #f7f4e9; border-color: #c6c6c6; box-shadow: none; --tw-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; } .slug-hint { font-family: 'Inter', sans-serif; font-size: 11px; color: #5e5e5e; margin-top: 4px; letter-spacing: 0.04em; } .counter { font-family: 'Inter', sans-serif; font-size: 11px; color: #5e5e5e; margin-top: 2px; } .counter.over { color: #ba1a1a; } /* ─── Action bands (full-width primary CTAs) ──────────────────────────── */ .action-band { width: 100%; padding: 14px 16px; border: 1px solid #000; font-family: 'Newsreader', serif; font-size: 17px; letter-spacing: 0.03em; text-align: center; cursor: pointer; transition: background-color 0.15s; } .action-band:disabled { cursor: not-allowed; opacity: 0.35; pointer-events: none; background: #ebe8de; color: #5e5e5e; border-color: #c6c6c6; } .action-band-generate { background: #f7f4e9; } .action-band-generate:hover:not(:disabled) { background: #ebe8de; } .action-band-save { background: #C8D2B6; } .action-band-save:hover:not(:disabled) { background: #A3B18A; } /* ─── Inline errors ───────────────────────────────────────────────────── */ .inline-error { display: none; margin-top: 8px; padding: 8px 12px; border: 1px solid #ba1a1a; background: #ffdad6; color: #ba1a1a; font-family: 'Inter', sans-serif; font-size: 12px; } .inline-error.visible { display: block; } /* Page-level error banner (used by watch + curate to surface load errors). */ .global-error { margin: 16px 0; padding: 10px 14px; border: 1px solid #ba1a1a; background: #ffdad6; color: #ba1a1a; font-family: 'Inter', sans-serif; font-size: 12px; } /* ─── Modal chrome ────────────────────────────────────────────────────── */ /* * Two flavours: * .modal-card — narrow centered card, single big CTA (e.g. success modal). * Title 28px. Use with .modal-button. * .modal-card-wide — wider left-aligned card, action row with cancel/confirm/delete. * Title 22px. Use with .modal-actions + .modal-btn-* family. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(28, 28, 22, 0.55); display: none; align-items: center; justify-content: center; z-index: 50; } .modal-backdrop.visible { display: flex; } .modal-card { background: #f7f4e9; border: 1px solid #000; padding: 40px 56px; text-align: center; max-width: 480px; } .modal-card-wide { background: #f7f4e9; border: 1px solid #000; padding: 32px 40px; max-width: 520px; text-align: left; } .modal-title { font-family: 'Newsreader', serif; font-size: 28px; font-weight: 700; color: #1c1c16; margin: 0; } .modal-card-wide .modal-title { font-size: 22px; margin: 0 0 8px 0; } .modal-subtitle { font-family: 'Newsreader', serif; font-size: 18px; color: #474747; margin: 8px 0 28px 0; } .modal-body { font-family: 'Inter', sans-serif; font-size: 13px; color: #474747; line-height: 1.55; margin: 0 0 24px 0; } .modal-actions { display: flex; gap: 12px; justify-content: flex-end; } .modal-error { margin-top: 12px; padding: 8px 12px; border: 1px solid #ba1a1a; background: #ffdad6; color: #ba1a1a; font-family: 'Inter', sans-serif; font-size: 12px; } /* Single primary CTA (success modal) */ .modal-button { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 28px; background: #1c1c16; color: #fcf9ef; border: 1px solid #000; cursor: pointer; transition: background 0.15s; } .modal-button:hover { background: #000; } /* Action-row buttons (wide modals) */ .modal-btn { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 18px; cursor: pointer; border: 1px solid #1c1c16; transition: background 0.15s; } .modal-btn:disabled { opacity: 0.5; cursor: not-allowed; } .modal-btn-cancel { background: #fcf9ef; color: #1c1c16; } .modal-btn-cancel:hover { background: #ebe8de; } .modal-btn-confirm { background: #1c1c16; color: #fcf9ef; border-color: #1c1c16; } .modal-btn-confirm:hover { background: #000; } .modal-btn-delete { background: #E2725B; color: #fff; border-color: #E2725B; } .modal-btn-delete:hover { background: #c45942; border-color: #c45942; }