/* ============================================================ SCHOOL MIGHT — NEW DESIGN SYSTEM (main_new.css) Unified light red/blue/white theme, mirrors app/templates/index.html. Sections: core (tokens/header/footer/buttons/auth/dashboard), lessons+exercises, word trainer+rating, theory pages (grammar/idioms/reading/articles/contacts), profile+misc. ============================================================ */ /* ============================================================ SCHOOL MIGHT — NEW DESIGN SYSTEM (main_new.css) Foundation: tokens, reset, header/nav/dropdown, footer, buttons, progress bars, auth pages, dashboard welcome/actions/weeks. Mirrors app/templates/index.html. Optional dark theme via — see DARK THEME block below. ============================================================ */ :root{ --red:#940501; --red-deep:#6B0000; --red-badge:rgba(148,5,1,0.38); --blue:#95BBEA; --blue-2:#AACAF2; --white:#FFF8E7; --surface:#FFF8E7; --black:#111111; --gray:rgba(2,2,2,0.6); --gray-2:rgba(0,0,0,0.58); --faq-pale:#F2D0D0; --cjk-font:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; --success:#10b981; --error:#ef4444; } /* ===================== DARK THEME (midnight blue) ===================== */ /* Toggled via , persisted in localStorage by theme.js. --white stays a literal cream/white (used for text-on-accent, e.g. white text on red buttons) — only --surface (page/card backgrounds) and the text tokens (--black/--gray/--gray-2) flip. --blue stays as-is; --red is brightened so it stays legible as text/borders on a dark background. */ :root[data-theme="dark"]{ --surface:#121826; --black:#EDEFF5; --gray:rgba(237,239,245,0.62); --gray-2:rgba(237,239,245,0.55); --red:#C6302B; --red-deep:#ED5B53; } /* Literal near-white grays (#eee/#ddd/#f2f2f2/etc.) predate the token system and don't flip with --surface, so they get explicit dark-mode overrides here instead of a risky project-wide hex rename. */ :root[data-theme="dark"] .progress-bar, :root[data-theme="dark"] .progress-bar-large, :root[data-theme="dark"] .week-track, :root[data-theme="dark"] .ms, :root[data-theme="dark"] .week-lock-badge, :root[data-theme="dark"] .week-lock-label, :root[data-theme="dark"] .hub-mode-icon--locked, :root[data-theme="dark"] .hub-mode-badge--soon, :root[data-theme="dark"] .action-card--locked .action-accent{ background:rgba(255,255,255,0.08); } :root[data-theme="dark"] .week-card--locked, :root[data-theme="dark"] .hub-mode-card--locked, :root[data-theme="dark"] .action-card--locked{ background:rgba(255,255,255,0.03); } :root[data-theme="dark"] .btn-cancel:hover, :root[data-theme="dark"] .btn-cancel-logout:hover{ background:rgba(255,255,255,0.06); } :root[data-theme="dark"] .btn-completed, :root[data-theme="dark"] .btn-cancel, :root[data-theme="dark"] .btn-cancel-logout, :root[data-theme="dark"] .auth-form input, :root[data-theme="dark"] .auth-form textarea, :root[data-theme="dark"] .auth-form select, :root[data-theme="dark"] .form-group input, :root[data-theme="dark"] .form-group textarea, :root[data-theme="dark"] .form-group select, :root[data-theme="dark"] .auth-footer, :root[data-theme="dark"] .section-header, :root[data-theme="dark"] .action-card--locked, :root[data-theme="dark"] .action-card--locked:hover, :root[data-theme="dark"] .hub-mode-card--locked, :root[data-theme="dark"] .hub-mode-icon--locked, :root[data-theme="dark"] .hub-mode-badge--soon{ border-color:rgba(255,255,255,0.14); } /* ===================== RESET & BASE ===================== */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:'Montserrat',sans-serif; color:var(--black); background:var(--surface); line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; } img{max-width:100%;display:block;} a{color:inherit;} button{font-family:'Montserrat',sans-serif;} h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif;margin:0;} p{margin:0;} ul,ol{margin:0;} .scroll-target{scroll-margin-top:100px;} .hidden{display:none !important;} /* ===================== MAIN WRAPPER ===================== */ .main{ max-width:1280px; margin:0 auto; padding:0 32px; min-height:calc(100vh - 260px); } @media(max-width:860px){ .main{padding:0 16px;} } /* ===================== HEADER ===================== */ .header{ background:var(--surface); padding:0 48px; position:sticky; top:0; z-index:100; } .header-container{ max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:80px; gap:20px; position:relative; flex-wrap:wrap; } .logo-area{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .logo-link{display:flex;align-items:center;} .logo{ height:21px; width:auto; display:block; } /* Old theme-toggle button — hidden if it lingers anywhere, kept selector so nothing breaks visually */ .theme-toggle-btn{display:none;} /* ===================== NAVIGATION ===================== */ .nav-landing{ display:flex; align-items:center; gap:22px; font-size:0.85rem; font-weight:600; } .nav-landing__link{ text-decoration:none; color:var(--black); transition:opacity 0.15s; } .nav-landing__link:hover{opacity:0.7;} .nav-links{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .nav-links > a{ color:var(--black); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:0.01em; padding:7px 14px; border-radius:10px; transition:opacity 0.2s; } .nav-links > a:hover{opacity:0.7;} .admin-link{ background:var(--red); padding:6px 16px; border-radius:50px; color:var(--white) !important; font-weight:700; } .admin-link:hover{opacity:0.85;} .theme-toggle{ width:24px; height:24px; flex-shrink:0; border:none; background:transparent; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0.85; transition:opacity 0.2s ease; } .theme-toggle:hover{ opacity:1; } .theme-toggle-icon{ display:none; color:var(--black); } .theme-toggle-icon--moon{display:block;} :root[data-theme="dark"] .theme-toggle-icon--moon{display:none;} :root[data-theme="dark"] .theme-toggle-icon--sun{display:block;} @media(max-width:860px){ .header{padding:0 16px;} .header-container{height:auto;padding:12px 0;gap:10px;justify-content:center;} .nav-landing{display:none;} .nav-links{justify-content:center;gap:4px;} .logo{height:16px;} } /* ===================== DROPDOWN ===================== */ .dropdown{position:relative;display:inline-block;} .dropdown-btn{ background:transparent; border:none; padding:7px 14px; border-radius:10px; color:var(--black) !important; cursor:pointer; font-weight:600; font-size:14px; letter-spacing:0.01em; font-family:inherit; transition:opacity 0.2s; display:flex; align-items:center; gap:6px; } .dropdown-btn:hover{opacity:0.7;} .dropdown-arrow{ font-size:9px; opacity:0.6; transition:transform 0.25s; } .dropdown:hover .dropdown-arrow{transform:rotate(180deg);} .dropdown-menu{ position:absolute; top:calc(100% + 10px); right:0; background:var(--surface); border:2px solid var(--blue); border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,0.14); min-width:210px; opacity:0; visibility:hidden; transform:translateY(-6px) scale(0.98); transform-origin:top right; transition:opacity 0.2s, transform 0.2s, visibility 0.2s; transition-delay:0.08s; z-index:1000; overflow:hidden; padding:6px; } .dropdown:hover .dropdown-menu, .dropdown.force-open .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); transition-delay:0s; } .dropdown-menu a{ display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--black) !important; text-decoration:none; font-size:14px; font-weight:600; border-radius:8px; transition:background 0.18s, color 0.18s; } .dropdown-menu a:hover{ background:var(--blue); color:var(--red-deep) !important; } .nav-links > a.nav-link--locked, .dropdown-menu a.nav-link--locked{ opacity:0.55; } .dropdown-menu a.nav-link--locked{ justify-content:space-between; } .nav-lock{ font-size:12px; opacity:0.7; margin-left:4px; } @media(max-width:768px){ .dropdown-menu{ position:fixed; top:auto; right:16px; left:16px; width:auto; min-width:auto; } .dropdown-btn{padding:6px 12px;} } /* ===================== BUTTONS ===================== */ .btn-solid{ background:var(--red); color:var(--white) !important; padding:10px 28px; border-radius:50px; font-weight:700; font-size:14px; letter-spacing:0.5px; border:none; outline:none; transition:opacity 0.2s, transform 0.2s; text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; } .btn-solid:hover{opacity:0.85;transform:translateY(-1px);} .btn-outline{ background:var(--surface); border:2px solid var(--red); padding:7px 18px; border-radius:50px; color:var(--red) !important; font-size:14px; font-weight:600; letter-spacing:0.01em; transition:background 0.2s, color 0.2s; outline:none; text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; } .btn-outline:hover{background:var(--red);color:var(--white) !important;} .btn-primary{ background:var(--red); color:var(--white); padding:14px 36px; border-radius:50px; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:all 0.25s; border:none; outline:none; cursor:pointer; font-size:15px; } .btn-primary:hover{transform:translateY(-2px);opacity:0.9;color:var(--white);} .btn-secondary{ background:var(--surface); color:var(--red); padding:14px 28px; border-radius:50px; text-decoration:none; font-size:15px; font-weight:600; transition:all 0.25s; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--red); cursor:pointer; text-align:center; } .btn-secondary:hover{background:var(--red);color:var(--white);transform:translateY(-2px);} .btn-danger{ background:var(--error); color:var(--white); padding:10px 20px; border-radius:50px; text-decoration:none; font-weight:600; transition:opacity 0.2s; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; } .btn-danger:hover{opacity:0.85;} .btn-complete{ background:var(--red); color:var(--white); padding:14px 32px; border-radius:50px; border:none; font-size:16px; font-weight:700; cursor:pointer; transition:all 0.25s; } .btn-complete:hover{transform:translateY(-2px);opacity:0.9;} .btn-completed{ background:var(--surface); color:var(--gray); padding:14px 32px; border-radius:50px; border:2px solid #eee; font-size:16px; font-weight:700; cursor:default; } .btn-save{ background:var(--red); color:var(--white); padding:14px 24px; border-radius:50px; border:none; font-size:16px; font-weight:700; cursor:pointer; transition:all 0.25s; } .btn-save:hover{transform:translateY(-2px);opacity:0.9;} .btn-cancel{ background:var(--surface); color:var(--black); padding:14px 24px; border-radius:50px; text-decoration:none; text-align:center; font-size:16px; font-weight:600; transition:background 0.2s, color 0.2s; border:2px solid #ddd; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .btn-cancel:hover{background:#f5f5f5;} .btn-logout{ background:var(--red); color:var(--white); padding:14px 24px; border-radius:50px; border:none; font-size:16px; font-weight:700; cursor:pointer; width:100%; transition:all 0.25s; } .btn-logout:hover{transform:translateY(-2px);opacity:0.9;} .btn-cancel-logout{ background:var(--surface); color:var(--black); padding:14px 24px; border-radius:50px; text-decoration:none; text-align:center; font-size:16px; font-weight:600; width:100%; transition:background 0.2s, color 0.2s; border:2px solid #ddd; display:inline-flex; align-items:center; justify-content:center; } .btn-cancel-logout:hover{background:#f5f5f5;} .btn-block{width:100%;text-align:center;justify-content:center;} .logout-actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; } /* Remove focus outlines like the old theme did, but keep a visible ring for a11y via box-shadow on inputs */ button:focus, button:focus-visible, a:focus, a:focus-visible{ outline:none; } /* ===================== PROGRESS BARS ===================== */ .progress-bar{ background:#eee; border-radius:10px; height:10px; overflow:hidden; position:relative; } .progress-bar.small{height:6px;} .progress-fill{ background:var(--red); height:100%; border-radius:10px; transition:width 0.3s; } .progress-bar-large{ background:#eee; border-radius:12px; height:20px; overflow:hidden; position:relative; } .progress-bar-large .progress-fill{ background:var(--red); height:100%; border-radius:12px; transition:width 0.3s; } .progress-bar-large .progress-percent{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:11px; color:var(--white); font-weight:700; white-space:nowrap; pointer-events:none; z-index:1; } .progress-percent{ font-size:10px; color:var(--white); font-weight:700; } /* Dynamic width utilities */ .w-0{width:0%;} .w-5{width:5%;} .w-10{width:10%;} .w-15{width:15%;} .w-20{width:20%;} .w-25{width:25%;} .w-30{width:30%;} .w-35{width:35%;} .w-40{width:40%;} .w-45{width:45%;} .w-50{width:50%;} .w-55{width:55%;} .w-60{width:60%;} .w-65{width:65%;} .w-70{width:70%;} .w-75{width:75%;} .w-80{width:80%;} .w-85{width:85%;} .w-90{width:90%;} .w-95{width:95%;} .w-100{width:100%;} /* ===================== UTILITIES ===================== */ .back-link{ color:var(--red); text-decoration:none; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:4px; } .back-link:hover{text-decoration:underline;} /* ===================== FOOTER ===================== */ .footer{ background:var(--red-deep); color:var(--white); padding:60px 48px 24px; margin-top:60px; } .footer-container{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,248,231,0.15); } .footer-column h4{ color:var(--blue-2); font-size:15px; font-weight:600; margin-bottom:18px; } .footer-links{ list-style:none; padding:0; margin:0; } .footer-links li{margin-bottom:10px;} .footer-links a{ color:var(--white); text-decoration:none; transition:opacity 0.2s; font-size:14px; display:inline-block; } .footer-links a:hover{opacity:0.75;} .footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .footer-logo img{height:32px;display:block;filter:brightness(0) invert(1);} .footer-description{ font-size:13px; line-height:1.6; margin-bottom:16px; color:rgba(255,248,231,0.7); } .footer-bottom{ max-width:1280px; margin:0 auto; padding-top:22px; } .footer-bottom-container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; } .footer-copyright, .footer-dev{ font-size:12px; color:rgba(255,248,231,0.55); } @media(max-width:860px){ .footer{padding:48px 24px 24px;} .footer-container{grid-template-columns:1fr 1fr;gap:32px;} .footer-bottom-container{flex-direction:column;text-align:center;} .footer-column{text-align:center;} .footer-logo{justify-content:center;} } /* ===================== AUTH PAGES ===================== */ .auth-container{ min-height:calc(100vh - 260px); display:flex; align-items:center; justify-content:center; padding:40px 20px; } .auth-card{ background:var(--surface); border-radius:32px; padding:48px; max-width:480px; width:100%; border:2px solid var(--blue); } .auth-header{ text-align:center; margin-bottom:32px; } .auth-header h1{ font-size:32px; font-weight:900; margin-bottom:8px; color:var(--black); } .auth-header p{color:var(--gray);} .auth-error{ background:#fee2e2; color:var(--error); padding:12px 16px; border-radius:12px; margin-bottom:24px; font-size:14px; border:1px solid #fecaca; } .auth-success{ background:#dcfce7; color:var(--success); padding:12px 16px; border-radius:12px; margin-bottom:24px; font-size:14px; border:1px solid #bbf7d0; } .auth-form .form-group{margin-bottom:20px;} .form-group{margin-bottom:20px;} .auth-form label, .form-group label{ display:block; margin-bottom:8px; font-weight:600; color:var(--black); font-size:14px; } .auth-form input, .auth-form textarea, .auth-form select, .form-group input, .form-group textarea, .form-group select{ width:100%; padding:12px 16px; border:2px solid #eee; border-radius:14px; font-size:16px; font-family:'Montserrat',sans-serif; background:var(--surface); color:var(--black); transition:border-color 0.2s; } .auth-form input:focus, .auth-form textarea:focus, .auth-form select:focus, .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:var(--red); } .auth-form small{ display:block; margin-top:6px; font-size:12px; color:var(--gray); } .auth-footer{ text-align:center; margin-top:24px; padding-top:24px; border-top:1px solid #eee; } .auth-footer a{ color:var(--red); text-decoration:none; font-weight:600; } .auth-footer a:hover{text-decoration:underline;} @media(max-width:600px){ .auth-container{padding:16px 10px;} .auth-card{padding:24px 18px;border-radius:22px;} .auth-header{margin-bottom:18px;} .auth-header h1{font-size:22px;} .auth-header p{font-size:13px;} .auth-error,.auth-success{padding:9px 12px;margin-bottom:14px;font-size:12.5px;} .auth-form .form-group{margin-bottom:12px;} .auth-footer{margin-top:16px;padding-top:16px;font-size:13px;} .logout-actions{gap:8px;margin-top:14px;} } /* ===================== DASHBOARD: WELCOME CARD ===================== */ .dashboard-container{ max-width:1080px; margin:0 auto; padding:40px 24px 56px; display:flex; flex-direction:column; gap:24px; } .welcome-card{ background:var(--red); border-radius:28px; padding:40px 44px; position:relative; overflow:hidden; } .welcome-deco{ position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,248,231,0.08); } .welcome-deco--1{width:360px;height:360px;top:-110px;right:-60px;} .welcome-deco--2{width:220px;height:220px;bottom:-90px;left:32%;} .welcome-deco--3{width:140px;height:140px;top:20px;left:-30px;background:rgba(255,248,231,0.05);} .welcome-inner{ position:relative; z-index:1; display:flex; align-items:center; gap:18px; margin-bottom:28px; } .welcome-avatar{ width:58px; height:58px; flex-shrink:0; border-radius:50%; background:rgba(255,248,231,0.18); border:2px solid rgba(255,248,231,0.4); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:var(--white); user-select:none; } .welcome-meta{flex:1;min-width:0;} .welcome-title{ margin:0 0 10px; font-size:26px; font-weight:700; color:var(--white); line-height:1.25; } .welcome-chips{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .welcome-chip{ background:rgba(255,248,231,0.16); border:1px solid rgba(255,248,231,0.25); border-radius:50px; padding:4px 14px; font-size:13px; font-weight:600; color:var(--white); } .welcome-chip--muted{ background:transparent; border-color:transparent; color:rgba(255,248,231,0.6); padding-left:0; } .welcome-cta{ flex-shrink:0; margin-left:auto; background:var(--surface); color:var(--red-deep); text-decoration:none; font-size:20px; font-weight:800; padding:18px 40px; border-radius:60px; white-space:nowrap; box-shadow:0 12px 30px rgba(0,0,0,0.28); transition:transform 0.22s ease, box-shadow 0.22s ease; animation:welcome-cta-pulse 2.4s ease-in-out infinite; } .welcome-cta:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 38px rgba(0,0,0,0.34); } @keyframes welcome-cta-pulse{ 0%,100%{box-shadow:0 12px 30px rgba(0,0,0,0.28);} 50%{box-shadow:0 12px 30px rgba(0,0,0,0.28), 0 0 0 8px rgba(255,248,231,0.14);} } .welcome-progress-full{ position:relative; z-index:1; border-top:1px solid rgba(255,248,231,0.2); padding-top:20px; } .wpr-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .wpr-label{font-size:13px;font-weight:600;color:rgba(255,248,231,0.75);} .wpr-fraction{font-size:13px;font-weight:700;color:var(--white);} .welcome-progress-full .progress-bar-large{ background:rgba(255,248,231,0.2); height:10px; } .welcome-progress-full .progress-bar-large .progress-fill{ background:var(--surface); } @media(max-width:840px){ .welcome-inner{gap:14px;flex-wrap:wrap;} .welcome-cta{margin-left:0;width:100%;text-align:center;} } @media(max-width:600px){ .dashboard-container{gap:14px;} .welcome-card{padding:18px 16px;border-radius:20px;} .welcome-avatar{display:none;} .welcome-inner{margin-bottom:16px;} .welcome-title{font-size:18px;margin-bottom:6px;} .welcome-chip{font-size:11px;padding:3px 10px;} .welcome-cta{font-size:15px;padding:13px 20px;border-radius:40px;} .welcome-progress-full{padding-top:12px;} .wpr-header{margin-bottom:6px;} .wpr-label,.wpr-fraction{font-size:11px;} .welcome-progress-full .progress-bar-large{height:7px;} } /* ===================== TODAY LESSON CARD ===================== */ .today-lesson-card{ background:var(--surface); border:2px solid var(--blue); border-radius:16px; padding:20px 24px; } .today-lesson-inner{ display:flex; align-items:center; gap:16px; } .today-lesson-body{flex:1;min-width:0;} .today-lesson-label{ font-size:0.85rem; color:var(--gray); margin-bottom:4px; } .today-lesson-title{ font-size:1.1rem; font-weight:700; margin:0; color:var(--black); } .today-lesson-btn{ background:var(--red); color:var(--white); padding:10px 20px; border-radius:10px; text-decoration:none; font-weight:600; white-space:nowrap; flex-shrink:0; transition:background 0.2s ease; } .today-lesson-btn:hover{background:var(--red-deep);} @media(max-width:600px){ .today-lesson-card{padding:16px;border-radius:14px;} .today-lesson-inner{flex-wrap:wrap;} .today-lesson-btn{width:100%;text-align:center;} } /* ===================== ACTION CARDS GRID ===================== */ .actions-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .action-card{ position:relative; display:flex; align-items:center; gap:16px; padding:22px 22px 22px 26px; background:var(--surface); border-radius:22px; border:2px solid var(--blue); text-decoration:none; color:inherit; overflow:hidden; transition:transform 0.22s ease, border-color 0.22s ease; } .action-card--orange{border-color:var(--red);} .action-card--blue{border-color:var(--blue);} .action-accent{ position:absolute; top:0;left:0;bottom:0; width:5px; border-radius:22px 0 0 22px; background:var(--blue); } .action-card--orange .action-accent{background:var(--red);} .action-card--blue .action-accent{background:var(--blue);} .action-card:hover{transform:translateY(-5px);} .action-card--locked{ opacity:0.68; border-style:dashed; border-color:#ddd; } .action-card--locked:hover{transform:none;border-color:#ddd;} .action-card--locked .action-accent{background:#ddd;} .action-lock{ flex-shrink:0; font-size:20px; opacity:0.45; } .action-icon{ flex-shrink:0; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--blue); } .action-icon--orange{background:rgba(148,5,1,0.10);} .action-icon--blue{background:rgba(149,187,234,0.25);} .action-icon--img img{width:32px;height:32px;border-radius:8px;object-fit:cover;display:block;} .action-body{flex:1;min-width:0;} .action-body h3{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--black);} .action-body p{ margin:0; font-size:13px; color:var(--gray); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .action-arrow{ flex-shrink:0; font-size:18px; color:var(--gray); transition:transform 0.2s ease, color 0.2s ease; } .action-card:hover .action-arrow{transform:translateX(5px);color:var(--red);} @media(max-width:720px){ .actions-grid{grid-template-columns:repeat(2,1fr);gap:10px;} } @media(max-width:600px){ .action-body p{display:none;} .action-card{padding:12px 12px 12px 14px;gap:10px;border-radius:16px;} .action-icon{width:36px;height:36px;border-radius:10px;font-size:17px;} .action-icon--img img{width:20px;height:20px;} .action-body h3{font-size:12.5px;line-height:1.3;white-space:normal;} .action-arrow{display:none;} } /* ===================== WEEKS SECTION ===================== */ .weeks-section{ background:var(--surface); border-radius:28px; border:2px solid var(--blue); padding:30px 32px; } .section-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid #eee; } .section-title{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--black);} .section-subtitle{margin:0;font-size:13px;color:var(--gray);} .weeks-badge{ flex-shrink:0; background:var(--blue); color:var(--red-deep); font-size:13px; font-weight:700; padding:6px 15px; border-radius:50px; } .weeks-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; } .week-card{ background:var(--surface); border:2px solid var(--blue); border-radius:20px; padding:20px 22px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:transform 0.22s ease, border-color 0.22s ease; } .week-card:not(.week-card--locked):hover{ transform:translateY(-4px); border-color:var(--red); } .week-card--done{ background:rgba(149,187,234,0.10); border-color:var(--red); } .week-card--locked{ background:#fafafa; border-style:dashed; border-color:#ddd; opacity:0.68; } .week-card-top{ display:flex; justify-content:space-between; align-items:center; } .week-num{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--red); } .week-done-badge{ width:22px; height:22px; background:var(--success); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; } .week-card .week-title{ font-size:14px; font-weight:700; color:var(--black); line-height:1.4; } .week-progress-wrap{ display:flex; flex-direction:column; gap:6px; } .week-track{ height:6px; background:#eee; border-radius:10px; overflow:hidden; } .week-fill{ height:100%; background:var(--red); border-radius:10px; transition:width 0.5s ease; } .week-stats-row{ display:flex; justify-content:space-between; align-items:center; } .week-card .week-lessons-count{font-size:12px;color:var(--gray);} .week-pct{font-size:12px;font-weight:700;color:var(--red);} .week-cta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--red); text-decoration:none; margin-top:auto; transition:gap 0.2s ease; } .week-cta:hover{gap:10px;} .week-cta-arrow{transition:transform 0.2s ease;} .week-lock-badge{ width:22px; height:22px; background:#eee; color:var(--gray); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; opacity:0.7; flex-shrink:0; } .week-lock-label{ font-size:12px; font-weight:600; color:var(--gray); background:#f2f2f2; padding:6px 14px; border-radius:50px; align-self:flex-start; margin-top:auto; } @media(max-width:720px){ .weeks-grid{grid-template-columns:repeat(2,1fr);gap:10px;} } @media(max-width:600px){ .weeks-section{padding:16px 14px;border-radius:20px;} .section-header{margin-bottom:14px;padding-bottom:14px;} .section-title{font-size:16px;} .section-subtitle{font-size:11px;} .weeks-badge{font-size:11px;padding:4px 10px;} .week-card{padding:14px;gap:8px;border-radius:16px;} .week-card .week-title{font-size:13px;} .week-num{font-size:9.5px;} .week-cta{font-size:12px;} } /* ============================================================ LESSONS + EXERCISES/QUIZ ============================================================ */ /* ===================================================================== LESSONS + QUIZ/EXERCISES — School Might red/blue/white design system Covers: lesson_detail.html, exercises_build_word.html, exercises_fill_blank.html, exercises_quiz.html, exercises_completed.html, no_exercises.html Tokens (mirrors index.html lines 10-31): --red:#940501; --red-deep:#6B0000; --blue:#95BBEA; --blue-2:#AACAF2; --white:#FFF8E7; --black:#111111; --gray:rgba(2,2,2,0.6); --gray-2:rgba(0,0,0,0.58); --cjk-font:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; Font: 'Montserrat', sans-serif everywhere except CJK text. ===================================================================== */ /* --------------------------------------------------------------------- LESSON DETAIL PAGE --------------------------------------------------------------------- */ .lesson-container { max-width: 900px; margin: 0 auto; padding: 40px 20px 60px; font-family: 'Montserrat', sans-serif; } .lesson-nav { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .back-link { display: inline-block; color: var(--red); font-weight: 700; text-decoration: none; font-size: 0.9rem; transition: opacity 0.15s; } .back-link:hover { opacity: 0.7; } .lesson-header { background: var(--surface); border: 2px solid var(--red); border-radius: 24px; padding: 28px 32px; margin-bottom: 24px; } .lesson-header h1 { margin: 0 0 14px 0; font-size: 28px; font-weight: 800; color: var(--black); } .lesson-status { display: inline-block; } .status-completed, .status-in-progress, .status-pending { display: inline-block; padding: 5px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; } .status-completed { background: var(--blue); color: var(--red-deep); } .status-in-progress { background: var(--blue-2); color: var(--red-deep); } .status-pending { background: rgba(0, 0, 0, 0.06); color: var(--gray-2); } /* Tabs */ .lesson-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid rgba(0, 0, 0, 0.08); } .tab-btn { background: none; border: none; padding: 12px 24px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--gray-2); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; border-bottom: 3px solid transparent; margin-bottom: -2px; } .tab-btn:hover { color: var(--red); } .tab-btn.active { color: var(--red); border-bottom-color: var(--red); } .tab-content { display: none; } .tab-content.active { display: block; } /* Video */ .lesson-video { background: var(--surface); border: 2px solid var(--blue); border-radius: 24px; padding: 24px; margin-bottom: 24px; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; } /* Lesson content (theory text) */ .lesson-content { background: var(--surface); border: none; outline: none; border-radius: 24px; padding: 32px 0; margin-bottom: 24px; line-height: 1.8; color: var(--black); } .lesson-content h2 { margin: 24px 0 12px 0; font-size: 22px; font-weight: 800; color: var(--black); } .lesson-content h2:first-child { margin-top: 0; } .lesson-content h3 { margin: 20px 0 10px 0; font-size: 18px; font-weight: 700; color: var(--black); } .lesson-content p { margin-bottom: 16px; color: var(--gray); } .lesson-content ul, .lesson-content ol { margin: 12px 0 16px 24px; color: var(--gray); } .lesson-content li { margin-bottom: 8px; } .lesson-content strong { color: var(--black); } .lesson-content table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; } .lesson-content table th, .lesson-content table td { border: 1px solid var(--blue); padding: 10px 16px; text-align: left; vertical-align: top; } .lesson-content table th { background: var(--blue); color: var(--red-deep); font-weight: 700; } .lesson-content table tr:nth-child(even) td { background: rgba(149, 187, 234, 0.10); } /* Words empty state */ .lesson-words-empty { background: var(--surface); border: 2px dashed var(--blue); border-radius: 24px; padding: 48px; text-align: center; color: var(--gray-2); font-weight: 600; } /* Complete button area */ .lesson-complete { text-align: center; margin: 32px 0 48px; } .btn-complete, .btn-completed { font-family: 'Montserrat', sans-serif; display: inline-block; padding: 14px 32px; border-radius: 50px; font-size: 16px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; border: none; } .btn-complete { background: var(--red); color: var(--white); } .btn-complete:hover { opacity: 0.85; } .btn-completed { background: var(--blue); color: var(--red-deep); cursor: not-allowed; } .btn-completed[disabled] { opacity: 0.85; } .empty-state { background: var(--surface); border: 2px dashed var(--blue); border-radius: 24px; padding: 48px; text-align: center; color: var(--gray-2); font-weight: 600; } /* --------------------------------------------------------------------- FLASHCARDS (lesson_detail.html "Слова" tab) --------------------------------------------------------------------- */ .words-flashcards { background: var(--surface); border: 2px solid var(--red); border-radius: 24px; padding: 24px; } .flashcards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } .flashcard { background-color: transparent; height: 260px; perspective: 1000px; cursor: pointer; } .flashcard-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 24px; } .flashcard.flipped .flashcard-inner { transform: rotateY(180deg); } .flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .flashcard-front { background: var(--red); color: var(--white); border: 2px solid var(--red); overflow: hidden; } .flashcard-deco { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 248, 231, 0.08); } .flashcard-deco--1 { width: 160px; height: 160px; top: -50px; right: -40px; } .flashcard-deco--2 { width: 100px; height: 100px; bottom: -40px; left: 20%; } .flashcard-deco--3 { width: 70px; height: 70px; top: 10px; left: -20px; background: rgba(255, 248, 231, 0.05); } .flashcard-back { background: var(--surface); color: var(--black); border: 2px solid var(--blue); transform: rotateY(180deg); overflow-y: auto; } .flashcard-hanzi { font-family: var(--cjk-font); font-size: 44px; font-weight: 700; margin-bottom: 16px; } .flashcard-transcription { font-size: 18px; opacity: 0.9; margin-bottom: 20px; } .flashcard-hint { position: absolute; bottom: 18px; font-size: 12px; opacity: 0.75; font-weight: 600; } .flashcard-translation { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: var(--red-deep); } .audio-play-btn { font-family: 'Montserrat', sans-serif; background: var(--surface); color: var(--red); border: 2px solid var(--surface); border-radius: 50px; padding: 6px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .audio-play-btn:hover { opacity: 0.8; } .flashcard-example { margin-top: 16px; font-size: 14px; text-align: center; max-height: 130px; overflow-y: auto; color: var(--gray); } .flashcard-example .example-sentence { margin-bottom: 8px; font-style: italic; font-family: var(--cjk-font); } .flashcard-example .example-translation { font-size: 12px; opacity: 0.85; } .flashcard-audio { margin: 15px 0; width: 100%; text-align: center; } .flashcard-audio audio { width: 100%; max-width: 200px; height: 40px; } /* --------------------------------------------------------------------- QUIZ / EXERCISES SHARED SHELL (used by exercises_build_word, exercises_fill_blank, exercises_quiz, exercises_completed) --------------------------------------------------------------------- */ .quiz-container { max-width: 800px; margin: 0 auto; padding: 40px 20px 60px; font-family: 'Montserrat', sans-serif; } .quiz-nav { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } /* Progress */ .quiz-progress { background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; padding: 20px 24px; margin-bottom: 24px; } .progress-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; } .progress-label { font-weight: 700; color: var(--black); } .progress-count { color: var(--red); font-weight: 700; } .progress-bar { background: #eee; border-radius: 999px; height: 10px; overflow: hidden; } .progress-fill { background: var(--red); height: 100%; border-radius: 999px; transition: width 0.3s ease; } /* Question card */ .quiz-card { background: var(--surface); border: 2px solid var(--red); border-radius: 28px; padding: 32px; } .quiz-header { margin-bottom: 24px; } .quiz-badge { display: inline-block; background: var(--blue); color: var(--red-deep); padding: 5px 16px; border-radius: 50px; font-size: 12px; font-weight: 800; margin-bottom: 12px; margin-right: 8px; } .quiz-description { display: block; font-size: 13px; font-weight: 700; color: var(--gray-2); text-transform: uppercase; letter-spacing: 1px; } .quiz-question { font-size: 24px; font-weight: 700; color: var(--black); margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid rgba(0, 0, 0, 0.08); line-height: 1.4; } .quiz-question--hanzi { font-family: var(--cjk-font); font-size: 42px; text-align: center; } .quiz-question--translation { text-align: center; } .option-text--hanzi { font-family: var(--cjk-font); font-size: 22px; font-weight: 700; } /* Options */ .quiz-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .quiz-option { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--surface); border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 16px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; text-align: left; font-family: 'Montserrat', sans-serif; font-size: 16px; width: 100%; color: var(--black); } .quiz-option:hover:not(:disabled) { border-color: var(--blue); background: rgba(149, 187, 234, 0.1); transform: translateX(4px); } .option-letter { width: 32px; height: 32px; background: rgba(0, 0, 0, 0.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gray-2); transition: all 0.2s; flex-shrink: 0; } .quiz-option:hover:not(:disabled) .option-letter { background: var(--blue); color: var(--red-deep); } .option-text { flex: 1; color: var(--black); } .quiz-option.correct { background: rgba(16, 185, 129, 0.08); border-color: #10b981; } .quiz-option.correct .option-letter { background: #10b981; color: var(--white); } .quiz-option.correct .option-text { color: #0d9668; } .quiz-option.wrong { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; } .quiz-option.wrong .option-letter { background: #ef4444; color: var(--white); } .quiz-option.wrong .option-text { color: #dc2626; } .quiz-option:disabled { cursor: not-allowed; opacity: 0.85; } /* Feedback */ .quiz-feedback { margin-bottom: 24px; display: none; } .feedback-correct, .feedback-wrong, .feedback-error { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; } .feedback-correct { background: rgba(16, 185, 129, 0.1); color: #0d9668; border: 2px solid #10b981; } .feedback-wrong { background: rgba(239, 68, 68, 0.08); color: #dc2626; border: 2px solid #ef4444; } .feedback-error { background: rgba(148, 5, 1, 0.06); color: var(--red-deep); border: 2px solid var(--red); } .feedback-icon { font-size: 20px; flex-shrink: 0; } .feedback-text { flex: 1; font-weight: 600; } .feedback-explanation { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; opacity: 0.9; } /* Next / continue button */ .quiz-next { text-align: center; } .btn-next { font-family: 'Montserrat', sans-serif; background: var(--red); color: var(--white); padding: 14px 32px; border-radius: 50px; border: none; font-size: 16px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; } .btn-next:hover { opacity: 0.85; transform: translateY(-2px); } .btn-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* Generic secondary button used inline in quiz controls (btn-secondary, btn-primary, btn-cancel — shared site-wide but styled here for context consistency where these templates use them) */ .btn-secondary { font-family: 'Montserrat', sans-serif; background: var(--surface); color: var(--red); border: 2px solid var(--red); border-radius: 50px; padding: 14px 32px; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.15s, transform 0.15s; } .btn-secondary:hover { opacity: 0.8; } .btn-primary { font-family: 'Montserrat', sans-serif; background: var(--red); color: var(--white); border: none; border-radius: 50px; padding: 14px 32px; font-size: 16px; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.15s, transform 0.15s; } .btn-primary:hover { opacity: 0.85; } .btn-cancel { font-family: 'Montserrat', sans-serif; background: transparent; color: var(--gray-2); border: 2px solid rgba(0, 0, 0, 0.15); border-radius: 50px; padding: 14px 32px; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.15s; } .btn-cancel:hover { opacity: 0.7; } /* --------------------------------------------------------------------- BUILD-WORD EXERCISE (exercises_build_word.html) --------------------------------------------------------------------- */ .bw-translation { text-align: center; font-size: 20px; font-weight: 600; color: var(--gray); margin-bottom: 24px; } .bw-translation strong { display: block; font-size: 28px; font-weight: 800; color: var(--black); margin-top: 4px; } .bw-answer-zone { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 76px; padding: 14px; margin-bottom: 20px; background: rgba(0, 0, 0, 0.02); border: 2px dashed var(--blue); border-radius: 16px; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .bw-answer-zone--correct { border-style: solid; border-color: #10b981; background: rgba(16, 185, 129, 0.06); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); animation: bw-pop 0.35s ease; } .bw-answer-zone--wrong { border-style: solid; border-color: #ef4444; background: rgba(239, 68, 68, 0.05); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); animation: bw-shake 0.4s ease; } @keyframes bw-pop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes bw-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .bw-slot { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 10px; background: var(--surface); border: 2px solid var(--red); border-radius: 12px; font-family: var(--cjk-font); font-size: 26px; font-weight: 700; color: var(--black); cursor: pointer; } .bw-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; } .bw-part { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 10px; background: var(--surface); border: 2px solid rgba(0, 0, 0, 0.15); border-radius: 12px; font-family: var(--cjk-font); font-size: 26px; font-weight: 700; color: var(--black); cursor: pointer; transition: all 0.2s ease; } .bw-part:hover:not(:disabled) { background: rgba(149, 187, 234, 0.12); border-color: var(--blue); transform: translateY(-3px); } .bw-part:disabled { opacity: 0.3; cursor: not-allowed; } .bw-controls { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; } /* --------------------------------------------------------------------- FILL-BLANK EXERCISE (exercises_fill_blank.html) --------------------------------------------------------------------- */ .fb-sentence { text-align: center; font-size: 30px; font-weight: 700; font-family: var(--cjk-font); color: var(--black); line-height: 1.6; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid rgba(0, 0, 0, 0.08); } .fb-blank { display: inline-block; min-width: 56px; border-bottom: 3px solid var(--red); color: var(--red); } /* --------------------------------------------------------------------- COMPLETED PAGE (exercises_completed.html) --------------------------------------------------------------------- */ .completed-card { text-align: center; padding: 48px 32px; } .completed-icon { font-size: 80px; margin-bottom: 24px; } .completed-title { font-size: 28px; font-weight: 800; margin: 0 0 16px 0; color: var(--red); } .completed-message { font-size: 18px; color: var(--gray); margin-bottom: 32px; line-height: 1.5; } .completed-message strong { color: var(--black); } .completed-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .completed-stat { text-align: center; padding: 16px 24px; background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; min-width: 100px; } .completed-stat-value { font-size: 32px; font-weight: 800; color: var(--red); display: block; margin-bottom: 4px; } .completed-stat-label { font-size: 13px; font-weight: 600; color: var(--gray-2); display: block; } .completed-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* --------------------------------------------------------------------- NO-EXERCISES PAGE (no_exercises.html) --------------------------------------------------------------------- */ .no-exercises-container { max-width: 600px; margin: 0 auto; padding: 60px 20px; min-height: calc(100vh - 300px); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; } .no-exercises-card { background: var(--surface); border: 2px solid var(--red); border-radius: 32px; padding: 48px 32px; text-align: center; width: 100%; } .no-exercises-icon { font-size: 80px; margin-bottom: 24px; } .no-exercises-card h1 { font-size: 28px; font-weight: 800; color: var(--black); margin-bottom: 16px; } .no-exercises-message { font-size: 16px; color: var(--gray); margin-bottom: 32px; line-height: 1.5; } .no-exercises-message strong { color: var(--black); } .no-exercises-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ===================================================================== RESPONSIVE — breakpoint 860px (matches index.html) ===================================================================== */ @media (max-width: 860px) { .lesson-container, .quiz-container { padding: 20px 7px 40px; } .lesson-header { padding: 20px 20px; } .lesson-header h1 { font-size: 22px; } .lesson-video, .words-flashcards { padding: 18px; border-radius: 18px; } .lesson-content { padding: 18px 0; margin-left: -23px; margin-right: -23px; border-radius: 0; } .lesson-content h2 { font-size: 18px; } .lesson-content h3 { font-size: 16px; } .lesson-tabs { gap: 4px; margin-bottom: 16px; } .tab-btn { padding: 10px 14px; font-size: 13.5px; } .flashcards-grid { grid-template-columns: 1fr; gap: 16px; } .flashcard { height: 240px; } .flashcard-hanzi { font-size: 36px; } .quiz-nav { flex-direction: column; gap: 8px; margin-bottom: 16px; } .quiz-progress { padding: 14px 16px; border-radius: 16px; } .quiz-card { padding: 18px; border-radius: 20px; } .quiz-question { font-size: 18px; margin-bottom: 20px; padding-bottom: 16px; } .quiz-question--hanzi { font-size: 32px; } .quiz-option { padding: 12px 16px; font-size: 14px; gap: 12px; } .option-letter { width: 28px; height: 28px; font-size: 13px; } .option-text--hanzi { font-size: 18px; } .btn-next, .btn-secondary, .btn-primary, .btn-cancel { padding: 12px 24px; font-size: 14px; width: 100%; text-align: center; } .bw-translation { font-size: 16px; } .bw-translation strong { font-size: 22px; } .bw-slot, .bw-part { min-width: 46px; height: 46px; font-size: 20px; } .fb-sentence { font-size: 22px; } .fb-blank { min-width: 36px; } .completed-card, .no-exercises-card { padding: 28px 18px; } .completed-icon, .no-exercises-icon { font-size: 56px; margin-bottom: 16px; } .completed-title, .no-exercises-card h1 { font-size: 22px; } .completed-message, .no-exercises-message { font-size: 15px; margin-bottom: 24px; } .completed-stats { gap: 10px; margin-bottom: 28px; } .completed-stat { flex: 0 1 calc(50% - 5px); min-width: 120px; padding: 10px 8px; } .completed-stat-value { font-size: 22px; } .completed-stat-label { font-size: 10.5px; } .completed-actions, .no-exercises-actions { flex-direction: column; } .completed-actions a, .completed-actions button, .no-exercises-actions a { width: 100%; } } /* ============================================================ WORD TRAINER + MATCHING + RATING ============================================================ */ /* ============================================================ WORD TRAINER + MATCHING GAME + WORD RATING Reskin onto the School Might red/blue/white design system. Source templates: - app/templates/word_trainer/hub.html - app/templates/word_trainer/matching.html - app/templates/word_trainer/session.html - app/templates/dashboard/exercises/exercises_matching.html (.mp-* only) - app/templates/dashboard/words/rating.html ============================================================ */ :root { --red: #940501; --red-deep: #6B0000; --blue: #95BBEA; --blue-2: #AACAF2; --white: #FFF8E7; --black: #111111; --gray: rgba(2, 2, 2, 0.6); --gray-2: rgba(0, 0, 0, 0.58); --cjk-font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; } /* ════════════════════════════════════════════════════════════ HUB PAGE — /word-trainer ════════════════════════════════════════════════════════════ */ .hub-page { max-width: 960px; margin: 0 auto; padding: 56px 24px 64px; display: flex; flex-direction: column; gap: 28px; font-family: 'Montserrat', sans-serif; } /* ── Header ─────────────────────────────────────────────── */ .hub-header { background: var(--red); border-radius: 32px; padding: 40px 44px; position: relative; overflow: hidden; } .hub-header-deco { position: absolute; border-radius: 50%; pointer-events: none; } .hub-header-deco--1 { width: 260px; height: 260px; top: -90px; right: -60px; background: rgba(255, 248, 231, 0.08); } .hub-header-deco--2 { width: 150px; height: 150px; bottom: -60px; left: 26%; background: var(--blue); opacity: 0.14; } .hub-header-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; } .hub-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-size: 13px; font-weight: 700; text-decoration: none; background: rgba(255, 248, 231, 0.14); border: 2px solid rgba(255, 248, 231, 0.4); border-radius: 50px; padding: 6px 16px; transition: background .2s ease, border-color .2s ease; margin-bottom: 10px; } .hub-back:hover { background: rgba(255, 248, 231, 0.24); border-color: rgba(255, 248, 231, 0.6); } .hub-title { margin: 0 !important; font-size: 30px !important; font-weight: 900 !important; color: var(--white) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; line-height: 1.2 !important; } .hub-subtitle { margin: 0; font-size: 14px; font-weight: 600; color: rgba(255, 248, 231, 0.78); } /* ── Modes grid ─────────────────────────────────────────── */ .hub-modes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .hub-mode-card { position: relative; background: var(--surface); border-radius: 28px; border: 2px solid var(--blue); padding: 28px 28px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: 0 4px 18px rgba(17, 17, 17, 0.06); } /* Top accent line */ .hub-mode-accent { position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 28px 28px 0 0; background: var(--blue); } .hub-mode-card--orange .hub-mode-accent { background: var(--red); } .hub-mode-card--blue .hub-mode-accent { background: var(--blue); } .hub-mode-card--green .hub-mode-accent { background: #10b981; } .hub-mode-card--red .hub-mode-accent { background: var(--red-deep); } /* Border per card family (kept to brand red/blue) */ .hub-mode-card--orange { border-color: var(--red); } .hub-mode-card--blue { border-color: var(--blue); } .hub-mode-card--green { border-color: var(--blue); } .hub-mode-card--red { border-color: var(--red); } /* Hover */ .hub-mode-card:not(.hub-mode-card--locked):hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(17, 17, 17, 0.1); } /* Locked */ .hub-mode-card--locked { background: #fafafa; border-style: dashed; border-color: #ccc; opacity: .62; cursor: not-allowed; } /* Top row: icon + badge */ .hub-mode-top { display: flex; align-items: center; justify-content: space-between; } .hub-mode-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 27px; flex-shrink: 0; background: var(--blue-2); border: 2px solid var(--blue); } .hub-mode-icon--orange { background: rgba(148, 5, 1, 0.08); border-color: rgba(148, 5, 1, 0.25); } .hub-mode-icon--blue { background: rgba(149, 187, 234, 0.28); border-color: var(--blue); } .hub-mode-icon--green { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.32); } .hub-mode-icon--red { background: rgba(107, 0, 0, 0.08); border-color: rgba(107, 0, 0, 0.25); } .hub-mode-icon--locked { background: #eee; border-color: #ddd; } .hub-mode-badge { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 50px; white-space: nowrap; } .hub-mode-badge--active { background: rgba(16, 185, 129, 0.12); border: 2px solid rgba(16, 185, 129, 0.3); color: #059669; } .hub-mode-badge--new { background: var(--blue); border: 2px solid var(--blue); color: var(--red-deep); } .hub-mode-badge--soon { background: #f1f1f1; border: 2px solid #e2e2e2; color: var(--gray-2); } .hub-mode-title { font-size: 18px; font-weight: 800; color: var(--black); margin: 0; } .hub-mode-desc { font-size: 13.5px; color: var(--gray); line-height: 1.55; margin: 0; flex: 1; } /* NOTE: --blue (#95BBEA) is too pale for small bold link text at AA contrast, so CTA copy uses --red / --red-deep / green for legibility; the "blue" card identity is still carried by the border, top accent bar and icon tint. */ .hub-mode-cta { font-size: 13.5px; font-weight: 800; color: var(--red); margin-top: 4px; transition: letter-spacing .2s; } .hub-mode-cta--blue { color: var(--red-deep); } .hub-mode-cta--green { color: #059669; } .hub-mode-cta--red { color: var(--red-deep); } .hub-mode-card:not(.hub-mode-card--locked):hover .hub-mode-cta { letter-spacing: .5px; } /* ════════════════════════════════════════════════════════════ SESSION PAGE — /word-trainer/{daily,all,mistakes} ════════════════════════════════════════════════════════════ */ .trainer-page { max-width: 680px; margin: 0 auto; padding: 56px 24px 64px; display: flex; flex-direction: column; gap: 20px; font-family: 'Montserrat', sans-serif; } /* Matching game needs room for up to 16 pairs (32 cards) across several columns */ .trainer-page--matching { max-width: 1100px; } /* ── Header ─────────────────────────────────────────────── */ .tr-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tr-back { display: inline-flex; align-items: center; padding: 7px 18px; background: var(--surface); border: 2px solid var(--blue); border-radius: 50px; color: var(--black); font-size: 13px; font-weight: 700; text-decoration: none; transition: all .18s ease; white-space: nowrap; flex-shrink: 0; } .tr-back:hover { background: var(--blue); } .tr-mode-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tr-title { margin: 0 !important; font-size: 23px !important; font-weight: 800 !important; color: var(--black) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; line-height: 1.3 !important; } .tr-due-badge { background: var(--blue); border: 2px solid var(--blue); color: var(--red-deep); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 50px; } .tr-mistake-badge { background: rgba(148, 5, 1, 0.08); border: 2px solid rgba(148, 5, 1, 0.28); color: var(--red); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 50px; } /* ── Stats strip ─────────────────────────────────────────── */ .trainer-stats { background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; padding: 14px 20px; } .tr-stat-pill { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; padding: 8px 14px; border-radius: 14px; } .tr-stat-correct { background: rgba(16, 185, 129, 0.08); } .tr-stat-wrong { background: rgba(239, 68, 68, 0.07); } .tr-stat-remain { background: var(--blue-2); opacity: 0.9; } .tr-stat-icon { font-size: 15px; } .tr-stat-val { font-size: 22px; font-weight: 800; color: var(--black); line-height: 1; min-width: 24px; text-align: center; } .tr-stat-lbl { font-size: 12px; color: var(--gray); font-weight: 600; } .tr-start-info { font-size: 14px; color: var(--gray); font-weight: 500; } .tr-start-info strong { color: var(--black); font-weight: 800; } /* ── Trainer main — flex column ─────────────────────────── */ #trainer-main { display: flex; flex-direction: column; gap: 24px; } /* ── Flashcard container (3-D flip) ─────────────────────── */ .trainer-card-container { /* block */ } .trainer-card-container .flashcard { background-color: transparent; height: 360px; border-radius: 28px; perspective: 1200px; cursor: default; } .trainer-card-container .flashcard-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform .6s; transform-style: preserve-3d; border-radius: 28px; } .trainer-card-container .flashcard.flipped .flashcard-inner { transform: rotateY(180deg); } .trainer-card-container .flashcard-front, .trainer-card-container .flashcard-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; box-sizing: border-box; } .trainer-card-container .flashcard-front { background: var(--red); color: var(--white); overflow: hidden; } .trainer-card-container .flashcard-back { background: var(--surface); color: var(--black); border: 2px solid var(--blue); transform: rotateY(180deg); overflow-y: auto; } /* Question (hanzi on front) */ .trainer-question { font-size: 88px; font-weight: 700; line-height: 1; font-family: var(--cjk-font); color: var(--white); } /* Back face text */ .trainer-translation { font-size: 30px; font-weight: 800; color: var(--black); margin-bottom: 8px; text-align: center; } .trainer-transcription { font-size: 18px; font-weight: 700; color: var(--red); margin-bottom: 14px; } .trainer-example { font-size: 13px; color: var(--gray); text-align: center; max-width: 90%; line-height: 1.6; } /* Start logo */ .start-logo { width: 200px; height: auto; opacity: .95; } /* ── Controls ────────────────────────────────────────────── */ .trainer-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 24px 0; } .start-controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .start-controls .btn-primary, .start-controls .btn-secondary { min-width: 180px; justify-content: center; padding: 14px 32px; font-size: 15px; } .input-controls { display: flex; gap: 12px; align-items: center; } .trainer-input { flex: 1; padding: 14px 22px; border: 2px solid var(--blue); border-radius: 50px; font-size: 16px; font-family: inherit; background: var(--surface); color: var(--black); transition: border-color .2s, box-shadow .2s; outline: none; } .trainer-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(148, 5, 1, 0.1); } .trainer-input::placeholder { color: var(--gray); } .trainer-btn { padding: 14px 28px !important; white-space: nowrap; font-size: 15px !important; border-radius: 50px !important; } /* Audio button */ .audio-play-btn { background: rgba(255, 248, 231, 0.16); border: 2px solid rgba(255, 248, 231, 0.4); color: var(--white); padding: 8px 20px; border-radius: 50px; cursor: pointer; font-size: 13px; font-weight: 700; margin-top: 18px; transition: all .2s ease; } .audio-play-btn:hover { background: rgba(255, 248, 231, 0.3); border-color: rgba(255, 248, 231, 0.6); } #logo-container, #question-container { display: flex; flex-direction: column; align-items: center; } /* ── Feedback ────────────────────────────────────────────── */ .trainer-feedback { min-height: 0; padding: 0; border-radius: 16px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.4; transition: padding .15s ease; } .trainer-feedback:not(:empty) { padding: 11px 18px; min-height: 42px; } .feedback-correct { background: rgba(16, 185, 129, 0.1); color: #059669; border: 2px solid rgba(16, 185, 129, 0.28); } .feedback-wrong { background: rgba(239, 68, 68, 0.08); color: #dc2626; border: 2px solid rgba(239, 68, 68, 0.22); } /* ── Results screen ─────────────────────────────────────── */ .trainer-results { background: var(--surface); border-radius: 28px; border: 2px solid var(--blue); padding: 44px 36px; text-align: center; } .results-icon { font-size: 54px; margin-bottom: 10px; display: block; } .trainer-results h2 { font-size: 24px; font-weight: 800; color: var(--black); margin: 0 0 36px; } .results-stats { display: flex; justify-content: center; gap: 18px; margin-bottom: 36px; } .result-card { flex: 1; max-width: 140px; padding: 22px 14px; border-radius: 22px; border: 2px solid var(--blue); } .result-card--correct { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.3); } .result-card--wrong { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.25); } .result-card--accuracy { background: var(--blue-2); border-color: var(--blue); opacity: 1; } .result-value { font-size: 46px; font-weight: 900; line-height: 1; margin-bottom: 8px; } .result-card--correct .result-value { color: #10b981; } .result-card--wrong .result-value { color: #ef4444; } .result-card--accuracy .result-value { color: var(--red); } .result-label { font-size: 13px; color: var(--gray); font-weight: 600; } .results-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .results-buttons .btn-primary, .results-buttons .btn-secondary { min-width: 160px; justify-content: center; padding: 12px 28px; } /* ── No-words card ──────────────────────────────────────── */ .tr-no-words { background: var(--surface); border-radius: 28px; border: 2px solid var(--blue); padding: 52px 32px; text-align: center; flex-direction: column; align-items: center; gap: 14px; } .tr-no-words-logo { width: 96px; height: auto; opacity: .85; margin-bottom: 4px; } .tr-no-words h3 { font-size: 20px; font-weight: 800; color: var(--black); margin: 0; } .tr-no-words p { font-size: 14px; color: var(--gray); margin: 0; max-width: 320px; line-height: 1.6; } /* ════════════════════════════════════════════════════════════ MATCHING GAME — shared by word_trainer/matching.html and dashboard/exercises/exercises_matching.html ════════════════════════════════════════════════════════════ */ .mp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; gap: 14px; } .mp-setup { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 20px; } .mp-settings-label { font-size: 16px; font-weight: 700; color: var(--black); } .mp-settings-select { font-size: 20px; font-weight: 800; color: var(--black); background: var(--surface); border: 2px solid var(--blue); border-radius: 12px; padding: 8px 20px; cursor: pointer; min-width: 90px; text-align: center; } .mp-start-btn { align-self: center; padding: 14px 40px; font-size: 16px; } .tr-stat-timer { background: rgba(107, 114, 128, 0.08); } /* dashboard/exercises/exercises_matching.html sits the grid inside a non-flex .quiz-card (owned by a different slice) that needs the old spacer before the feedback/next-button area below the grid */ .quiz-card .mp-grid { margin-bottom: 24px; } /* ── Card shell ────────────────────────────────────────────── .mp-card is just a perspective wrapper; the visible box (background, border, padding) lives on .mp-card-face so a card can carry a hidden back face (used only by word_trainer/matching.html's face-down deal). exercises_matching.html never adds --facedown, so its cards render as plain always-revealed cards, unchanged from before. ─────────────── */ .mp-card { position: relative; aspect-ratio: 1 / 1; min-width: 0; perspective: 800px; cursor: pointer; user-select: none; transition: transform .2s ease; } .mp-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4, .2, .2, 1); } .mp-card--facedown .mp-card-inner { transform: rotateY(180deg); } .mp-card--facedown { cursor: default; pointer-events: none; } .mp-card-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } .mp-card-face--back { transform: rotateY(180deg); background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); border-color: var(--red-deep); } .mp-card-back-mark { font-size: 22px; font-weight: 800; color: rgba(255, 255, 255, 0.55); } .mp-card-text { overflow-wrap: break-word; word-break: break-word; min-width: 0; } .mp-card:hover:not(.mp-card--matched):not(.mp-card--facedown) { transform: translateY(-4px); } .mp-card:hover:not(.mp-card--matched):not(.mp-card--facedown) .mp-card-face--front { box-shadow: 0 8px 20px rgba(17, 17, 17, 0.08); } .mp-card--hanzi .mp-card-text { font-family: var(--cjk-font); font-size: 28px; font-weight: 700; color: var(--black); } .mp-card--translation .mp-card-text { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.3; } .mp-card--selected .mp-card-face--front { border-color: var(--red); box-shadow: 0 0 0 3px rgba(148, 5, 1, 0.15); } .mp-card--correct .mp-card-face--front { background: rgba(16, 185, 129, 0.06); border-color: #10b981; box-shadow: 0 0 0 3px #10b981; } .mp-card--correct .mp-card-face--front .mp-card-text { color: #059669; } /* word_trainer/matching.html supports up to 16 pairs — keep cards compact so more fit */ .trainer-page--matching .mp-grid { gap: 10px; } .trainer-page--matching .mp-card-face { padding: 6px; border-radius: 14px; } .trainer-page--matching .mp-card--hanzi .mp-card-text { font-size: 20px; } .trainer-page--matching .mp-card--translation .mp-card-text { font-size: 11.5px; } .mp-card--matched { opacity: .4; box-shadow: none; pointer-events: none; } .mp-card--wrong .mp-card-face--front { background: rgba(239, 68, 68, 0.05); border-color: #ef4444; box-shadow: 0 0 0 3px #ef4444; animation: mp-shake .4s ease; } .mp-card--wrong .mp-card-face--front .mp-card-text { color: #dc2626; } @keyframes mp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .mp-empty { text-align: center; color: var(--gray); font-size: 14px; padding: 40px 20px; } .mp-success { padding: 22px 28px 24px; } .mp-success .results-icon { font-size: 32px; margin-bottom: 2px; } .mp-success h2 { margin: 0 0 6px; font-size: 19px; } .mp-success-sub { margin: 0 0 18px; color: var(--gray); font-size: 14px; } /* ════════════════════════════════════════════════════════════ WORD RATING PAGE — /dashboard/words/rating ════════════════════════════════════════════════════════════ */ .rp-page { max-width: 1080px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-direction: column; gap: 20px; font-family: 'Montserrat', sans-serif; } /* ── Header ─────────────────────────────────────────────── */ .rp-header { background: var(--red); border-radius: 32px; padding: 36px 40px 32px; position: relative; overflow: hidden; } .rp-header-deco { position: absolute; border-radius: 50%; pointer-events: none; } .rp-header-deco--1 { width: 300px; height: 300px; top: -90px; right: -50px; background: rgba(255, 248, 231, 0.08); } .rp-header-deco--2 { width: 180px; height: 180px; bottom: -70px; left: 30%; background: var(--blue); opacity: 0.14; } .rp-header-inner { position: relative; z-index: 1; } .rp-header-top { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; } .rp-back { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-size: 13px; font-weight: 700; text-decoration: none; background: rgba(255, 248, 231, 0.14); border: 2px solid rgba(255, 248, 231, 0.4); border-radius: 50px; padding: 6px 16px; transition: all .2s ease; margin-top: 4px; } .rp-back:hover { background: rgba(255, 248, 231, 0.24); border-color: rgba(255, 248, 231, 0.6); } .rp-title-group {} .rp-title { margin: 0 0 6px !important; font-size: 28px !important; font-weight: 900 !important; color: var(--white) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; line-height: 1.2 !important; } .rp-subtitle { margin: 0; font-size: 14px; font-weight: 600; color: rgba(255, 248, 231, 0.78); } /* Stats strip */ .rp-stats { display: flex; align-items: center; gap: 0; background: rgba(255, 248, 231, 0.14); border: 2px solid rgba(255, 248, 231, 0.28); border-radius: 18px; padding: 0; overflow: hidden; } .rp-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 12px; transition: background .2s ease; } .rp-stat:hover { background: rgba(255, 248, 231, 0.08); } .rp-stat__val { font-size: 26px; font-weight: 900; color: var(--white); line-height: 1; } .rp-stat__lbl { font-size: 11px; font-weight: 700; color: rgba(255, 248, 231, 0.72); text-transform: uppercase; letter-spacing: .8px; } .rp-stat--green .rp-stat__val { color: #6ee7b7; } .rp-stat--orange .rp-stat__val { color: var(--blue-2); } .rp-stat--muted .rp-stat__val { color: rgba(255, 248, 231, 0.55); } .rp-stat-divider { width: 2px; height: 40px; background: rgba(255, 248, 231, 0.22); flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ MAIN CARD ════════════════════════════════════════════════════════════ */ .rp-main { background: var(--surface); border-radius: 28px; border: 2px solid var(--blue); overflow: hidden; } /* ── Filters ───────────────────────────────────────────────── */ .rp-filters { display: flex; align-items: center; gap: 8px; padding: 20px 24px 0; flex-wrap: wrap; } .filter-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 50px; border: 2px solid var(--blue); background: var(--surface); color: var(--black); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .18s ease; outline: none; } .filter-btn:hover { background: var(--blue-2); } .filter-btn.active { background: var(--red); border-color: var(--red); color: var(--white); } .filter-btn.active .filter-count { background: rgba(255, 248, 231, 0.24); color: var(--white); } .filter-count { background: var(--blue-2); color: var(--red-deep); border-radius: 50px; padding: 1px 7px; font-size: 11px; font-weight: 800; min-width: 22px; text-align: center; line-height: 1.6; transition: all .18s ease; } /* ── Column headers ────────────────────────────────────────── */ .rp-list-head { display: flex; align-items: center; gap: 0; padding: 14px 24px 10px; margin-top: 16px; border-bottom: 2px solid var(--blue); } .rp-col { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px; color: var(--gray); } .rp-col--hanzi { width: 130px; flex-shrink: 0; } .rp-col--text { flex: 1; } .rp-col--mastery { width: 160px; flex-shrink: 0; } .rp-col--stats { width: 110px; flex-shrink: 0; } .rp-col--action { width: 110px; flex-shrink: 0; text-align: right; } /* ── Word rows ─────────────────────────────────────────────── */ .rp-list { padding: 0 12px 16px; } .word-row { display: flex; align-items: center; padding: 12px; border-radius: 16px; transition: background .15s ease, transform .15s ease; cursor: default; gap: 0; } .word-row:hover { background: rgba(149, 187, 234, 0.14); transform: translateX(2px); } /* Accent colour by mastery level */ .word-row[data-mastery="5"] { background: rgba(16, 185, 129, 0.06); } .word-row[data-mastery="5"]:hover { background: rgba(16, 185, 129, 0.12); } /* Hanzi cell */ .wr-hanzi { width: 130px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; } .hanzi-char { font-size: 26px; font-weight: 700; color: var(--black); line-height: 1; font-family: var(--cjk-font); } .hanzi-pinyin { font-size: 12px; color: var(--red); font-weight: 600; } /* Translation */ .wr-text { flex: 1; min-width: 0; } .wr-translation { font-size: 14px; color: var(--black); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Mastery segments */ .wr-mastery { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; padding-right: 28px; } .mastery-segs { display: flex; gap: 4px; } .ms { flex: 1; height: 6px; border-radius: 10px; background: #eee; transition: background .2s ease; } /* Level coloring via parent modifier class */ .mastery-segs--1 .ms:nth-child(-n+1), .mastery-segs--2 .ms:nth-child(-n+2) { background: #fbbf24; /* amber — low */ } .mastery-segs--3 .ms:nth-child(-n+3), .mastery-segs--4 .ms:nth-child(-n+4) { background: var(--blue); /* blue — learning */ } .mastery-segs--5 .ms { background: #10b981; /* green — mastered */ } .mastery-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--gray); } .mastery-label--0 { color: #ccc; } .mastery-label--1, .mastery-label--2 { color: #d97706; } .mastery-label--3, .mastery-label--4 { color: var(--red); } .mastery-label--5 { color: #10b981; } /* Stats */ .wr-stats { width: 110px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0; } .stats-fraction { display: flex; align-items: baseline; gap: 2px; } .stats-correct { font-size: 16px; font-weight: 800; color: var(--black); } .stats-sep { font-size: 12px; color: var(--gray); } .stats-total { font-size: 13px; color: var(--gray); } .stats-none { font-size: 14px; color: var(--blue); font-weight: 500; } /* Repeat button */ .wr-action { width: 110px; flex-shrink: 0; display: flex; justify-content: flex-end; } .btn-repeat { display: inline-flex; align-items: center; padding: 7px 16px; background: var(--surface); border: 2px solid var(--red); border-radius: 50px; color: var(--red); font-size: 12px; font-weight: 700; text-decoration: none; transition: all .18s ease; white-space: nowrap; } .btn-repeat:hover { background: var(--red); color: var(--white); } /* ── Empty state ───────────────────────────────────────────── */ .rp-empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .rp-empty-icon { font-size: 36px; opacity: .4; } .rp-empty p { font-size: 15px; color: var(--gray); font-weight: 600; margin: 0; } /* ════════════════════════════════════════════════════════════ RESPONSIVE — breakpoint 860px (plus tighter steps below it, mirroring the density of the old trainer.css / word_raiting.css) ════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .hub-modes-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hub-header { padding: 28px 24px; } .rp-header { padding: 28px 24px 24px; } .rp-col--stats, .wr-stats { display: none; } .rp-col--mastery, .wr-mastery { width: 130px; } .rp-page { padding: 20px 7px 24px; gap: 14px; } .rp-stats { flex-wrap: wrap; } .rp-stat { flex: 1 0 40%; } .rp-stat-divider:nth-child(4) { display: none; } .rp-list-head { display: none; } .word-row { flex-wrap: wrap; gap: 10px; padding: 14px; } .wr-hanzi { width: 90px; } .wr-text { flex: 1; min-width: 120px; } .wr-mastery { width: 100%; order: 3; } .wr-action { width: auto; order: 4; margin-left: auto; } .mp-success { padding: 18px 20px 20px; } .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mp-card-face { border-radius: 14px; padding: 8px; } .mp-card--hanzi .mp-card-text { font-size: 22px; } .mp-card--translation .mp-card-text { font-size: 12.5px; } } @media (max-width: 600px) { .trainer-page { padding: 20px 7px 20px; gap: 10px; } .hub-page { padding: 20px 7px 24px; gap: 14px; } .tr-title { font-size: 17px !important; } .tr-back { padding: 5px 12px; font-size: 11px; } .tr-due-badge { font-size: 11px; padding: 4px 10px; } .tr-mistake-badge { font-size: 11px; padding: 4px 10px; } .trainer-stats { padding: 8px 12px; } .tr-stat-pill { padding: 6px 8px; gap: 5px; } .tr-stat-icon { font-size: 12px; } .tr-stat-lbl { display: none; } .tr-stat-val { font-size: 16px; } #trainer-main { gap: 12px; } .trainer-card-container .flashcard { height: 210px; border-radius: 18px; } .trainer-question { font-size: 46px; } .start-logo { width: 110px; } .trainer-translation { font-size: 20px; margin-bottom: 4px; } .trainer-transcription { font-size: 13px; margin-bottom: 8px; } .trainer-example { font-size: 11px; line-height: 1.4; } .audio-play-btn { padding: 6px 14px; font-size: 11px; margin-top: 10px; } .input-controls { flex-direction: row; gap: 8px; } .trainer-input { padding: 10px 16px; font-size: 14px; } .trainer-btn { padding: 10px 18px !important; font-size: 13px !important; justify-content: center; } .start-controls { gap: 8px; } .start-controls .btn-primary, .start-controls .btn-secondary { min-width: 0; padding: 10px 18px; font-size: 13px; } .trainer-results { padding: 16px 14px; border-radius: 18px; } .results-icon { font-size: 32px; margin-bottom: 6px; } .trainer-results h2 { font-size: 16px; margin-bottom: 12px; } .results-stats { gap: 8px; margin-bottom: 16px; } .result-card { padding: 12px 8px; border-radius: 14px; } .result-value { font-size: 26px; margin-bottom: 4px; } .result-label { font-size: 11px; } .results-buttons { gap: 8px; } .results-buttons .btn-primary, .results-buttons .btn-secondary { min-width: 0; padding: 9px 18px; font-size: 13px; } .hub-header { padding: 16px 14px; border-radius: 18px; } .hub-title { font-size: 18px !important; } .hub-subtitle { font-size: 12px; } .hub-back { font-size: 11px; padding: 5px 12px; } .hub-mode-card { padding: 14px 14px 12px; gap: 8px; border-radius: 16px; } .hub-mode-top { flex-wrap: wrap; gap: 6px; } .hub-mode-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; } .hub-mode-badge { font-size: 9px; padding: 3px 7px; } .hub-mode-title { font-size: 13.5px; } .hub-mode-desc { font-size: 11px; line-height: 1.45; } .hub-mode-cta { font-size: 11px; } .rp-header { padding: 16px 14px 14px; border-radius: 18px; } .rp-back { font-size: 11px; padding: 4px 10px; } .rp-subtitle { font-size: 11px; } .rp-stats { border-radius: 14px; } .rp-stat { padding: 10px 8px; } .rp-stat__val { font-size: 18px; } .rp-stat__lbl { font-size: 9.5px; } .rp-stat-divider { height: 26px; } .rp-main { border-radius: 18px; } .rp-filters { padding: 12px 12px 0; gap: 6px; } .filter-btn { padding: 6px 11px; font-size: 11.5px; } .filter-count { font-size: 10px; padding: 1px 6px; } .word-row { padding: 10px; gap: 8px; border-radius: 12px; } .wr-hanzi { width: 64px; } .hanzi-char { font-size: 19px; } .hanzi-pinyin { font-size: 10px; } .wr-translation { font-size: 12.5px; } .btn-repeat { padding: 5px 11px; font-size: 10.5px; } } @media (max-width: 480px) { .rp-title { font-size: 18px !important; } .rp-header { padding: 14px 12px; } .filter-btn span.filter-count { display: none; } } /* ============================================================ GRAMMAR + IDIOMS + READING + ARTICLES + CONTACTS ============================================================ */ /* ============================================================ School Might — red/blue/white design system Slice: Grammar, Idioms, Reading, Articles, Contacts Tokens (defined globally, referenced here — do not redeclare): --red:#940501; --red-deep:#6B0000; --blue:#95BBEA; --blue-2:#AACAF2; --white:#FFF8E7; --black:#111111; --gray:rgba(2,2,2,0.6); --gray-2:rgba(0,0,0,0.58); --cjk-font:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; Font: 'Montserrat', sans-serif everywhere (already loaded globally). ============================================================ */ /* ------------------------------------------------------------ SHARED: Articles family Used by: grammar/list, idioms/list, articles/list, articles/detail ------------------------------------------------------------ */ .articles-page { max-width: 1000px; margin: 0 auto; padding: 56px 24px 80px; } .articles-header { text-align: center; margin-bottom: 48px; } .articles-header h1 { font-family: 'Montserrat', sans-serif; font-size: 42px; font-weight: 900; color: var(--black); margin: 0 0 12px; } .articles-header p { font-size: 18px; color: var(--gray-2); margin: 0; line-height: 1.5; } .articles-grid { display: flex; flex-direction: column; gap: 28px; } .article-card { display: flex; background: var(--surface); border-radius: 28px; overflow: hidden; border: 2px solid var(--blue); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .article-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(17, 17, 17, 0.10); border-color: var(--red); } .article-image { width: 280px; flex-shrink: 0; overflow: hidden; background: var(--blue-2); } .article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .article-card:hover .article-image img { transform: scale(1.05); } .article-content { flex: 1; padding: 28px 32px; min-width: 0; } .article-title { font-size: 22px; font-weight: 800; margin: 0 0 12px; line-height: 1.3; } .article-title a { color: var(--black); text-decoration: none; transition: color 0.2s ease; } .article-title a:hover { color: var(--red); } .article-meta { margin-bottom: 14px; font-size: 14px; } .article-date { color: var(--gray); } .article-description { color: var(--gray-2); line-height: 1.6; margin: 0 0 20px; } .read-more { display: inline-flex; align-items: center; gap: 6px; color: var(--red); text-decoration: none; font-weight: 700; transition: gap 0.2s ease; } .read-more:hover { gap: 10px; } .empty-state { grid-column: 1/-1; text-align: center; padding: 60px 24px; background: var(--surface); border: 2px dashed var(--blue); border-radius: 28px; color: var(--gray-2); font-size: 16px; } /* ------------------------------------------------------------ SHARED: article/grammar/idiom detail-page container Used by: grammar/detail, articles/detail, idioms/detail (partly) ------------------------------------------------------------ */ .article-detail-container { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; } .article-nav { margin-bottom: 28px; } .back-link { color: var(--red); font-size: 14px; font-weight: 700; text-decoration: none; } .back-link:hover { text-decoration: underline; } .article-header { margin-bottom: 36px; } .article-header h1 { font-size: 40px; font-weight: 900; color: var(--black); margin: 0 0 16px; line-height: 1.25; } .article-description-lead { font-size: 20px; color: var(--gray-2); line-height: 1.5; padding: 20px 0; border-top: 2px solid var(--blue); border-bottom: 2px solid var(--blue); } .article-images { margin: 32px 0; display: flex; flex-direction: column; gap: 24px; } .article-image-item { background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; overflow: hidden; } .article-image-item img { width: 100%; height: auto; display: block; } .article-content-body { background: var(--surface); border: none; outline: none; border-radius: 28px; padding: 40px 0; line-height: 1.8; color: var(--black); font-size: 16px; } .article-content-body h2 { font-size: 26px; font-weight: 800; margin: 32px 0 16px; color: var(--black); } .article-content-body h3 { font-size: 21px; font-weight: 700; margin: 24px 0 12px; color: var(--black); } .article-content-body p { margin: 0 0 20px; } .article-content-body ul, .article-content-body ol { margin: 16px 0 16px 24px; } .article-content-body li { margin-bottom: 8px; } .article-content-body blockquote { border-left: 4px solid var(--red); padding-left: 20px; margin: 24px 0; color: var(--gray-2); font-style: italic; } .article-content-body img { max-width: 100%; border-radius: 16px; margin: 24px 0; } .article-content-body pre { background: #111111; color: var(--white); padding: 16px; border-radius: 14px; overflow-x: auto; } .article-content-body table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; } .article-content-body table th, .article-content-body table td { border: 1px solid var(--blue); padding: 10px 16px; text-align: left; vertical-align: top; } .article-content-body table th { background: var(--blue); color: var(--red-deep); font-weight: 700; } .article-content-body table tr:nth-child(even) td { background: rgba(149, 187, 234, 0.10); } .article-footer-nav { display: flex; justify-content: space-between; margin-top: 40px; gap: 16px; flex-wrap: wrap; } /* ------------------------------------------------------------ GRAMMAR ------------------------------------------------------------ */ .grammar-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .grammar-tag-btn { padding: 8px 20px; border-radius: 50px; border: 2px solid var(--blue); color: var(--black); text-decoration: none; font-size: 14px; font-weight: 700; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .grammar-tag-btn:hover, .grammar-tag-btn--active { background: var(--red); color: var(--white); border-color: var(--red); } .grammar-hsk-badge { display: inline-block; background: var(--blue); color: var(--red-deep); font-size: 11px; font-weight: 800; padding: 3px 14px; border-radius: 50px; margin-bottom: 10px; letter-spacing: 0.5px; } .grammar-tags-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .grammar-tag-small { font-size: 12px; padding: 3px 12px; border-radius: 50px; border: 2px solid var(--blue); color: var(--gray-2); text-decoration: none; font-weight: 600; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .grammar-tag-small:hover { background: var(--red); color: var(--white); border-color: var(--red); } /* ------------------------------------------------------------ IDIOMS — list page filter bar + status dots ------------------------------------------------------------ */ .idiom-filter-wrap { display: flex; justify-content: center; margin: -20px 0 2.5rem; padding: 0 8px; } .idiom-filter-track { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; box-sizing: border-box; background: var(--surface); border: 2px solid var(--blue); border-radius: 22px; padding: 5px; gap: 2px; } .idiom-filter-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--gray-2); padding: 9px 22px; border-radius: 16px; cursor: pointer; font-size: 13.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: 0.01em; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; } .idiom-filter-btn:hover:not(.active) { background: rgba(149, 187, 234, 0.18); color: var(--black); } .idiom-filter-btn.active { background: var(--red); color: var(--white); } /* status dots — kept as literal semantic colors (traffic-light meaning: not_known / learning / known), not part of the red/blue brand palette */ .ifl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .ifl-dot--red { background: #ef4444; } .ifl-dot--orange { background: #f59e0b; } .ifl-dot--green { background: #22c55e; } .idiom-card-status { float: right; margin: 0 0 4px 8px; } .idiom-card-status .ifl-dot { width: 10px; height: 10px; } /* ------------------------------------------------------------ IDIOMS — detail page hero + progress + content ------------------------------------------------------------ */ .idiom-hero { background: var(--red); border-radius: 32px; padding: 44px 32px; margin-bottom: 24px; position: relative; overflow: hidden; text-align: center; } .idiom-hero-deco { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 248, 231, 0.08); } .idiom-hero-deco--1 { width: 280px; height: 280px; top: -90px; right: -50px; } .idiom-hero-deco--2 { width: 180px; height: 180px; bottom: -70px; left: 30%; background: rgba(255, 248, 231, 0.05); } .idiom-hero-inner { position: relative; z-index: 1; } .idiom-hero-hanzi { font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 900; letter-spacing: 0.12em; line-height: 1.15; color: var(--white); margin: 0 0 10px; font-family: var(--cjk-font); } .idiom-hero-pinyin { font-size: 1.2rem; color: rgba(255, 248, 231, 0.75); margin: 0 0 6px; } .idiom-hero-translate { font-size: 1.1rem; font-style: italic; color: rgba(255, 248, 231, 0.92); margin: 0 0 20px; } .idiom-audio-btn { background: var(--surface); border: 2px solid var(--surface); color: var(--red); padding: 9px 26px; border-radius: 50px; cursor: pointer; font-size: 13px; font-weight: 800; font-family: 'Montserrat', sans-serif; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .idiom-audio-btn:hover { background: var(--blue); color: var(--red-deep); transform: translateY(-2px); } .idiom-progress-wrap { text-align: center; margin: 0 0 24px; } .idiom-progress-label { font-size: 0.85rem; color: var(--gray); margin-bottom: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .idiom-progress-slider { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; box-sizing: border-box; background: var(--surface); border: 2px solid var(--blue); border-radius: 50px; padding: 4px; gap: 2px; } .ipr-btn { background: transparent; border: none; color: var(--gray-2); padding: 8px 20px; border-radius: 50px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: 'Montserrat', sans-serif; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; } .ipr-btn:hover { color: var(--black); } /* semantic states — kept as literal colors, same reasoning as .ifl-dot */ .ipr-btn.active[data-val="not_known"] { background: #ef4444; color: #FFF8E7; } .ipr-btn.active[data-val="learning"] { background: #f59e0b; color: #FFF8E7; } .ipr-btn.active[data-val="known"] { background: #22c55e; color: #FFF8E7; } .idiom-section { margin-bottom: 2rem; } .idiom-section--last { margin-bottom: 0; } .idiom-section h2 { font-size: 22px; font-weight: 800; color: var(--black); margin: 0 0 12px; } .idiom-section p { color: var(--gray-2); line-height: 1.7; margin: 0; } .idiom-example { position: relative; background: rgba(149, 187, 234, 0.14); border: 2px solid var(--blue); border-radius: 20px; padding: 22px 24px 20px 44px; } .idiom-example-mark { position: absolute; top: 6px; left: 16px; font-size: 40px; line-height: 1; font-weight: 800; color: var(--blue-2); } .idiom-example-zh { font-size: 1.15rem; margin: 0 0 8px; color: var(--black); font-family: var(--cjk-font); } .idiom-example-ru { font-size: 1rem; margin: 0; color: var(--gray-2); font-style: italic; } /* ------------------------------------------------------------ READING — list page ------------------------------------------------------------ */ .reading-page { max-width: 1000px; margin: 0 auto; padding: 56px 24px 80px; } .reading-header { text-align: center; margin-bottom: 40px; } .reading-header h1 { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 900; color: var(--black); margin: 0 0 10px; } .reading-header p { color: var(--gray-2); font-size: 16px; margin: 0; } .reading-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .reading-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 24px; padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .reading-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17, 17, 17, 0.10); border-color: var(--red); } /* semantic "completed" state — kept as literal green, same reasoning as idiom status dots */ .reading-card--done { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06); } .reading-card--done:hover { border-color: rgba(34, 197, 94, 0.7); box-shadow: 0 12px 28px rgba(34, 197, 94, 0.15); } .reading-done-badge { font-size: 12px; font-weight: 700; color: #16a34a; background: #dcfce7; border: 1px solid #bbf7d0; padding: 3px 10px; border-radius: 20px; margin-left: auto; } .reading-card-top { display: flex; align-items: center; gap: 8px; } .reading-hsk-badge { background: var(--blue); color: var(--red-deep); font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: 50px; letter-spacing: 0.5px; } .reading-q-count { font-size: 12px; color: var(--gray); margin-left: auto; } .reading-card-title { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 800; color: var(--black); margin: 0; line-height: 1.3; } .reading-card-desc { font-size: 13px; color: var(--gray-2); margin: 0; line-height: 1.5; } .reading-card-preview { font-size: 18px; color: var(--gray); line-height: 1.6; margin: 4px 0; font-family: var(--cjk-font); } .reading-card-footer { margin-top: auto; } .reading-cta { font-size: 14px; font-weight: 700; color: var(--red); } /* ------------------------------------------------------------ READING — detail page ------------------------------------------------------------ */ .reading-detail { max-width: 780px; margin: 0 auto; padding: 48px 24px 80px; } .reading-nav { margin-bottom: 24px; } .reading-article { background: var(--surface); border: none; outline: none; border-radius: 32px; padding: 36px 40px; margin-bottom: 24px; } .reading-article-header { margin-bottom: 24px; } .reading-article-header h1 { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 900; color: var(--black); margin: 0 0 8px; line-height: 1.3; } .reading-article-desc { color: var(--gray-2); font-size: 15px; margin: 0; line-height: 1.6; } .reading-toggle-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .btn-toggle { background: var(--surface); border: 2px solid var(--blue); color: var(--gray-2); padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-toggle:hover, .btn-toggle.active { background: var(--red); border-color: var(--red); color: var(--white); } .reading-text-hanzi { font-size: 22px; line-height: 2; color: var(--black); font-family: var(--cjk-font); margin-bottom: 20px; } .reading-text-block { background: rgba(149, 187, 234, 0.14); border: 2px solid var(--blue); border-radius: 18px; padding: 18px 22px; margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--gray-2); transition: opacity 0.2s ease; } .reading-text-block.hidden { display: none; } .reading-block-label { font-size: 11px; font-weight: 800; color: var(--gray); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .reading-text-pinyin { color: var(--red-deep); } .reading-text-translation { color: var(--gray-2); } /* semantic "completed" badge — kept literal green */ .reading-completed-badge { display: flex; align-items: center; gap: 12px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 16px; padding: 14px 20px; margin-bottom: 20px; font-weight: 700; color: #16a34a; font-size: 15px; } .reading-completed-badge--fresh { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); } .reading-prev-hint { font-size: 13px; color: var(--gray); margin-left: auto; font-weight: 400; } .reading-quiz { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 36px 40px; margin-bottom: 24px; } .reading-quiz-title { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800; color: var(--black); margin: 0 0 28px; } .quiz-item { margin-bottom: 28px; } .quiz-question { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 14px; line-height: 1.5; } .quiz-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; background: var(--red); color: var(--white); border-radius: 50%; font-size: 12px; font-weight: 800; flex-shrink: 0; } .quiz-options { display: flex; flex-direction: column; gap: 8px; } .quiz-option { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--blue); background: var(--surface); transition: border-color 0.15s ease, background 0.15s ease; } .quiz-option:hover { border-color: var(--red); background: rgba(148, 5, 1, 0.04); } .quiz-option input[type=radio] { accent-color: var(--red); width: 16px; height: 16px; flex-shrink: 0; } .quiz-opt-label { font-size: 14px; color: var(--black); line-height: 1.4; } .quiz-submit-row { margin-top: 28px; } .reading-quiz-results { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; } .quiz-result-item { border-radius: 20px; border: 2px solid var(--blue); padding: 18px 20px; } /* semantic correct/wrong — kept literal green / brand red */ .quiz-result-item--correct { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.07); } .quiz-result-item--wrong { border-color: rgba(148, 5, 1, 0.35); background: rgba(148, 5, 1, 0.05); } .quiz-result-q { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--black); font-size: 14px; margin-bottom: 12px; } .quiz-result-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: var(--blue); border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--red-deep); flex-shrink: 0; } .quiz-result-icon { margin-left: auto; font-size: 18px; } .quiz-options-result { display: flex; flex-direction: column; gap: 6px; } .quiz-opt-result { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--gray-2); border: 2px solid transparent; } .quiz-opt-result--correct { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); color: var(--black); font-weight: 700; } .quiz-opt-result--wrong { background: rgba(148, 5, 1, 0.08); border-color: rgba(148, 5, 1, 0.25); color: var(--black); } .quiz-opt-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--blue); font-size: 11px; font-weight: 800; color: var(--red-deep); flex-shrink: 0; } .quiz-explanation { margin-top: 10px; font-size: 13px; color: var(--gray-2); background: rgba(149, 187, 234, 0.14); border-radius: 12px; padding: 10px 14px; line-height: 1.5; border-left: 4px solid var(--red); } .reading-quiz-retry { display: flex; gap: 12px; flex-wrap: wrap; } .reading-footer-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } /* ------------------------------------------------------------ CONTACTS ------------------------------------------------------------ */ .contacts-container { max-width: 1100px; margin: 0 auto; padding: 56px 24px 80px; } .contacts-hero { background: var(--red); border-radius: 32px; padding: 64px 40px; position: relative; overflow: hidden; text-align: center; margin-bottom: 48px; } .contacts-hero-inner { position: relative; z-index: 1; } .contacts-hero-title { font-size: 40px; font-weight: 900; color: var(--white); margin: 0 0 12px; } .contacts-hero-subtitle { font-size: 18px; color: rgba(255, 248, 231, 0.85); margin: 0; } .contacts-hero-deco { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 248, 231, 0.08); } .contacts-hero-deco--1 { width: 300px; height: 300px; top: -110px; right: -60px; } .contacts-hero-deco--2 { width: 200px; height: 200px; bottom: -80px; left: 15%; background: rgba(255, 248, 231, 0.05); } .contacts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 56px; } .contact-card { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 2px solid var(--blue); border-radius: 24px; padding: 24px; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .contact-card--tg, .contact-card--email { border-color: var(--red); } .contact-card--ig, .contact-card--school { border-color: var(--blue); } .contact-card--tg .contact-card-icon, .contact-card--email .contact-card-icon { color: var(--red); } .contact-card--ig .contact-card-icon, .contact-card--school .contact-card-icon { color: var(--red-deep); } .contact-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17, 17, 17, 0.10); border-color: var(--red); } .contact-card-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px; background: var(--blue); color: var(--red-deep); display: flex; align-items: center; justify-content: center; } .contact-card-content { flex: 1; min-width: 0; } .contact-card-label { font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .contact-card-value { font-size: 17px; font-weight: 800; color: var(--black); margin-bottom: 4px; } .contact-card-desc { font-size: 13px; color: var(--gray-2); line-height: 1.4; } .contact-card-arrow { margin-left: auto; font-size: 20px; color: var(--red); transition: transform 0.2s ease; flex-shrink: 0; } .contact-card:hover .contact-card-arrow { transform: translateX(4px); } .contacts-faq { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 44px 40px; } .contacts-faq-title { font-size: 26px; font-weight: 900; color: var(--black); margin: 0 0 28px; text-align: center; } .contacts-faq-list { display: flex; flex-direction: column; gap: 16px; } /* Static always-expanded Q&A block — mirrors the landing-page FAQ's pale answer box visually, but no accordion behavior/JS (different markup). */ .faq-item { background: #F2D0D0; border-radius: 20px; padding: 22px 26px; } .faq-q { font-weight: 800; color: var(--red-deep); font-size: 16px; margin: 0 0 8px; } .faq-a { color: var(--black); font-size: 15px; line-height: 1.6; margin: 0; } /* ============================================================ RESPONSIVE — breakpoint 860px ============================================================ */ @media (max-width: 860px) { .articles-page { padding: 32px 7px 56px; } .articles-header { margin-bottom: 32px; } .articles-header h1 { font-size: 30px; } .articles-header p { font-size: 15px; } .articles-grid { gap: 18px; } .article-card { flex-direction: column; border-radius: 22px; } .article-image { width: 100%; height: 180px; } .article-content { padding: 20px; } .article-title { font-size: 19px; } .article-meta { font-size: 12px; } .article-description { font-size: 14px; } .article-detail-container { padding: 28px 7px 56px; } .article-header h1 { font-size: 27px; } .article-description-lead { font-size: 15px; padding: 14px 0; } .article-content-body { padding: 22px 0; font-size: 14px; line-height: 1.7; border-radius: 0; margin-left: -23px; margin-right: -23px; } .article-content-body h2 { font-size: 20px; margin: 24px 0 12px; } .article-content-body h3 { font-size: 17px; margin: 18px 0 10px; } .article-footer-nav { flex-direction: column; } .article-footer-nav a { text-align: center; } .grammar-tags { gap: 8px; margin-bottom: 24px; } .grammar-tag-btn { padding: 7px 16px; font-size: 13px; } .idiom-filter-wrap { margin: -16px 0 1.5rem; } .idiom-filter-btn { padding: 7px 12px; font-size: 11.5px; gap: 5px; } .idiom-hero { padding: 30px 20px; border-radius: 24px; margin-bottom: 16px; } .idiom-hero-pinyin { font-size: 1rem; } .idiom-hero-translate { font-size: 0.92rem; margin-bottom: 14px; } .idiom-audio-btn { padding: 7px 18px; font-size: 12px; } .idiom-progress-wrap { margin-bottom: 16px; } .idiom-progress-label { font-size: 0.72rem; } .ipr-btn { padding: 7px 12px; font-size: 12px; } .idiom-section { margin-bottom: 1.4rem; } .idiom-example { padding: 16px 16px 14px 34px; border-radius: 16px; } .idiom-example-mark { font-size: 28px; top: 5px; left: 12px; } .idiom-example-zh { font-size: 1rem; } .idiom-example-ru { font-size: 0.88rem; } .reading-page { padding: 32px 7px 56px; } .reading-header h1 { font-size: 26px; } .reading-detail { padding: 28px 7px 56px; } .reading-quiz { padding: 22px 18px; border-radius: 22px; } .reading-article { padding: 22px 0; border-radius: 0; margin-left: -23px; margin-right: -23px; } .reading-article-header h1 { font-size: 21px; } .reading-text-hanzi { font-size: 18px; } .reading-quiz-title { font-size: 17px; margin-bottom: 20px; } .contacts-container { padding: 32px 7px 56px; } .contacts-hero { padding: 40px 24px; border-radius: 24px; margin-bottom: 32px; } .contacts-hero-title { font-size: 28px; } .contacts-hero-subtitle { font-size: 15px; } .contacts-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .contact-card { padding: 18px; gap: 14px; border-radius: 20px; } .contact-card-icon { width: 48px; height: 48px; border-radius: 14px; } .contacts-faq { padding: 28px 20px; border-radius: 24px; } .contacts-faq-title { font-size: 21px; margin-bottom: 20px; } .faq-item { padding: 18px 20px; border-radius: 16px; } } /* ============================================================ PROFILE + PRICING + ABOUT + FEEDBACK + CALENDAR + WORD-OF-DAY + WEEK DETAIL ============================================================ */ /* ============================================================ SLICE: Profile · Pricing · About · Feedback · Activity Calendar · Word-of-Day · Week Detail Design tokens consumed (defined globally, not redeclared here): --red #940501, --red-deep #6B0000, --blue #95BBEA, --blue-2 #AACAF2, --white #FFF8E7, --black #111111, --gray rgba(2,2,2,.6), --gray-2 rgba(0,0,0,.58), --cjk-font Font: 'Montserrat', sans-serif everywhere (loaded globally). ============================================================ */ /* ------------------------------------------------------------ Shared layout container (used by pricing / success / fail / feedback pages of this slice — kept minimal & generic so it is harmless if another slice also targets it on other dashboard pages). ------------------------------------------------------------ */ .dashboard-container { max-width: 1080px; margin: 0 auto; padding: 40px 24px 56px; display: flex; flex-direction: column; gap: 20px; } /* ============================================================ PROFILE — view page ============================================================ */ .profile-container { max-width: 800px; margin: 0 auto; padding: 20px; } .profile-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 32px; margin-bottom: 24px; } .profile-header { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid var(--blue); } .profile-avatar { width: 80px; height: 80px; flex-shrink: 0; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .avatar-emoji { font-size: 40px; } .profile-title h1 { margin: 0 0 4px 0; font-size: 28px; font-weight: 800; color: var(--black); } .profile-role { color: var(--red); font-weight: 700; margin: 0; } .profile-info { margin-bottom: 32px; } .info-group { margin-bottom: 20px; } .info-group:last-child { margin-bottom: 0; } .info-group label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 4px; } .info-group p { font-size: 18px; color: var(--black); margin: 0; } .profile-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Scoped to .profile-stats: exercises.css (a different slice) defines an unrelated, unscoped .stat-card/.stat-value/.stat-label — scope ours so the cascade can't collide. */ .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .profile-stats .stat-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; padding: 24px; text-align: center; } .profile-stats .stat-value { font-size: 32px; font-weight: 900; color: var(--red); margin-bottom: 8px; } .profile-stats .stat-label { font-size: 14px; color: var(--gray); font-weight: 600; } /* ============================================================ PROFILE — edit page ============================================================ */ .profile-edit-container { max-width: 600px; margin: 0 auto; padding: 20px; } .profile-edit-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 32px; } .profile-edit-header { text-align: center; margin-bottom: 32px; } .profile-edit-header h1 { margin: 0 0 8px 0; font-size: 28px; font-weight: 800; color: var(--black); } .profile-edit-header p { color: var(--gray); margin: 0; } .profile-edit-form .form-group, .form-group { margin-bottom: 20px; } .profile-edit-form label, .form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--black); font-size: 14px; } .profile-edit-form input, .form-group input, .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--blue); border-radius: 14px; font-size: 16px; font-family: 'Montserrat', sans-serif; background: var(--surface); color: var(--black); transition: border-color 0.2s, box-shadow 0.2s; } .profile-edit-form input:focus, .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(148, 5, 1, 0.1); } .profile-edit-form small { display: block; margin-top: 6px; font-size: 12px; color: var(--gray); } .profile-edit-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; } /* ---- Buttons owned by this slice (base .btn-primary/.btn-secondary live in the shared header/footer/buttons stylesheet — not redefined here to avoid conflicting with that slice) ---- */ .btn-save { background: var(--red); color: var(--white); border: none; border-radius: 50px; font-weight: 800; font-size: 15px; padding: 14px 32px; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: opacity 0.15s; } .btn-save:hover { opacity: 0.85; } .btn-cancel { background: var(--surface); color: var(--black); border: 2px solid var(--blue); border-radius: 50px; font-weight: 700; font-size: 15px; padding: 12px 30px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s; } .btn-cancel:hover { opacity: 0.85; } .btn-danger { background: var(--surface); color: var(--red); border: 2px solid var(--red); border-radius: 50px; font-weight: 700; font-size: 15px; padding: 12px 30px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .btn-danger:hover { background: var(--red); color: var(--white); } /* ---- Logout / delete-account confirm actions (auth/logout.html — the surrounding .auth-container/.auth-card shell belongs to the auth pages slice; these action classes were named explicitly for this slice) ---- */ .logout-actions { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .btn-logout { background: var(--red); color: var(--white); border: none; border-radius: 50px; font-weight: 800; font-size: 15px; padding: 14px 32px; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: opacity 0.15s; } .btn-logout:hover { opacity: 0.85; } .btn-cancel-logout { background: var(--surface); color: var(--black); border: 2px solid var(--blue); border-radius: 50px; font-weight: 700; font-size: 15px; padding: 12px 30px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s; } .btn-cancel-logout:hover { opacity: 0.85; } /* ============================================================ PRICING — standalone /pricing page ============================================================ */ .landing-pricing__header { margin-bottom: 40px; } .landing-pricing__title { font-size: 2.2rem; font-weight: 900; color: var(--black); margin-bottom: 12px; } .landing-pricing__sub { font-size: 1rem; color: var(--gray); max-width: 560px; margin: 0 auto; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pricing-card { position: relative; background: var(--surface); border: 2px solid var(--blue); border-radius: 40px; padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 4px; } .pricing-card--featured { border-color: var(--red); background: rgba(148, 5, 1, 0.04); } .pricing-badge { position: absolute; top: -14px; left: 2rem; background: var(--blue); color: var(--red-deep); border-radius: 50px; font-size: 0.72rem; font-weight: 800; padding: 4px 14px; display: inline-block; width: fit-content; } .pricing-name { font-size: 1.3rem; font-weight: 800; color: var(--black); margin: 8px 0 0; } .pricing-price { font-size: 1.8rem; font-weight: 900; color: var(--red); margin: 8px 0; } .pricing-desc { font-size: 0.9rem; color: var(--gray); line-height: 1.5; margin: 0 0 16px; } .pricing-features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pricing-features li { font-size: 0.88rem; color: var(--gray-2); padding-left: 1.4em; position: relative; line-height: 1.4; } .pricing-features li::before { content: "✦"; position: absolute; left: 0; color: var(--blue); } .pricing-cta { background: var(--red); color: var(--white); border: none; border-radius: 50px; font-weight: 800; font-size: 15px; padding: 14px 24px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: opacity 0.15s; margin-top: auto; } .pricing-cta:hover { opacity: 0.85; } /* ============================================================ ABOUT ============================================================ */ .about-container { max-width: 1000px; margin: 0 auto; padding: 20px 20px 60px; } .about-hero { text-align: center; margin-bottom: 48px; } .about-hero h1 { font-size: 48px; font-weight: 900; color: var(--black); margin-bottom: 16px; } .about-subtitle { font-size: 18px; color: var(--gray); } .about-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 32px; margin-bottom: 32px; transition: transform 0.25s; } .about-card:hover { transform: translateY(-4px); } .about-icon { font-size: 48px; margin-bottom: 16px; } .about-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; color: var(--black); } .about-card p { color: var(--gray-2); line-height: 1.7; margin-bottom: 16px; font-size: 16px; } .about-card p:last-child { margin-bottom: 0; } .about-card strong { color: var(--red); } .approach-items { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; } .approach-item { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--black); padding: 14px 16px; background: rgba(149, 187, 234, 0.14); border-radius: 16px; } .approach-check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--red); color: var(--white); border-radius: 50%; font-weight: 800; font-size: 16px; flex-shrink: 0; } .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; } .about-stats .stat-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; padding: 24px 16px; text-align: center; transition: transform 0.25s; } .about-stats .stat-card:hover { transform: translateY(-4px); } .about-stats .stat-number { font-size: 36px; font-weight: 900; color: var(--red); margin-bottom: 8px; } .about-stats .stat-description { font-size: 13px; color: var(--gray); font-weight: 600; } .about-cta { background: var(--red); border-radius: 32px; padding: 48px; text-align: center; color: var(--white); } .about-cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 16px; color: var(--white); } .about-cta p { margin-bottom: 24px; opacity: 0.92; font-size: 18px; } /* Contextual override only — base .btn-primary rules live in the shared header/footer/buttons stylesheet. */ .about-cta .btn-primary { background: var(--surface); color: var(--red); } /* ============================================================ FEEDBACK ============================================================ */ .feedback-form { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 32px; max-width: 680px; margin: 0 auto; } .feedback-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .feedback-header h2 { font-size: 22px; font-weight: 800; color: var(--black); margin: 0 0 4px; } .feedback-header p { color: var(--gray); margin: 0; } .feedback-icon { font-size: 36px; flex-shrink: 0; } .feedback-label { display: block; margin-bottom: 12px; font-size: 14px; line-height: 1.6; color: var(--gray-2); font-weight: 600; } .feedback-textarea { width: 100%; padding: 16px; border: 2px solid var(--blue); border-radius: 16px; font-size: 15px; font-family: 'Montserrat', sans-serif; color: var(--black); background: var(--surface); resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; } .feedback-textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(148, 5, 1, 0.1); } .feedback-error { color: var(--red); font-size: 13px; margin-top: 8px; } .feedback-actions { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; } /* ============================================================ ACTIVITY ROW — wraps activity_calendar.html + word_of_day.html side by side, word-of-day always on the right. ============================================================ */ .activity-row { display: flex; gap: 20px; align-items: stretch; } .activity-row .activity-section { flex-shrink: 0; margin-top: 0; display: flex; flex-direction: column; min-width: 0; } .activity-row .activity-section .cal-card { flex: 1; } .activity-row .activity-section .activity-stats { flex-shrink: 0; margin-top: auto; padding-top: 1rem; } @media (max-width: 680px) { .activity-row { gap: 10px; } .activity-row .activity-section, .activity-row .wod-section { flex: 1 1 0; flex-shrink: 1; width: auto; max-width: none; min-width: 140px; } } /* ============================================================ ACTIVITY CALENDAR component ============================================================ */ .activity-section { margin-top: 2rem; } .activity-section h2 { font-size: 1.1rem; font-weight: 800; color: var(--black); margin-bottom: 1rem; } .cal-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; padding: 1.25rem 1.5rem 1rem; max-width: 340px; } .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .cal-nav { background: none; border: none; color: var(--gray); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; transition: color 0.15s, background 0.15s; } .cal-nav:hover { color: var(--red); background: rgba(149, 187, 234, 0.18); } .cal-nav:disabled { cursor: default; } .cal-month-label { font-size: 0.95rem; font-weight: 700; color: var(--black); text-transform: capitalize; } .cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .cal-dow { text-align: center; font-size: 0.7rem; color: var(--gray); padding-bottom: 4px; user-select: none; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-day { aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--gray-2); position: relative; cursor: default; transition: transform 0.1s; } .cal-day:hover { transform: scale(1.15); z-index: 2; } .cal-day.empty { background: transparent; } .cal-day.today { font-weight: 800; box-shadow: inset 0 0 0 2px var(--red); } /* Activity levels — brand blue→red intensity scale */ .cal-day[data-level="0"] { background: transparent; color: rgba(2,2,2,0.35); } .cal-day[data-level="1"] { background: rgba(149, 187, 234, 0.35); color: var(--black); } .cal-day[data-level="2"] { background: rgba(149, 187, 234, 0.7); color: var(--black); } .cal-day[data-level="3"] { background: var(--blue-2); color: var(--black); font-weight: 700; } .cal-day[data-level="4"] { background: var(--red); color: var(--white); font-weight: 700; } .cal-day::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111111; color: var(--white); font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 20; } .cal-day:not(.empty):hover::after { opacity: 1; } .activity-stats { display: flex; gap: 1.25rem; margin-top: 1rem; flex-wrap: wrap; } .activity-stat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--gray-2); } .activity-stat strong { color: var(--black); } /* ============================================================ WORD OF DAY component ============================================================ */ .wod-section { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wod-section h2 { font-size: 1.1rem; font-weight: 800; color: var(--black); margin-bottom: 1rem; flex-shrink: 0; } .wod-card { flex: 1; background: var(--surface); border: 2px solid var(--blue); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; } .wod-hanzi-col { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 18px 16px; background: rgba(149, 187, 234, 0.1); border-bottom: 2px solid var(--blue); } .wod-hanzi { font-size: clamp(2.6rem, 8vw, 7.7rem); font-weight: 700; line-height: 1; color: var(--black); font-family: var(--cjk-font); letter-spacing: 0.04em; white-space: nowrap; text-align: center; } .wod-info { flex: 1; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .wod-pinyin { font-size: 1.3rem; color: var(--red); font-style: italic; font-weight: 600; } .wod-divider { height: 1px; background: var(--blue); opacity: 0.5; } .wod-translation { font-size: 1.45rem; font-weight: 700; color: var(--black); } .wod-pos { font-size: 0.9rem; color: var(--red-deep); background: var(--blue); border-radius: 100px; padding: 2px 12px; width: fit-content; font-weight: 600; } .wod-example { padding: 8px 12px; background: rgba(148, 5, 1, 0.04); border-left: 2px solid var(--red); border-radius: 0 8px 8px 0; } .wod-example-zh { font-size: 1.1rem; color: var(--gray-2); line-height: 1.5; font-family: var(--cjk-font); } .wod-example-ru { font-size: 1rem; color: var(--gray); margin-top: 3px; line-height: 1.4; } /* Side-by-side layout on the dashboard listing page (owned elsewhere via .activity-row) needs these two components to compress rather than stack at narrow widths — kept as a component-level breakpoint. */ @media (max-width: 680px) { .cal-card { max-width: none; padding: 0.7rem 0.55rem 0.55rem; } .cal-month-label { font-size: 0.72rem; } .cal-nav { font-size: 0.85rem; padding: 2px 4px; } .cal-dow { font-size: 0.52rem; } .cal-grid { gap: 2px; } .cal-day { font-size: 0.55rem; } .activity-stats { gap: 0.6rem; margin-top: 0.6rem; } .activity-stat { font-size: 0.72rem; } .wod-card { border-radius: 16px; } .wod-hanzi-col { padding: 10px 8px; } .wod-hanzi { font-size: clamp(1.6rem, 9vw, 7.7rem); letter-spacing: 0; } .wod-info { padding: 10px 12px; gap: 4px; } .wod-pinyin { font-size: 0.78rem; } .wod-translation { font-size: 0.88rem; } .wod-pos { font-size: 0.66rem; padding: 1px 7px; } .wod-example { display: none; } } /* ============================================================ WEEK DETAIL — page-owned classes only. .quiz-container / .quiz-nav / .back-link / .quiz-card / .quiz-badge / .progress-bar / .progress-fill / .progress-header / .progress-label / .progress-count are shared across many other pages (lessons, exercises, reading, grammar, idioms, articles, dashboard listing) and are owned by another slice — only scoped contextual overrides are added below, matching the old week.css pattern. ============================================================ */ .week-header-card { background: var(--red); border-radius: 32px; padding: 32px; margin-bottom: 24px; } .week-badge-row { margin-bottom: 12px; } .week-header-card .quiz-badge { background: rgba(255, 248, 231, 0.18); color: var(--white); border: 1px solid rgba(255, 248, 231, 0.3); } .week-header-card .week-title { font-size: 1.6rem; font-weight: 800; color: var(--white); margin-bottom: 8px; line-height: 1.3; } .week-long-desc { color: rgba(255, 248, 231, 0.85); font-size: 15px; line-height: 1.6; margin-bottom: 24px; } .week-progress-block { border-top: 1px solid rgba(255, 248, 231, 0.3); padding-top: 20px; } .week-header-card .progress-label { color: rgba(255, 248, 231, 0.85); } .week-header-card .progress-count { color: var(--blue-2); } .week-header-card .progress-bar { background: rgba(255, 248, 231, 0.25); } .week-header-card .progress-fill { background: var(--white); } .week-lessons-card { background: var(--surface); border: 2px solid var(--blue); border-radius: 32px; padding: 28px 32px; } .week-lessons-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; } .week-lessons-title { font-size: 18px; font-weight: 800; color: var(--black); } .week-lessons-count { font-size: 13px; color: var(--red-deep); font-weight: 700; background: var(--blue); padding: 4px 12px; border-radius: 50px; } .week-lesson-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; border: 2px solid var(--blue); margin-bottom: 12px; background: var(--surface); transition: transform 0.2s, border-color 0.2s; } .week-lesson-row:last-child { margin-bottom: 0; } .week-lesson-row:hover { border-color: var(--red); transform: translateY(-1px); } .week-lesson-row.wl-completed { background: rgba(149, 187, 234, 0.1); border-color: var(--blue); } .week-lesson-row.wl-started { background: rgba(148, 5, 1, 0.04); border-color: var(--red); } .wl-info { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; } .wl-number { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .wl-completed .wl-number { background: var(--red); } .wl-started .wl-number { background: var(--red-deep); } .wl-details { min-width: 0; } .wl-name { font-weight: 700; font-size: 15px; color: var(--black); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-desc { font-size: 13px; color: var(--gray); } .wl-exercises-badge { margin-top: 6px; font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wl-exercises-done { background: var(--blue); color: var(--red-deep); padding: 2px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; } .wl-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } .wl-btn { padding: 8px 18px; border-radius: 50px; text-decoration: none; font-size: 13px; font-weight: 700; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer; } .wl-btn:hover { opacity: 0.85; transform: translateY(-1px); } .wl-btn-start { background: var(--red); color: var(--white); } .wl-btn-continue { background: var(--red-deep); color: var(--white); } .wl-btn-done { background: var(--surface); color: var(--black); border: 2px solid var(--blue); } .wl-btn-exercises { background: var(--blue); color: var(--black); } .wl-btn-exercises-done { background: var(--surface); color: var(--black); border: 2px solid var(--blue); } /* ============================================================ RESPONSIVE — 860px breakpoint ============================================================ */ @media (max-width: 860px) { .dashboard-container { padding: 20px 7px 40px; } .profile-container, .profile-edit-container { padding: 14px 7px; } .profile-card, .profile-edit-card { padding: 20px; border-radius: 24px; } .profile-header { gap: 14px; margin-bottom: 20px; padding-bottom: 20px; flex-wrap: wrap; } .profile-avatar { width: 60px; height: 60px; } .avatar-emoji { font-size: 28px; } .profile-title h1 { font-size: 20px; } .profile-role { font-size: 13px; } .profile-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; } .profile-stats .stat-card { padding: 14px 8px; border-radius: 14px; } .profile-stats .stat-value { font-size: 22px; margin-bottom: 4px; } .profile-stats .stat-label { font-size: 11px; } .profile-actions, .profile-edit-actions, .logout-actions { gap: 10px; } .landing-pricing__title { font-size: 1.6rem; } .pricing-grid { grid-template-columns: 1fr; } .pricing-card { padding: 1.75rem 1.5rem; border-radius: 28px; } .about-container { padding: 14px 7px 40px; } .about-hero h1 { font-size: 30px; } .about-subtitle { font-size: 15px; } .about-card { padding: 20px; border-radius: 24px; } .about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .about-cta { padding: 28px 20px; border-radius: 24px; } .about-cta h2 { font-size: 20px; } .about-cta p { font-size: 15px; } .feedback-form { padding: 20px; border-radius: 24px; } .feedback-header { gap: 10px; } .feedback-actions { gap: 10px; } .week-header-card { padding: 20px; border-radius: 24px; } .week-header-card .week-title { font-size: 1.25rem; } .week-long-desc { font-size: 13px; margin-bottom: 16px; } .week-lessons-card { padding: 16px; border-radius: 24px; } .week-lesson-row { flex-direction: column; align-items: flex-start; padding: 12px; } .wl-info { width: 100%; } .wl-name { white-space: normal; overflow: visible; text-overflow: clip; } .wl-actions { width: 100%; justify-content: flex-end; } }