/* ============================================================================ GoLearn / TOT — design system "Nocturne" (v2, warm-paper theme) Light theme is the default; [data-theme="dark"] on switches. Tokens and component values come from the TOT v2 design canvas. ========================================================================== */ :root { --bg:#f5f2ec; --surface:#fffdf8; --sunk:#eae5da; --text:#26241f; --muted:#5d574c; --faint:#746d60; --line:#dcd5c7; --line-2:#ece7dd; --accent:#2b7366; --accent-strong:#256356; --accent-tint:#dfece7; --accent-soft:#eef5f1; --teal:#2b7366; --teal-tint:#dfece7; --amber:#896612; --amber-tint:#f6eed6; --clay:#a15238; --clay-tint:#f6e6de; --sky:#2e6b99; --sky-tint:#dde8f2; --ok:#2d774b; --ok-tint:#e3efe4; --danger:#a8433c; --danger-tint:#f6e3e1; --on-accent:#ffffff; --card-shadow:0 1px 2px rgba(38,36,31,.04),0 8px 22px rgba(38,36,31,.05); --term-bg:#22201b; --nav-w:242px; --nav-label:inline; /* aliases kept for legacy markup that still references the old names */ --bg-secondary:var(--bg); --bg-card:var(--surface); --bg-elevated:var(--sunk); --border:var(--line); --border-strong:var(--faint); --text-muted:var(--muted); --text-dim:var(--faint); --accent-hover:var(--accent-strong); --accent-2:var(--clay); --green:var(--ok); --green-bg:var(--ok-tint); --yellow:var(--amber); --yellow-bg:var(--amber-tint); --red:var(--danger); --red-bg:var(--danger-tint); --purple:var(--accent); --code-bg:var(--sunk); --radius:14px; --radius-sm:9px; --shadow:var(--card-shadow); --glow:0 10px 26px rgba(47,125,110,.16); --grad:linear-gradient(135deg,var(--accent),var(--teal)); --grad-soft:var(--accent-soft); } :root[data-theme="dark"], [data-theme="dark"] { --bg:#1c1b18; --surface:#24231f; --sunk:#191816; --text:#ece7dd; --muted:#a8a193; --faint:#918a7a; --line:#38352e; --line-2:#2b2924; --accent:#7cc3b1; --accent-strong:#96d2c2; --accent-tint:rgba(124,195,177,.16); --accent-soft:rgba(124,195,177,.08); --teal:#7cc3b1; --teal-tint:rgba(124,195,177,.16); --amber:#d5b26a; --amber-tint:rgba(213,178,106,.15); --clay:#d5947a; --clay-tint:rgba(213,148,122,.15); --sky:#84b6df; --sky-tint:rgba(132,182,223,.16); --ok:#84c193; --ok-tint:rgba(132,193,147,.15); --danger:#dd8b83; --danger-tint:rgba(221,139,131,.15); --on-accent:#1c1b18; --card-shadow:0 0 0 1px var(--line); --term-bg:#171613; --code-bg:#15140f; --glow:0 0 0 1px var(--accent); } [data-rail="on"] { --nav-w:70px; --nav-label:none; } /* — reset / base — */ *, *::before, *::after { box-sizing:border-box; } html, body { height:100%; } body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } a { color:var(--accent); text-decoration:none; } a:hover { color:var(--accent-strong); } input, textarea, button, select { font-family:inherit; } h1, h2, h3, h4, h5, h6 { margin:0; line-height:1.15; letter-spacing:-.015em; font-weight:700; } code, pre, .mono { font-family:ui-monospace,'JetBrains Mono',Menlo,'SF Mono',monospace; } *::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } ::selection { background:color-mix(in srgb, var(--accent) 26%, transparent); } @keyframes v2-page { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } @keyframes v2-rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } @keyframes v2-fade { from{opacity:0} to{opacity:1} } @keyframes v2-line { from{transform:scaleY(0)} to{transform:scaleY(1)} } @keyframes v2-pop { 0%{transform:scale(.7);opacity:0} 62%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} } @keyframes v2-ring { from{box-shadow:0 0 0 0 var(--ok-tint)} to{box-shadow:0 0 0 20px rgba(0,0,0,0)} } @media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ── app shell: sidebar + header + main ────────────────────────────────── */ .app { display:flex; min-height:100vh; } .side { width:var(--nav-w); flex:none; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line); position:sticky; top:0; height:100vh; transition:width .26s cubic-bezier(.4,0,.2,1); } .side-top { display:flex; align-items:center; gap:10px; padding:16px 14px 18px; } .brand-mark { width:30px; height:30px; flex:none; border-radius:9px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-size:13px; font-family:ui-monospace,monospace; } .brand-text { font-size:16px; letter-spacing:.18em; display:var(--nav-label); } .side-rail-btn { width:26px; height:26px; flex:none; display:var(--nav-label); place-items:center; border:0; border-radius:7px; background:transparent; color:var(--faint); cursor:pointer; } .side-rail-btn:hover { background:var(--accent-soft); color:var(--accent); } .side-nav { flex:1; overflow:auto; padding-bottom:8px; } .nav-group { margin-bottom:14px; } .nav-group-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding:0 18px 7px; display:var(--nav-label); } .nav-items { display:flex; flex-direction:column; gap:2px; padding:0 8px; } .nav-link { display:flex; align-items:center; gap:12px; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; text-decoration:none; font-size:14px; text-align:left; transition:background .16s ease, color .16s ease; } .nav-link i { font-size:18px; flex:none; } .nav-link span { display:var(--nav-label); white-space:nowrap; } .nav-link:hover { background:var(--accent-soft); color:var(--text); } .nav-link.active { background:var(--accent-tint); color:var(--accent); } .side-user { display:flex; align-items:center; gap:10px; padding:12px; border:0; border-top:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer; text-align:left; text-decoration:none; transition:background .16s ease; } .side-user:hover { background:var(--accent-soft); } .avatar { width:30px; height:30px; flex:none; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-size:12px; text-transform:uppercase; } .side-user-name { display:var(--nav-label); min-width:0; } .side-user-name b { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .side-user-name small { font-size:11px; color:var(--faint); } .shell { flex:1; min-width:0; display:flex; flex-direction:column; } .topbar { height:58px; flex:none; display:flex; align-items:center; gap:14px; padding:0 22px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20; } .topbar-menu { width:32px; height:32px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transition:all .16s ease; } .topbar-menu:hover { border-color:var(--accent); color:var(--accent); } .crumbs { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); min-width:0; } .crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--accent); } .crumbs .cur { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .crumbs i { font-size:11px; color:var(--faint); } .topbar-spacer { flex:1; } .topbar-search { display:flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid var(--line); border-radius:9px; background:var(--bg); min-width:220px; transition:border-color .18s ease; } .topbar-search:focus-within { border-color:var(--accent); } .topbar-search i { font-size:15px; color:var(--faint); } .topbar-search input { border:0; background:transparent; color:var(--text); font-size:13px; outline:none; width:100%; } .icon-btn { width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; transition:all .18s ease; } .icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .icon-btn.danger:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-tint); } .main { flex:1; min-height:0; } .page { max-width:1140px; margin:0 auto; padding:32px 26px 64px; animation:v2-page .38s ease forwards; } .page-narrow { max-width:1000px; } .container { max-width:1140px; margin:0 auto; padding:0 26px; } /* — headings / page head — */ .page-head { margin-bottom:22px; } .page-head h1 { font-size:32px; letter-spacing:-.022em; } .page-head p, .page-sub { color:var(--muted); font-size:14px; margin-top:6px; } .section-title { display:flex; align-items:center; gap:12px; margin:30px 0 12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); } .section-title::after { content:""; flex:1; height:1px; background:linear-gradient(to right,var(--line),transparent); } .rule { height:1px; border:0; margin:22px 0; background:linear-gradient(to right,transparent,var(--line) 48px,var(--line) calc(100% - 48px),transparent); } /* — buttons — */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:14px; font-weight:500; line-height:1.2; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .18s ease, border-color .18s ease, transform .12s ease, color .18s ease; } .btn:hover { background:var(--accent-soft); } .btn:active { transform:translateY(1px); } .btn:disabled { opacity:.5; cursor:not-allowed; } .btn i { font-size:16px; } .btn-primary { border-color:var(--accent); background:var(--accent); color:var(--on-accent); font-weight:600; } .btn-primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); } /* тональная кнопка — прежний мягкий стиль, для второстепенных действий */ .btn-tonal { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); } .btn-tonal:hover { background:var(--accent-tint); } .btn-success { border-color:var(--ok); background:var(--ok-tint); color:var(--ok); } .btn-success:hover { background:color-mix(in srgb,var(--ok) 18%,transparent); } .btn-teal { border-color:var(--teal); background:var(--teal-tint); color:var(--teal); } .btn-danger { border-color:var(--danger); background:var(--danger-tint); color:var(--danger); } .btn-outline { border-color:var(--line); background:transparent; } .btn-ghost { border-color:transparent; background:transparent; color:var(--muted); padding:8px 10px; } .btn-ghost:hover { color:var(--accent); background:var(--accent-soft); } .btn-sm { padding:8px 14px; font-size:13px; } .btn-block { width:100%; } /* — cards — */ .card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--card-shadow); } .card-hover { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card-hover:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--glow); } .kicker { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } /* — chips / tags / badges — */ .chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.02em; padding:4px 10px; border-radius:20px; background:var(--sunk); color:var(--muted); white-space:nowrap; } .chip-accent { background:var(--accent-tint); color:var(--accent); } .chip-teal { background:var(--teal-tint); color:var(--teal); } .chip-amber { background:var(--amber-tint); color:var(--amber); } .chip-clay { background:var(--clay-tint); color:var(--clay); } .chip-sky { background:var(--sky-tint); color:var(--sky); } .chip-ok { background:var(--ok-tint); color:var(--ok); } .chip-uc { text-transform:uppercase; letter-spacing:.1em; } .badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; } .badge-completed, .badge-ok { background:var(--ok-tint); color:var(--ok); } .badge-in-progress, .badge-in_progress { background:var(--amber-tint); color:var(--amber); } .badge-not-started, .badge-not_started { background:var(--sunk); color:var(--faint); } /* — progress — */ .progress-bar { height:5px; border-radius:3px; background:var(--sunk); overflow:hidden; margin-top:8px; } .progress-fill { height:100%; border-radius:3px; background:linear-gradient(to right,var(--accent),var(--teal)); transition:width .6s cubic-bezier(.4,0,.2,1); } /* — forms — */ .field { margin-bottom:13px; } .field label, .field-label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; } .input, input.input, textarea.input, select.input { width:100%; min-height:40px; padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:14px; outline:none; transition:border-color .18s ease; } .input:focus-visible, .input:focus { border-color:var(--accent); } textarea.input { min-height:110px; resize:vertical; line-height:1.6; } /* — stat tiles — */ .stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; } .stat { padding:15px 17px; border-radius:12px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--card-shadow); transition:transform .2s ease; } .stat:hover { transform:translateY(-2px); } .stat-head { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); } .stat-dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--accent); } .stat-value { display:flex; align-items:baseline; gap:3px; margin-top:8px; } .stat-value b { font-size:26px; font-weight:600; letter-spacing:-.02em; } .stat-value small { font-size:13px; color:var(--faint); } /* — course cards — */ .courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; } .course-card { display:flex; flex-direction:column; text-align:left; padding:17px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--card-shadow); color:var(--text); cursor:pointer; text-decoration:none; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .course-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--glow); } .course-card-top { display:flex; align-items:center; gap:8px; } .course-card-title { font-size:16px; margin-top:12px; min-height:44px; } .course-card-meta { font-size:12.5px; color:var(--muted); margin-top:auto; padding-top:8px; } /* — lesson article — */ .content-area, .lesson-content { font-size:16.5px; line-height:1.74; color:var(--text); } .content-area h1, .lesson-content h1 { font-size:30px; margin:28px 0 12px; } .content-area h2, .lesson-content h2 { font-size:24px; margin:30px 0 10px; } .content-area h3, .lesson-content h3 { font-size:22px; margin:32px 0 10px; } .content-area p, .lesson-content p { margin:0 0 14px; } .content-area a, .lesson-content a { border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent); } .content-area code, .lesson-content code { font-family:ui-monospace,Menlo,monospace; font-size:.9em; padding:2px 6px; border-radius:6px; background:var(--sunk); } .content-area pre, .lesson-content pre { margin:18px 0; padding:16px 18px; border-radius:12px; background:var(--term-bg); color:#e3ded2; font-family:ui-monospace,Menlo,monospace; font-size:14px; line-height:1.7; overflow:auto; } .content-area pre code, .lesson-content pre code { background:none; padding:0; color:inherit; } .content-area ul, .content-area ol, .lesson-content ul, .lesson-content ol { margin:0 0 16px 22px; } .content-area li, .lesson-content li { margin-bottom:6px; } .content-area blockquote, .lesson-content blockquote { margin:16px 0; padding:12px 16px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 10px 10px 0; color:var(--muted); } .content-area img, .lesson-content img { max-width:100%; height:auto; border-radius:10px; margin:16px 0; } .content-area table, .lesson-content table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; } .content-area th, .content-area td, .lesson-content th, .lesson-content td { border:1px solid var(--line); padding:8px 12px; text-align:left; } .content-area th, .lesson-content th { background:var(--sunk); } .content-area strong, .lesson-content strong { font-weight:700; } /* callout used in lessons */ .callout { margin:20px 0; padding:16px 18px; border-radius:12px; } .callout-title { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; } .callout-amber { background:var(--amber-tint); border:1px solid color-mix(in srgb,var(--amber) 25%,transparent); } .callout-amber .callout-title { color:var(--amber); } /* — tables — */ .table { width:100%; border-collapse:collapse; font-size:14px; } .table th { text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px; border-bottom:1px solid var(--line); } .table td { padding:11px 10px; border-bottom:1px solid var(--line-2); } .table tbody tr:hover { background:color-mix(in srgb,var(--text) 4%,transparent); } /* — hint / check-result blocks (labs) — */ .hint-toggle { background:transparent; border:0; color:var(--accent); font-size:13px; cursor:pointer; padding:0; } .hint-content { display:none; margin-top:8px; padding:12px 14px; border-radius:11px; background:var(--amber-tint); font-size:13.5px; } .check-result { display:none; margin-top:14px; padding:14px 16px; border-radius:12px; font-size:14px; } .check-result.pass { display:block; background:var(--ok-tint); color:var(--ok); } .check-result.fail { display:block; background:var(--danger-tint); color:var(--danger); } .check-head { font-weight:600; } .check-out { margin-top:8px; padding:8px 10px; background:var(--code-bg); border-radius:8px; font-family:ui-monospace,Menlo,monospace; font-size:.92em; white-space:pre-wrap; max-height:220px; overflow:auto; color:var(--muted); } .explanation { margin-top:8px; padding:12px 14px; border-radius:11px; background:var(--accent-soft); color:var(--muted); font-size:.9em; } /* — breadcrumb (in-page, legacy) — */ .breadcrumb { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; font-size:13px; color:var(--faint); } .breadcrumb a { color:var(--muted); } .breadcrumb a:hover { color:var(--accent); } /* — misc utils — */ .muted { color:var(--muted); } .faint { color:var(--faint); } .mono { font-family:ui-monospace,Menlo,monospace; } .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .spacer { flex:1; } .hidden { display:none !important; } /* — toast — */ .toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); padding:12px 18px; border-radius:11px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow); font-size:14px; z-index:100; display:none; align-items:center; gap:10px; } .toast.show { display:flex; animation:v2-rise .3s ease forwards; } @media (max-width:860px) { .side { position:fixed; z-index:60; transform:translateX(-100%); transition:transform .26s ease; box-shadow:var(--card-shadow); } .side.open { transform:none; } .topbar-search { display:none; } .page { padding:24px 16px 56px; } }