/* ============================================================ IELTS·60 — стили. Токены: эталонная dataviz-палитра. Темы: авто (prefers-color-scheme) + ручной data-theme на . ============================================================ */ :root { --plane: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --hairline: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --accent: #2a78d6; --accent-soft: rgba(42, 120, 214, 0.16); --on-accent: #ffffff; --good: #006300; --good-badge: #0ca30c; --warn: #fab219; --crit: #d03b3b; --c-listening: #2a78d6; --c-reading: #1baf7a; --c-writing: #eda100; --c-speaking: #008300; --c-vocab: #4a3aa7; --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 4px 16px rgba(11, 11, 11, 0.05); } @media (prefers-color-scheme: dark) { :root { --plane: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --hairline: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10); --accent: #3987e5; --accent-soft: rgba(57, 135, 229, 0.22); --good: #0ca30c; --c-listening: #3987e5; --c-reading: #199e70; --c-writing: #c98500; --c-speaking: #008300; --c-vocab: #9085e9; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3); } } :root[data-theme="light"] { --plane: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --hairline: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --accent: #2a78d6; --accent-soft: rgba(42, 120, 214, 0.16); --good: #006300; --good-badge: #0ca30c; --c-listening: #2a78d6; --c-reading: #1baf7a; --c-writing: #eda100; --c-speaking: #008300; --c-vocab: #4a3aa7; --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 4px 16px rgba(11, 11, 11, 0.05); } :root[data-theme="dark"] { --plane: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781; --hairline: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10); --accent: #3987e5; --accent-soft: rgba(57, 135, 229, 0.22); --good: #0ca30c; --c-listening: #3987e5; --c-reading: #199e70; --c-writing: #c98500; --c-speaking: #008300; --c-vocab: #9085e9; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--plane); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; } input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--baseline); border-radius: 8px; padding: 7px 10px; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Каркас ---------- */ .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; } .topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--plane) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); } .topbar-inner { display: flex; align-items: center; gap: 14px; padding: 10px 0; flex-wrap: wrap; } .brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .brand b { font-size: 18px; letter-spacing: 0.2px; } .brand span { color: var(--muted); font-size: 12px; } .nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .nav::-webkit-scrollbar { display: none; } .nav button { background: none; border: 0; cursor: pointer; padding: 7px 11px; border-radius: 8px; color: var(--ink-2); white-space: nowrap; font-size: 14px; } .nav button:hover { background: var(--accent-soft); color: var(--ink); } .nav button.on { background: var(--accent); color: var(--on-accent); } .chips { display: flex; gap: 6px; align-items: center; } .chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); } .chip b { color: var(--ink); font-weight: 600; } .chip.hot { border-color: var(--warn); } .chip.crit { border-color: var(--crit); color: var(--crit); } .iconbtn { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; cursor: pointer; line-height: 1; } .iconbtn:hover { background: var(--accent-soft); } main { padding: 20px 0 90px; } /* ---------- Карточки и сетки ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); } .card + .card, .grid + .card, .card + .grid { margin-top: 14px; } .grid { display: grid; gap: 14px; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } h1 { font-size: 22px; margin: 0 0 4px; text-wrap: balance; } h2 { font-size: 16px; margin: 0 0 10px; } h3 { font-size: 14px; margin: 0 0 6px; } .sub { color: var(--ink-2); font-size: 13.5px; margin: 0; } .eyebrow { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--muted); font-weight: 600; margin: 0 0 6px; } .mut { color: var(--muted); } .small { font-size: 12.5px; } hr.sep { border: 0; border-top: 1px solid var(--hairline); margin: 12px 0; } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: 9px; padding: 8px 15px; cursor: pointer; font-weight: 600; font-size: 14px; } .btn:hover { filter: brightness(1.07); } .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--baseline); } .btn.ghost:hover { background: var(--accent-soft); filter: none; } .btn.danger { background: var(--crit); } .btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 7px; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ---------- Стат-плитки ---------- */ .tile { padding: 14px 16px; } .tile .v { font-size: 26px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; } .tile .d { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } /* ---------- Прогресс ---------- */ .bar { height: 12px; border-radius: 4px; background: var(--hairline); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.5s ease; } .skill-row { display: grid; grid-template-columns: 120px 1fr 76px; gap: 10px; align-items: center; padding: 5px 0; } .skill-row .nm { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 7px; align-items: center; } .skill-row .val { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; } /* ---------- Кольцо квеста ---------- */ .ring { position: relative; width: 118px; height: 118px; flex: none; } .ring svg { transform: rotate(-90deg); } .ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ring .in b { font-size: 22px; font-variant-numeric: tabular-nums; } .ring .in span { font-size: 11px; color: var(--muted); } .hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .hero .body { flex: 1; min-width: 240px; } .quote { font-style: italic; color: var(--muted); font-size: 13px; margin-top: 10px; } .callout { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 13.5px; } .callout.warn { border-left-color: var(--warn); background: rgba(250, 178, 25, 0.12); } /* ---------- Карта недель ---------- */ .wmap { display: flex; flex-direction: column; gap: 7px; } .wmap-row { display: flex; align-items: center; gap: 7px; } .wmap-row .lb { width: 68px; font-size: 12px; color: var(--muted); flex: none; } .cell { width: 30px; height: 30px; border-radius: 7px; background: var(--surface); border: 1px solid var(--baseline); font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0; } .cell:hover { border-color: var(--accent); color: var(--ink); } .cell.full { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .cell.part { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); } .cell.today { outline: 2px solid var(--accent); outline-offset: 1px; } .cell.late { border-color: var(--warn); } /* ---------- Программа ---------- */ .week-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; } .week-head h2 { margin: 0; } .week-head .pr { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .days-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .day-card { text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .day-card:hover { border-color: var(--accent); } .day-card.done { border-color: var(--accent); background: var(--accent-soft); } .day-card .t { font-weight: 600; font-size: 13.5px; line-height: 1.35; } .day-card .m { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .day-card.today-mark { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---------- День ---------- */ .task { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--hairline); } .task:first-child { border-top: 0; } .task.done .tt { text-decoration: line-through; color: var(--muted); } .task.done .td { color: var(--muted); } .tcheck { width: 26px; height: 26px; flex: none; margin-top: 1px; border-radius: 8px; border: 2px solid var(--baseline); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--on-accent); transition: background 0.15s, border-color 0.15s; } .tcheck:hover { border-color: var(--accent); } .task.done .tcheck { background: var(--accent); border-color: var(--accent); } .tbody { flex: 1; min-width: 0; } .tt { font-weight: 600; font-size: 14.5px; } .tt .ico { margin-right: 6px; } .td { font-size: 13.5px; color: var(--ink-2); margin: 3px 0 0; } .tmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; } .lnk { font-size: 12px; border: 1px solid var(--baseline); border-radius: 999px; padding: 2px 10px; color: var(--accent); background: var(--surface); } .lnk:hover { border-color: var(--accent); text-decoration: none; background: var(--accent-soft); } .mins { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 4px; } .typechip { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; color: var(--on-accent); font-weight: 600; } .daynav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } /* ---------- Моки ---------- */ .mock-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .mock-form .fld { display: flex; flex-direction: column; gap: 4px; } .mock-form label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .mock-form select, .mock-form input { min-width: 86px; } table.mocks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } table.mocks th { text-align: left; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--hairline); } table.mocks td { padding: 8px; border-bottom: 1px solid var(--hairline); font-size: 14px; } table.mocks td.ov { font-weight: 700; } .tbl-scroll { overflow-x: auto; } .delbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; } .delbtn:hover { color: var(--crit); background: var(--accent-soft); } .chart-wrap { position: relative; } .chart-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; display: none; min-width: 130px; } .chart-tip b { font-variant-numeric: tabular-nums; } .chart-tip .r { display: flex; justify-content: space-between; gap: 12px; } /* ---------- Словарь и ошибки ---------- */ .inline-form { display: flex; gap: 8px; flex-wrap: wrap; } .inline-form input, .inline-form select { flex: 1; min-width: 130px; } .wordrow, .errrow { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--hairline); } .wordrow:first-child, .errrow:first-child { border-top: 0; } .star { background: none; border: 0; cursor: pointer; font-size: 17px; padding: 0 4px; line-height: 1.3; } .wordrow .en { font-weight: 600; } .wordrow .ru, .wordrow .ex { color: var(--ink-2); font-size: 13.5px; } .errrow .fix { color: var(--good); font-size: 13.5px; } .modchip { font-size: 11px; border-radius: 999px; padding: 2px 9px; background: var(--accent-soft); color: var(--ink-2); white-space: nowrap; border: 1px solid var(--border); } .filterrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; } .filterrow button { border: 1px solid var(--baseline); background: var(--surface); border-radius: 999px; padding: 3px 11px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); } .filterrow button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* тренировка слов */ .traincard { text-align: center; padding: 34px 18px; } .traincard .w { font-size: 28px; font-weight: 700; } .traincard .a { font-size: 17px; color: var(--ink-2); margin-top: 8px; } .traincard .ex { font-style: italic; color: var(--muted); margin-top: 6px; font-size: 14px; } .trainbtns { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } /* ---------- Награды ---------- */ .ach-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .ach { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; background: var(--surface); } .ach .ic { font-size: 26px; line-height: 1.1; filter: grayscale(0); } .ach .nm { font-weight: 650; font-size: 13.5px; } .ach .ds { font-size: 12.5px; color: var(--ink-2); } .ach .xp { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; } .ach.locked { opacity: 0.55; } .ach.locked .ic { filter: grayscale(1); } .ach.new { border-color: var(--accent); } /* ---------- Тосты ---------- */ #toasts { position: fixed; top: 14px; right: 14px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 320px; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); box-shadow: var(--shadow); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; animation: toast-in 0.25s ease; } .toast.gold { border-left-color: var(--warn); } @keyframes toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* ---------- Помодоро ---------- */ #pomo-btn { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; font-size: 21px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; } #pomo-btn.running { font-size: 13px; font-weight: 700; } #pomo-panel { position: fixed; right: 18px; bottom: 84px; z-index: 60; width: 250px; display: none; } #pomo-panel.open { display: block; } .pomo-time { font-size: 40px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; margin: 6px 0; } .pomo-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } /* ---------- Модал ---------- */ .overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal { max-width: 470px; width: 100%; max-height: 90vh; overflow: auto; } .modal .fld { margin: 12px 0; } .modal .fld label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; } .modal .fld input { width: 100%; } /* ---------- Настройки ---------- */ .set-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--hairline); } .set-row:first-of-type { border-top: 0; } .set-row label { min-width: 170px; color: var(--ink-2); font-size: 14px; } #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; } /* ---------- Индикатор синхронизации (js/store.js) ---------- */ #sync-bar { display: none; position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: min(420px, calc(100vw - 32px)); align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-left: 3px solid var(--warn); box-shadow: var(--shadow); font-size: 13.5px; } #sync-bar.show { display: flex; } #sync-bar.err { border-left-color: var(--crit); } /* ---------- Адаптив и доступность ---------- */ @media (max-width: 720px) { .grid.cols-2 { grid-template-columns: 1fr; } .skill-row { grid-template-columns: 96px 1fr 64px; } .chips .chip.opt { display: none; } .cell { width: 26px; height: 26px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }