/* ═══════════════════════════════════════════════════════════════════════════ Школа Морзе 73 — визуальная система «приёмник». Идея: приложение — это прибор, за которым сидит оператор. Отсюда моноширинный шрифт для всего, что является данными (позывной, коды, счётчики, подписи-шильдики), янтарный свет одного акцента и «след сигнала» — ритм кода, нарисованный пропорциональными полосками, как на ленте самопишущего аппарата. Две темы из одного набора переменных: по настройке телефона, с ручной перебивкой через data-theme на . Доступность (ТЗ §11) — жёсткое условие, не пожелание: основной текст ≥20px, самый мелкий ≥17px, площадь нажатия ≥64px, контраст ≥4.5:1. ═══════════════════════════════════════════════════════════════════════════ */ /* ——— Светлая тема (по умолчанию) ——— */ :root{ color-scheme: light; --bg:#F6F1E6; --bg-2:#EDE4D1; --surface:#FFFFFF; --surface-2:#FAF4E8; --line:#E0D5BD; --line-strong:#C7B694; --text:#1E1A13; --text-dim:#544B3D; --accent:#9C6608; /* заливки — затемнён, чтобы белый текст на нём читался */ --accent-text:#8A5B06; /* янтарный КАК текст — темнее, чтобы читался на светлом */ --on-accent:#FFFFFF; --ok:#2C7548; --bad:#AC3F27; --on-ok:#FFFFFF; --on-bad:#FFFFFF; --tick-off:#9C8657; /* пустая риска шкалы — тоже обязана быть различима */ --glow:rgba(185,121,11,.16); --shadow:0 1px 2px rgba(62,46,18,.05), 0 10px 26px rgba(62,46,18,.09); --shadow-lift:0 2px 4px rgba(62,46,18,.07), 0 18px 40px rgba(62,46,18,.14); /* Типографика */ --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace; /* Форма */ --r-lg:24px; --r:18px; --r-sm:12px; --r-pill:999px; --tap:64px; --u:5px; /* единица «следа сигнала»: точка = 1u, тире = 3u */ } /* ——— Тёмная тема ——— */ @media (prefers-color-scheme: dark){ :root{ color-scheme: dark; --bg:#100E0B; --bg-2:#191510; --surface:#1B1712; --surface-2:#241F17; --line:#332C21; --line-strong:#4C4230; --text:#F7F2E6; --text-dim:#B2A894; --accent:#F2A63C; --accent-text:#F6B863; --on-accent:#16100A; --ok:#5CC985; --bad:#FF8767; --on-ok:#0B1A10; --on-bad:#2A0C04; /* на ярком цвете нужна тёмная тушь, не белая */ --tick-off:#6E6249; --glow:rgba(242,166,60,.22); --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45); --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 20px 46px rgba(0,0,0,.55); } } /* ——— Ручная перебивка темы: должна побеждать в обе стороны ——— */ :root[data-theme="light"]{ color-scheme: light; --bg:#F6F1E6; --bg-2:#EDE4D1; --surface:#FFFFFF; --surface-2:#FAF4E8; --line:#E0D5BD; --line-strong:#C7B694; --text:#1E1A13; --text-dim:#544B3D; --accent:#9C6608; --accent-text:#8A5B06; --on-accent:#FFFFFF; --ok:#2C7548; --bad:#AC3F27; --on-ok:#FFFFFF; --on-bad:#FFFFFF; --tick-off:#9C8657; --glow:rgba(185,121,11,.16); --shadow:0 1px 2px rgba(62,46,18,.05), 0 10px 26px rgba(62,46,18,.09); --shadow-lift:0 2px 4px rgba(62,46,18,.07), 0 18px 40px rgba(62,46,18,.14); } :root[data-theme="dark"]{ color-scheme: dark; --bg:#100E0B; --bg-2:#191510; --surface:#1B1712; --surface-2:#241F17; --line:#332C21; --line-strong:#4C4230; --text:#F7F2E6; --text-dim:#B2A894; --accent:#F2A63C; --accent-text:#F6B863; --on-accent:#16100A; --ok:#5CC985; --bad:#FF8767; --on-ok:#0B1A10; --on-bad:#2A0C04; --tick-off:#6E6249; --glow:rgba(242,166,60,.22); --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45); --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 20px 46px rgba(0,0,0,.55); } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html,body{margin:0; padding:0;} body{ font-family:var(--font); background:var(--bg); color:var(--text); font-size:20px; line-height:1.45; -webkit-text-size-adjust:100%; padding-bottom:calc(88px + env(safe-area-inset-bottom)); overflow-x:hidden; } h1{font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:.2em 0; font-weight:700; text-wrap:balance;} h2{font-size:27px; line-height:1.2; letter-spacing:-.015em; margin:.3em 0; font-weight:700; text-wrap:balance;} p{margin:.4em 0;} button{font-family:inherit; font-size:20px; cursor:pointer;} img{max-width:100%; height:auto;} .muted{color:var(--text-dim);} .center{text-align:center;} .hidden{display:none !important;} .grow{flex:1;} /* Видимый фокус с клавиатуры — обязательный минимум качества. */ :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;} #screen{padding:14px 16px 8px; max-width:560px; margin:0 auto; min-height:60vh;} /* ——— Шильдик: моноширинная подпись над значением, как гравировка на панели ——— */ .eyebrow{ font-family:var(--mono); font-size:17px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); line-height:1.2; } /* ——— Карточки ——— */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; margin:12px 0; } /* ——— Кнопки ——— */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--tap); padding:14px 22px; border:1px solid transparent; border-radius:var(--r); background:var(--accent); color:var(--on-accent); font-weight:650; letter-spacing:-.01em; box-shadow:var(--shadow); width:100%; margin:8px 0; text-decoration:none; /* кнопкой бывает и ссылка — подчёркивание ей не нужно */ transition:transform .1s ease, filter .15s ease, background .15s ease; } .btn:active{transform:translateY(1px) scale(.995); filter:brightness(.95);} .btn.secondary{background:var(--surface); color:var(--accent-text); border-color:var(--line-strong);} .btn.ghost{background:transparent; color:var(--text-dim); border-color:var(--line); box-shadow:none;} .btn:disabled{opacity:.4;} .btn-row{display:flex; gap:10px;} .btn-row .btn{margin:10px 0;} /* ——— След сигнала: подпись проекта. Точка = 1 единица, тире = 3, паузы такие же. ——— Полоски со скруглёнными концами читаются как запись на ленте самописца. */ .trace{display:flex; align-items:center; height:14px;} .trace i{display:block; height:100%; border-radius:calc(var(--u) / 1.6); background:var(--accent);} .trace i.dit{width:var(--u);} .trace i.dah{width:calc(var(--u) * 3);} .trace i.g1{width:var(--u); background:none;} .trace i.g3{width:calc(var(--u) * 3); background:none;} .trace i.tone{background:var(--accent);} .trace.big{height:26px; --u:9px;} .trace.dim i{background:var(--tick-off);} /* ——— Шапка станции ——— */ .station{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:6px; align-items:center; padding:4px 2px 0; } .station .avatar{grid-row:1 / span 2; align-self:start;} .station .who{min-width:0;} .callsign{ font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:.02em; color:var(--text); line-height:1.15; white-space:nowrap; } .station .trace{--u:4px; grid-column:2;} .avatar{ width:60px; height:60px; border-radius:var(--r-pill); object-fit:cover; background:var(--surface); border:2px solid var(--line-strong); box-shadow:var(--shadow); padding:2px; } .chip{ font-family:var(--mono); background:var(--surface); border:1px solid var(--line-strong); color:var(--accent-text); border-radius:var(--r-pill); padding:8px 16px; font-weight:700; font-size:18px; white-space:nowrap; } /* ——— Иллюстрация: у файлов прозрачный фон, поэтому герой не «в рамке», а выходит из тёплого света — как оператор под настольной лампой. ——— */ .heroblock{position:relative; display:grid; place-items:center; padding:2px 0 0; margin:4px 0 0;} .heroblock::before{ content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:min(92%, 420px); aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, var(--glow) 0%, transparent 68%); } .hero{display:block; position:relative; margin:0 auto; max-height:30vh;} .heroblock .hero{max-height:22vh;} .hero.small{max-height:22vh;} .greeting{position:relative; text-align:center; margin-top:2px;} .rankline{font-size:27px; font-weight:700; letter-spacing:-.015em; line-height:1.2; margin-top:3px;} .learned{color:var(--text-dim); font-size:19px;} .greeting{font-size:24px; font-weight:700; letter-spacing:-.015em; line-height:1.25; margin:2px 0 0; text-align:center;} /* ——— Шкала освоенного: каждая риска — знак алфавита, как деления на шкале настройки ——— */ .ticks{display:flex; align-items:flex-end; gap:2px; height:24px; margin:10px 0 8px;} .ticks i{flex:1; height:50%; border-radius:2px; background:var(--tick-off);} .ticks i.on{height:100%; background:var(--accent);} /* Полоса-прогресс (используется там, где рисок было бы слишком много) */ .progress{height:12px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; margin:10px 0;} .progress > i{display:block; height:100%; background:var(--accent); border-radius:var(--r-pill); transition:width .4s ease;} /* ——— Пара показателей в подвале карточки ——— */ .stats{display:flex; gap:12px; border-top:1px solid var(--line); margin-top:13px; padding-top:12px;} .stat{flex:1;} .stat{min-width:0;} .stat .eyebrow{white-space:nowrap;} .stat b{display:block; font-family:var(--mono); font-size:30px; font-weight:700; line-height:1.1; color:var(--text); margin-top:4px;} /* ——— Нижняя навигация ——— */ nav#tabs{ position:fixed; left:0; right:0; bottom:0; display:flex; gap:1px; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(0,0,0,.10); padding:6px 4px env(safe-area-inset-bottom); z-index:20; } nav#tabs button{ flex:1 1 0; min-width:0; min-height:var(--tap); border:none; background:none; color:var(--text-dim); font-size:17px; line-height:1.1; padding:8px 1px; margin:0 1px; border-radius:14px; letter-spacing:-.02em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative; } nav#tabs button .ic{font-size:24px; line-height:1;} nav#tabs button .ic svg{width:27px; height:27px; display:block;} nav#tabs button.active{color:var(--accent-text); font-weight:700; background:var(--surface-2);} nav#tabs button.active::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--accent); } /* ——— Викторина «Учиться» ——— */ .options{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:10px;} .opt{ flex:1 1 calc(33.333% - 8px); max-width:calc(33.333% - 7px); min-height:92px; font-size:40px; font-weight:700; border-radius:var(--r); border:1px solid var(--line-strong); background:var(--surface); color:var(--text); box-shadow:var(--shadow); transition:transform .1s ease, background .15s ease; } .options.wide .opt{flex-basis:calc(50% - 6px); max-width:calc(50% - 5px); min-height:104px; font-size:46px;} .opt:active{transform:translateY(1px);} .opt:disabled{opacity:1;} .options.playing .opt{opacity:.4;} .opt.correct, .opt.reveal{background:var(--ok); color:var(--on-ok); border-color:var(--ok); font-weight:800;} .opt.wrong{background:transparent; color:var(--bad); border-color:var(--bad); border-width:2px;} .feedback{min-height:40px; font-size:22px; font-weight:650; margin:10px 0;} .feedback.ok{color:var(--ok);} .feedback.no{color:var(--bad);} .codeline{font-family:var(--mono); font-size:32px; letter-spacing:6px; color:var(--accent-text); font-weight:700;} .codeline.small{font-size:22px; letter-spacing:4px;} .chant{color:var(--text-dim); font-style:italic;} /* ——— Оверлей события ——— */ .overlay{ position:fixed; inset:0; z-index:40; padding:24px; text-align:center; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; } .overlay img{max-height:38vh;} .overlay h2{color:var(--ok);} /* ——— Справочник ——— */ /* Три столбца, а не четыре: при четырёх собственная ширина ячейки с кодом (у «0» это «— — — — —») не влезала в экран, четвёртый столбец обрезался целиком, а у знаков из четырёх-пяти элементов код переносился на две строки. Радиолюбитель, считающий тире в первой строке, получал НЕВЕРНЫЙ код — это ошибка в справочнике, а не косметика. minmax(0,1fr) не даёт содержимому распирать колонку, aspect-ratio убран ради высоты. */ .grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;} .cell{ min-height:104px; padding:10px 6px; border-radius:var(--r-sm); background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--line-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:30px; font-weight:700; gap:3px; color:var(--text); } .cell small{font-family:var(--mono); font-size:17px; color:var(--accent-text); letter-spacing:.5px; font-weight:700; white-space:nowrap;} .cell .cellname{font-size:17px; font-weight:600; color:var(--text-dim); line-height:1.15;} /* ——— Переключатель-сегменты ——— */ .seg{ display:flex; gap:4px; margin:10px 0; padding:4px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); } .seg button{ flex:1; min-height:52px; border-radius:14px; border:1px solid transparent; background:none; color:var(--text-dim); font-weight:650; } .seg button.active{background:var(--surface); color:var(--text); border-color:var(--line-strong); box-shadow:var(--shadow);} /* ——— Ключ ——— */ .keypad{ width:100%; height:200px; border-radius:var(--r-lg); margin-top:12px; background:var(--surface); border:2px solid var(--line-strong); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:var(--text); font-size:22px; font-weight:650; user-select:none; touch-action:none; font-family:inherit; padding:0; text-align:center; transition:background .06s linear, box-shadow .06s linear, color .06s linear; } .keypad.down{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 0 0 12px var(--glow);} .keyout{font-size:22px; font-weight:650; letter-spacing:0; text-align:center; padding:0 16px; color:var(--text);} .keyout.typing{font-family:var(--mono); font-size:38px; letter-spacing:8px; color:var(--accent-text);} .keypad.down .keyout{color:var(--on-accent);} .keytext{ font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:2px; line-height:1.35; text-align:center; word-break:break-word; min-height:48px; padding:6px 4px; color:var(--text); } /* ——— Поля и регуляторы ——— */ input[type=text]{ width:100%; font-size:24px; padding:14px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface); color:var(--text); } label{display:block; font-weight:650; margin-top:14px;} input[type=range]{width:100%; height:44px; accent-color:var(--accent);} .rowflex{display:flex; align-items:center; justify-content:space-between; gap:10px;} .switch{min-width:104px;} .list{list-style:none; padding:0; margin:0;} .list li{display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line);} .list li:last-child{border-bottom:none;} .odometer{font-family:var(--mono); font-size:44px; font-weight:700; color:var(--accent-text); letter-spacing:.02em;} /* ═══ Элементы, добавленные при переработке экранов ═══ */ /* Иконки одной линией наследуют цвет текста и не съезжают относительно строки. */ .icon{flex:none; vertical-align:-.18em;} /* Заголовок экрана: название слева, действие справа — одинаково на всех экранах. */ .screenbar{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px;} .screenbar h2{margin:0;} /* Кнопка-иконка с подписью: тихая, но с полноценной площадью нажатия. */ .iconbtn{ display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--text-dim); font-size:18px; font-weight:600; } /* Третьестепенное действие: выглядит ссылкой, но нажимается как кнопка. */ .linkbtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; margin:8px 0; padding:10px; border:none; background:none; color:var(--text-dim); font-size:19px; font-weight:600; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:5px; } .linkbtn.danger{color:var(--bad); text-decoration-color:color-mix(in srgb, var(--bad) 45%, transparent);} /* Подсказка под заголовком экрана. */ .hint{font-size:19px; margin:0 0 10px;} /* Лампа сигнала: во время звука наливается янтарём. Пустая — не рисуем в ней точку, иначе кажется, что там что-то нажимается. */ .lamp{ width:124px; height:124px; border-radius:50%; margin:16px auto 8px; background:var(--surface-2); border:1px solid var(--line); box-shadow:inset 0 0 0 8px var(--bg); transition:background .04s linear, transform .04s linear, box-shadow .04s linear; } .lamp.on{background:var(--accent); box-shadow:0 0 0 16px var(--glow); transform:scale(1.04);} /* Регулятор: иконки по краям, значение цифрой справа — вместо длинной подписи со скобками. */ .slider{margin:6px 0 0;} .slider input[type=range]{width:100%; margin:0;} .slider-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;} .slider-head label{margin:0; font-size:19px; font-weight:600; color:var(--text-dim);} .slider-head .num{font-size:21px;} .slider-ends{display:flex; justify-content:space-between; color:var(--text-dim); font-size:17px; margin-top:-2px;} .num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent-text);} /* Разбор ошибки: крупный знак, ритм полосками, затем коды и действия. */ .reveal-char{font-size:24px; font-weight:700; margin-bottom:10px;} .reveal-actions{display:flex; gap:10px; margin-top:12px;} .reveal-actions .btn{margin:0;} .trace.centered{justify-content:center;} .trace.big.centered{margin:8px auto 10px;} /* Счётчик ответов под заголовком: делает видимым правило «занятие от 15 ответов». */ .counter{font-size:17px; color:var(--text-dim); line-height:1.25; margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;} .counter.done{color:var(--ok); font-weight:650;} .screenbar > div:first-child{min-width:0;} /* Разбор ошибки — карточкой ПОД сеткой букв. */ .card.reveal{margin-top:12px; text-align:center;} /* Пока читается разбор ошибки, второстепенные органы управления убраны: они не нужны в этот момент и раньше выдавливали кнопку «Дальше» под нижнее меню. */ #screen.revealing .slider, #screen.revealing #help{display:none;} /* Список кодов активного набора (подсказка на занятии). */ .codelist{list-style:none; padding:0; margin:0;} .codelist li{ display:grid; grid-template-columns:2.2ch auto 1fr; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); } .codelist li:last-child{border-bottom:none;} .codelist b{font-size:26px;} .codelist .chant{font-size:18px; text-align:right;} /* «Ключ»: задание крупно, вердикт с ритмами рядом. */ .card.task{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px;} .card.task .btn{margin:0; width:auto; flex:none; min-height:56px; padding:12px 16px;} .taskchar{font-size:52px; font-weight:700; line-height:1.05;} .keyverdict{min-height:88px; margin-top:10px; text-align:center;} .keyverdict .btn{margin:10px 0 0;} .keyverdict .verdict{font-size:21px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px;} .keyverdict.ok .verdict{color:var(--ok);} .keyverdict.no .verdict{color:var(--bad);} .keyverdict .trace{justify-content:center; margin:6px 0;} .keyverdict .cmp{display:grid; grid-template-columns:6.5ch 1fr; align-items:center; gap:12px; margin-top:8px; text-align:left;} .keyverdict .cmp .trace{justify-content:flex-start; margin:0; height:20px; --u:8px;} .keyverdict .cmp .eyebrow{font-size:17px;} /* Карточка знака в «Азбуке». */ .bigchar{font-size:76px; font-weight:800; line-height:1; color:var(--text);} .cardname{font-size:22px; font-weight:650; color:var(--text-dim);} .closebtn{ position:absolute; top:14px; right:14px; width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font-size:22px; } /* Вехи: полученные выделены, остальные приглушены — без эмодзи-галочек. */ .milestones li.done span:first-child{font-weight:650;} .milestones li:not(.done){color:var(--text-dim);} .milestones .mark{color:var(--ok); display:flex;} .milestones li:not(.done) .mark{color:var(--line-strong);} /* Сегменты с иконками (выбор темы) — иконка над подписью, чтобы влезли три кнопки. */ .seg.icons button{flex-direction:column; gap:5px; font-size:17px; min-height:74px; padding:8px 4px; display:flex; align-items:center; justify-content:center; line-height:1.15;} .seg.icons button span{text-align:center;} .avatar.big{width:88px; height:88px;} .intro .card{text-align:left;} .intro .callsign{font-size:30px; text-align:center; margin-bottom:10px;} /* ——— Поддержать проект и написать автору ——— Оба блока намеренно тихие: тон приложения не допускает ни давления, ни ярких призывов. Кнопка доната — обычная кнопка внутри карточки, а не плашка поверх экрана. */ /* Портрет и шильдик по центру, а текст — слева: шесть строк по центру читаются тяжело. */ .support p{margin:6px 0 0; text-align:left;} .support .btn{margin-top:14px;} /* Пояснение в подписи поля не должно быть таким же жирным, как сама подпись. */ label .muted{font-weight:400;} textarea{ width:100%; font-family:inherit; font-size:20px; line-height:1.4; padding:14px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface); color:var(--text); resize:vertical; min-height:120px; } .fb-status{min-height:1.4em; margin:10px 0 0; font-size:19px; color:var(--text-dim);} .fb-status.no{color:var(--bad); font-weight:650;} .fb-status.ok{color:var(--ok); font-weight:650; display:flex; align-items:center; gap:8px; justify-content:center; text-align:left;} /* ——— Доступность: уважать prefers-reduced-motion (§11) ——— */ @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} .lamp.on{transform:none;} }