*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ===================================================================== ANTHROPIC BRAND TOKENS — курс «Claude с 0 до Pro» Тёплая редакторская идентичность: ivory-бумага, clay-акцент, ink-текст. Канонические --brand-* + back-compat алиасы внизу (старые имена живут). ===================================================================== */ /* — Палитра: clay (дизайн «Claude Learn» 2026) — */ --brand-clay: #C4633E; /* основной акцент / primary action */ --brand-clay-deep: #A8492B; /* hover, ссылки, акцентный ink (AA) */ --brand-clay-soft: #E3A188; /* мягкий акцент на тёмном/зерне */ --brand-clay-wash: #F3E6DE; /* тонированная поверхность под clay-блок */ /* — Палитра: бумага (тёплая ivory, как canvas claude.ai) — */ --brand-ivory: #F4F3EC; /* фон приложения (тёплая бумага) */ --brand-ivory-deep: #F0EEE5; /* сайдбар (едва теплее основного) */ --brand-paper: #FFFFFF; /* карточки / инпуты — белые */ --brand-surface2: #EFECE2; /* вторичная поверхность (треки, плашки) */ --brand-field: #F5F3EB; /* фон полей ввода */ /* — Палитра: ink — */ --brand-ink: #1C1B18; /* основной текст */ --brand-ink-soft: #5E5B51; /* вторичный текст */ --brand-ink-faint: #8D8A7F; /* подписи / третичный */ --brand-line: #E7E3D7; /* hairline-границы (светлые) */ --brand-line2: #DED9CC; /* чуть плотнее hairline */ /* — Семантические состояния — */ --ok:#0C7C60; --ok-bg:#E8F1EC; --no:#B23C2A; --no-bg:#F6E7E2; /* — Марки конкурентов (намеренно литеральные, не Anthropic) — */ --gpt:#10A37F; --gpt-ink:#0C7C60; --gemini:#4285F4; --gemini-ink:#5B57C8; /* — Типографика («Claude Learn»: Newsreader-сериф для крупных заголовков, Hanken Grotesk для UI/тела, JetBrains Mono для подписей и кода) — */ --font-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; /* body / весь UI, под-заголовки */ --font-serif:'Newsreader',Georgia,serif; /* редакторский сериф: под-заголовки, номера, подписи */ --font-display:'Newsreader',Georgia,serif; /* сериф: логотип + крупные заголовки/названия уроков */ --font-mono: 'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* code / eyebrow-таглайны */ /* — Шкала радиусов (тёплый тактильный: мягкие крупные скругления) — */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px; /* — Высота/тени (тёплые тактильные тени) — */ --shadow-sm:0 1px 3px rgba(60,50,40,.05); --shadow-md:0 12px 32px -16px rgba(70,55,45,.24); --shadow-lg:0 24px 60px -22px rgba(60,45,35,.34); /* — Движение — */ --dur-fast:150ms; --dur-normal:300ms; --ease-out:cubic-bezier(.16,1,.3,1); /* — Фокус-ринг (a11y) — */ --focus-ring:0 0 0 3px rgba(196,99,62,.5); /* — Зерно бумаги (приглушается в тёмной теме) — */ --grain-opacity:.28; --grain-blend:multiply; /* ===== Back-compat алиасы — существующие ~200 ссылок продолжают работать ===== */ --cream:var(--brand-ivory); --cream-deep:var(--brand-ivory-deep); --paper:var(--brand-paper); --surface2:var(--brand-surface2); --field:var(--brand-field); --line2:var(--brand-line2); --ink:var(--brand-ink); --ink-soft:var(--brand-ink-soft); --ink-faint:var(--brand-ink-faint); --line:var(--brand-line); --accent:var(--brand-clay); --accent-ink:var(--brand-clay-deep); --accent-soft:var(--brand-clay-soft); --accent-wash:var(--brand-clay-wash); } /* ============================================================================ ТЁМНАЯ ТЕМА «Claude Learn» — переключатель в шапке (html[data-theme="dark"]). Переопределяем только --brand-* токены: вся палитра каскадирует через алиасы. ============================================================================ */ html[data-theme="dark"] { --brand-clay: #D97757; /* акцент чуть теплее на тёмном */ --brand-clay-deep: #E8916F; /* ссылки/hover (светлее для контраста) */ --brand-clay-soft: #B65A3A; --brand-clay-wash: #2A211C; /* тёмная clay-подложка под washing */ --brand-ivory: #1C1B19; /* фон приложения */ --brand-ivory-deep: #181715; /* сайдбар */ --brand-paper: #262421; /* карточки / инпуты */ --brand-surface2: #211F1C; /* вторичная поверхность */ --brand-field: #2C2A25; /* поля ввода */ --brand-ink: #ECE8DF; --brand-ink-soft: #A8A499; --brand-ink-faint: #736F66; --brand-line: #33302B; --brand-line2: #3D3933; --ok-bg:#16271F; --no-bg:#2A1C18; --shadow-sm:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 12px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7); --focus-ring:0 0 0 3px rgba(217,119,87,.5); --grain-opacity:.10; --grain-blend:soft-light; color-scheme: dark; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); } /* Зерно — фикс-оверлей с mix-blend-mode дорог при скролле на слабых телефонах: убираем на узких экранах */ @media (max-width: 640px) { body::before { display:none; } } .serif { font-family: var(--font-serif); } .it { font-style: italic; } .hl { color: var(--accent-ink); } .mark svg { width:100%; height:100%; display:block; transform-origin:50% 50%; } .mark.spin svg { animation: spin 32s linear infinite; } .mark .ray { animation: twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.18s); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes twinkle { 0%,100%{opacity:.4} 50%{opacity:1} } /* ============ AUTH SCREEN ============ */ #auth { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(120% 90% at 80% 10%, var(--accent-wash) 0%, var(--cream) 55%); } .auth-card { width: min(440px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.8rem, 5vw, 3rem); text-align: center; box-shadow: 0 30px 70px -40px rgba(60,40,20,.5); } .auth-card .mark { width: 72px; height: 72px; margin: 0 auto clamp(1rem,3vw,1.6rem); } .auth-eyebrow { font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink); } .auth-card h1 { font-family:var(--font-display); font-weight:600; font-size: clamp(2rem,5vw,2.9rem); line-height:1.06; letter-spacing:-.015em; margin:.4rem 0 .7rem; } .auth-card p { color: var(--ink-soft); font-size: 1rem; font-weight: 500; margin-bottom: 1.6rem; } #tg-widget { display: flex; justify-content: center; min-height: 48px; } .note { font-size:.82rem; color:var(--ink-faint); background:var(--cream); border:1px dashed var(--line); border-radius:10px; padding:.7rem .9rem; margin-bottom: 1rem; line-height:1.45; } .note.denied { color:var(--no); border-color:#E6C4BA; background:var(--no-bg); } .demo-btn { margin-top: 1rem; width: 100%; background: var(--accent); color:#fff; border:0; cursor:pointer; font-family: var(--font-sans); font-weight:700; font-size: 1rem; padding:.85em 1.2em; border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; text-decoration:none; display:inline-block; } .demo-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(180,75,38,.6); background:#C7613F; } .demo-btn[disabled] { opacity:.6; cursor:default; transform:none; box-shadow:none; } .demo-btn.ghost { background:transparent; color:var(--ink-soft); border:1px solid var(--line); box-shadow:none; margin-top:1.4rem; } .demo-btn.ghost:hover { background:rgba(217,119,87,.08); color:var(--accent-ink); border-color:var(--accent); transform:none; box-shadow:none; } .demo-btn.club { background:linear-gradient(135deg,#E08A63,#C7613F); box-shadow:0 14px 30px -16px rgba(180,75,38,.7); } .demo-btn.club:hover { background:linear-gradient(135deg,#D97757,#B14B26); } .demo-hint { margin-top:.8rem; font-size:.78rem; color:var(--ink-faint); } /* ============ APP SHELL ============ */ #app { display: grid; grid-template-columns: 300px 1fr; height: 100vh; height: 100dvh; position: relative; z-index: 2; } .sidebar { background: var(--cream-deep); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; } .lesson-nav button, .module-label { min-width: 0; max-width: 100%; } .lesson-nav .lt, .module-label .ml-name { min-width: 0; overflow-wrap: anywhere; } .side-top { padding: clamp(1.2rem,2vw,1.8rem); border-bottom: 1px solid var(--line); display:flex; align-items:center; gap:.7rem; } .side-top .mark { width: 34px; height: 34px; flex:none; } .side-brand { font-family:var(--font-display); font-weight:600; font-size:1.32rem; line-height:1; letter-spacing:-.01em; } .side-brand { margin-right:auto; } .side-brand small { display:block; font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:.34rem; } /* — Переключатель темы — */ .theme-toggle { flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; } .theme-toggle:hover { border-color:var(--accent); color:var(--accent-ink); } .theme-toggle svg { display:block; } .theme-toggle .ico-sun { display:none; } html[data-theme="dark"] .theme-toggle .ico-sun { display:block; } html[data-theme="dark"] .theme-toggle .ico-moon { display:none; } .theme-toggle.float { position:fixed; top:18px; right:18px; z-index:50; width:40px; height:40px; box-shadow:var(--shadow-sm); } .module-label { padding: 1.2rem clamp(1.2rem,2vw,1.8rem) .5rem; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .lesson-nav { list-style:none; padding: 0 .8rem; display:flex; flex-direction:column; gap:.2rem; } .lesson-nav button { width:100%; text-align:left; background:transparent; border:0; cursor:pointer; font-family:var(--font-sans); display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .8rem; border-radius:10px; color:var(--ink-soft); font-size:.92rem; font-weight:600; line-height:1.3; transition: background .2s ease, color .2s ease; } .lesson-nav button:hover { background: rgba(26,25,21,.045); color: var(--ink); } .lesson-nav button.active { background: rgba(26,25,21,.065); color:var(--ink); font-weight:600; } .lesson-nav button.active .ln { color:var(--accent); opacity:1; } .lesson-nav .ln { font-family:var(--font-serif); font-weight:600; flex:none; opacity:.7; font-variant-numeric:tabular-nums; } .lesson-nav button.active .ln { opacity:1; } /* контейнер с группами модулей (несколько .module-label + .lesson-nav) */ .nav-modules { display:flex; flex-direction:column; } .nav-modules .module-label { padding-top: 1rem; } .nav-modules .module-label:first-child { padding-top: 1.2rem; } /* подпункты (вложенные уроки): отступ + вертикальная направляющая */ .lesson-nav button.is-child { margin-left: 1.3rem; padding-top:.5rem; padding-bottom:.5rem; font-size:.86rem; border-left:2px solid var(--line); border-radius:0 9px 9px 0; } .lesson-nav button.is-child:hover { border-left-color:var(--accent); } .lesson-nav button.is-child.active { border-left-color:var(--accent); } .lesson-nav button.is-child .ln { font-size:.78rem; opacity:.65; } .lesson-nav button.is-child.active .ln { opacity:1; } /* сворачиваемые группы: подпункты скрыты по умолчанию, раскрываются по клику на родителя */ .sub-nav { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; overflow:hidden; max-height:0; opacity:0; transition: max-height .38s cubic-bezier(.16,1,.3,1), opacity .25s ease, margin-top .38s ease; } .sub-nav.open { max-height:600px; opacity:1; margin-top:.2rem; } .lesson-nav button.has-children::after { content:'\203A'; margin-left:auto; align-self:center; font-size:1.05rem; line-height:1; opacity:.5; transform:rotate(0deg); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; } .lesson-nav button.has-children:hover::after { opacity:.85; } .lesson-nav button.has-children.expanded::after { transform:rotate(90deg); opacity:.85; } /* Аккаунт вынесен в верхнее меню (clubNav) — нижний блок в сайдбаре курса скрыт. */ .side-user { margin-top:auto; padding: clamp(1rem,2vw,1.4rem); border-top:1px solid var(--line); display:none; align-items:center; gap:.7rem; } .avatar { width:38px; height:38px; border-radius:50%; flex:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; background-size:cover; background-position:center; } .side-user .uname { font-weight:700; font-size:.9rem; line-height:1.1; } .side-user .urole { font-size:.72rem; color:var(--ink-faint); } .side-user .urole.sensei { color:var(--accent-ink); font-weight:700; } .side-user.is-admin { border-radius:12px; transition:background .2s ease; } .side-user.is-admin .avatar, .side-user.is-admin .uname, .side-user.is-admin .urole { cursor:pointer; } .side-user.is-admin:hover { background:rgba(217,119,87,.07); } .role-go { color:var(--accent-ink); font-weight:700; white-space:nowrap; } .logout { margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--ink-soft); font-size:.72rem; font-weight:600; padding:.35em .6em; text-decoration:none; } .logout:hover { border-color: var(--accent); color: var(--accent-ink); } .content { overflow-y: auto; position: relative; } .content-inner { max-width: 760px; margin: 0 auto; padding: clamp(2rem,5vw,4rem) clamp(1.2rem,5vw,3rem) clamp(3rem,7vw,5rem); } .lesson { display: none; } .lesson.active { display: block; } .lesson-head { margin-bottom: clamp(1.6rem,4vw,2.6rem); } .lesson-kicker { font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); } .lesson-title { font-family:var(--font-display); font-weight:600; font-size: clamp(2rem,5vw,3.2rem); line-height:1.07; letter-spacing:-.015em; margin-top:.4rem; } .lesson-lead { margin-top:.8rem; font-size: clamp(1rem,1.8vw,1.2rem); color:var(--ink-soft); font-weight:500; max-width:56ch; } .block { margin-top: clamp(1.8rem,4vw,2.6rem); } .block-head { display:flex; align-items:baseline; gap:.8rem; margin-bottom:.9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); } .block-num { font-family:var(--font-serif); font-weight:700; font-size:1.5rem; color:var(--accent); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .block-title { font-family:var(--font-serif); font-weight:700; font-size: clamp(1.25rem,3vw,1.75rem); letter-spacing:-.02em; } .sub-title { font-family:var(--font-serif); font-weight:600; font-size:1.18rem; color:var(--accent-ink); margin:1.3rem 0 .2rem; } p.body { font-size: clamp(.98rem,1.6vw,1.12rem); margin:.6rem 0; } p.body.muted { color: var(--ink-soft); } ul.checks { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin:.8rem 0; } ul.checks li { position:relative; padding-left:1.4em; font-size: clamp(.95rem,1.6vw,1.08rem); } ul.checks li::before { content:""; position:absolute; left:0; top:.72em; width:.7em; height:.14em; border-radius:2px; background:var(--accent); } ul.checks b { font-weight:700; } /* приглушённая отсылка к другому уроку внутри абзаца (не курсив - чтобы слово Claude оставалось прямым) */ .note-ref { color: var(--ink-soft); font-size: .88em; } .block-sub { display:flex; flex-direction:column; gap:.2rem; } /* инлайн-ссылки в тексте уроков */ .lnk { color:var(--accent-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(177,75,38,.42); transition:color .15s ease, text-decoration-color .15s ease; overflow-wrap:break-word; } .lnk:hover { color:var(--accent); text-decoration-color:var(--accent); } .callout { border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem) clamp(1.1rem,2.4vw,1.5rem); margin:1.1rem 0; border-left:3px solid var(--accent); background:var(--accent-wash); } .callout.tip { border-left-color:var(--ok); background:var(--ok-bg); } .callout .label { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.35rem; } .callout.tip .label { color:var(--ok); } .callout p { font-size: clamp(.95rem,1.6vw,1.06rem); } .callout b { color:var(--accent-ink); } .callout.tip b { color:var(--ok); } /* ============ ВИДЕО УРОКА ============ */ .video-figure { margin: clamp(1.4rem,3.5vw,2.2rem) 0; } .video-frame { position: relative; border-radius: 18px; overflow: hidden; background:#100E0B; border: 1px solid var(--line); box-shadow: 0 30px 70px -42px rgba(60,40,20,.55), 0 2px 0 rgba(255,255,255,.4) inset; } .video-frame::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px; box-shadow: 0 0 0 1px rgba(26,25,21,.06) inset; } .video-frame video { display:block; width:100%; height:auto; aspect-ratio: 1668 / 900; background:#100E0B; } .video-frame .kinescope-embed, .video-frame iframe { background:#100E0B; } .video-cap { margin-top:.7rem; font-size:.8rem; color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); display:flex; align-items:center; gap:.5rem; } .video-cap::before { content:""; width:14px; height:1px; background:var(--accent); flex:none; } /* скриншот интерфейса в уроке */ .shot { margin: clamp(1.2rem,3vw,1.8rem) 0; } .shot img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); background:#100E0B; box-shadow: 0 24px 56px -40px rgba(60,40,20,.5); } .shot figcaption { margin-top:.6rem; font-size:.8rem; color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); line-height:1.5; } .shot figcaption::before { content:""; display:inline-block; width:14px; height:1px; background:var(--accent); vertical-align:middle; margin-right:.5rem; } /* ===== Claude Design — встроенные макеты интерфейса (CSS-реплики, не скриншоты) ===== */ .dc{ --dc-bg:#F4F2EC; --dc-paper:#FFFFFF; --dc-ink:#252019; --dc-soft:#6B6459; --dc-faint:#9A9384; --dc-accent:#CC785C; --dc-accent-deep:#B14B26; --dc-line:#E6E2D8; --dc-dark:#211E1A; --dc-blue:#2C6BED; font-family:var(--font-sans); color:var(--dc-ink); background:var(--dc-bg); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 24px 56px -40px rgba(60,40,20,.5); } .dc *{ box-sizing:border-box; } .dc-serif{ font-family:'Newsreader','Georgia','Times New Roman',serif; } .dc-bar{ display:flex; align-items:center; gap:.6rem; background:var(--dc-dark); padding:.5rem .85rem; } .dc-dots{ display:flex; gap:.34rem; flex:none; } .dc-dots i{ width:10px; height:10px; border-radius:50%; display:block; } .dc-dots i:nth-child(1){ background:#ED6A5E; } .dc-dots i:nth-child(2){ background:#F4BE4F; } .dc-dots i:nth-child(3){ background:#61C554; } .dc-bar b{ color:#CFC9BE; font-weight:600; font-size:.78rem; } .dc-bar .sp{ flex:1; } .dc-bar .av{ width:20px; height:20px; border-radius:50%; background:#7FA6E0; flex:none; } .dc-pad{ padding:clamp(.9rem,3.2vw,1.5rem); } .dc-h{ font-weight:600; letter-spacing:-.01em; line-height:1.08; margin:0 0 .9rem; font-size:clamp(1.25rem,4.2vw,2rem); } .dc-card{ background:var(--dc-paper); border:1px solid var(--dc-line); border-radius:14px; box-shadow:0 10px 28px -18px rgba(40,30,15,.4); padding:.9rem; } .dc-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .dc-ph{ color:var(--dc-faint); font-size:.92rem; } .dc-chip{ display:inline-flex; flex-direction:column; gap:.05rem; border:1px solid var(--dc-line); border-radius:10px; padding:.38rem .65rem; background:var(--dc-paper); } .dc-chip span{ font-size:.6rem; color:var(--dc-faint); } .dc-chip b{ font-size:.78rem; font-weight:600; white-space:nowrap; } .dc-chip.sq{ align-items:center; justify-content:center; min-width:38px; color:var(--dc-soft); font-size:1.15rem; padding:.35rem .55rem; } .dc-chip.on{ border-color:var(--dc-accent); box-shadow:0 0 0 1.5px rgba(204,120,92,.3); } .dc-send{ width:38px; height:38px; border-radius:10px; background:var(--dc-accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; flex:none; } .dc-btn{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.42rem .85rem; font-size:.78rem; font-weight:600; border:1px solid var(--dc-line); background:var(--dc-paper); color:var(--dc-ink); white-space:nowrap; } .dc-btn.accent{ background:var(--dc-accent); border-color:var(--dc-accent); color:#fff; } .dc-btn.dark{ background:#1B1814; border-color:#1B1814; color:#fff; } .dc-tiles{ display:flex; gap:.55rem; flex-wrap:wrap; } .dc-tile{ flex:1 1 80px; min-width:76px; background:var(--dc-paper); border:1px solid var(--dc-line); border-radius:12px; padding:.65rem .5rem; text-align:center; } .dc-tile .ic{ height:36px; border-radius:8px; background:#EDEAE1; display:flex; align-items:center; justify-content:center; margin-bottom:.45rem; color:var(--dc-faint); font-size:1.1rem; } .dc-tile.on{ border-color:var(--dc-accent); box-shadow:0 0 0 2px rgba(204,120,92,.28); } .dc-tile b{ font-size:.72rem; font-weight:600; } .dc-menu{ background:var(--dc-paper); border:1px solid var(--dc-line); border-radius:12px; box-shadow:0 18px 40px -18px rgba(40,30,15,.4); padding:.4rem; max-width:340px; } .dc-sec{ font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--dc-faint); padding:.5rem .55rem .2rem; } .dc-mi{ display:flex; align-items:center; gap:.55rem; padding:.46rem .55rem; border-radius:8px; font-size:.84rem; } .dc-mi .g{ width:16px; text-align:center; color:var(--dc-soft); flex:none; } .dc-toolbar{ display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; background:var(--dc-paper); border-bottom:1px solid var(--dc-line); padding:.5rem .7rem; font-size:.8rem; } .dc-toolbar .sp{ flex:1; } .dc-tool{ padding:.28rem .55rem; border-radius:8px; color:var(--dc-soft); white-space:nowrap; } .dc-tool.on{ background:var(--dc-accent); color:#fff; font-weight:600; } .dc-tool.dark{ background:#1B1814; color:#fff; font-weight:600; } .dc-tip{ display:inline-block; background:#2C6BED; color:#fff; font-size:.76rem; font-weight:600; padding:.42rem .65rem; border-radius:8px; } .dc-pop{ background:var(--dc-paper); border:1px solid var(--dc-line); border-radius:12px; box-shadow:0 18px 40px -18px rgba(40,30,15,.4); padding:.8rem; max-width:380px; } .dc-pop .ttl{ display:flex; justify-content:space-between; align-items:center; color:var(--dc-soft); font-size:.76rem; margin-bottom:.5rem; } .dc-input{ border:1px solid var(--dc-accent); border-radius:8px; padding:.5rem .6rem; font-size:.88rem; min-height:2.1rem; } .dc-acts{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.7rem; flex-wrap:wrap; } .dc-tabs{ display:flex; gap:.2rem; background:#EFEBE2; border-radius:10px; padding:.25rem; } .dc-tab{ flex:1; text-align:center; padding:.45rem .5rem; border-radius:8px; font-size:.8rem; font-weight:600; color:var(--dc-soft); } .dc-tab.on{ background:var(--dc-paper); color:var(--dc-ink); box-shadow:0 1px 2px rgba(26,25,21,.08); } .dc-fmt{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; } .dc-opt{ position:relative; border:1px solid var(--dc-line); border-radius:12px; padding:.7rem; background:var(--dc-paper); } .dc-opt.on{ border-color:var(--dc-blue); box-shadow:0 0 0 1px var(--dc-blue); } .dc-opt .ic{ width:30px; height:30px; border-radius:8px; background:#EDEAE1; display:flex; align-items:center; justify-content:center; color:var(--dc-faint); margin-bottom:.4rem; } .dc-opt b{ font-size:.8rem; } .dc-opt .d{ display:block; font-size:.7rem; color:var(--dc-soft); margin-top:.15rem; line-height:1.35; } .dc-rad{ position:absolute; top:.6rem; right:.6rem; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--dc-line); } .dc-rad.on{ background:var(--dc-blue); border-color:var(--dc-blue); } .dc-term{ background:#1C1A16; border-radius:12px; padding:.85rem .9rem; font-family:var(--font-mono); font-size:.72rem; line-height:1.55; color:#D8D2C4; overflow-x:auto; } .dc-term .pr{ color:var(--dc-accent); } .dc-term .mut{ color:#8C8576; } .dc-term .lk{ color:#9DB7E8; word-break:break-all; } .dc-term + .body, .body + .dc-term { margin-top:.7rem; } .lk-ext{ color:var(--accent-ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--accent); word-break:break-all; transition:opacity .2s ease; } .lk-ext:hover{ opacity:.7; } .dc-panel{ background:var(--dc-bg); border:1px solid var(--dc-line); border-radius:12px; padding:.8rem; font-size:.8rem; } .dc-prow{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; border:1px solid var(--dc-line); border-radius:8px; padding:.38rem .55rem; background:var(--dc-paper); margin-top:.4rem; } .dc-prow .k{ color:var(--dc-soft); } .dc-prow .v{ font-weight:600; } .dc-seg{ display:inline-flex; border:1px solid var(--dc-line); border-radius:7px; overflow:hidden; flex:none; } .dc-seg b{ padding:.18rem .5rem; font-size:.7rem; color:var(--dc-soft); font-weight:600; } .dc-seg b.on{ background:#E7E2D6; color:var(--dc-ink); } .dc-label{ font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--dc-faint); margin:.75rem 0 .15rem; font-weight:700; } .dc-kicker{ font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dc-accent-deep); margin-bottom:.4rem; } .dc-list{ background:var(--dc-paper); border:1px solid var(--dc-line); border-radius:12px; box-shadow:0 18px 40px -18px rgba(40,30,15,.4); padding:.35rem; max-width:240px; } .dc-li{ display:flex; align-items:center; gap:.55rem; padding:.46rem .6rem; border-radius:8px; font-size:.86rem; } .dc-li .g{ color:var(--dc-soft); flex:none; } .dc-split{ display:grid; grid-template-columns:215px 1fr; gap:0; } .dc-canvas{ padding:clamp(.8rem,3vw,1.3rem); background:var(--dc-bg); } .dc-muted{ color:var(--dc-soft); font-size:.82rem; line-height:1.45; } .dc-gi{ width:15px; height:15px; border-radius:4px; background:#E7E2D6; flex:none; display:inline-block; } .dc-cb{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--dc-line); flex:none; display:inline-block; } .dc-pill{ display:inline-block; border:1px solid var(--dc-line); border-radius:999px; padding:.34rem .7rem; font-size:.76rem; background:var(--dc-paper); } .dc-pill.on{ background:#E7E2D6; border-color:#D8D2C4; } .dc-opt-row{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--dc-line); border-radius:999px; padding:.4rem .7rem; background:var(--dc-paper); font-size:.8rem; } @media(max-width:560px){ .dc-split{ grid-template-columns:1fr; } .dc-fmt{ grid-template-columns:1fr; } } .twocol { display:grid; grid-template-columns:1fr 1fr; gap: clamp(.8rem,2vw,1.2rem); margin:1.1rem 0; } .box { border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem); border:1px solid var(--line); background:var(--paper); } .box.ok { background:var(--ok-bg); border-color:#BFD9CD; } .box.no { background:var(--no-bg); border-color:#E6C4BA; } .box h4 { font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.7rem; } .box.ok h4 { color:var(--ok); } .box.no h4 { color:var(--no); } .box ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; } .box li { font-size: clamp(.88rem,1.5vw,1rem); padding-left:1.4em; position:relative; line-height:1.4; } .box.ok li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; } .box.no li::before { content:"✕"; position:absolute; left:0; color:var(--no); font-weight:700; } .path { display:flex; flex-wrap:wrap; align-items:stretch; gap:.6rem; margin:1rem 0; } .path-step { flex:1 1 0; min-width:120px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; } .path-step .tier { font-family:var(--font-serif); font-weight:600; font-size:1.2rem; } .path-step .when { font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; } .path-arrow { align-self:center; color:var(--accent); font-weight:700; } .code { background:#211F1B; color:#EFEAE0; border-radius:10px; padding:.6rem .85rem; font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.88rem; line-height:1.55; overflow-x:auto; margin:1rem 0; cursor:pointer; transition:background .15s, box-shadow .15s; } .code:hover { background:#2a2723; } .code.copied { box-shadow:inset 0 0 0 1.5px var(--accent); } /* инлайн-код (span.code) - компактный чип, а не большой блок */ span.code { display:inline; padding:.13em .42em; margin:0; border-radius:6px; line-height:inherit; overflow:visible; font-size:.85em; vertical-align:baseline; } .code .p { color:var(--accent); user-select:none; } .code .c { color:#9A9385; } /* Таблица внутри урока (тарифы, DNS-записи и т.п.) */ .ltbl-wrap { overflow-x:auto; margin:1.1rem 0; border:1px solid var(--line); border-radius:14px; background:var(--paper); } .ltbl { width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; } .ltbl th { text-align:left; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:.8rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap; } .ltbl td { padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; } .ltbl tbody tr:last-child td { border-bottom:0; } .ltbl tbody tr:hover { background:rgba(217,119,87,.05); } .ltbl td code, .ltbl th code { background:var(--accent-wash); color:var(--accent-deep); padding:.1em .4em; border-radius:6px; font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86em; } /* Инлайн-код внутри текста урока (имена файлов, команды, IP) */ .lesson p code, .lesson li code, .lesson figcaption code { background:var(--accent-wash); color:var(--accent-deep); padding:.1em .4em; border-radius:6px; font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86em; word-break:break-word; } .steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.1rem 0; } .step3 { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding: clamp(1rem,2vw,1.5rem); position:relative; overflow:hidden; } .step3::after { content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:var(--accent); } .step3 .n { font-family:var(--font-serif); font-size:1.8rem; color:var(--accent); line-height:1; } .step3 .t { font-family:var(--font-serif); font-weight:600; font-size:1.25rem; margin:.2rem 0; } .step3 .d { font-size:.92rem; color:var(--ink-soft); } .compare { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(.7rem,1.6vw,1.1rem); margin:1.2rem 0; } .ai { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding: clamp(1rem,2vw,1.5rem); display:flex; flex-direction:column; gap:.6rem; position:relative; overflow:hidden; --accent2:var(--ink-soft); --accent2-ink:var(--ink-soft); } .ai::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--accent2); } .ai.claude { --accent2:var(--accent); --accent2-ink:var(--accent-ink); border-color:var(--accent); background:linear-gradient(180deg,var(--accent-wash),var(--paper) 40%); } .ai.gpt { --accent2:var(--gpt); --accent2-ink:var(--gpt-ink); } .ai.gemini { --accent2:var(--gemini); --accent2-ink:var(--gemini-ink); } .ai .badge { position:absolute; top:1rem; right:1rem; font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#fff; padding:.3em .6em; border-radius:999px; } .ai .mk { width:46px; height:46px; } .ai .nm { font-family:var(--font-serif); font-weight:700; font-size:1.5rem; line-height:.95; letter-spacing:-.025em; } .ai .vn { display:inline-flex; align-items:center; gap:.5em; font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent2-ink); } .ai .vn::before { content:""; width:.5em; height:.5em; border-radius:50%; background:var(--accent2); } .ai .tg { font-family:var(--font-serif); font-style:italic; font-size:1.02rem; line-height:1.25; color:var(--accent2-ink); } .ai ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; margin-top:.2rem; } .ai li { display:flex; gap:.5em; font-size:.9rem; line-height:1.35; } .ai li::before { content:""; flex:none; width:.6em; height:.12em; margin-top:.6em; border-radius:2px; background:var(--accent2); } .sub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.1rem 0; } .sub { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding: clamp(1rem,2vw,1.5rem); display:flex; flex-direction:column; gap:.5rem; } .sub.best { border-color:var(--accent); background:linear-gradient(180deg,var(--accent-wash),var(--paper) 45%); position:relative; } .sub .tier { font-family:var(--font-serif); font-weight:600; font-size:1.5rem; } .sub .price { font-weight:800; color:var(--accent-ink); font-size:1.05rem; } .sub .for { font-size:.9rem; color:var(--ink-soft); } .sub .pick { margin-top:auto; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); } .cta-card { background:linear-gradient(180deg,var(--accent-wash),var(--paper) 60%); border:1px solid var(--accent); border-radius:16px; padding: clamp(1.2rem,3vw,1.9rem); margin-top:1.4rem; } .cta-card p { font-size: clamp(.98rem,1.6vw,1.12rem); } .cta-card b { color:var(--accent-ink); font-weight:700; } .tg-btn { display:inline-flex; align-items:center; gap:.55em; margin-top:1.1rem; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; padding:.7em 1.3em; border-radius:999px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .tg-btn:hover { transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(180,75,38,.65); background:#C7613F; } .tg-btn svg { width:1.2em; height:1.2em; } /* ============ ОБСУЖДЕНИЕ УРОКА ============ */ .comments { margin-top: clamp(2.4rem,6vw,3.8rem); padding-top: clamp(1.6rem,4vw,2.4rem); border-top: 1px solid var(--line); } .comments-head { display:flex; align-items:baseline; gap:.55rem; margin-bottom:1.1rem; } .comments-title { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.3rem,3vw,1.75rem); letter-spacing:-.01em; } .comments-count { font-family:var(--font-serif); font-style:italic; color:var(--ink-faint); font-size:1.05rem; } .comment-form { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:.9rem; margin-bottom:1.5rem; transition: border-color .2s ease, box-shadow .2s ease; } .comment-form:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,87,.12); } .comment-form textarea { width:100%; border:0; background:transparent; resize:vertical; min-height:2.6em; font-family:var(--font-sans); font-size:1rem; line-height:1.5; color:var(--ink); outline:none; } .comment-form textarea::placeholder { color:var(--ink-faint); } .comment-form-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.55rem; } .comment-hint { font-size:.8rem; color:var(--no); line-height:1.3; } .comment-send { background:var(--accent); color:#fff; border:0; cursor:pointer; font-family:var(--font-sans); font-weight:700; font-size:.9rem; padding:.55em 1.4em; border-radius:999px; flex:none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .comment-send:hover { transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(180,75,38,.6); background:#C7613F; } .comment-send[disabled] { opacity:.55; cursor:default; transform:none; box-shadow:none; } /* вложение скриншота к комментарию */ .attach-btn { display:inline-flex; align-items:center; gap:.4em; cursor:pointer; flex:none; font-family:var(--font-sans); font-size:.82rem; font-weight:600; color:var(--accent-ink); padding:.45em .8em; border:1px solid var(--line); border-radius:999px; background:transparent; transition: background .15s ease, border-color .15s ease; } .attach-btn:hover { background:rgba(217,119,87,.1); border-color:var(--accent); } .attach-btn svg { width:1.05em; height:1.05em; } .comment-form .comment-hint { flex:1 1 auto; min-width:0; text-align:left; } .attach-preview { position:relative; display:inline-block; margin-top:.7rem; } .attach-thumb { display:block; max-width:160px; max-height:130px; border-radius:10px; border:1px solid var(--line); } .attach-remove { position:absolute; top:-9px; right:-9px; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:var(--ink); color:#fff; cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25); } .attach-remove:hover { background:var(--accent-ink); } .comment-img-link { display:inline-block; margin-top:.55rem; } .comment-img { display:block; max-width:min(340px,100%); max-height:380px; border-radius:10px; border:1px solid var(--line); cursor:zoom-in; transition: filter .15s ease; } .comment-img:hover { filter:brightness(.95); } .comment-list { list-style:none; display:flex; flex-direction:column; gap:1rem; } .comment-empty { color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); font-size:1.02rem; padding:.3rem 0; } .comment { display:flex; gap:.8rem; align-items:flex-start; } .comment-av { flex:none; width:38px; height:38px; border-radius:50%; background:var(--cream-deep); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; border:1px solid var(--line); background-size:cover; background-position:center; } .comment-av.has-img { color:transparent; } .comment-body { flex:1 1 auto; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:14px; border-top-left-radius:4px; padding:.7rem .95rem .8rem; } .comment-meta { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.28rem; flex-wrap:wrap; } .comment-name { font-weight:700; font-size:.92rem; } .comment-time { font-size:.74rem; color:var(--ink-faint); } .sensei-badge { font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.2em .55em; border-radius:999px; line-height:1.2; } /* звание ученика рядом с комментарием - растёт по мере прохождения курса */ .comment-rank { font-size:.56rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); background:var(--cl-track); padding:.2em .55em; border-radius:999px; line-height:1.2; white-space:nowrap; } .comment-rank.r2, .comment-rank.r3 { color:var(--accent-ink,var(--accent)); background:var(--cl-accent-soft); } .comment-rank.r4 { color:#fff; background:color-mix(in srgb, var(--accent) 78%, #000); } .comment-rank.r5 { color:#fff; background:var(--accent); box-shadow:0 1px 6px color-mix(in srgb, var(--accent) 40%, transparent); } .comment-del { margin-left:auto; background:transparent; border:0; cursor:pointer; color:var(--ink-faint); font-size:.74rem; font-family:var(--font-sans); text-decoration:underline; padding:0; } .comment-del:hover { color:var(--no); } .comment-text { font-size:.98rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; } /* действия под комментарием: респект + ответить + удалить */ .comment-actions { display:flex; align-items:center; gap:1.1rem; margin-top:.5rem; } .like-btn, .reply-btn { background:transparent; border:0; cursor:pointer; font-family:var(--font-sans); font-size:.8rem; font-weight:600; color:var(--ink-faint); padding:0; display:inline-flex; align-items:center; gap:.35em; transition:color .15s ease, transform .15s ease; } .like-btn:hover, .reply-btn:hover { color:var(--accent-ink); } .like-btn .like-ic { font-size:1rem; line-height:1; } .like-btn .like-count { font-variant-numeric:tabular-nums; } .like-btn.liked { color:var(--accent); } .like-btn.liked .like-ic { color:var(--accent); transform:scale(1.05); } .comment-actions .comment-del { margin-left:auto; } /* ветка ответов */ .comment-replies { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-top:.9rem; padding-left:1rem; border-left:2px solid var(--line); } .comment-replies:empty { display:none; margin-top:0; } .comment-replies .comment-av { width:30px; height:30px; font-size:.8rem; } .reply-box { margin-top:.7rem; } .reply-box:empty { display:none; } .reply-form { margin-bottom:0; } /* ============ КНОПКА «ДАЛЬШЕ» / ФИНАЛ МОДУЛЯ ============ */ .lesson-foot { margin-top: clamp(2.2rem,5vw,3.2rem); display:flex; flex-wrap:wrap; row-gap:1rem; justify-content:flex-end; } .lesson-foot:empty { display:none; } .lesson-foot.done { justify-content:stretch; } .next-btn { display:inline-flex; align-items:center; gap:1rem; cursor:pointer; border:0; background:var(--accent); color:#fff; font-family:var(--font-sans); text-align:left; line-height:1.15; padding:.85rem 1.5rem; border-radius:16px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .next-btn:hover { transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(180,75,38,.6); background:#C7613F; } .next-label { display:flex; flex-direction:column; gap:.15rem; } .next-cap { font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.85; } .next-title { font-family:var(--font-serif); font-weight:600; font-size:1.15rem; } .next-arrow { font-family:var(--font-serif); font-size:1.5rem; line-height:1; flex:none; transition: transform .2s ease; } .next-btn:hover .next-arrow { transform:translateX(4px); } .done-card { width:100%; text-align:center; background:linear-gradient(180deg,var(--accent-wash),var(--paper) 60%); border:1px solid var(--accent); border-radius:18px; padding: clamp(1.5rem,4vw,2.4rem); } .done-title { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.5rem,4vw,2.1rem); letter-spacing:-.01em; } .done-card p { color:var(--ink-soft); margin-top:.5rem; font-size:1.05rem; max-width:46ch; margin-inline:auto; } /* заблокированный пункт навигации */ .lesson-nav button.locked { opacity:.55; cursor:pointer; } .lesson-nav button.locked:hover { background:rgba(26,25,21,.04); color:var(--ink-soft); } .lesson-nav button.locked .ln { font-style:normal; display:inline-flex; align-items:center; justify-content:center; } .lesson-nav .ln svg { display:block; } /* всплывающее сообщение (тост) */ .toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); z-index:60; max-width:min(560px, 92vw); background:var(--ink); color:var(--paper); font-size:.92rem; line-height:1.4; font-weight:500; padding:.85rem 1.1rem; border-radius:14px; box-shadow:0 20px 50px -20px rgba(26,25,21,.6); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .toast.show { opacity:1; transform:translate(-50%, 0); } /* заблокированная кнопка «Дальше» */ .lesson-foot.locked { justify-content:stretch; } .next-locked { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; text-align:center; color:var(--ink-soft); font-size:.95rem; line-height:1.35; background:var(--cream-deep); border:1px dashed var(--line); border-radius:14px; padding:1rem 1.3rem; } .next-lock { flex:none; display:inline-flex; align-items:center; color:var(--accent-ink); } /* ============ ЗАДАНИЕ ПОД УРОКОМ ============ */ .task-card { background:linear-gradient(180deg,var(--accent-wash),var(--paper) 70%); border:1px solid var(--accent); border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem); margin-bottom:1.4rem; } .task-card:empty { display:none; } .task-card.done { background:var(--ok-bg); border-color:#BFD9CD; } .task-label { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.4rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; } .task-card.done .task-label { color:var(--ok); } .task-ok { letter-spacing:.04em; } .task-text { font-size: clamp(1rem,1.7vw,1.12rem); line-height:1.5; } .task-text b { color:var(--accent-ink); font-weight:700; } .task-card.done .task-text b { color:var(--ok); } .task-hint { margin-top:.6rem; font-size:.86rem; color:var(--ink-soft); } .reveal { opacity:0; transform:translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity:1; transform:none; } /* вход в админку (в сайдбаре, только для Сенсея) */ .admin-entry { display:block; margin:.1rem .8rem .5rem; padding:.55rem .8rem; border-radius:10px; font-size:.82rem; font-weight:700; color:var(--accent-ink); text-decoration:none; border:1px dashed var(--accent); background:rgba(217,119,87,.06); transition:background .2s ease; } .admin-entry:hover { background:rgba(217,119,87,.14); } .admin-entry[hidden] { display:none; } /* ============ АДМИН-ПАНЕЛЬ ============ */ .admin-wrap { position:relative; z-index:2; max-width:1100px; margin:0 auto; padding: clamp(1.5rem,4vw,3rem) clamp(1.1rem,4vw,2.5rem) 4rem; } .admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; } .admin-eyebrow { font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink); } .admin-title { font-family:var(--font-serif); font-weight:500; font-size: clamp(1.9rem,5vw,3rem); line-height:1.04; letter-spacing:-.02em; margin-top:.3rem; } .admin-back { font-weight:700; font-size:.9rem; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:.5em 1.1em; transition:border-color .2s ease, color .2s ease; white-space:nowrap; } .admin-back:hover { border-color:var(--accent); color:var(--accent-ink); } .admin-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(.7rem,1.6vw,1.1rem); margin-bottom:1.8rem; } .admin-card.accent { border-color:var(--accent); background:linear-gradient(180deg,var(--accent-wash),var(--paper) 60%); } .admin-h2 { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.2rem,3vw,1.6rem); margin:2rem 0 .9rem; letter-spacing:-.01em; } .adm-bar { display:inline-block; vertical-align:middle; width:90px; max-width:38vw; height:7px; border-radius:999px; background:var(--cream-deep); overflow:hidden; } .adm-bar span { display:block; height:100%; background:var(--accent); border-radius:999px; } .adm-pct { margin-left:.5rem; font-size:.82rem; color:var(--ink-soft); white-space:nowrap; } .admin-card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding: clamp(1rem,2vw,1.4rem); } .admin-card .ac-val { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.8rem,4vw,2.6rem); line-height:1; color:var(--accent-ink); } .admin-card .ac-label { margin-top:.4rem; font-size:.8rem; color:var(--ink-soft); font-weight:600; } .admin-tablewrap { background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow-x:auto; } .admin-table { width:100%; border-collapse:collapse; font-size:.92rem; min-width:680px; } .admin-table th { text-align:left; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:1rem 1.1rem; border-bottom:1px solid var(--line); white-space:nowrap; } .admin-table td { padding:.9rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; } .admin-table tbody tr:last-child td { border-bottom:0; } .admin-table tbody tr:hover { background:rgba(217,119,87,.05); } .adm-name { font-weight:700; display:flex; align-items:center; gap:.5rem; } .adm-user { font-size:.78rem; color:var(--ink-faint); margin-top:.1rem; } .adm-sub { font-size:.76rem; color:var(--ink-faint); margin-top:.15rem; } .adm-tag { font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.15em .5em; border-radius:999px; } .adm-online { color:var(--ok); font-weight:700; } .admin-empty { text-align:center; color:var(--ink-faint); font-style:italic; padding:2rem; } .admin-note { margin-top:1.2rem; color:var(--no); font-size:.9rem; } @media (max-width:680px){ .admin-cards { grid-template-columns:repeat(2,1fr); } } @media (max-width: 920px) { #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; overflow-x: hidden; border-right: 0; border-bottom: 1px solid var(--line); } /* ряд 1: бренд слева + пользователь справа; ряд 2: горизонтальные табы уроков */ .side-top { order: 1; flex: 1 1 auto; width: auto; border-bottom: 0; padding: .7rem 1rem; } .side-top .mark { width: 30px; height: 30px; } .module-label { display: none; } .side-user { order: 2; width: auto; margin: 0 0 0 auto; border-top: 0; padding: .7rem 1rem; } .nav-modules { order: 3; width: 100%; border-top: 1px solid var(--line); } .nav-modules .module-label { display: block; padding: .5rem 1rem .1rem; font-size: .58rem; } .lesson-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .35rem .8rem .6rem; gap: .4rem; scrollbar-width: none; } .lesson-nav::-webkit-scrollbar { display: none; } .lesson-nav button { flex: none; white-space: nowrap; flex-direction: row; align-items: center; } .lesson-nav button.is-child { margin-left: 0; border-left: 0; border-radius: 10px; font-size: .9rem; } /* на мобильном подпункты всегда видимы в горизонтальной ленте */ .sub-nav { display: contents; max-height: none; opacity: 1; overflow: visible; } .lesson-nav button.has-children::after { display: none; } .admin-entry { order: 4; width: 100%; margin: 0 .8rem .6rem; } } @media (max-width: 640px) { .steps3, .compare, .sub-grid { grid-template-columns: 1fr; } .twocol { grid-template-columns: 1fr; } /* компактная шапка на телефоне: оставляем аватар + «Выйти» */ .side-brand small { display: none; } .side-user .uname, .side-user .urole { display: none; } .side-user .avatar { width: 32px; height: 32px; } /* ---- читаемая типографика уроков на телефоне ---- */ .content-inner { padding: 1.4rem 1.25rem 3rem; } body { line-height: 1.6; } .lesson-head { margin-bottom: 1.5rem; } .lesson-title { font-size: 1.72rem; line-height: 1.14; letter-spacing: -.02em; } .lesson-lead { font-size: 1.07rem; line-height: 1.55; margin-top: .7rem; } p.body { font-size: 1.05rem; line-height: 1.62; margin: .7rem 0; } ul.checks { gap: .75rem; margin: 1rem 0; } ul.checks li { font-size: 1.05rem; line-height: 1.5; } ul.checks li::before { top: .66em; } .callout { padding: 1.05rem 1.15rem; margin: 1.2rem 0; } .callout p { font-size: 1.04rem; line-height: 1.55; } .block { margin-top: 1.9rem; } .block-title { font-size: 1.35rem; } .block-num { font-size: 1.4rem; } .step3 { padding: 1.1rem 1.15rem; } .step3 .t { font-size: 1.2rem; } .step3 .d { font-size: 1.02rem; line-height: 1.5; } .ai { padding: 1.1rem 1.15rem; } .ai .tg { font-size: 1.05rem; } .ai li { font-size: 1rem; line-height: 1.4; } .box li, .sub .for { font-size: 1rem; line-height: 1.45; } .sub .tier { font-size: 1.4rem; } /* путь тарифов: вертикально, стрелки смотрят вниз */ .path { flex-direction: column; align-items: stretch; gap: .5rem; } .path-step { min-width: 0; } .path-arrow { transform: rotate(90deg); align-self: center; } /* длинные слова/ссылки переносятся, не выезжают за край */ .lesson-title, .lesson-lead, p.body, ul.checks li, .callout p, .ai li, .box li, .sub .for, .comment-text { overflow-wrap: break-word; } /* кнопка «Дальше» во всю ширину */ .lesson-foot { justify-content: stretch; } .next-btn { width: 100%; justify-content: space-between; } } @media (max-width: 400px) { .content-inner { padding: 1.2rem 1.05rem 2.6rem; } .lesson-title { font-size: 1.55rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; } html { scroll-behavior:auto; } } /* ============ ИМИТАЦИЯ ИНТЕРФЕЙСА CLAUDE (мок-компоненты внутри урока) ============ */ .cui { --cb:#1B1A18; --cp:#262422; --cs:#171614; --ct:#EDEAE4; --cm:#9C958B; --cl:rgba(255,255,255,.09); --cact:#312F2C; --cblue:#4F90D6; --cclay:#C15F3C; background:var(--cb); border:1px solid rgba(0,0,0,.25); border-radius:16px; overflow:hidden; margin: clamp(1rem,2.6vw,1.5rem) 0; color:var(--ct); font-family:var(--font-sans); box-shadow:0 26px 56px -36px rgba(33,31,28,.6); } .cui-bar { display:flex; align-items:center; gap:.45rem; padding:.6rem .85rem; background:var(--cs); border-bottom:1px solid var(--cl); } .cui-dot { width:11px; height:11px; border-radius:50%; flex:none; } .cui-dot.r{ background:#ff5f57; } .cui-dot.y{ background:#febc2e; } .cui-dot.g{ background:#28c840; } .cui-ttl { margin-left:.5rem; font-size:.78rem; color:var(--cm); font-weight:500; } .cui-body { padding: clamp(.9rem,2.2vw,1.3rem); } .cui-label { font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cm); margin:0 0 .65rem; } .cui-cap { font-size:.78rem; color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); margin-top:.55rem; } .cui-menu { display:flex; flex-direction:column; gap:.2rem; } .cui-opt { display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .8rem; border-radius:11px; } .cui-opt.sel { background:var(--cact); } .cui-opt .cui-ol { flex:1; min-width:0; } .cui-opt .cui-nm { font-weight:600; font-size:1rem; color:#fff; } .cui-opt .cui-ds { font-size:.84rem; color:var(--cm); margin-top:.14rem; line-height:1.45; } .cui-opt .cui-ck { flex:none; color:var(--cblue); font-weight:700; font-size:1rem; opacity:0; } .cui-opt.sel .cui-ck { opacity:1; } .cui-tag { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cb); background:var(--cclay); border-radius:999px; padding:.12em .5em; margin-left:.5rem; vertical-align:middle; } .cui-row { display:flex; align-items:center; gap:1rem; padding:.75rem .2rem; border-top:1px solid var(--cl); } .cui-row:first-child { border-top:0; } .cui-row .cui-rl { flex:1; min-width:0; } .cui-row .cui-nm { color:#fff; font-weight:500; font-size:.96rem; } .cui-row .cui-ds { color:var(--cm); font-size:.82rem; margin-top:.15rem; line-height:1.4; } .cui-tgl { width:42px; height:24px; border-radius:999px; background:#48474a; position:relative; flex:none; display:inline-block; vertical-align:middle; } .cui-tgl::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s ease; } .cui-tgl.on { background:var(--cblue); } .cui-tgl.on::after { left:21px; } .cui-seg { display:inline-flex; background:#211f1d; border:1px solid var(--cl); border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap; } .cui-seg b { font-weight:500; font-size:.86rem; color:var(--cm); padding:.42rem .85rem; border-radius:8px; white-space:nowrap; } .cui-seg b.act { background:#3a3835; color:#fff; } .cui-chip { display:inline-flex; align-items:center; gap:.42rem; background:#2c2b29; border:1px solid var(--cl); border-radius:9px; padding:.4rem .65rem; font-size:.84rem; font-weight:500; color:var(--ct); } .cui-chip .cui-mdot { width:7px; height:7px; border-radius:50%; background:var(--cclay); flex:none; } .cui-composer { background:var(--cp); border:1px solid var(--cl); border-radius:13px; padding:.85rem .95rem; } .cui-composer .cui-ph { color:var(--cm); font-size:.94rem; } .cui-tools { display:flex; align-items:center; gap:.55rem; margin-top:.8rem; flex-wrap:wrap; } .cui-proj { background:var(--cp); border:1px solid var(--cl); border-radius:12px; padding:.9rem 1rem; } .cui-proj .cui-pl { color:var(--cm); font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.3rem; } .cui-proj .cui-pf { color:var(--ct); font-size:.95rem; } .cui-field { display:block; background:#211f1d; border:1px solid var(--cl); border-radius:9px; color:var(--ct); font-size:.9rem; padding:.55rem .7rem; margin-top:.5rem; } .cui-field.ph { color:var(--cm); } .settings-frame { margin: clamp(1.4rem,3.5vw,2.2rem) 0; } .settings-frame iframe { display:block; width:100%; height:1200px; border:0; border-radius:14px; background:var(--paper); } .settings-cap { font-size:.8rem; color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); margin-top:.6rem; display:flex; align-items:center; gap:.5rem; } .settings-cap::before { content:""; width:14px; height:1px; background:var(--accent); flex:none; } @media (max-width: 640px) { .cui-body { padding: .95rem .85rem; } .cui-seg b { padding:.4rem .65rem; font-size:.82rem; } } /* ============ ОБУЧАЮЩИЕ ПЛАШКИ (простой язык) ============ */ .callout.plain { border-left-color:#5B57C8; background:#F1EFF8; } .callout.plain .label { color:#5B57C8; } .callout.plain b { color:#5B57C8; } /* тёмная тема: у plain-callout был захардкожен светлый фон → светлый текст становился нечитаемым. Делаем тёмную подложку + светло-сиреневый акцент. */ html[data-theme="dark"] .callout.plain { border-left-color:#A7A3F0; background:#23212E; } html[data-theme="dark"] .callout.plain .label, html[data-theme="dark"] .callout.plain b { color:#A7A3F0; } .jargon { background:var(--cream-deep); border:1px solid var(--line); border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem); margin:1.1rem 0; } .jargon > .label { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.7rem; } .jargon dl { display:flex; flex-direction:column; gap:.7rem; margin:0; } .jargon .jrow { display:block; line-height:1.5; } .jargon dt { display:inline; font-weight:700; font-size:.96rem; } .jargon dt::after { content:" - "; color:var(--ink-faint); white-space:pre-wrap; } .jargon dd { display:inline; margin:0; font-size:.94rem; color:var(--ink-soft); } .faq { display:flex; flex-direction:column; gap:.5rem; margin:1.1rem 0; } .faq-item { background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .faq-item summary { cursor:pointer; list-style:none; padding:.85rem 1rem; font-weight:700; font-size:.98rem; display:flex; align-items:center; gap:.6rem; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary::before { content:"+"; color:var(--accent); font-weight:800; font-size:1.2rem; line-height:1; flex:none; width:1rem; text-align:center; } .faq-item[open] summary::before { content:"\2013"; } .faq-item .fa { padding:0 1rem 1rem 2.6rem; font-size:.95rem; color:var(--ink-soft); line-height:1.55; } .donow { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem); margin:1.1rem 0; } .donow > .label { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.7rem; } .donow ol { list-style:none; counter-reset:donow; display:flex; flex-direction:column; gap:.6rem; margin:0; padding:0; } .donow li { counter-increment:donow; position:relative; padding-left:2.4rem; min-height:1.5rem; font-size: clamp(.95rem,1.6vw,1.06rem); line-height:1.45; } .donow li::before { content:counter(donow); position:absolute; left:0; top:.05em; width:1.7em; height:1.7em; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:.78rem; display:flex; align-items:center; justify-content:center; } .donow b { font-weight:700; } .cui-note { display:block; position:relative; padding-left:1.5rem; font-size:.88rem; color:var(--ink-soft); margin:.45rem 0 0; font-family:var(--font-serif); font-style:italic; line-height:1.55; } .cui-note::before { content:"\2191"; position:absolute; left:0; top:.05rem; color:var(--accent); font-weight:700; font-style:normal; } /* вкладки приложения Claude (Chat / Cowork / Code) - реплика интерфейса */ .cui-tabs { display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; } .cui-tab { display:inline-flex; align-items:center; gap:.55rem; padding:.55rem 1rem; border-radius:12px; color:#8d867b; font-weight:500; font-size:1rem; line-height:1; border:1px solid transparent; white-space:nowrap; } .cui-tab .cui-ic { width:19px; height:19px; flex:none; } .cui-tab.act { background:#3d3a36; color:#f3f1ec; border-color:rgba(255,255,255,.12); box-shadow:0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); } /* ============ УРОК «НАСТРОЙКИ»: страница во всю ширину ============ */ .content.show-settings .content-inner { max-width: none; padding-left: 0; padding-right: 0; } .content.show-settings .lesson.active > :not(.settings-frame), .content.show-settings .content-inner > .lesson-foot, .content.show-settings .content-inner > .comments { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: clamp(1.2rem,5vw,3rem); padding-right: clamp(1.2rem,5vw,3rem); } .content.show-settings .lesson.active > .settings-frame { margin: clamp(1.4rem,3.5vw,2.2rem) 0 0; } .content.show-settings .lesson.active > .settings-frame iframe { border-radius: 0; } /* ============================================================ CLAUDE LEARN — оболочка: топбар, дашборд, ⌘K-палитра, рейл, геймификация ============================================================ */ :root{ --cl-accent-soft: rgba(196,99,62,.12); --cl-track: var(--brand-surface2,#EFECE2); } html[data-theme="dark"]{ --cl-accent-soft: rgba(217,119,87,.16); --cl-track: var(--brand-surface2,#211f1c); } /* ---- топбар ---- */ .topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.6rem; height:58px; flex:none; padding:0 1rem 0 1rem; background:var(--cream,#F4F3EC); border-bottom:1px solid var(--line); } .tb-burger{ display:none; width:38px; height:38px; flex:none; border-radius:9px; border:1px solid var(--line); background:var(--paper); color:var(--ink); align-items:center; justify-content:center; cursor:pointer; } .tb-crumb{ min-width:0; flex:1; display:flex; align-items:center; gap:.5rem; font-size:.9rem; overflow:hidden; } .crumb-dot{ width:7px; height:7px; border-radius:50%; flex:none; } .crumb-mod{ color:var(--ink-faint); font-weight:600; white-space:nowrap; } .crumb-sep{ color:var(--ink-faint); } .crumb-les{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .crumb-dash{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; } .crumb-pill{ font-size:.7rem; font-weight:700; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:.15rem .55rem; } .tb-search{ position:relative; display:inline-flex; align-items:center; gap:.45rem; flex:none; width:min(320px,40vw); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.4rem .75rem; color:var(--ink-faint); transition:border-color .2s, box-shadow .2s; } .tb-search > svg{ flex:none; } .tb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); color:var(--ink); } .tb-search input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:.85rem; color:var(--ink); padding:0; } .tb-search input::placeholder{ color:var(--ink-faint); } .tb-search kbd{ flex:none; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); border:1px solid var(--line2,var(--line)); border-radius:5px; padding:.05rem .3rem; } /* inline search dropdown (anchored under the topbar search) */ .pal-drop{ position:absolute; top:calc(100% + .5rem); right:0; width:min(440px,86vw); max-height:min(58vh,430px); overflow-y:auto; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 26px 60px -28px rgba(60,40,20,.55); padding:.4rem; z-index:60; } .pal-drop[hidden]{ display:none; } .pal-row{ display:flex; align-items:center; gap:.65rem; width:100%; text-align:left; background:transparent; border:none; border-radius:10px; padding:.5rem .55rem; cursor:pointer; color:var(--ink); font:inherit; } .pal-row:hover, .pal-row.sel{ background:var(--accent-wash); } .pal-ic{ flex:none; display:inline-flex; color:var(--ink-faint); } .pal-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.05rem; } .pal-label{ font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pal-sub{ font-size:.72rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pal-done{ flex:none; color:var(--accent); font-weight:800; } .pal-empty{ padding:.9rem; text-align:center; color:var(--ink-faint); font-size:.85rem; } .tb-chip{ display:inline-flex; align-items:center; gap:.4rem; flex:none; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.4rem .7rem; font-size:.82rem; font-weight:700; } .tb-chip svg{ color:var(--accent); } .tb-chip.cold svg{ color:var(--ink-faint); } .tb-chip#tb-xp b{ color:var(--accent); font-size:.72rem; } @media(max-width:920px){ .tb-chip{ display:none; } .tb-burger{ display:inline-flex; } .tb-search{ width:min(210px,48vw); } .tb-search kbd{ display:none; } .pal-drop{ width:min(440px,92vw); } } /* ---- сайдбар: дашборд-кнопка + прогресс ---- */ .side-dash{ display:flex; align-items:center; gap:.6rem; margin:.7rem .8rem .2rem; padding:.6rem .8rem; border-radius:11px; border:1px solid transparent; background:transparent; color:var(--ink); font-weight:600; font-size:.92rem; cursor:pointer; text-align:left; transition:background .15s; font-family:inherit; } .side-dash:hover{ background:rgba(26,25,21,.05); } .side-dash.active{ background:var(--cl-accent-soft); color:var(--accent-ink); } .side-dash svg{ flex:none; } .side-progress{ padding:.5rem 1.1rem .8rem; } .side-progress-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.4rem; } .side-progress-head #side-pct{ color:var(--accent-ink); letter-spacing:0; } .side-progress-bar{ height:7px; border-radius:4px; background:var(--cl-track); overflow:hidden; } .side-progress-bar i{ display:block; height:100%; width:0; border-radius:4px; background:var(--accent); transition:width .5s ease; } .side-progress-sub{ font-size:.72rem; color:var(--ink-faint); margin-top:.4rem; } .module-label{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .mod-count{ font-size:.66rem; font-weight:700; letter-spacing:0; color:var(--ink-faint); } .lesson-nav .ln{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; font-size:.74rem; } .lesson-nav button.done .ln{ background:var(--accent); color:#fff; opacity:1; } .lesson-nav button.done .ln svg{ display:block; } .lesson-nav button.done .lt{ color:var(--ink-soft); } .lesson-nav .lt{ flex:1; min-width:0; overflow-wrap:break-word; word-break:break-word; } /* мета урока: уровень сверху, время под ним - компактной колонкой справа */ .lesson-nav .lmeta{ flex:none; align-self:center; display:flex; flex-direction:column; align-items:flex-end; gap:.22rem; } /* ---- общий ring ---- */ .ring{ border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; } .ring-i{ border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; font-family:var(--font-display); } /* ---- дашборд (Тёплый тактильный) ---- */ .dash-view{ } .dash-wrap{ max-width:1080px; margin:0 auto; padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,4vw,3rem) clamp(3rem,6vw,4.5rem); } .dash-h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 .4rem; } .dash-lead{ font-size:1.05rem; color:var(--ink-soft); margin:0 0 1.8rem; } .dash-top{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.1rem; margin-bottom:1.6rem; } .cont-card{ text-align:left; border:1px solid var(--accent); border-radius:var(--r-xl,24px); padding:1.6rem; cursor:pointer; background:linear-gradient(150deg,var(--cl-accent-soft),var(--paper) 70%); box-shadow:var(--shadow-md); transition:transform .2s; font-family:inherit; color:var(--ink); display:flex; flex-direction:column; } .cont-card:hover{ transform:translateY(-2px); } .cont-eyebrow{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; margin-bottom:.7rem; } .cont-title{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.12; margin-bottom:1.1rem; } .cont-bar{ height:8px; border-radius:5px; background:var(--cl-track); overflow:hidden; max-width:340px; margin-bottom:1.1rem; } .cont-bar i{ display:block; height:100%; border-radius:5px; background:var(--accent); } .cont-go{ align-self:flex-start; background:var(--accent); color:#fff; border-radius:999px; padding:.65rem 1.2rem; font-size:.9rem; font-weight:600; } .dash-stats{ display:flex; flex-direction:column; gap:1.1rem; } .stat-card{ flex:1; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl,24px); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:1rem; } .stat-flame{ width:48px; height:48px; border-radius:14px; background:var(--cl-accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; } .stat-flame svg{ width:24px; height:24px; } .stat-big{ font-family:var(--font-display); font-size:1.9rem; line-height:1; } .stat-cap{ font-size:.78rem; color:var(--ink-faint); } .stat-lvl{ font-size:.95rem; font-weight:700; } .rank-star{ color:var(--brand-clay,#c4633e); font-size:.9em; } /* лестница званий: ряд пилюль, пройденные подсвечены, текущее звание акцентом */ .rank-ladder{ display:flex; flex-wrap:wrap; gap:.4rem; margin:-.2rem 0 .4rem; } .rl-pill{ font-size:.78rem; font-weight:600; padding:.34rem .72rem; border-radius:999px; background:var(--brand-surface2,#efece2); color:var(--ink-faint); border:1px solid transparent; white-space:nowrap; transition:background var(--dur,.2s) var(--ease-out,ease), color var(--dur,.2s) var(--ease-out,ease); } .rl-pill.reached{ color:var(--ink); background:var(--accent-wash,#f6ece4); } .rl-pill.cur{ background:var(--brand-clay,#c4633e); color:#fff; border-color:var(--brand-clay,#c4633e); box-shadow:var(--shadow-sm); } .dash-sec{ display:flex; align-items:baseline; justify-content:space-between; margin:1.6rem 0 .8rem; } .dash-sec h2{ font-family:var(--font-display); font-weight:500; font-size:1.4rem; margin:0; } .dash-sec span{ font-size:.82rem; color:var(--ink-faint); font-weight:600; } .mod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.6rem; } .mod-card{ text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg,18px); padding:1.1rem; cursor:pointer; box-shadow:var(--shadow-sm); display:flex; gap:1rem; align-items:center; transition:transform .2s,border-color .2s; font-family:inherit; color:var(--ink); } .mod-card:hover{ transform:translateY(-2px); border-color:var(--line2,var(--line)); } .mc-body{ flex:1; min-width:0; } .mc-kicker{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:.2rem; } .mc-name{ font-size:.98rem; font-weight:600; line-height:1.2; margin-bottom:.25rem; } .mc-desc{ font-size:.8rem; line-height:1.4; color:var(--ink-soft); margin-bottom:.4rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mc-sub{ font-size:.78rem; color:var(--ink-faint); } .badges-card,.weekly-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl,24px); padding:1.2rem 1.4rem; box-shadow:var(--shadow-sm); margin-bottom:1.1rem; } .bc-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; } .bc-head h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:500; margin:0; } .bc-head span{ font-size:.82rem; color:var(--ink-faint); font-weight:600; } .badges-row{ display:flex; flex-wrap:wrap; gap:1.1rem; } .badge{ display:flex; flex-direction:column; align-items:center; gap:.5rem; width:78px; text-align:center; } .badge-medal{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cl-track); color:var(--ink-faint); border:1px dashed var(--line2,var(--line)); opacity:.6; } .badge.on .badge-medal{ background:var(--cl-accent-soft); color:var(--accent); border:0; opacity:1; } .badge-name{ font-size:.72rem; color:var(--ink-faint); line-height:1.15; } .badge.on .badge-name{ color:var(--ink-soft); } .wc-head{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); margin-bottom:1rem; } .weekly{ display:flex; align-items:flex-end; gap:.7rem; height:64px; } .wk{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; justify-content:flex-end; height:100%; } .wk-bar{ width:100%; max-width:18px; border-radius:5px; } .wk span{ font-size:.66rem; color:var(--ink-faint); font-weight:600; } /* ---- рейл урока ---- */ .lesson-rail[hidden]{ display:none; } .lesson-rail{ display:flex; flex-direction:column; gap:1rem; } .rl-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg,18px); padding:1.1rem; box-shadow:var(--shadow-sm); } .rl-prog{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; } .rl-prog .ring-i{ font-size:.56rem; } .rl-prog-t{ font-size:.63rem; font-weight:700; } .rl-prog-s{ font-size:.53rem; color:var(--ink-faint); } .rl-complete{ width:100%; border:0; border-radius:11px; padding:.7rem; font-size:.62rem; font-weight:700; cursor:pointer; background:var(--accent); color:#fff; font-family:inherit; transition:opacity .2s; } .rl-complete:hover{ opacity:.9; } .rl-complete.is-done{ background:var(--cl-accent-soft); color:var(--accent-ink); border:1px solid var(--accent); } .rl-h{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; } .rl-h-n{ background:var(--cl-track); border-radius:999px; padding:0 .45rem; font-size:.72rem; } .rl-check{ display:flex; align-items:center; gap:.6rem; width:100%; background:none; border:0; padding:.4rem 0; cursor:pointer; text-align:left; font-size:.86rem; color:var(--ink); font-family:inherit; } .rl-box{ width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--line2,var(--line)); display:flex; align-items:center; justify-content:center; } .rl-check.on .rl-box{ background:var(--accent); border-color:var(--accent); } .rl-check.on span:last-child{ color:var(--ink-faint); text-decoration:line-through; } .rl-ask-chips{ display:flex; flex-wrap:wrap; gap:.4rem; } .rl-ask-chip{ font-size:.78rem; font-weight:600; border:1px solid var(--line); background:var(--cream,#F4F3EC); border-radius:999px; padding:.35rem .7rem; cursor:pointer; color:var(--ink); font-family:inherit; } .rl-ask-chip:hover{ border-color:var(--accent); color:var(--accent-ink); } .rl-ask-a{ background:var(--cl-accent-soft); border-radius:10px; padding:.7rem .8rem; font-size:.84rem; line-height:1.5; margin-bottom:.7rem; } .rl-note{ border-top:1px solid var(--line); padding:.6rem 0 .2rem; } .rl-note:first-of-type{ border-top:0; } .rl-note-q{ font-size:.82rem; line-height:1.45; font-style:italic; } .rl-note-del{ background:none; border:0; color:var(--ink-faint); font-size:.72rem; cursor:pointer; padding:.2rem 0; font-family:inherit; } .rl-note-del:hover{ color:var(--accent-ink); } .rl-empty{ font-size:.8rem; color:var(--ink-faint); line-height:1.45; } /* ручной ввод заметки */ .rl-note-add{ margin-bottom:.8rem; } .rl-note-input{ width:100%; box-sizing:border-box; resize:vertical; min-height:2.6rem; border:1px solid var(--line); border-radius:11px; background:var(--brand-field,var(--cream,#F4F3EC)); color:var(--ink); font-family:inherit; font-size:.84rem; line-height:1.45; padding:.55rem .65rem; transition:border-color .2s; } .rl-note-input::placeholder{ color:var(--ink-faint); } .rl-note-input:focus{ outline:none; border-color:var(--accent); } .rl-note-save{ margin-top:.5rem; width:100%; border:0; border-radius:11px; padding:.55rem; font-size:.84rem; font-weight:700; cursor:pointer; background:var(--accent); color:#fff; font-family:inherit; transition:opacity .2s; } .rl-note-save:hover{ opacity:.9; } /* выделение текста → заметка */ .sel-tool{ position:fixed; transform:translate(-50%,-100%); z-index:80; background:#23211d; border-radius:9px; padding:.25rem; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); } .sel-tool[hidden]{ display:none; } .sel-tool button{ background:none; border:0; color:#f4f3ec; font-size:.8rem; font-weight:600; padding:.3rem .6rem; cursor:pointer; font-family:inherit; } /* ---- футер урока: отметка + назад/вперёд ---- */ .lesson-foot{ flex-direction:column; align-items:stretch; gap:1rem; } .complete-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:#fff; border:0; border-radius:999px; padding:.7rem 1.3rem; font-size:.92rem; font-weight:700; cursor:pointer; font-family:inherit; transition:opacity .2s,transform .2s; } .complete-btn:hover{ transform:translateY(-1px); } .complete-btn.is-done{ background:var(--cl-accent-soft); color:var(--accent-ink); border:1px solid var(--accent); } /* кнопка «пройти» заблокирована, пока не отмечены пункты чек-листа */ .complete-btn.is-locked{ background:var(--cl-track,#e7e3d7); color:var(--ink-faint); } .complete-btn.is-locked:hover{ transform:none; } .rl-complete.is-locked{ background:var(--cl-track,#e7e3d7); color:var(--ink-faint); } .rl-complete.is-locked:hover{ opacity:1; } /* чек-лист в футере урока (на узких экранах, где нет правого рейла) */ .foot-checklist{ flex-basis:100%; width:100%; box-sizing:border-box; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg,18px); padding:1rem 1.1rem; box-shadow:var(--shadow-sm); text-align:left; } .fc-h{ font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:.5rem; } .fc-item{ display:flex; align-items:center; gap:.65rem; width:100%; background:none; border:0; padding:.45rem 0; cursor:pointer; text-align:left; font-size:.9rem; line-height:1.35; color:var(--ink); font-family:inherit; } .fc-box{ flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:background .15s,border-color .15s; } .fc-item.on .fc-box{ background:var(--accent); border-color:var(--accent); } .fc-item .fc-box svg{ display:block; } @media(min-width:1180px){ .foot-checklist{ display:none; } } /* подсветка чек-листа при попытке пройти урок раньше времени */ .flash{ animation:fc-flash 1.2s ease; } @keyframes fc-flash{ 0%,100%{ box-shadow:var(--shadow-sm); } 25%,65%{ box-shadow:0 0 0 3px var(--accent); } } .foot-nav{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .foot-nav .pn-card:only-child{ grid-column:1 / -1; } .pn-card{ text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md,14px); padding:.9rem 1.1rem; cursor:pointer; font-family:inherit; color:var(--ink); transition:border-color .2s,transform .2s; display:flex; flex-direction:column; gap:.3rem; } .pn-card.next{ text-align:right; } .pn-card:hover{ border-color:var(--accent); transform:translateY(-1px); } .pn-cap{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); } .pn-title{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; } /* ---- сетка «урок + рейл» на широких экранах ---- */ @media(min-width:1180px){ .content.lesson-mode{ display:grid; grid-template-columns:minmax(0,1fr) 336px; grid-template-rows:auto 1fr; column-gap:44px; align-content:start; padding-right:clamp(1.5rem,3vw,2.5rem); } .content.lesson-mode > .topbar{ grid-column:1 / -1; margin:0 calc(-1*clamp(1.5rem,3vw,2.5rem)) 0 0; } .content.lesson-mode > .dash-view{ grid-column:1 / -1; } .content.lesson-mode > .content-inner{ grid-column:1; margin:0; max-width:820px; width:100%; justify-self:end; } .content.lesson-mode > .lesson-rail{ grid-column:2; position:sticky; top:74px; align-self:start; padding-top:clamp(2rem,5vw,4rem); } } .content.lesson-mode.show-settings{ display:block; } .content.show-settings .lesson-rail{ display:none; } /* ---- мобильный сайдбар как выезжающая шторка ---- */ @media(max-width:920px){ #app{ grid-template-columns:1fr; grid-template-rows:auto 1fr; } .sidebar{ position:fixed; top:0; left:0; bottom:0; width:290px; max-width:86vw; z-index:70; flex-direction:column; flex-wrap:nowrap; overflow-y:auto; border-right:1px solid var(--line); border-bottom:0; transform:translateX(-110%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:0 0 40px -10px rgba(0,0,0,.3); } #app.nav-open .sidebar{ transform:none; } .side-top{ order:0; border-bottom:1px solid var(--line); padding:1.1rem; } .module-label{ display:flex; } .side-user{ order:9; margin-top:auto; width:auto; border-top:1px solid var(--line); padding:1rem; } .side-brand small{ display:block; } .side-user .uname,.side-user .urole{ display:block; } .lesson-nav{ flex-direction:column; overflow:visible; padding:0 .8rem; gap:.2rem; } .lesson-nav button{ white-space:normal; } .lesson-nav button.is-child{ margin-left:1.3rem; border-left:2px solid var(--line); border-radius:0 9px 9px 0; } .sub-nav{ display:block; } #app::after{ content:''; position:fixed; inset:0; background:rgba(20,18,15,.42); z-index:60; opacity:0; pointer-events:none; transition:opacity .3s; } #app.nav-open::after{ opacity:1; pointer-events:auto; } .dash-top{ grid-template-columns:1fr; } .mod-grid{ grid-template-columns:1fr; } } @media(max-width:560px){ .foot-nav{ grid-template-columns:1fr; } } /* ---- уровни сложности уроков (Новичок / Средний / Продвинутый) ---- */ .lvl-chip{ flex:none; font-size:.6rem; font-weight:700; letter-spacing:.01em; line-height:1.5; padding:.05rem .45rem; border-radius:999px; white-space:nowrap; } .lvl-dot{ width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; } .lvl-b{ color:#2f7a47; background:rgba(58,138,82,.14); } /* Новичок */ .lvl-m{ color:#8a6418; background:rgba(176,134,59,.17); } /* Средний */ .lvl-a{ color:var(--accent-ink); background:var(--cl-accent-soft); } /* Продвинутый */ .lvl-dot.lvl-b{ background:#3a8a52; } .lvl-dot.lvl-m{ background:#b0863b; } .lvl-dot.lvl-a{ background:var(--accent); } html[data-theme="dark"] .lvl-b{ color:#7cc995; background:rgba(124,201,149,.15); } html[data-theme="dark"] .lvl-m{ color:#d9b063; background:rgba(217,176,99,.15); } html[data-theme="dark"] .lvl-dot.lvl-b{ background:#7cc995; } html[data-theme="dark"] .lvl-dot.lvl-m{ background:#d9b063; } /* в навигации: чип справа от заголовка, заголовок ужимается */ .lesson-nav .lt{ min-width:0; flex:1; } .sidebar{ scrollbar-gutter:stable; } .lesson-nav{ padding-right:1rem; } .lesson-nav .lvl-chip{ flex:none; font-size:.55rem; padding:.02rem .36rem; } .lesson-nav button{ gap:.45rem; } .lesson-nav button.is-child{ margin-left:.9rem; } .lesson-nav button.is-child .lvl-chip{ font-size:.52rem; padding:.02rem .32rem; } /* в рейле урока */ .rl-level{ display:flex; align-items:center; justify-content:space-between; margin:0 0 .9rem; } .rl-level-cap{ font-size:.55rem; color:var(--ink-faint); font-weight:600; } .rl-level .lvl-chip{ font-size:.46rem; padding:.12rem .55rem; } /* в шапке урока */ .tb-crumb .lvl-chip{ flex:none; } /* в палитре */ .pal-row .lvl-dot{ margin-left:.4rem; } /* время на прохождение урока */ .lesson-nav .lmin{ flex:none; font-size:.58rem; color:var(--ink-faint); white-space:nowrap; font-variant-numeric:tabular-nums; } .lesson-nav button.is-child .lmin{ font-size:.54rem; } .crumb-min{ flex:none; font-size:.7rem; color:var(--ink-faint); white-space:nowrap; } .rl-time{ font-size:.52rem; font-weight:700; color:var(--ink); white-space:nowrap; text-align:right; } .rl-time small{ display:block; font-weight:500; color:var(--ink-faint); font-size:.45rem; } .side-progress-time{ font-size:.72rem; color:var(--accent-deep,#b14b26); font-weight:600; margin-top:.3rem; } @media (max-width:720px){ .crumb-min{ display:none; } } /* ---- модули в навигации: единый плоский стиль (как кнопка «Дашборд»), без рамок; «белым» подсвечён только активный модуль ---- */ .nav-module{ margin:0; } .module-label{ width:100%; background:none; border:0; cursor:pointer; font:inherit; text-align:left; } .nav-module > .module-label{ display:flex; align-items:center; gap:.6rem; margin:.12rem .7rem; padding:.7rem .8rem; background:transparent; border:0; border-radius:11px; color:var(--ink); text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:600; line-height:1.3; transition:background .18s ease; } .nav-module > .module-label:hover{ background:var(--surface2); } /* активный (раскрытый) модуль — единственный «белый», без обводки */ .nav-module.open > .module-label, .nav-module.open > .module-label:hover{ background:var(--paper); } .module-label .ml-name{ flex:1; min-width:0; color:var(--ink); } /* счётчик уроков - мягкая плашка, тот же стиль во всех модулях */ .module-label .mod-count{ flex:none; font-size:.66rem; font-weight:700; letter-spacing:0; color:var(--ink-soft); background:var(--surface2); border-radius:var(--r-pill); padding:.14rem .55rem; white-space:nowrap; } .nav-module.open .module-label .mod-count{ background:var(--field); } .module-label .mod-count.has-progress{ color:var(--accent-ink); background:var(--accent-wash); } /* шеврон - тихий кружок, у активного модуля развёрнут */ .module-label .ml-chevron{ flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--field); color:var(--ink-soft); font-size:1rem; line-height:1; transform:rotate(0deg); transition:transform .3s cubic-bezier(.16,1,.3,1), background .2s ease, color .2s ease; } .nav-module.open .module-label .ml-chevron{ transform:rotate(90deg); background:var(--accent); color:#fff; } /* описание модуля - видно только когда модуль свёрнут, выровнено под названием */ .module-desc{ padding:.3rem 1.5rem .55rem; margin:0; font-size:.76rem; line-height:1.45; color:var(--ink-soft); } .nav-module.open .module-desc{ display:none; } /* плавное раскрытие списка уроков модуля */ .module-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1); } .nav-module.open .module-panel{ grid-template-rows:1fr; } .module-panel > .lesson-nav{ overflow:hidden; min-height:0; padding-top:.3rem; } /* ============ ПУБЛИЧНЫЙ (ПРОДАЮЩИЙ) РЕЖИМ ============ */ .is-public .lesson-rail, .is-public #tb-streak, .is-public #tb-xp, .is-public #comments, .is-public .foot-checklist, .is-public .complete-btn, .is-public .side-progress{ display:none !important; } /* на публичной странице урок занимает всю ширину (рейла нет) */ .is-public .content.lesson-mode{ display:block; } .is-public .content.lesson-mode > .content-inner{ max-width:820px; margin:0 auto; } /* CTA в топбаре */ .tb-cta{ display:flex; gap:.5rem; align-items:center; margin-left:auto; } .tb-cta-btn{ font-family:inherit; font-size:.82rem; font-weight:600; padding:.45rem .85rem; border-radius:999px; text-decoration:none; cursor:pointer; white-space:nowrap; line-height:1; } .tb-cta-btn.primary{ background:var(--accent); color:#fff; } .tb-cta-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); } .tb-cta-btn.primary:hover{ opacity:.92; } /* «Войти» в шапке курса показываем и на мобилке (поиск скрыт ниже, место есть) */ /* мобильный публичный топбар: прячем поиск, чтобы кнопки и переключатель темы помещались и не уезжали за край */ @media (max-width:720px){ .is-public .tb-search{ display:none; } } @media (max-width:430px){ .is-public .tb-crumb{ display:none; } } /* страховка от горизонтального скролла на телефоне (страница крутится только вверх/вниз) */ html, body{ overflow-x:hidden; } .content{ overflow-x:hidden; } .topbar{ max-width:100%; } /* paywall-карточка */ .pw-card{ text-align:center; max-width:540px; margin:1.6rem auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl,24px); padding:2.1rem 1.7rem; box-shadow:var(--shadow-md); } .pw-lock{ color:var(--accent); display:flex; justify-content:center; margin-bottom:.55rem; } .pw-title{ font-family:var(--font-display); font-size:1.5rem; line-height:1.15; margin:0 0 .55rem; } .pw-sub{ color:var(--ink-soft); margin:0 auto 1.3rem; max-width:44ch; line-height:1.5; } .pw-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; } .pw-btn{ font-family:inherit; font-weight:700; border-radius:12px; padding:.72rem 1.25rem; text-decoration:none; cursor:pointer; border:0; display:inline-block; transition:opacity .2s; } .pw-btn.primary{ background:var(--accent); color:#fff; } .pw-btn.primary:hover{ opacity:.92; } .pw-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); } .pw-btn.ghost:hover{ border-color:var(--accent); color:var(--accent-ink); } .pw-btn.link{ background:none; color:var(--accent-ink); border:0; align-self:center; font-weight:600; } .pw-btn.lg{ padding:.9rem 1.6rem; font-size:1.04rem; } .pw-note{ color:var(--ink-faint); font-size:.82rem; margin:.95rem 0 0; } /* тизер: затухание хвоста + paywall */ .lesson.tier-teaser{ position:relative; } .lesson.tier-teaser .pw-overlay{ position:relative; } .lesson.tier-teaser .pw-overlay::before{ content:""; display:block; height:160px; margin-top:-160px; background:linear-gradient(to bottom, transparent, var(--cream) 92%); pointer-events:none; position:relative; } .locked-wrap{ padding-top:1rem; } .locked-kicker{ text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:700; color:var(--accent-ink); margin:0 0 .4rem; } .locked-wrap .lesson-title{ margin:0 0 .4rem; } /* замочки + серый цвет (как описание) для закрытого в навигации */ .lesson-nav button.nav-locked .lt{ color:var(--ink-soft); } .lesson-nav button.nav-locked .lvl-chip, .lesson-nav button.nav-locked .lmin{ opacity:.55; } .nav-lock{ flex:none; margin-left:auto; color:var(--ink-faint); display:inline-flex; align-items:center; } .lesson-nav button.nav-teaser .nav-lock{ color:var(--accent); } /* закрытый модуль: серый заголовок + замок вместо/рядом с шевроном */ .is-public .nav-module.mod-locked > .module-label{ color:var(--ink-soft); } .is-public .nav-module.mod-locked > .module-label .ml-chevron{ display:none; } .ml-lock{ flex:none; display:inline-flex; align-items:center; color:var(--ink-faint); } .is-public .nav-module.mod-locked .module-desc{ color:var(--ink-faint); } /* продающий лендинг */ .pl-wrap{ max-width:980px; margin:0 auto; padding:1rem 0 3rem; } .pl-hero{ text-align:center; padding:2.4rem 1rem 1.4rem; } .pl-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; font-weight:700; color:var(--accent-ink); background:var(--accent-wash); border-radius:999px; padding:.35rem .8rem; margin:0 0 1rem; } .pl-title{ font-family:var(--font-display); font-size:clamp(2.1rem,6.4vw,3.9rem); line-height:1.06; letter-spacing:-.01em; margin:0 auto .4rem; max-width:16ch; } .pl-title-accent{ color:var(--accent); font-style:italic; } .pl-sub{ color:var(--ink-soft); font-size:clamp(1rem,.95rem+.5vw,1.18rem); line-height:1.55; max-width:54ch; margin:0 auto 1.6rem; } .pl-stats{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem .9rem; margin:0 auto 1.6rem; font-size:.95rem; color:var(--ink-soft); } .pl-stat b{ color:var(--ink); font-weight:700; } .pl-stat-accent b{ color:var(--accent-ink); } .pl-stat-dot{ width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.55; } @media (max-width:480px){ .pl-stat-dot{ display:none; } .pl-stats{ gap:.3rem .8rem; } } .pl-cta{ display:flex; gap:.7rem; justify-content:center; align-items:center; flex-wrap:wrap; } .pl-feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin:2.4rem 0; } .pl-feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg,18px); padding:1.3rem 1.2rem; box-shadow:var(--shadow-sm); } .pl-feat h3{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 .4rem; } .pl-feat p{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; margin:0; } .pl-curr{ margin:2.8rem 0; } .pl-h2{ font-family:var(--font-display); font-size:clamp(1.6rem,1rem+2.4vw,2.3rem); text-align:center; margin:0 0 .4rem; } .pl-h2sub{ text-align:center; color:var(--ink-faint); margin:0 0 1.6rem; } .lc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; } /* активный модуль (с открытыми уроками) - белая карточка; закрытые модули 2+ - приглушённо-серые, как описание */ .lc-mod{ background:var(--brand-surface2); border:1px solid var(--line); border-radius:var(--r-lg,18px); padding:1rem 1.1rem; } .lc-mod.open{ background:var(--paper); box-shadow:var(--shadow-sm); } .lc-mod:not(.open){ box-shadow:none; } .lc-mod:not(.open) .lc-mname{ color:var(--ink-soft); } .lc-mhead{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; } .lc-mname{ font-weight:700; font-size:.92rem; flex:1; } .lc-mfree{ flex:none; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--accent); border-radius:999px; padding:.18rem .5rem; } .lc-mlock{ flex:none; color:var(--ink-faint); display:inline-flex; } .lc-rows{ display:flex; flex-direction:column; gap:.1rem; } .lc-row{ display:flex; align-items:center; gap:.5rem; width:100%; background:none; border:0; text-align:left; padding:.4rem .2rem; cursor:pointer; font-family:inherit; color:var(--ink); border-radius:8px; } .lc-row:hover{ background:var(--brand-surface2); } .lc-name{ flex:1; font-size:.86rem; min-width:0; } .lc-row.is-locked .lc-name{ color:var(--ink-faint); } .lc-time{ flex:none; font-size:.7rem; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; } .lc-badge{ flex:none; font-size:.66rem; font-weight:700; border-radius:999px; padding:.12rem .45rem; display:inline-flex; align-items:center; } .lc-badge.free{ color:var(--accent-ink); background:var(--accent-wash); } .lc-badge.teaser{ color:var(--ink-soft); background:var(--brand-surface2); } .lc-badge.lock{ color:var(--ink-faint); padding:.12rem; } .pl-final{ text-align:center; background:var(--accent-wash); border-radius:var(--r-xl,24px); padding:2.4rem 1.4rem; margin-top:2.4rem; } .pl-final h2{ font-family:var(--font-display); font-size:clamp(1.5rem,1rem+2vw,2.1rem); margin:0 0 .5rem; } .pl-final p{ color:var(--ink-soft); max-width:46ch; margin:0 auto 1.4rem; line-height:1.5; } /* «второй мозг» в герое: рисованный мозг + парящие теги/частицы */ .pl-brain{ position:relative; width:280px; height:280px; margin:.4rem auto 1.6rem; } .pl-brain-glow{ position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, var(--accent-wash) 0%, transparent 70%); animation:plGlow 3.6s ease-in-out infinite; pointer-events:none; } .pl-brain-img{ position:absolute; inset:0; margin:auto; width:74%; height:auto; object-fit:contain; filter:drop-shadow(0 18px 38px rgba(150,70,40,.28)); animation:plBrainFloat 6s ease-in-out infinite; } html[data-theme="dark"] .pl-brain-img{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.5)); } @keyframes plBrainFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } .pl-tag{ position:absolute; display:inline-flex; align-items:center; gap:.42rem; padding:.34rem .7rem; border-radius:9px; font-size:.72rem; font-weight:600; white-space:nowrap; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); box-shadow:var(--shadow-sm); animation:plFloat 6s ease-in-out infinite; } .pl-tag.accent{ color:var(--accent-ink); border-color:var(--accent-soft); } .pl-tag i{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; animation:plPulse 2s ease-in-out infinite; } .pl-dot{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(217,119,87,.55); animation:plDrift 3.2s ease-in-out infinite; pointer-events:none; } @keyframes plFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } } @keyframes plPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } } @keyframes plGlow{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.92; transform:scale(1.1); } } @keyframes plDrift{ 0%{ opacity:0; transform:translate(0,0); } 40%{ opacity:1; } 100%{ opacity:0; transform:translate(5px,-12px); } } @media (min-width:768px){ .pl-brain{ width:440px; height:360px; } .pl-tag{ font-size:.78rem; } } @media (max-width:767px){ .pl-tag.sec{ display:none; } } @media (prefers-reduced-motion:reduce){ .pl-tag,.pl-dot,.pl-brain-glow,.pl-tag i,.pl-brain-img{ animation:none; } } /* ===== Защита контента от копирования: не выделяется ничего, КРОМЕ промтов (.code) и явно разрешённого (.copyable) ===== */ body{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } .code, pre.code, .copyable, .copyable *, input, textarea, [contenteditable]{ -webkit-user-select:text; -moz-user-select:text; user-select:text; } img{ -webkit-user-drag:none; user-drag:none; } /* ===== Навигация по клубу: ссылка из курса на хаб «Курсы и материалы» ===== */ .side-club{ text-decoration:none; transition:background .15s ease,color .15s ease,border-color .15s ease; } .side-club:hover{ background:var(--brand-surface2,#222)!important; border-color:var(--brand-clay,#10A37F)!important; } .side-club:hover svg{ opacity:1!important; }