/* ============================================================ Vocabulary Training – Custom CSS (no Tailwind) Dark mode via .dark class on (set by theme_controller.js) ============================================================ */ /* ---------- CSS Variables ---------- */ :root { --color-bg: #f5f7fa; --color-surface: #ffffff; --color-surface-alt: #f0f2f5; --color-border: #d1d5db; --color-border-light: #e5e7eb; --color-text: #111827; --color-text-muted: #6b7280; --color-text-light: #9ca3af; --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-primary-light:#dbeafe; --color-success: #16a34a; --color-success-dark: #15803d; --color-success-light:#dcfce7; --color-warning: #ca8a04; --color-warning-light:#fef9c3; --color-danger: #dc2626; --color-danger-dark: #b91c1c; --color-danger-light: #fee2e2; --color-nav: #1e293b; --color-footer: #334155; --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); --shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06); --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --transition: 0.2s ease; } html.dark { --color-bg: #111827; --color-surface: #1f2937; --color-surface-alt: #374151; --color-border: #4b5563; --color-border-light: #374151; --color-text: #f9fafb; --color-text-muted: #9ca3af; --color-text-light: #6b7280; --color-primary-light:#1e3a8a; --color-success-light:#14532d; --color-warning-light:#713f12; --color-danger-light: #7f1d1d; --color-nav: #0f172a; --color-footer: #1e293b; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 6px rgba(0,0,0,.3); --shadow-lg: 0 10px 15px rgba(0,0,0,.4); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- Base ---------- */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--color-text); background: var(--color-bg); transition: background var(--transition), color var(--transition); min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Layout ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } .container--sm { max-width: 480px; margin: 0 auto; padding: 0 1.25rem; } .container--md { max-width: 680px; margin: 0 auto; padding: 0 1.25rem; } .container--lg { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; } .container--xl { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; } main.site-main { flex: 1; padding: 2rem 0; } /* ---------- Navigation ---------- */ .navbar { background: var(--color-nav); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .navbar__brand a { color: #fff; font-size: 1.2rem; font-weight: 700; transition: color var(--transition); display: flex; align-items: center; gap: 0.6rem; } .navbar__brand a:hover { color: #93c5fd; text-decoration: none; } .navbar__logo { width: 30px; height: 30px; flex-shrink: 0; } .navbar__end { display: flex; align-items: center; gap: 1.5rem; } /* KnpMenu */ .nav-menu { display: flex; align-items: center; gap: 1.25rem; list-style: none; } .nav-menu a { color: #cbd5e1; font-size: 0.9rem; font-weight: 500; transition: color var(--transition); padding-bottom: 2px; border-bottom: 2px solid transparent; } .nav-menu a:hover { color: #fff; text-decoration: none; } .nav-menu a.current { color: #93c5fd; border-bottom-color: #93c5fd; } /* Auth links */ .navbar__auth { display: flex; align-items: center; gap: 0.75rem; } .navbar__auth a { color: #cbd5e1; font-size: 0.9rem; transition: color var(--transition); } .navbar__auth a:hover { color: #fff; text-decoration: none; } .navbar__auth .btn { color: #fff; } /* ---------- User Menu ---------- */ .user-menu { position: relative; } .user-menu__toggle { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; } .user-menu__avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; transition: border-color var(--transition); } .user-menu__toggle:hover .user-menu__avatar { border-color: #93c5fd; } .user-menu__dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 200; overflow: hidden; } .user-menu__dropdown.is-open { display: block; } .user-menu__header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-light); } .user-menu__email { font-size: 0.85rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu__item { display: block; padding: 0.6rem 1rem; font-size: 0.875rem; color: var(--color-text-muted); transition: background var(--transition), color var(--transition); } .user-menu__item:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; } .user-menu__divider { border: none; border-top: 1px solid var(--color-border-light); margin: 0.25rem 0; } .user-menu__logout { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0.6rem 1rem; font-size: 0.875rem; color: var(--color-danger); transition: background var(--transition); } .user-menu__logout:hover { background: var(--color-surface-alt); } /* ---------- Footer ---------- */ .footer { background: var(--color-footer); color: #94a3b8; text-align: center; padding: 1.5rem 0; font-size: 0.875rem; } /* ---------- Flash Messages ---------- */ .flash { padding: 0.85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid transparent; } .flash--success { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success); } .flash--warning { background: var(--color-warning-light); color: var(--color-warning); border-color: var(--color-warning); } .flash--error { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger); } /* ---------- Card ---------- */ .card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem; } .card--alt { background: var(--color-surface-alt); box-shadow: none; border: 1px solid var(--color-border-light); } .card--sm { padding: 1.25rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.4rem; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-sm); border: none; cursor: pointer; text-decoration: none; transition: background var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-sm); line-height: 1.4; } .btn:hover { text-decoration: none; box-shadow: var(--shadow); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); } .btn--success { background: var(--color-success); color: #fff; } .btn--success:hover { background: var(--color-success-dark); } .btn--danger { background: var(--color-danger); color: #fff; } .btn--danger:hover { background: var(--color-danger-dark); } .btn--secondary { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; } .btn--secondary:hover { background: var(--color-border-light); } .btn--lg { padding: 0.85rem 2rem; font-size: 1.05rem; border-radius: var(--radius); } .btn--sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; } .btn--full { width: 100%; } /* ---------- Forms ---------- */ .form-group { margin-bottom: 1.5rem; } label, .label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.4rem; } .form-control { width: 100%; padding: 0.65rem 0.9rem; font-size: 0.95rem; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); line-height: 1.5; font-family: inherit; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } textarea.form-control { resize: vertical; min-height: 100px; } .form-hint { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.3rem; } .form-error { font-size: 0.8rem; color: var(--color-danger); margin-top: 0.3rem; } .label-hint { font-weight: 400; color: var(--color-text-muted); font-size: 0.8rem; } .form-row { display: flex; gap: 1rem; align-items: flex-start; } .form-row > * { flex: 1; } .checkbox-group { display: flex; align-items: center; gap: 0.5rem; } .checkbox-group input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--color-primary); flex-shrink: 0; } .checkbox-group label { margin: 0; font-weight: 400; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table thead tr { background: var(--color-surface-alt); border-bottom: 2px solid var(--color-border); } .table th { text-align: left; padding: 0.85rem 1rem; font-weight: 600; color: var(--color-text); white-space: nowrap; } .table td { padding: 0.85rem 1rem; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; } .table tbody tr:hover { background: var(--color-surface-alt); } .table tbody tr:last-child td { border-bottom: none; } /* ---------- Grid helpers ---------- */ .grid { display: grid; gap: 1.5rem; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } @media (max-width: 768px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } /* ---------- Flex helpers ---------- */ .flex { display: flex; } .flex--center { align-items: center; } .flex--between { justify-content: space-between; } .flex--gap { gap: 1rem; } .flex--gap-sm { gap: 0.5rem; } .flex--wrap { flex-wrap: wrap; } .flex--col { flex-direction: column; } /* ---------- Spacing helpers ---------- */ .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } /* ---------- Typography ---------- */ .page-title { font-size: 1.875rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; } .section-title { font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; } .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-mono { font-family: 'Menlo', 'Consolas', 'Monaco', monospace; } /* ---------- Stat Cards ---------- */ .stat-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem; text-align: center; } .stat-card__value { font-size: 2.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.4rem; } .stat-card__label { font-size: 0.9rem; color: var(--color-text-muted); } .stat-card--blue .stat-card__value { color: var(--color-primary); } .stat-card--green .stat-card__value { color: var(--color-success); } .stat-card--purple .stat-card__value { color: #7c3aed; } /* ---------- Tag Badge ---------- */ .tag { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 4px; margin-right: 0.25rem; margin-bottom: 0.25rem; } /* ---------- Success Rate ---------- */ .rate--good { color: var(--color-success); font-weight: 600; } .rate--medium { color: var(--color-warning); font-weight: 600; } .rate--bad { color: var(--color-danger); font-weight: 600; } /* ---------- Progress Bar ---------- */ .progress { background: var(--color-border); border-radius: 999px; height: 10px; overflow: hidden; } .progress__bar { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.3s ease; } /* ---------- Alert (inline) ---------- */ .alert { padding: 0.85rem 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid transparent; } .alert--info { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary); } .alert--success { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success); } .alert--warning { background: var(--color-warning-light); color: var(--color-warning); border-color: var(--color-warning); } .alert--danger { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger); } /* ---------- Training Question ---------- */ .question-hero { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; border-radius: var(--radius-lg); padding: 2rem; text-align: center; margin-bottom: 2rem; box-shadow: var(--shadow-lg); } .question-hero__word { font-size: 3rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.5rem; } .question-hero__spelling { font-size: 1.1rem; opacity: 0.85; } .question-hero--gradient { background: linear-gradient(135deg, #16a34a, #15803d); } .question-hero__speak { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; padding: 0.5rem; border-radius: 50%; margin-top: 0.75rem; transition: all var(--transition); } .question-hero__speak:hover { background: rgba(255,255,255,.25); } .question-hero__speak.is-speaking { animation: speakPulse 0.8s ease-in-out infinite; } .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .choice-btn { display: block; width: 100%; padding: 1rem 1.25rem; font-size: 1rem; font-family: inherit; text-align: left; background: var(--color-surface-alt); color: var(--color-text); border: 2px solid var(--color-border-light); border-radius: var(--radius); cursor: pointer; transition: background var(--transition), border-color var(--transition); box-shadow: var(--shadow-sm); } .choice-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); } /* Matching: grid layout */ .matching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; } /* Matching: card */ .matching-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-radius: var(--radius-lg); border: 2px solid var(--color-border-light); background: var(--color-surface-alt); color: var(--color-text); cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-sm); user-select: none; min-height: 56px; position: relative; overflow: hidden; } .matching-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.25s; pointer-events: none; } .matching-card:hover:not(.is-correct):not(.is-wrong) { border-color: var(--color-primary); box-shadow: var(--shadow), 0 0 0 3px rgba(37,99,235,.1); transform: translateY(-1px); } .matching-card.is-selected { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: var(--shadow), 0 0 0 3px rgba(37,99,235,.2); transform: scale(1.02); } .matching-card.is-correct { border-color: var(--color-success); background: var(--color-success-light); color: var(--color-success); cursor: default; box-shadow: var(--shadow-sm); transform: none; } .matching-card.is-correct .matching-card__text::after { content: ' \2713'; font-weight: 700; } .matching-card.is-wrong { border-color: var(--color-danger); background: var(--color-danger-light); color: var(--color-danger); animation: matchShake 0.4s ease-in-out; } .matching-card__text { font-size: 1.05rem; font-weight: 500; flex: 1; } .matching-card__speak { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 0.3rem; border-radius: 50%; transition: all var(--transition); flex-shrink: 0; margin-left: 0.5rem; } .matching-card__speak:hover { color: var(--color-primary); background: rgba(37,99,235,.1); } .matching-card__speak.is-speaking { color: var(--color-primary); animation: speakPulse 0.8s ease-in-out infinite; } /* Matching: status bar */ .matching-status { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.25rem; border-radius: var(--radius); background: var(--color-surface-alt); border: 1px solid var(--color-border-light); font-size: 0.9rem; color: var(--color-text-muted); transition: all var(--transition); } .matching-status--complete { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); } .matching-status__icon { font-size: 1.1rem; } .matching-status__text { font-weight: 500; } @keyframes matchShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @keyframes speakPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } @media (max-width: 640px) { .matching-grid { grid-template-columns: 1fr 1fr; gap: 0.4rem 0.5rem; } .matching-card { padding: 0.75rem 0.85rem; min-height: 44px; } .matching-card__text { font-size: 0.9rem; } } /* Legacy matching-item (kept for non-matching question types) */ .matching-item { padding: 1rem; margin-bottom: 0.5rem; border-radius: var(--radius); border: 2px solid var(--color-border-light); background: var(--color-surface-alt); color: var(--color-text); cursor: pointer; transition: background var(--transition), border-color var(--transition); box-shadow: var(--shadow-sm); user-select: none; } .matching-item:hover { background: var(--color-primary-light); border-color: var(--color-primary); } .matching-item.is-selected { background: var(--color-primary-light); border-color: var(--color-primary); } .matching-item.is-matched { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); cursor: default; } /* ---------- Tag Manager ---------- */ .tag-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; } .tag-row .form-control { flex: 1; } .btn--remove { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); transition: background var(--transition); } .btn--remove:hover { background: var(--color-danger-light); } /* ---------- Profile Info (legacy) ---------- */ .info-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .info-item { background: var(--color-surface-alt); border-radius: var(--radius); padding: 1.25rem; } .info-item__label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: 0.35rem; } .info-item__value { font-size: 1.05rem; font-weight: 600; color: var(--color-text); } /* ---------- Profile Header ---------- */ .profile-header { display: flex; align-items: center; gap: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem; margin-bottom: 1.5rem; } .profile-header__avatar img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light); } .profile-header__info { flex: 1; min-width: 0; } .profile-header__name { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; word-break: break-all; } .profile-header__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .profile-header__joined { font-size: 0.85rem; color: var(--color-text-muted); } .profile-header__actions { flex-shrink: 0; } /* ---------- Profile Badges ---------- */ .profile-badge { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border-light); } .profile-badge--success { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success); } .profile-badge--warning { background: var(--color-warning-light); color: var(--color-warning); border-color: var(--color-warning); } .profile-badge--primary { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); } /* ---------- Profile Stats Row ---------- */ .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .profile-stat { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem; text-align: center; } .profile-stat__value { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.25rem; } .profile-stat__label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; } .profile-stat__value--blue { color: var(--color-primary); } .profile-stat__value--green { color: var(--color-success); } .profile-stat__value--purple { color: #7c3aed; } .profile-stat__value--amber { color: var(--color-warning); } /* ---------- Profile Grid (2-col) ---------- */ .profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* ---------- Profile Detail Rows ---------- */ .profile-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--color-border-light); } .profile-detail-row:last-child { border-bottom: none; } .profile-detail-row__label { font-size: 0.875rem; color: var(--color-text-muted); } .profile-detail-row__value { font-size: 0.875rem; font-weight: 600; color: var(--color-text); } /* ---------- Profile Toggle ---------- */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle__slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-border); border-radius: 999px; transition: background var(--transition); } .toggle__slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); } .toggle input:checked + .toggle__slider { background: var(--color-primary); } .toggle input:checked + .toggle__slider::before { transform: translateX(20px); } @media (max-width: 768px) { .profile-header { flex-direction: column; text-align: center; } .profile-header__meta { justify-content: center; } .profile-stats { grid-template-columns: repeat(2, 1fr); } .profile-grid { grid-template-columns: 1fr; } } /* ---------- Code / Info box ---------- */ .code-block { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-family: 'Menlo', 'Consolas', monospace; font-size: 0.85rem; color: var(--color-text); display: block; white-space: pre-wrap; } .infobox { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; } .infobox__title { font-weight: 600; margin-bottom: 0.75rem; } /* ---------- Hero (landing) ---------- */ .hero { padding: 3rem 2rem; text-align: center; } .hero__logo { width: 100px; height: 100px; margin: 0 auto 1.5rem; filter: drop-shadow(0 6px 16px rgba(37, 99, 235, 0.3)); } .hero__title { font-size: 2.75rem; font-weight: 700; margin-bottom: 1rem; } .hero__subtitle { font-size: 1.15rem; color: var(--color-text-muted); margin-bottom: 2rem; } .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------- Login Logo ---------- */ .login-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border-light); } .login-logo__img { width: 80px; height: 80px; margin-bottom: 0.75rem; filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.25)); } .login-logo__title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; } /* ---------- Language card (training index) ---------- */ .lang-card { display: block; background: var(--color-surface); border: 2px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 2rem; text-align: center; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s; box-shadow: var(--shadow); } .lang-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; } .lang-card__flag { font-size: 3rem; margin-bottom: 0.5rem; line-height: 1; } .lang-card__name { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; } .lang-card__label { color: var(--color-text-muted); font-size: 0.8rem; } /* ---------- Configure Header ---------- */ .configure-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; } .configure-header__flag { font-size: 3.5rem; line-height: 1; } /* ---------- Language Select (radio cards) ---------- */ .language-select { display: flex; flex-wrap: wrap; gap: 0.75rem; } .language-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: var(--color-surface-alt); border: 2px solid var(--color-border-light); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition); user-select: none; } .language-option input[type="radio"] { display: none; } .language-option:hover { border-color: var(--color-primary); } .language-option.is-active { border-color: var(--color-primary); background: var(--color-primary-light); } .language-option__flag { font-size: 1.5rem; line-height: 1; } .language-option__name { font-weight: 600; color: var(--color-text); font-size: 0.95rem; } .language-option__code { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; } /* ---------- Direction Select (radio cards) ---------- */ .direction-select { display: flex; flex-direction: column; gap: 0.5rem; } .direction-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--color-surface-alt); border: 2px solid var(--color-border-light); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition); user-select: none; } .direction-option input[type="radio"] { display: none; } .direction-option:hover { border-color: var(--color-primary); } .direction-option.is-active { border-color: var(--color-primary); background: var(--color-primary-light); } .direction-option__icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .direction-option__text { display: flex; flex-direction: column; } .direction-option__title { font-weight: 600; color: var(--color-text); font-size: 0.95rem; } .direction-option__desc { font-size: 0.8rem; color: var(--color-text-muted); } /* ---------- Tag Filter (accordion + chips) ---------- */ .tag-category-list { display: flex; flex-direction: column; gap: 0.5rem; } .tag-category { background: var(--color-surface-alt); border: 2px solid var(--color-border-light); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition); } .tag-category.is-open { border-color: var(--color-primary); } .tag-category__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; user-select: none; transition: background var(--transition); } .tag-category__header:hover { background: rgba(37, 99, 235, 0.08); } .tag-category__name { font-weight: 600; font-size: 0.95rem; color: var(--color-text); } .tag-category__end { display: flex; align-items: center; gap: 0.5rem; } .tag-category__count { font-size: 0.75rem; background: var(--color-border); color: var(--color-text-muted); padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 500; } .tag-category__arrow { color: var(--color-text-muted); font-size: 0.8rem; transition: transform var(--transition); } .tag-category.is-open .tag-category__arrow { transform: rotate(180deg); } .tag-category__values { display: none; padding: 0 0.75rem 0.75rem; } .tag-category.is-open .tag-category__values { display: block; } .tag-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 500; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: all var(--transition); user-select: none; color: var(--color-text); } .tag-chip:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .tag-chip.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .tag-chip.is-selected::after { content: '\00d7'; margin-left: 0.4rem; font-size: 0.85rem; opacity: 0.8; } .tag-chip input[type="checkbox"] { display: none; } .tag-filter-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-light); } .selected-tag-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600; background: var(--color-primary); color: #fff; border-radius: 999px; } .selected-tag-badge__category { opacity: 0.7; font-weight: 400; } .selected-tag-badge__remove { background: none; border: none; color: #fff; opacity: 0.7; cursor: pointer; font-size: 0.95rem; padding: 0; margin-left: 0.15rem; line-height: 1; } .selected-tag-badge__remove:hover { opacity: 1; } .no-filter-hint { font-size: 0.8rem; color: var(--color-text-light); font-style: italic; } /* ---------- Result Feedback ---------- */ .result-card { text-align: center; padding: 2rem; animation: resultSlideIn 0.4s ease-out; } .result-icon { width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .result-icon--success { background: var(--color-success-light); color: var(--color-success); animation: resultPop 0.5s cubic-bezier(.175,.885,.32,1.275); } .result-icon--error { background: var(--color-danger-light); color: var(--color-danger); animation: resultShake 0.5s ease-in-out; } .result-card__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .result-card--success .result-card__title { color: var(--color-success); } .result-card--error .result-card__title { color: var(--color-danger); } .result-card__message { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } .result-streak { display: inline-flex; align-items: center; gap: 0.3rem; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.25rem; animation: streakBounce 0.6s cubic-bezier(.175,.885,.32,1.275); } .result-word-pair { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; text-align: left; } .result-word-pair__row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; } .result-word-pair__row + .result-word-pair__row { border-top: 1px solid var(--color-border-light); } .result-word-pair__label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .result-word-pair__value { font-size: 1.1rem; font-weight: 600; } .result-word-pair__value--correct { color: var(--color-success); } .result-word-pair__value--wrong { color: var(--color-danger); text-decoration: line-through; opacity: 0.7; } .result-word-pair__context { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding-top: 0.85rem; margin-top: 0.75rem; border-top: 1px solid var(--color-border-light); font-size: 0.95rem; font-weight: 500; color: var(--color-text); } .result-word-pair__arrow { color: var(--color-text-muted); font-size: 1.1rem; } .result-speak-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; padding: 0.35rem; border-radius: 50%; transition: all var(--transition); flex-shrink: 0; } .result-speak-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); } .result-speak-btn.is-speaking { animation: speakPulse 0.8s ease-in-out infinite; } .result-score { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; padding: 1rem 0; } .result-score__item { text-align: center; } .result-score__value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .result-score__label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .result-next-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; } .result-hint { display: block; opacity: 0; animation: hintFadeIn 0.5s 1s ease forwards; } @keyframes resultSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes resultPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } @keyframes resultShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } } @keyframes streakBounce { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes hintFadeIn { to { opacity: 1; } } /* ---------- Training Completion Page ---------- */ /* Hero */ .completion-hero { text-align: center; padding: 2.5rem 2rem 2rem; border-radius: var(--radius-lg); margin-bottom: 1.5rem; animation: resultSlideIn 0.5s ease-out; background: var(--color-surface); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .completion-hero::before { content: ''; position: absolute; inset: 0; opacity: 0.06; background: radial-gradient(circle at 30% 20%, currentColor 0%, transparent 50%), radial-gradient(circle at 70% 80%, currentColor 0%, transparent 50%); pointer-events: none; } .completion-hero--excellent { color: var(--color-success); } .completion-hero--great { color: var(--color-success); } .completion-hero--good { color: var(--color-primary); } .completion-hero--needs_practice { color: var(--color-warning); } .completion-hero__icon { width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; animation: resultPop 0.6s cubic-bezier(.175,.885,.32,1.275); } .completion-hero--excellent .completion-hero__icon, .completion-hero--great .completion-hero__icon { background: var(--color-success-light); } .completion-hero--good .completion-hero__icon { background: var(--color-primary-light); } .completion-hero--needs_practice .completion-hero__icon { background: var(--color-warning-light); } .completion-hero__title { font-size: 2rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; } .completion-hero__message { font-size: 1.05rem; color: var(--color-text-muted); margin-bottom: 1.75rem; } /* Accuracy Ring */ .accuracy-ring { position: relative; width: 140px; height: 140px; margin: 0 auto; } .accuracy-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); } .accuracy-ring__track { stroke: var(--color-border-light); } .accuracy-ring__fill { stroke: var(--color-success); stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); } .completion-hero--good .accuracy-ring__fill { stroke: var(--color-primary); } .completion-hero--needs_practice .accuracy-ring__fill { stroke: var(--color-warning); } .accuracy-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .accuracy-ring__value { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--color-text); } .accuracy-ring__percent { font-size: 1.1rem; font-weight: 700; color: var(--color-text-muted); } .accuracy-ring__text { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 0.15rem; } /* Stats Grid */ .completion-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .completion-stat { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1rem; text-align: center; animation: resultSlideIn 0.5s ease-out; animation-fill-mode: backwards; } .completion-stat:nth-child(1) { animation-delay: 0.1s; } .completion-stat:nth-child(2) { animation-delay: 0.2s; } .completion-stat:nth-child(3) { animation-delay: 0.3s; } .completion-stat:nth-child(4) { animation-delay: 0.4s; } .completion-stat__icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } .completion-stat__icon--blue { background: var(--color-primary-light); color: var(--color-primary); } .completion-stat__icon--green { background: var(--color-success-light); color: var(--color-success); } .completion-stat__icon--amber { background: var(--color-warning-light); color: var(--color-warning); } .completion-stat__icon--purple { background: rgba(124, 58, 237, 0.12); color: #7c3aed; } html.dark .completion-stat__icon--purple { background: rgba(124, 58, 237, 0.2); } .completion-stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.25rem; } .completion-stat__value--blue { color: var(--color-primary); } .completion-stat__value--green { color: var(--color-success); } .completion-stat__value--amber { color: var(--color-warning); } .completion-stat__value--purple { color: #7c3aed; } .completion-stat__label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } /* Sections */ .completion-section { margin-bottom: 1.5rem; animation: resultSlideIn 0.5s ease-out; animation-fill-mode: backwards; animation-delay: 0.5s; } .completion-section--practice { border-left: 4px solid var(--color-danger); } .completion-section__title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.25rem; } .completion-section__title svg { color: var(--color-primary); flex-shrink: 0; } .completion-section__title--danger svg { color: var(--color-danger); } .completion-section__header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.25rem 0; user-select: none; } .completion-section__header:hover .completion-section__toggle { color: var(--color-primary); } .completion-section__toggle { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); transition: all var(--transition); display: flex; align-items: center; } .completion-section__toggle.is-open { transform: rotate(180deg); } /* Type Breakdown */ .type-breakdown { display: flex; flex-direction: column; gap: 1rem; } .type-breakdown__row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 1rem; } .type-breakdown__info { display: flex; align-items: center; justify-content: space-between; } .type-breakdown__name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--color-text); } .type-breakdown__name svg { color: var(--color-text-muted); } .type-breakdown__score { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; } .type-breakdown__bar { height: 8px; background: var(--color-border-light); border-radius: 999px; overflow: hidden; } .type-breakdown__bar-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(.4,0,.2,1); min-width: 2px; } .type-breakdown__bar-fill--green { background: var(--color-success); } .type-breakdown__bar-fill--amber { background: var(--color-warning); } .type-breakdown__bar-fill--red { background: var(--color-danger); } .type-breakdown__pct { font-size: 0.9rem; font-weight: 700; min-width: 3rem; text-align: right; } .type-breakdown__pct--green { color: var(--color-success); } .type-breakdown__pct--amber { color: var(--color-warning); } .type-breakdown__pct--red { color: var(--color-danger); } /* Practice Words */ .practice-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } .practice-word { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; background: var(--color-danger-light); border: 1px solid var(--color-danger); border-radius: var(--radius); position: relative; } .practice-word__foreign { font-weight: 700; color: var(--color-text); font-size: 0.95rem; } .practice-word__arrow { color: var(--color-text-muted); flex-shrink: 0; display: flex; } .practice-word__translation { font-weight: 500; color: var(--color-text); font-size: 0.95rem; } .practice-word__spelling { font-size: 0.8rem; color: var(--color-text-muted); margin-left: auto; font-style: italic; } /* Recap List */ .recap-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .recap-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid var(--color-border-light); background: var(--color-surface); transition: background var(--transition); } .recap-item:hover { background: var(--color-surface-alt); } .recap-item--correct .recap-item__status { color: var(--color-success); } .recap-item--wrong .recap-item__status { color: var(--color-danger); } .recap-item__status { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .recap-item--correct .recap-item__status { background: var(--color-success-light); } .recap-item--wrong .recap-item__status { background: var(--color-danger-light); } .recap-item__content { flex: 1; min-width: 0; } .recap-item__word-pair { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .recap-item__foreign { font-weight: 700; font-size: 0.95rem; color: var(--color-text); } .recap-item__arrow { color: var(--color-text-light); display: flex; flex-shrink: 0; } .recap-item__translation { font-weight: 500; font-size: 0.95rem; color: var(--color-text-muted); } .recap-item__detail { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; font-size: 0.8rem; } .recap-item__your-answer { color: var(--color-danger); } .recap-item__your-answer strong { text-decoration: line-through; } .recap-item__correct-answer { color: var(--color-success); } .recap-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex-shrink: 0; } .recap-item__type { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-light); background: var(--color-surface-alt); padding: 0.15rem 0.5rem; border-radius: 999px; } .recap-item__time { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; } /* Action Buttons */ .completion-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; margin-bottom: 2rem; animation: resultSlideIn 0.5s ease-out; animation-fill-mode: backwards; animation-delay: 0.6s; } .completion-actions__btn { display: inline-flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .completion-stats { grid-template-columns: repeat(2, 1fr); } .completion-hero__title { font-size: 1.6rem; } .type-breakdown__row { grid-template-columns: 1fr; gap: 0.35rem; } .practice-words { grid-template-columns: 1fr; } .completion-actions { flex-direction: column; align-items: stretch; } .completion-actions__btn { justify-content: center; } } @media (max-width: 480px) { .completion-stats { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .completion-stat { padding: 1rem 0.75rem; } .completion-stat__value { font-size: 1.25rem; } .recap-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .recap-item__meta { flex-direction: row; gap: 0.5rem; } } /* ---------- Utility ---------- */ .hidden { display: none !important; } /* ---------- Animations ---------- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.25s ease-out; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .navbar__end { gap: 0.75rem; } .card { padding: 1.25rem; } .question-hero__word { font-size: 2rem; } .stat-card__value { font-size: 2rem; } .form-row { flex-direction: column; } .btn--lg { padding: 0.75rem 1.5rem; } .hero__title { font-size: 2rem; } .choices { grid-template-columns: 1fr; } }