/* ============================================================================ Pika Lesson Viewer — Neo-Brutalism skin Shared override layer for index.html / admin.html / login.html. Loaded LAST in so it re-themes the existing token + component system without touching any Alpine/JS logic. Strategy: 1) Redefine the :root design tokens -> neo palette (colors, radius, shadow) 2) Reskin the shared component classes (thick black borders, hard offset shadows, sharp corners, mechanical hover/press, Space Grotesk) 3) Neutralize the handful of inline Tailwind color utilities in the markup Signatures: cream canvas, pure-black ink, hard 0-blur shadows, hot red / vivid yellow / soft violet, sticker layering, snap interactions. ========================================================================== */ /* ── Palette ─────────────────────────────────────────────────────────── */ :root { --neo-cream: #FFFDF5; --neo-ink: #000000; --neo-red: #FF6B6B; --neo-red-2: #ff5252; --neo-yellow: #FFD93D; --neo-violet: #C4B5FD; --neo-green: #86EFAC; --neo-blue: #93C5FD; /* Re-point the app's existing tokens to neo values ------------------- */ --bg: var(--neo-cream); --surface-1: #ffffff; /* cards / panels */ --surface-2: #ffffff; /* raised — colored per-component */ --surface-input: #ffffff; --surface-inset: var(--neo-cream); --border: #000000; --border-strong: #000000; --text: #000000; --text-muted: #000000; --text-faint: #000000; --accent: var(--neo-red); --accent-hover: var(--neo-red-2); --accent-press: var(--neo-red-2); --accent-soft: var(--neo-yellow); --accent-border: #000000; --ring: var(--neo-red); --accent-fill: var(--neo-red); --accent-fill-hover: var(--neo-red-2); --accent-fill-press: var(--neo-red-2); --ok: #16a34a; --ok-text: #000; --ok-bg: var(--neo-green); --ok-border: #000; --warn: #b45309; --warn-text: #000; --warn-bg: var(--neo-yellow); --warn-border: #000; --danger: #dc2626;--danger-text: #000;--danger-bg: var(--neo-red); --danger-border: #000; --info: #2563eb; --info-text: #000; --info-bg: var(--neo-blue); --info-border: #000; /* Sharp corners everywhere (pills stay pills where hardcoded 9999px) */ --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; /* Hard, zero-blur offset shadows */ --shadow-1: 4px 4px 0 0 #000; --shadow-2: 8px 8px 0 0 #000; } /* ── Base ────────────────────────────────────────────────────────────── */ body { font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif !important; background-color: var(--neo-cream) !important; color: #000 !important; font-weight: 500; /* faint graph-paper texture — density without depth */ background-image: linear-gradient(to right, rgba(0,0,0,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.045) 1px, transparent 1px) !important; background-size: 40px 40px !important; } h1, h2, h3 { font-weight: 900 !important; letter-spacing: -0.02em; } /* ── Top bar ─────────────────────────────────────────────────────────── */ .topbar { background: var(--neo-cream) !important; border-bottom: 3px solid #000 !important; } .brand-mark { border: 3px solid #000 !important; border-radius: 0 !important; background: var(--neo-red) !important; color: #000 !important; font-weight: 900 !important; box-shadow: 3px 3px 0 0 #000; } /* ── Cards & raised panels ───────────────────────────────────────────── */ .card, .hero-panel, .detail-header, .mood-modal, .comment-popover, .auth-card, .inner-section, .assign-row, .comment-item, .lesson-metric, .detail-stat, .stat-box { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; box-shadow: var(--shadow-1); } .card-header { border-bottom: 3px solid #000 !important; border-radius: 0 !important; background: var(--neo-violet) !important; } .hero-panel { background: var(--neo-violet) !important; box-shadow: var(--shadow-2); } .hero-panel::before { display: none !important; } .detail-header { background: var(--neo-yellow) !important; } /* ── Lesson library cards (sticker lift) ─────────────────────────────── */ .lesson-card { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease !important; } .lesson-card:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 0 #000 !important; border-color: #000 !important; } .lesson-card-id { border: 2px solid #000 !important; border-radius: 0 !important; background: var(--neo-yellow) !important; color: #000 !important; font-weight: 900 !important; } .lesson-card:hover .lesson-card-id { border-color: #000 !important; } .lesson-card-kicker { color: #000 !important; font-weight: 700 !important; letter-spacing: 0.18em; } /* ── Buttons — rectangular, uppercase, mechanical press ──────────────── */ .btn, .btn-login { border-radius: 0 !important; border: 2px solid #000 !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 3px 3px 0 0 #000; transition: transform .1s ease, box-shadow .1s ease, background .1s ease !important; } .btn:hover, .btn-login:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 0 #000; } .btn:active, .btn-login:active { transform: translate(3px, 3px) !important; box-shadow: none !important; } .btn:focus-visible, .btn-login:focus-visible { outline: none; box-shadow: 4px 4px 0 0 #000, 0 0 0 3px var(--neo-yellow); } .btn-primary { background: var(--neo-red) !important; color: #000 !important; } .btn-primary:hover { background: var(--neo-red-2) !important; } .btn-secondary { background: #fff !important; color: #000 !important; border-color: #000 !important; } .btn-secondary:hover { background: var(--neo-violet) !important; } .btn-success { background: var(--neo-green) !important; color: #000 !important; } .btn-danger { background: var(--neo-red) !important; color: #000 !important; } .btn-warning { background: var(--neo-yellow) !important; color: #000 !important; } .btn-sm { box-shadow: 2px 2px 0 0 #000; } .btn-sm:hover { box-shadow: 3px 3px 0 0 #000; } .btn:disabled { opacity: .5; box-shadow: 2px 2px 0 0 #000; } /* ── Inputs — thick border, yellow focus fill, no soft ring ──────────── */ .input-field { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; font-weight: 600 !important; } .input-field::placeholder { color: rgba(0,0,0,0.45) !important; } .input-field:focus, .input-field:focus-visible { outline: none !important; border-color: #000 !important; background: var(--neo-yellow) !important; box-shadow: 4px 4px 0 0 #000 !important; } /* ── Badges & chips ──────────────────────────────────────────────────── */ .badge, .badge-cta, .badge-narrative, .badge-interlude, .badge-mood, .badge-qc, .badge-qc-pending, .badge-admin, .badge-user, .badge-available, .badge-progress, .badge-completed, .badge-google, .badge-local, .stat-pill, .tag-chip, .share-chip, .eyebrow, .media-tag { border: 2px solid #000 !important; color: #000 !important; font-weight: 700 !important; box-shadow: 2px 2px 0 0 #000; } .badge-cta, .eyebrow { background: var(--neo-yellow) !important; } .badge-narrative, .badge-user, .badge-local { background: var(--neo-blue) !important; } .badge-interlude, .badge-completed { background: var(--neo-green) !important; } .badge-mood, .badge-progress { background: var(--neo-yellow) !important; } .badge-qc { background: var(--neo-green) !important; } .badge-qc-pending, .badge-available { background: #fff !important; } .badge-admin { background: var(--neo-violet) !important; } .badge-google { background: var(--neo-red) !important; } .stat-pill, .tag-chip { background: #fff !important; } .eyebrow { color: #000 !important; letter-spacing: 0.18em; } /* ── Tabs ────────────────────────────────────────────────────────────── */ .tab-pill { border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; font-weight: 700 !important; text-transform: uppercase; box-shadow: 2px 2px 0 0 #000; transition: transform .1s ease, box-shadow .1s ease, background .1s ease !important; } .tab-pill:hover { color: #000 !important; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 #000; } .tab-active { background: var(--neo-red) !important; color: #000 !important; border-color: #000 !important; } /* admin main/sub tabs */ .main-tab { color: #000 !important; font-weight: 700 !important; text-transform: uppercase; border-bottom-width: 0 !important; } .main-tab.active { color: #000 !important; background: var(--neo-yellow); border: 2px solid #000; box-shadow: 3px 3px 0 0 #000; } .sub-tab { border: 2px solid #000 !important; border-radius: 0 !important; color: #000 !important; font-weight: 700 !important; box-shadow: 2px 2px 0 0 #000; } .sub-tab.active { box-shadow: 3px 3px 0 0 #000; } .sub-tab[data-status="available"].active { background: var(--neo-violet) !important; } .sub-tab[data-status="in_progress"].active { background: var(--neo-yellow) !important; } .sub-tab[data-status="completed"].active { background: var(--neo-green) !important; } /* ── Share chip (admin) ──────────────────────────────────────────────── */ .share-chip { background: #fff !important; } .share-chip select { border: 2px solid #000 !important; border-radius: 0 !important; background: var(--neo-yellow) !important; color: #000 !important; font-weight: 700 !important; } .chip-x { border: 2px solid #000 !important; border-radius: 0 !important; color: #000 !important; } .chip-x:hover { background: var(--neo-red) !important; } /* ── Section headings / labels ───────────────────────────────────────── */ .section-heading, .subsection-heading { color: #000 !important; font-weight: 900 !important; } .field-label { color: #000 !important; font-weight: 700 !important; letter-spacing: 0.12em; } /* ── Mood / comment cards ────────────────────────────────────────────── */ .mood-card { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease !important; } .mood-card:hover { transform: translate(-2px,-2px) !important; box-shadow: 8px 8px 0 0 #000 !important; border-color: #000 !important; } .mood-card img, .lesson-card img, .tag-chip img, .media-thumb { border-radius: 0 !important; border: 2px solid #000 !important; } .mood-card-title, .mood-card-subtitle { color: #000 !important; } .comment-item.is-done { border-style: dashed !important; background: var(--neo-green) !important; } .comment-popover-arrow { background: #fff !important; border-left: 3px solid #000 !important; border-top: 3px solid #000 !important; } /* ── Toast ───────────────────────────────────────────────────────────── */ .toast { border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: var(--shadow-2); font-weight: 700 !important; } .toast-success { background: var(--neo-green) !important; color: #000 !important; } .toast-error { background: var(--neo-red) !important; color: #000 !important; } /* ── Login extras ────────────────────────────────────────────────────── */ .btn-google { border: 2px solid #000 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 0 #000; font-weight: 700 !important; text-transform: uppercase; } .btn-google:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 0 #000; background: var(--neo-yellow) !important; } .btn-google:active { transform: translate(3px,3px); box-shadow: none !important; } .divider { background: #000 !important; height: 2px !important; } .error-msg { border: 3px solid #000 !important; border-radius: 0 !important; background: var(--neo-red) !important; color: #000 !important; font-weight: 700 !important; } /* ── Rendered markdown ───────────────────────────────────────────────── */ .md-rendered h3 { color: #000 !important; } .md-rendered code { background: var(--neo-yellow) !important; border: 2px solid #000 !important; border-radius: 0 !important; color: #000 !important; } .md-rendered blockquote { border-left: 4px solid #000 !important; color: #000 !important; } .md-rendered th { background: var(--neo-violet) !important; color: #000 !important; } .md-rendered th, .md-rendered td { border: 2px solid #000 !important; } /* ── Misc ────────────────────────────────────────────────────────────── */ .spinner { border-color: rgba(0,0,0,0.2) !important; border-top-color: #000 !important; } .qc-check { accent-color: #000 !important; } .unsaved-dot { background: #000 !important; border-radius: 0 !important; } /* ============================================================================ Tailwind inline-utility neutralizers (the exact set found in the markup). !important so they win over Tailwind CDN's runtime-injected utilities. ========================================================================== */ .text-white, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-slate-500, .text-green-400, .text-green-500, .text-emerald-100, .text-emerald-300, .text-emerald-400, .text-blue-100, .text-blue-400, .text-red-100, .text-amber-300 { color: #000 !important; } .border-slate-700, .border-slate-700\/50, .border-slate-700\/70, .border-white\/10, .border-red-700\/40, .border-emerald-700\/40, .border-blue-700\/40, .border-amber-400\/25 { border-color: #000 !important; } .bg-slate-700, .bg-slate-600 { background-color: #fff !important; } .bg-slate-900\/55, .bg-slate-800\/50 { background-color: rgba(0,0,0,0.6) !important; } .bg-red-900\/75 { background-color: var(--neo-red) !important; } .bg-emerald-900\/75{ background-color: var(--neo-green) !important; } .bg-blue-900\/75 { background-color: var(--neo-blue) !important; } .bg-purple-700 { background-color: var(--neo-violet) !important; } .bg-amber-400\/10 { background-color: var(--neo-yellow) !important; } .accent-purple-500 { accent-color: #000 !important; } @media (prefers-reduced-motion: reduce) { .lesson-card, .mood-card, .btn, .btn-login, .btn-google, .tab-pill { transition: none !important; } }