/* * Learn English JP — Shared Activity Styles * assets/activities.css * * Base layout, progress bar, XP toast, and shared interactive chrome * used across all activity template types. */ /* ── Shared activity variables (extend :root from critical.css) ─── */ :root { --lejp-primary: var(--ej-indigo, #4f46e5); --lejp-primary-lt: var(--ej-indigo-lt, #eef2ff); --lejp-success: #059669; --lejp-success-lt: #d1fae5; --lejp-danger: #e11d48; --lejp-danger-lt: #ffe4e6; --lejp-warn: #d97706; --lejp-warn-lt: #fef3c7; --lejp-bg: #fdfcff; --lejp-surface: #ffffff; --lejp-border: #e2e8f0; --lejp-text: #1e293b; --lejp-muted: #64748b; --lejp-radius: 14px; --lejp-radius-sm: 9px; --lejp-shadow: 0 4px 24px rgba(0,0,0,.07); } /* ── Activity page shell ────────────────────────────────────────── */ .lejp-activity-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 5rem; } /* ── Desktop sidebar grid — loaded in to prevent CLS ────── * * Why this is here AND in recommendations.php: * recommendations.php also carries this grid CSS (with !important) as * a cache-busting fallback. Once browsers refresh activities.css these * rules take over and the body-level rules become harmless copies. * * How the zero-CLS approach works: * • grid-template-columns: 1fr 320px is established on first paint. * Column 2 (320 px) is reserved immediately, so the main content * column is always 1fr wide — JS appending the sidebar never * shrinks column 1 and causes no layout shift. * • :not(.lejp-activity-sidebar-column) routes every non-sidebar child * to column 1 without any DOM restructuring. * • No .lejp-activity-main-column wrapper div is needed. * ─────────────────────────────────────────────────────────────── */ /* IMPORTANT: display:none must be BEFORE the @media block. Same specificity — later rule wins. Inside the @media the display:block therefore correctly overrides this on desktop. */ .lejp-activity-sidebar-column { display: none; } @media (min-width: 1024px) { .lejp-activity-wrap { max-width: 1120px; display: grid; grid-template-columns: 1fr 320px; column-gap: 30px; align-items: start; padding: 20px 24px 60px 24px; } /* All non-sidebar direct children flow to the main (left) column */ .lejp-activity-wrap > :not(.lejp-activity-sidebar-column) { grid-column: 1; min-width: 0; /* prevent text / flex children from blowing the grid */ } /* Sidebar: column 2, spans all rows, sticky. Higher specificity (.lejp-activity-wrap > .class vs .class alone) means this wins cleanly over the :not() rule above. */ .lejp-activity-wrap > .lejp-activity-sidebar-column { grid-column: 2; grid-row: 1 / span 999; display: block; position: sticky; top: 90px; } } .lejp-activity-header { text-align: center; margin-bottom: 2rem; padding: 2rem 1.5rem; background: linear-gradient(135deg, var(--lejp-primary-lt), #f0fdf4); border-radius: 20px; border: 1.5px solid #e0e7ff; } .lejp-activity-header h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; color: var(--lejp-text); margin: 0 0 .6rem; letter-spacing: -.03em; line-height: 1.2; } .lejp-activity-header p { color: var(--lejp-muted); font-size: 1rem; margin: 0; line-height: 1.6; } .lejp-activity-meta { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; } .lejp-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 100px; font-size: .78rem; font-weight: 700; background: var(--lejp-primary-lt); color: var(--lejp-primary); } /* ── Progress bar (question counter) ───────────────────────────── */ .lejp-progress { margin-bottom: 1.75rem; } .lejp-progress__track { height: 8px; background: var(--lejp-border); border-radius: 100px; overflow: hidden; } .lejp-progress__fill { height: 100%; background: linear-gradient(90deg, var(--lejp-primary), #818cf8); border-radius: 100px; transition: width .4s cubic-bezier(.4,0,.2,1); } .lejp-progress__label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--lejp-muted); font-weight: 600; margin-top: .4rem; } /* ── Card surface ───────────────────────────────────────────────── */ .lejp-card { background: var(--lejp-surface); border: 1.5px solid var(--lejp-border); border-radius: var(--lejp-radius); padding: 2rem; box-shadow: var(--lejp-shadow); } /* ── Feedback strip ─────────────────────────────────────────────── */ .lejp-feedback { display: none; padding: 1rem 1.25rem; border-radius: var(--lejp-radius-sm); font-weight: 700; font-size: .95rem; margin-top: 1.25rem; line-height: 1.55; border-left: 4px solid transparent; } .lejp-feedback--correct { background: var(--lejp-success-lt); color: var(--lejp-success); border-color: var(--lejp-success); } .lejp-feedback--wrong { background: var(--lejp-danger-lt); color: var(--lejp-danger); border-color: var(--lejp-danger); } .lejp-feedback.is-visible { display: block; } .lejp-feedback__jp { font-weight: 500; font-size: .9rem; margin-top: .4rem; opacity: .85; } /* ── Navigation buttons ─────────────────────────────────────────── */ .lejp-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; } .lejp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.6rem; border-radius: 100px; font-family: var(--ej-font, 'Nunito', system-ui, sans-serif); font-size: .95rem; font-weight: 800; cursor: pointer; transition: all .18s ease; border: 2px solid transparent; text-decoration: none; } .lejp-btn--primary { background: var(--lejp-primary); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.28); } .lejp-btn--primary:hover { background: #3730a3; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,.35); } .lejp-btn--ghost { background: transparent; border-color: var(--lejp-border); color: var(--lejp-muted); } .lejp-btn--ghost:hover { border-color: var(--lejp-primary); color: var(--lejp-primary); background: var(--lejp-primary-lt); } .lejp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* ── Score / completion screen ──────────────────────────────────── */ .lejp-score-screen { text-align: center; padding: 3rem 2rem; } .lejp-score-screen__emoji { font-size: 4rem; margin-bottom: 1rem; animation: lejp-bounce .6s ease; } @keyframes lejp-bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-16px); } 60% { transform: translateY(-8px); } } .lejp-score-screen__title { font-size: 1.85rem; font-weight: 900; margin: 0 0 .5rem; color: var(--lejp-text); } .lejp-score-screen__subtitle { font-size: 1rem; color: var(--lejp-muted); margin: 0 0 .5rem; } .lejp-score-screen__xp { font-size: 1.1rem; color: var(--lejp-primary); font-weight: 800; margin: .5rem 0 1.75rem; } .lejp-score-screen__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ── XP Toast notification ──────────────────────────────────────── */ .lejp-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(2rem); background: #1e1b4b; color: #fff; padding: .8rem 1.75rem; border-radius: 100px; font-size: .9rem; font-weight: 800; z-index: 9999; opacity: 0; transition: all .35s cubic-bezier(.34,1.56,.64,1); white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,.22); pointer-events: none; } .lejp-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Header XP / streak badges ──────────────────────────────────── */ .lejp-progress-bar { display: flex; align-items: center; gap: .5rem; } .lejp-xp-badge, .lejp-streak-badge { font-size: .78rem; font-weight: 800; padding: .25rem .7rem; border-radius: 100px; background: var(--lejp-primary-lt); color: var(--lejp-primary); } .lejp-streak-badge { background: #fff7ed; color: #c2410c; } /* ── Ad zones ───────────────────────────────────────────────────── */ .lejp-ad-zone { margin: 2rem 0; text-align: center; min-height: 90px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border-radius: var(--lejp-radius-sm); background: var(--lejp-bg); border: 1px dashed var(--lejp-border); } .lejp-ad-zone--leaderboard { min-height: 90px; } .lejp-ad-zone--rect { min-height: 250px; } .lejp-ad-label { font-size: .7rem; color: var(--lejp-muted); text-transform: uppercase; letter-spacing: .05em; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 600px) { .lejp-card { padding: 1.25rem; } .lejp-nav { flex-direction: column; } .lejp-nav .lejp-btn { width: 100%; justify-content: center; } .lejp-activity-header { padding: 1.5rem 1rem; } } /* ── Rating portal width alignment (lesson pages only) ──────────── */ /* The mastery circuit (.lejp-recommendation-circuit) is full-width */ /* with its inner content constrained to 760px via .lejp-rc-inner. */ /* Mirror that same pattern here so the rating card aligns with it. */ body:has(.lg-shell) #ej-rating-portal { width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } body:has(.lg-shell) #ej-rating-portal .ej-rating { max-width: 900px; margin-left: auto; margin-right: auto; width: 100%; }