/* ========================================================================== Weather Academy — дизайн-система. Токены объявлены для светлой темы, тёмная переопределяет их на . Переключение делает js/theme.js (до первой отрисовки — js/theme-boot.js). ========================================================================== */ :root { color-scheme: light; --bg: #f4f7fb; --bg-elevated: #ffffff; --bg-subtle: #eaf0f8; --bg-code: #f5f7fa; --bg-editor: #0f172a; --text: #16202e; --text-muted: #5b6b80; --text-faint: #8a9bb0; --text-on-code: #dbe4f0; --border: #d8e2ee; --border-strong: #c1cfdf; --accent: #0b7285; --accent-hover: #095c6b; --accent-contrast: #ffffff; --accent-soft: rgba(11, 114, 133, .1); --ok: #1a7f4b; --warn: #a2650a; --fail: #b3261e; --shadow-sm: 0 1px 2px rgba(18, 38, 63, .06), 0 1px 3px rgba(18, 38, 63, .05); --shadow-md: 0 4px 16px rgba(18, 38, 63, .09); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --max-width: 1080px; } html[data-theme="dark"] { color-scheme: dark; --bg: #0c1118; --bg-elevated: #131b25; --bg-subtle: #18222e; --bg-code: #101923; --bg-editor: #0a1017; --text: #e6edf6; --text-muted: #a4b3c6; --text-faint: #74839a; --text-on-code: #dfe8f5; --border: #24313f; --border-strong: #33455a; --accent: #4fd1e0; --accent-hover: #7bdde9; --accent-contrast: #06222a; --accent-soft: rgba(79, 209, 224, .13); --ok: #5ed39a; --warn: #e8b64c; --fail: #ff8f86; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); } a:hover { color: var(--accent-hover); } code, pre, kbd { font-family: var(--font-mono); font-size: .92em; } code { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 5px; padding: .08em .35em; } pre code { background: none; border: 0; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- каркас страницы ------------------------------------------------------ */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: .75rem clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); text-decoration: none; } .brand__icon { width: 26px; height: 26px; color: var(--accent); } .app-nav { display: flex; gap: .35rem; margin-left: auto; flex-wrap: wrap; } .nav-link { padding: .4rem .8rem; border-radius: 999px; color: var(--text-muted); text-decoration: none; font-size: .95rem; } .nav-link:hover { background: var(--bg-subtle); color: var(--text); } .nav-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .app-main { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem); } .app-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--border); color: var(--text-faint); font-size: .875rem; } /* --- переключатель темы --------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; font-size: .85rem; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle__icon--dark { display: none; } html[data-theme="dark"] .theme-toggle__icon--dark { display: inline; } html[data-theme="dark"] .theme-toggle__icon--light { display: none; } @media (max-width: 640px) { .theme-toggle__label { display: none; } } /* --- hero ----------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: clamp(1rem, 4vw, 2.5rem); align-items: center; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .hero__eyebrow, .page__eyebrow { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--accent); } .hero h1 { margin: 0 0 .75rem; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -.02em; } .hero__lead, .page__lead { color: var(--text-muted); font-size: 1.05rem; max-width: 62ch; } .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; } .hero__facts { list-style: none; margin: 0; padding: 1.25rem; display: grid; gap: .75rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .hero__facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .hero__facts strong { font-size: 1.75rem; color: var(--accent); } .hero__facts span { color: var(--text-muted); } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; } } /* --- секции и карточки ---------------------------------------------------- */ .section { margin-top: 2.5rem; } .section h2 { font-size: 1.4rem; letter-spacing: -.01em; margin-bottom: .35rem; } .section__lead { color: var(--text-muted); margin-top: 0; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .card { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); color: inherit; } .card h3 { margin: 0; font-size: 1.1rem; } .card p { margin: 0; color: var(--text-muted); font-size: .95rem; } .card__top { display: flex; gap: .4rem; flex-wrap: wrap; } .card__meta { display: flex; gap: 1rem; margin-top: auto; padding-top: .75rem; color: var(--text-faint); font-size: .85rem; } /* --- бейджи --------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-subtle); color: var(--text-muted); font-size: .76rem; line-height: 1.6; white-space: nowrap; } .badge--wasm, .badge-wasm { border-color: transparent; background: var(--accent-soft); color: var(--accent); } .badge--remote { border-color: transparent; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge--lang { border-color: transparent; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .badge--warn { border-color: transparent; background: color-mix(in srgb, var(--fail) 15%, transparent); color: var(--fail); } /* --- рантаймы ------------------------------------------------------------- */ .runtime-list { display: grid; gap: .6rem; margin-top: 1rem; } .runtime { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; padding: .85rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .runtime strong { display: block; } .runtime small { display: block; color: var(--text-muted); font-size: .85rem; } .runtime.is-disabled { opacity: .5; } .muted { color: var(--text-faint); } /* --- страницы ------------------------------------------------------------- */ .page h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.02em; margin: 0 0 .5rem; } .page__head { margin-bottom: 1.5rem; } .page__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; } .page__subtitle { margin-top: 2.5rem; font-size: 1.2rem; } .page--center { text-align: center; padding: 3rem 0; } .big-emoji { font-size: 3rem; margin: 0 0 .5rem; } .crumbs { color: var(--text-faint); font-size: .875rem; margin-bottom: 1.25rem; display: flex; gap: .4rem; flex-wrap: wrap; } .crumbs a { color: var(--text-muted); text-decoration: none; } .crumbs a:hover { color: var(--accent); } .notice { padding: .85rem 1rem; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: var(--radius-sm); } .notice--noscript { margin: 2rem auto; max-width: var(--max-width); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .panel { padding: 1.1rem 1.25rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .panel h2 { font-size: 1.05rem; margin: 0 0 .5rem; } .panel p { margin: 0; color: var(--text-muted); font-size: .95rem; } .table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; } .table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; } .table th { color: var(--text-faint); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; } .table tr.is-muted td { opacity: .5; } .steps li { margin-bottom: .4rem; } /* --- список уроков -------------------------------------------------------- */ .lessons { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; } .lessons a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; } .lessons a:hover { border-color: var(--accent); } .lessons__order { font-family: var(--font-mono); color: var(--text-faint); } .lessons__body strong { display: block; } .lessons__body small { color: var(--text-muted); } .lessons__arrow { color: var(--text-faint); } .lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } /* --- текст урока ---------------------------------------------------------- */ .prose { max-width: 74ch; } .prose > :first-child { margin-top: 0; } .prose h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; letter-spacing: -.01em; } .prose h3 { font-size: 1.08rem; margin: 1.5rem 0 .5rem; } .prose p, .prose li { color: var(--text); } .prose ul, .prose ol { padding-left: 1.25rem; } .prose blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 3px solid var(--accent); background: var(--bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); } .prose pre { position: relative; margin: 1rem 0; padding: .9rem 1rem; background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; } .prose table { border-collapse: collapse; width: 100%; } .prose th, .prose td { border: 1px solid var(--border); padding: .45rem .6rem; } .prose img { max-width: 100%; } /* --- песочница / раннер --------------------------------------------------- */ .runner { margin: 1.25rem 0 1.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-sm); overflow: hidden; } .runner__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .9rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border); } .runner__title { font-weight: 600; font-size: .95rem; } .runner__tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .runner__runtime { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text-muted); } .runner__runtime select, .playground__picker select { padding: .3rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-size: .85rem; } .runner__editor-wrap { position: relative; /* Фон поверхности задаёт обёртка: и подсветка, и ввод над ней прозрачны. */ background: var(--bg-editor); } .runner__editor-highlight { position: absolute; inset: 0; /* Подсветка — фон под вводом; позиционированный элемент рисуется выше статичного, поэтому слой явно опускаем вниз, иначе он перекроет каретку и выделение. */ z-index: 0; margin: 0; padding: .9rem 1rem; overflow: hidden; pointer-events: none; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-on-code); font-family: var(--font-mono); font-size: .875rem; line-height: 1.55; tab-size: 4; white-space: pre; } .runner__editor-highlight code { font-family: inherit; font-size: inherit; line-height: inherit; background: none; border: 0; padding: 0; } .runner__editor { /* Ввод — верхний слой: только так видны каретка, выделение и курсор мыши. */ position: relative; z-index: 1; display: block; width: 100%; padding: .9rem 1rem; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: transparent; caret-color: var(--text-on-code); font-family: var(--font-mono); font-size: .875rem; line-height: 1.55; resize: vertical; tab-size: 4; } .runner__editor:focus { outline: 2px solid var(--accent); outline-offset: -2px; } .runner__editor::selection { background: rgba(79, 209, 224, .25); color: transparent; } .runner__stdin { display: block; padding: .6rem 1rem; border-bottom: 1px solid var(--border); } .runner__stdin span { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: .3rem; } .runner__stdin textarea { width: 100%; padding: .5rem .6rem; font-family: var(--font-mono); font-size: .85rem; background: var(--bg-code); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .runner__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem .9rem; } .runner__timing { color: var(--text-faint); font-size: .82rem; margin-left: auto; } .runner__note { margin: 0; padding: 0 .9rem .7rem; color: var(--text-faint); font-size: .8rem; } .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-size: .88rem; cursor: pointer; text-decoration: none; } .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); } .runner__progress { display: flex; align-items: center; gap: .75rem; padding: 0 .9rem .8rem; font-size: .85rem; color: var(--text-muted); } .runner__progress progress { flex: 1; height: 6px; } .runner__output { border-top: 1px solid var(--border); background: var(--bg-code); padding: .75rem .9rem; display: grid; gap: .6rem; } .runner__stdout, .runner__stderr { margin: 0; padding: .7rem .8rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .runner__stdout { background: #0d1620; color: #d9f7e4; border: 1px solid #1d3a2f; } .runner__stderr { background: #1d1113; color: #ffd9d5; border: 1px solid #4b2320; } .runner__verdict { margin: 0; font-size: .87rem; color: var(--ok); } .runner__verdict.is-fail { color: var(--fail); } .runner__expected { display: block; margin-top: .35rem; white-space: pre-wrap; } .runner__error { margin: 0; color: var(--fail); font-size: .87rem; } .playground__picker { margin-bottom: 1rem; display: flex; gap: .6rem; align-items: center; } .playground__picker label { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .9rem; } /* --- подсветка синтаксиса (js/highlight.js) ------------------------------- */ /* Токны: key — ключевые слова и at-rules, str/num/com — строки, числа и комментарии, fn — вызовы (и команды shell в начале строки), type — типы и селекторы .cls/#id, tag — теги html и имена элементов-селекторов, attr — имена свойств css, атрибутов html и параметров команд (-Path/--version), var — переменные ($x, ${X}, --custom-prop). */ :root { --tok-key: #a2269b; --tok-str: #0f7b3f; --tok-num: #9a5c00; --tok-com: #7d8ea3; --tok-fn: #2b5fd0; --tok-type: #0b7285; --tok-tag: #b0341f; --tok-attr: #6f42c1; --tok-var: #0a6ba0; } /* Значения токнов для тёмной поверхности: тёмная тема целиком и редактор кода (он тёмный в обеих темах). */ html[data-theme="dark"], .surface--dark { --tok-key: #c586c0; --tok-str: #8fd39a; --tok-num: #d7c08f; --tok-com: #6b7c93; --tok-fn: #dcdcaa; --tok-type: #56d4c4; --tok-tag: #e08a68; --tok-attr: #c79bf5; --tok-var: #6cc7f0; } .tok-key { color: var(--tok-key); } .tok-str { color: var(--tok-str); } .tok-num { color: var(--tok-num); } .tok-com { color: var(--tok-com); font-style: italic; } .tok-fn { color: var(--tok-fn); } .tok-type { color: var(--tok-type); } .tok-tag { color: var(--tok-tag); } .tok-attr { color: var(--tok-attr); } .tok-var { color: var(--tok-var); } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* --- доступ: вход, регистрация, админ-панель ------------------------------ */ .user-menu { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-wrap: wrap; } .app-nav--account { margin-left: 0; } @media (max-width: 640px) { .app-header { flex-wrap: wrap; row-gap: .5rem; } } .user-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); font-size: .85rem; } .user-chip__name { color: var(--text); font-weight: 600; } .auth { max-width: 460px; margin: 0 auto; } .auth--wide { max-width: 620px; } .auth__hint { margin-top: 1.5rem; } .page--narrow { max-width: 620px; margin: 0 auto; } .form { display: grid; gap: .9rem; margin-top: 1rem; } .field { display: grid; gap: .3rem; } .field > label { font-size: .85rem; color: var(--text-muted); font-weight: 600; } .field--check { grid-template-columns: auto 1fr; align-items: center; gap: .5rem; } /* У InputText атрибут type может отсутствовать (браузер считает его как text), поэтому берём всё, кроме чекбоксов. */ .form input:not([type=checkbox]):not([type=hidden]), .form select { padding: .5rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: .95rem; } .form input:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .form-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .35rem; } .btn--danger { border-color: color-mix(in srgb, var(--fail) 45%, transparent); color: var(--fail); } .btn--danger:hover:not(:disabled) { border-color: var(--fail); background: color-mix(in srgb, var(--fail) 12%, transparent); color: var(--fail); } .alert { margin: 0; padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .92rem; } .alert--error { background: color-mix(in srgb, var(--fail) 12%, transparent); border-left: 3px solid var(--fail); color: var(--text); } .alert--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-left: 3px solid var(--ok); color: var(--text); } .alert__list { margin: 0; padding-left: 1.1rem; } .notice--ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; } .search { display: inline-flex; gap: .5rem; align-items: center; } .search input { padding: .45rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: .92rem; min-width: 220px; } .panel--danger { border-color: color-mix(in srgb, var(--fail) 45%, var(--border)); } .panel--danger h2 { color: var(--fail); } .access__hint { margin-top: 2rem; max-width: 60ch; } .table--users td a { font-weight: 600; } /* --- завершение урока, очки-фрукты и кубки -------------------------------- */ .finish { position: relative; margin-top: 2.5rem; padding: 1.4rem 1.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg-elevated)), var(--bg-elevated)); box-shadow: var(--shadow-sm); } .finish.is-done { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); } .finish__box { display: grid; gap: .6rem; justify-items: start; } .finish__button { font-size: 1.02rem; padding: .7rem 1.35rem; } .finish__hint { margin: 0; color: var(--text-muted); font-size: .9rem; max-width: 62ch; } .finish__done { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0; font-weight: 600; } .finish__check { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .finish__award { color: var(--text-muted); font-weight: 500; } .finish__total { margin: 0; color: var(--text-muted); font-size: .92rem; animation: score-pop .5s ease-out; } .finish__total strong { color: var(--text); font-variant-numeric: tabular-nums; } /* Взрыв фруктов: частицы стартуют из центра блока и разлетаются по --dx/--dy, которые сгенерированы на стороне компонента. Задержку задаёт --delay, чтобы веер не был синхронным. */ .fruit-burst { position: absolute; left: 50%; top: 1.6rem; width: 0; height: 0; pointer-events: none; } .fruit-burst__item { position: absolute; left: 0; top: 0; font-size: 1.5rem; line-height: 1; opacity: 0; animation: fruit-fly 1.35s cubic-bezier(.16, .84, .34, 1) both; animation-delay: var(--delay, 0ms); } /* Кубок пройденного курса вылетает вместе с фруктами — он крупнее и с золотым свечением. */ .fruit-burst__item.is-trophy { font-size: 2.8rem; filter: drop-shadow(0 3px 12px color-mix(in srgb, var(--warn) 70%, transparent)); } .fruit-burst__points { position: absolute; left: 0; top: -1.5rem; transform: translate(-50%, 0); padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 22%, var(--bg-elevated)); color: var(--text); font-weight: 700; font-size: 1.05rem; white-space: nowrap; animation: points-rise 1.35s ease-out both; } @keyframes fruit-fly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px))) scale(1.2) rotate(var(--rot, 180deg)); } } @keyframes points-rise { 0% { opacity: 0; transform: translate(-50%, .4rem) scale(.9); } 20% { opacity: 1; transform: translate(-50%, -.6rem) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -3.2rem) scale(1); } } @keyframes score-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } /* Кубок за пройденный курс. */ .trophy { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--border)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 20%, transparent), transparent 60%); } .trophy p { margin: 0; font-size: .95rem; } .trophy__icon { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--warn) 55%, transparent)); } .trophy.is-new .trophy__icon { animation: trophy-in .9s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes trophy-in { 0% { transform: scale(.2) rotate(-18deg); opacity: 0; } 60% { transform: scale(1.25) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* Профиль ученика: сводка, витрина кубков и полосы прогресса. */ .card--score { align-items: flex-start; } .card__emoji { font-size: 1.8rem; line-height: 1; } .trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .trophy-card { display: grid; justify-items: center; gap: .3rem; padding: 1.1rem .9rem; text-align: center; background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--warn) 22%, transparent), transparent 65%), var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); border-radius: var(--radius-lg); color: inherit; text-decoration: none; } .trophy-card:hover { border-color: var(--warn); } .trophy-card strong { font-size: .98rem; } .trophy-card small { color: var(--text-muted); } .trophy-card__icon { font-size: 3rem; line-height: 1; filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--warn) 60%, transparent)); } .trophy-card__fruits { font-size: 1.05rem; letter-spacing: .12rem; } .progress-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; } .progress-card { display: grid; gap: .45rem; padding: .9rem 1.1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .progress-card.is-done { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } .progress-card__title { font-weight: 600; color: inherit; text-decoration: none; } .progress-card__title:hover { color: var(--accent); } .progress-card__meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; font-size: .88rem; color: var(--text-muted); } .bar { height: .55rem; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; } .bar__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--ok) 70%, var(--accent))); transition: width .4s ease; } .table--achievements td a { font-weight: 600; } .table--achievements .score { font-variant-numeric: tabular-nums; font-weight: 600; } .table--awards td:first-child { white-space: nowrap; font-size: 1.05rem; } /* Анимация — украшение: при prefers-reduced-motion остаётся только текст начисления. */ @media (prefers-reduced-motion: reduce) { .fruit-burst__item { display: none; } .fruit-burst__points, .finish__total, .trophy.is-new .trophy__icon { animation: none; opacity: 1; transform: translate(-50%, -.4rem); } }