/* Core design tokens */ /* :root — строгая спецификация ТЗ (Этап 1) */ :root { --primary-blue:#2E5BBA; --secondary-gray:#8B8680; --accent-black:#000; --primary-blue-light:#4A73C8; --primary-blue-dark:#1E3D8F; --gray-light:#B5B2AE; --white:#FFF; --success:#28A745; --error:#DC3545; --warning:#FFC107; --border-radius:8px; --border-radius-large:12px; --spacing-xs:8px; --spacing-sm:16px; --spacing-md:24px; --spacing-lg:32px; --spacing-xl:40px; --transition:all .3s cubic-bezier(.25,.46,.45,.94); --shadow-sm:0 1px 3px rgba(0,0,0,.1); --shadow-md:0 4px 6px rgba(0,0,0,.1); --shadow-lg:0 10px 25px rgba(0,0,0,.15); --shadow-focus:0 0 0 3px rgba(46,91,186,.1); --font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-size-base:16px; --font-size-4xl:2.5rem; --font-size-3xl:2rem; --font-size-2xl:1.5rem; --content-max-width:1000px; --sidebar-width:320px; } *{box-sizing:border-box;margin:0;padding:0;}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--accent-black);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* Utility */ .hidden{display:none !important;} /* Улучшенный режим (опционально включается добавлением класса .ui-enhanced на ) */ body.ui-enhanced { --content-max-width:1100px; --font-size-base:18px; --font-size-4xl:2.6rem; --font-size-3xl:2.1rem; --font-size-2xl:1.55rem; background:linear-gradient(135deg,#f5f7fb 0%,#eef2f9 40%,#e9edf5 70%,#e7ecf7 100%); } /* На десктопах расширяем ленту контента дополнительно (≈ +25% от прежних значений) */ @media (min-width:1280px){ body.ui-enhanced{ --content-max-width:1265px; } } body.ui-enhanced .section-card{box-shadow:var(--shadow-md);} body.ui-enhanced .section-card:hover{box-shadow:var(--shadow-lg);} .sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--white);border-right:1px solid rgba(0,0,0,.08);padding:var(--spacing-lg);overflow-y:auto;} .sidebar::-webkit-scrollbar{width:10px;} .sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:8px;} .sidebar::-webkit-scrollbar-track{background:transparent;} .sidebar-title{font-size:1.25rem;line-height:1.25;margin:2px 0 var(--spacing-lg);font-weight:700;letter-spacing:.01em;color:#222;} body.ui-enhanced .sidebar-title{font-size:1.3rem;margin:4px 0 var(--spacing-lg);} .sidebar-menu{list-style:none;display:flex;flex-direction:column;gap:4px;} .sidebar-group{margin:12px 0 4px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08);} .sidebar-group-title{display:block;font-size:.8rem;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;margin:2px 0 4px;} .sidebar-link{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 14px;text-decoration:none;color:var(--accent-black);border-radius:10px;min-height:42px;transition:var(--transition);border-left:3px solid transparent;} .sidebar-link span:first-child{flex:1;min-width:0;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .sidebar-link:hover{background:rgba(46,91,186,.06);color:var(--primary-blue);border-left-color:rgba(46,91,186,.45);} .sidebar-link.active{background:rgba(46,91,186,.12);color:var(--primary-blue);font-weight:600;border-left-color:var(--primary-blue);} .test-status{font-size:.85rem;opacity:.9;color:#9aa2b1;} .test-status.done{color:var(--success);} .sidebar-link.locked{opacity:.65;} .progress-overview{margin:12px 0 var(--spacing-md);} .progress-text{font-size:.9rem;color:#333;} .main-content{margin-left:var(--sidebar-width);min-height:100vh;} .content-container{max-width:var(--content-max-width);margin:0 auto;padding:var(--spacing-xl);} .title-main{font-size:var(--font-size-4xl);margin:0 0 var(--spacing-xl);} .title-section{font-size:var(--font-size-3xl);margin:var(--spacing-xl) 0 var(--spacing-lg);} .text-body{line-height:1.6;margin:0 0 var(--spacing-md);} .card{background:var(--white);padding:var(--spacing-lg);border-radius:var(--border-radius-large);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg);} .btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius);font-size:1rem;cursor:pointer;min-height:44px;transition:var(--transition);} .btn-primary{background:var(--primary-blue);color:#fff;} .btn-primary:hover{background:var(--primary-blue-light);} .btn-secondary{background:transparent;border:1px solid var(--primary-blue);color:var(--primary-blue);} .btn-secondary:hover{background:var(--primary-blue);color:#fff;} .progress-bar{width:100%;height:8px;background:var(--gray-light);border-radius:4px;overflow:hidden;margin-top:var(--spacing-sm);} .progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-light));width:0;transition:width .6s;} .course-stats{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);} .stat-item{flex:1 1 160px;} .stat-number{display:block;font-size:1.5rem;font-weight:600;} .sections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--spacing-md);} .section-card{background:var(--white);padding:calc(var(--spacing-md) + 4px) var(--spacing-lg);border-radius:var(--border-radius-large);box-shadow:var(--shadow-sm);cursor:pointer;transition:var(--transition);} .section-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);} .section-title{font-size:1.15rem;margin-bottom:10px;} .section-card.completed{border:1px solid rgba(40,167,69,.35);} /* Breadcrumbs */ .breadcrumb{font-size:.9rem;color:#6b7280;margin-bottom:var(--spacing-md);} .breadcrumb a{color:var(--primary-blue);text-decoration:none;} .breadcrumb a:hover{text-decoration:underline;} /* Markdown / parsed content helpers */ #content,#md-content{line-height:1.6;font-size:calc(var(--font-size-base) + 2pt);} #content h1,#content h2,#content h3,#md-content h1,#md-content h2,#md-content h3{scroll-margin-top:80px;} #content h4,#md-content h4{margin:24px 0 12px;font-size:1.05rem;} #content h5,#md-content h5{margin:20px 0 10px;font-size:1rem;color:#111;font-weight:600;} #content h6,#md-content h6{margin:18px 0 8px;font-size:.95rem;color:#222;font-weight:600;} #content h1:first-child,#content h2:first-child,#content h3:first-child,#md-content h1:first-child,#md-content h2:first-child,#md-content h3:first-child{margin-top:0;} .text-bold,strong{font-weight:600;} .text-italic,em{font-style:italic;} #content ul,#md-content ul,#content ol,#md-content ol{list-style:disc;margin:var(--spacing-md) 0 var(--spacing-md);padding-left:1.4em;} #content ol,#md-content ol{list-style:decimal;} #content li,#md-content li{margin:0 0 4px;} #content p,#md-content p{margin:0 0 16px;} #content p:last-child,#md-content p:last-child{margin-bottom:0;} .card > .title-section:first-child,.card > .title-main:first-child{margin-top:0;} #content code,#md-content code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:rgba(0,0,0,.04);padding:2px 5px;border-radius:4px;font-size:.9em;} #content pre code,#md-content pre code{display:block;padding:var(--spacing-sm);overflow:auto;} /* Blockquote & horizontal rule */ blockquote{border-left:4px solid var(--primary-blue);padding:8px 12px;margin:16px 0;background:rgba(46,91,186,.04);border-radius:6px 8px 8px 6px;} blockquote p{margin:0 0 8px;} blockquote p:last-child{margin-bottom:0;} .md-hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:20px 0;} /* Heading anchors */ .heading-anchor{display:inline-block;margin-left:-24px;padding:0 6px;opacity:0;color:#9aa2b1;text-decoration:none;} h1:hover .heading-anchor,h2:hover .heading-anchor,h3:hover .heading-anchor,h4:hover .heading-anchor,h5:hover .heading-anchor,h6:hover .heading-anchor{opacity:1;} /* Toast при копировании ссылки */ .copy-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);background:rgba(17,25,40,.92);color:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow-md);opacity:0;transition:var(--transition);z-index:9999;font-size:.9rem;} .copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0);} @media (max-width:767px){ .heading-anchor{margin-left:-18px;} } /* Markdown tables */ .table-responsive{width:100%;overflow:auto;border:1px solid rgba(0,0,0,.08);border-radius:8px;margin:var(--spacing-md) 0;background:var(--white);} .md-table{width:100%;border-collapse:collapse;min-width:560px;} .md-table thead th{position:sticky;top:0;background:#f8fafc;border-bottom:1px solid rgba(0,0,0,.08);padding:10px;font-weight:600;text-align:left;} .md-table tbody td{border-top:1px solid rgba(0,0,0,.06);padding:10px;vertical-align:top;} .md-table tr:nth-child(even) td{background:rgba(0,0,0,.015);} .md-table .align-left{text-align:left;} .md-table .align-center{text-align:center;} .md-table .align-right{text-align:right;} /* Тестовая система */ .test-container{margin-top:var(--spacing-xl);font-size:calc(var(--font-size-base) + 2pt);line-height:1.6;} .test-form{display:flex;flex-direction:column;gap:var(--spacing-lg);} .test-question{border:1px solid rgba(0,0,0,.06);padding:var(--spacing-md);border-radius:var(--border-radius-large);background:var(--white);box-shadow:var(--shadow-sm);} .question-title{font-size:1.05em;margin:0 0 var(--spacing-xs);font-weight:600;} .question-text{margin:0 0 var(--spacing-sm);font-weight:500;} .radio-group{display:flex;flex-direction:column;gap:10px;} .radio-option{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--border-radius);} .radio-option.correct{background:rgba(40,167,69,.08);} .radio-option.wrong{background:rgba(220,53,69,.08);} .explanation{margin-top:var(--spacing-sm);font-size:.9rem;color:var(--secondary-gray);} .test-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);} .test-result{margin-top:var(--spacing-xl);} .result-summary{padding:var(--spacing-md);border-radius:var(--border-radius);background:var(--white);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.06);} .result-summary.passed{border-color:var(--success);} .result-summary.failed{border-color:var(--error);} .radio-option.correct span{font-weight:600;} @media (max-width:1023px){.sidebar{transform:translateX(-100%);transition:var(--transition);} .sidebar.open{transform:translateX(0);} .main-content{margin-left:0;} .content-container{padding:var(--spacing-md);} } @media (max-width:767px){.content-container{padding:var(--spacing-sm);} .btn{width:100%;} .sidebar-link span:first-child{line-clamp:1;-webkit-line-clamp:1;} } /* Overlay для мобильного меню */ .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:saturate(120%) blur(1px);display:none;} .sidebar.open + .sidebar-overlay{display:block;} /* A11y: уважение системной настройки уменьшения анимаций */ @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important} } /* ===== Тёмная тема ===== */ body[data-theme="dark"]{ --accent-black:#E5E7EB; --white:#0f172a; --gray-light:#334155; background:#0b1220; } body.ui-enhanced[data-theme="dark"]{ background:linear-gradient(135deg,#0b1220 0%,#0e1526 50%,#0b1220 100%); } body[data-theme="dark"] .sidebar{ background:var(--white); border-right:1px solid rgba(255,255,255,.08); } body[data-theme="dark"] .sidebar-link:hover{ background:rgba(46,91,186,.18); color:#cfe0ff; border-left-color:rgba(46,91,186,.6); } body[data-theme="dark"] .sidebar-link.active{ background:rgba(46,91,186,.22); color:#d9e6ff; border-left-color:var(--primary-blue);} body[data-theme="dark"] .progress-bar{ background:#1f2937; } body[data-theme="dark"] .progress-text{ color:#cbd5e1; } body[data-theme="dark"] .card{ background:var(--white); box-shadow:none; border:1px solid rgba(255,255,255,.06); } body[data-theme="dark"] .result-summary{ border-color:rgba(255,255,255,.12); background:var(--white); } body[data-theme="dark"] .table-responsive{ border-color:rgba(255,255,255,.12); } body[data-theme="dark"] .md-table thead th{ background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.12); } body[data-theme="dark"] .md-table tbody td{ border-top:1px solid rgba(255,255,255,.08); } body[data-theme="dark"] .md-table tr:nth-child(even) td{ background:rgba(255,255,255,.02); } body[data-theme="dark"] blockquote{ background:rgba(46,91,186,.16); } body[data-theme="dark"] .md-hr{ border-top-color:rgba(255,255,255,.12); } body[data-theme="dark"] .test-status{ color:#9aa2b1; } /* Тумблер темы */ .sidebar-tools{display:flex;align-items:center;gap:8px;margin:6px 0 10px;position:sticky;top:0;padding-bottom:6px;z-index:2;background:inherit} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:transparent;color:inherit;cursor:pointer;transition:var(--transition);font-size:1.15rem} .theme-toggle:hover{background:rgba(46,91,186,.06);} body[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,.12)} body[data-theme="dark"] .theme-toggle:hover{background:rgba(46,91,186,.18)} /* Profile input */ .profile-row{display:flex;gap:12px;align-items:center;margin-top:8px} .input{flex:1;min-width:200px;padding:10px 12px;border:1px solid rgba(0,0,0,.15);border-radius:8px;font-size:1rem} .input:focus{outline:none;box-shadow:var(--shadow-focus);border-color:var(--primary-blue)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}