/* ============================================================ ХимПодготовка — 10 класс Модульный стиль темы: «лабораторный журнал». Отличается от страницы теории Бутлерова: вместо бокового оглавления и сплошного полотна — четыре самостоятельных модуля, между которыми стоят контрольные точки. Токены берутся из class10.css, поэтому это другой макет, а не другой дизайн-код. ============================================================ */ .c10-mod-body { --m-accent: #0ea5e9; --m-accent-dark: #0369a1; --m-accent-tint: #e0f2fe; --m-ink: #16202e; --m-ink-soft: #5a6a7b; --m-line: #e3e8ef; --m-paper: #ffffff; background: linear-gradient(rgba(22, 32, 46, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 32, 46, .022) 1px, transparent 1px), #f6f7f9; background-size: 22px 22px, 22px 22px, auto; } /* Цветовые темы по разделам курса. Ставятся на рядом с .c10-mod-body: макет один, акцент разный — как в программе. */ .m-theme-amber { --m-accent: #f5a623; --m-accent-dark: #b45309; --m-accent-tint: #fff4e0; } .m-theme-sky { --m-accent: #0ea5e9; --m-accent-dark: #0369a1; --m-accent-tint: #e0f2fe; } .m-theme-emerald { --m-accent: #10b981; --m-accent-dark: #047857; --m-accent-tint: #d1fae5; } .m-theme-violet { --m-accent: #8b5cf6; --m-accent-dark: #5b21b6; --m-accent-tint: #ede9fe; } .c10-wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; } /* В style.css каждый h1 получает оранжевую черту снизу, а каждый h2 — вертикальную полоску через ::before. В модульном макете заголовки оформлены иначе, поэтому глобальный декор снимаем. */ .c10-mod-body h1, .c10-mod-body h2 { padding-left: 0; margin-top: 0; border-bottom: 0; padding-bottom: 0; } .c10-mod-body h1::before, .c10-mod-body h1::after, .c10-mod-body h2::before, .c10-mod-body h2::after { content: none; } /* Собственный акцент обложки — в палитре модуля, а не оранжевый. */ .m-cover h1::after { content: '' !important; display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--m-accent); position: static; margin-top: .7rem; } /* ============================================================ 1. Обложка темы ============================================================ */ .m-cover { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--m-line); background: var(--m-paper); box-shadow: 0 12px 34px rgba(22, 32, 46, .07); margin-bottom: 1.5rem; } .m-cover__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; } @media (max-width: 780px) { .m-cover__top { grid-template-columns: minmax(0, 1fr); } } .m-cover__text { padding: 2.1rem 2rem 1.8rem; } .m-cover__kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent-dark); background: var(--m-accent-tint); padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem; } .m-cover h1 { margin: 0 0 .7rem; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--m-ink); border: 0; padding: 0; } .m-cover__formula { font-family: 'Cambria Math', Georgia, serif; font-size: 1.5rem; color: var(--m-accent-dark); font-weight: 700; margin: 0 0 .8rem; } .m-cover p { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--m-ink-soft); max-width: 46ch; } .m-cover__stage { background: radial-gradient(circle at 50% 40%, #22314a 0%, #141c28 75%); min-height: 240px; position: relative; } .m-cover__stage canvas { display: block; } /* ============================================================ 2. Маршрут: четыре модуля ============================================================ */ .m-route { display: grid; /* auto-fit, чтобы маршрут одинаково хорошо ложился и на четыре крупных модуля, и на шесть мини-блоков */ grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .6rem; padding: 1.1rem 1.4rem 1.4rem; border-top: 1px solid var(--m-line); background: linear-gradient(180deg, #fbfcfd, #f7f9fb); } @media (max-width: 560px) { .m-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .m-route a { display: block; padding: .8rem .85rem; border-radius: 12px; border: 1px solid var(--m-line); background: #fff; text-decoration: none !important; color: inherit; transition: all .2s cubic-bezier(.4, 0, .2, 1); } .m-route a:hover { border-color: var(--m-accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 165, 233, .14); } .m-route__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--m-accent-tint); color: var(--m-accent-dark); font-size: .72rem; font-weight: 800; margin-bottom: .45rem; } .m-route b { display: block; font-size: .87rem; font-weight: 700; line-height: 1.3; color: var(--m-ink); } .m-route span { display: block; font-size: .74rem; color: var(--m-ink-soft); margin-top: .2rem; } /* ============================================================ 3. Модуль ============================================================ */ .m-module { position: relative; margin: 2.4rem 0; scroll-margin-top: 90px; } .m-module__head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.3rem; border-radius: 16px 16px 0 0; background: linear-gradient(135deg, #1d2735, #2a3a52); color: #fff; } .m-module__badge { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; font-weight: 800; background: var(--m-accent); color: #06212f; } .m-module__head h2 { margin: 0; border: 0; padding: 0; font-size: 1.22rem; font-weight: 800; color: #fff; letter-spacing: -.01em; } .m-module__head small { display: block; font-size: .76rem; font-weight: 500; color: rgba(255, 255, 255, .62); margin-top: .12rem; } .m-module__body { border: 1px solid var(--m-line); border-top: 0; border-radius: 0 0 16px 16px; background: var(--m-paper); padding: 1.6rem 1.7rem 1.8rem; box-shadow: 0 6px 20px rgba(22, 32, 46, .05); } @media (max-width: 640px) { .m-module__body { padding: 1.2rem 1rem 1.4rem; } .m-module__head { padding: .85rem 1rem; } } .m-module__body h3, .m-module__body h2 { margin: 1.9rem 0 .7rem; font-size: 1.06rem; font-weight: 700; color: var(--m-ink); display: flex; align-items: center; gap: .55rem; } .m-module__body h3::before, .m-module__body h2::before { content: ''; width: 3px; height: 17px; border-radius: 2px; background: var(--m-accent); flex-shrink: 0; } .m-module__body > h3:first-child, .m-module__body > h2:first-child { margin-top: 0; } /* Выключка по ширине приходит из общего style.css. В конспекте она рвёт строку пробелами: переносы в русском тексте браузер расставить не берётся, и на месте коротких формул получаются дыры. Читается хуже, чем ровный левый край. */ .m-module__body p { margin: 0 0 .95rem; line-height: 1.72; color: #2c3a4b; text-align: left; } .m-module__body li { text-align: left; } .m-module__body ul, .m-module__body ol { margin: 0 0 1.05rem; padding-left: 1.3rem; line-height: 1.72; color: #2c3a4b; } .m-module__body li { margin-bottom: .4rem; } .m-module__body strong { color: var(--m-ink); font-weight: 700; } /* Уравнение реакции */ .m-eq { font-family: 'Cambria Math', Georgia, serif; font-size: 1.08rem; line-height: 1.9; background: #f8fafc; border: 1px solid var(--m-line); border-left: 4px solid var(--m-accent); border-radius: 10px; padding: .85rem 1.1rem; margin: 1rem 0 1.2rem; overflow-x: auto; } .m-eq div + div { margin-top: .35rem; } .m-eq b { color: var(--m-accent-dark); font-weight: 700; } /* Врезки */ .m-note { --n: var(--m-accent); margin: 1.3rem 0; padding: .95rem 1.15rem; border-radius: 11px; background: #fff; border: 1px solid var(--m-line); border-left: 4px solid var(--n); } .m-note--key { --n: #f59e0b; background: linear-gradient(135deg, #fff, #fffbf2); } .m-note--trap { --n: #ef4444; background: linear-gradient(135deg, #fff, #fff7f7); } .m-note--exam { --n: #6366f1; background: linear-gradient(135deg, #fff, #f7f8ff); } .m-note--lab { --n: #10b981; background: linear-gradient(135deg, #fff, #f4fdf9); } .m-note__t { font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n); margin-bottom: .4rem; } .m-note p:last-child, .m-note ul:last-child { margin-bottom: 0; } /* Таблица */ .m-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.4rem; border: 1px solid var(--m-line); border-radius: 11px; } .m-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 460px; } .m-table th, .m-table td { padding: .62rem .85rem; text-align: left; border-bottom: 1px solid var(--m-line); } .m-table th { background: #f6f8fa; font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: var(--m-ink); } .m-table tr:last-child td { border-bottom: 0; } .m-table tbody tr:hover { background: #fbfcfd; } .m-table code { font-family: 'Cambria Math', Georgia, serif; font-size: 1em; } /* ============================================================ 4. Контрольная точка (тест после модуля) ============================================================ */ .m-check { margin: 1.6rem 0 0; border: 2px solid var(--m-accent); border-radius: 16px; overflow: hidden; background: var(--m-paper); box-shadow: 0 8px 24px rgba(14, 165, 233, .1); } .m-check__head { display: flex; align-items: center; gap: .75rem; padding: .95rem 1.3rem; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-dark)); color: #fff; } .m-check__head svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; flex-shrink: 0; } .m-check__head b { font-size: .98rem; font-weight: 800; } .m-check__head span { font-size: .8rem; color: rgba(255, 255, 255, .82); margin-left: auto; } @media (max-width: 560px) { .m-check__head span { display: none; } } /* Тренажёр внутри контрольной точки наследует общие стили, но без внешней рамки — её рисует сама контрольная точка. */ .m-check .c10-trainer__bar { background: #f8fafc; } /* ============================================================ 5. Итог темы ============================================================ */ .m-finish { margin-top: 2.5rem; padding: 1.6rem 1.7rem; border-radius: 16px; background: linear-gradient(135deg, #1d2735, #2a3a52); color: #fff; } .m-finish h2 { margin: 0 0 .6rem; border: 0; padding: 0; color: #fff; font-size: 1.2rem; } .m-finish p { margin: 0 0 1rem; color: rgba(255, 255, 255, .74); font-size: .92rem; line-height: 1.65; } .m-finish ul { margin: 0; padding-left: 1.2rem; color: rgba(255, 255, 255, .84); font-size: .9rem; line-height: 1.75; } .m-finish b { color: #7dd3fc; } /* ============================================================ 8. Микротемы Тема разрезана на страницы: у каждой микротемы свой адрес, свой заголовок и своя контрольная точка. Страница темы стала оглавлением, поэтому здесь появились три новых блока — шапка микротемы, полоса соседей и переход «назад/дальше». ============================================================ */ /* Модуль без тёмной шапки: заголовок вынесен в h1 страницы. */ .m-module--solo { margin-top: 1.6rem; } .m-module--solo .m-module__body { border-top: 1px solid var(--m-line); border-radius: 16px; } .m-sub { margin-top: 1.4rem; padding: 1.6rem 1.7rem 1.5rem; border: 1px solid var(--m-line); border-radius: 16px; background: linear-gradient(135deg, #1d2735, #2a3a52); color: #fff; } .m-sub__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .m-sub__kicker a { color: var(--m-accent); text-decoration: none; } .m-sub__kicker a:hover { text-decoration: underline; } .m-sub__kicker span { color: rgba(255, 255, 255, .55); font-weight: 600; } .m-sub h1 { margin: .55rem 0 0; font-size: clamp(1.45rem, 3.4vw, 2rem); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: #fff; } .m-sub__lead { margin: .6rem 0 0; text-align: left; font-size: .93rem; line-height: 1.6; color: rgba(255, 255, 255, .74); max-width: 60ch; } /* Полоса соседних микротем: видно, где ты сейчас и сколько осталось. */ .m-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; } .m-subnav a { flex-shrink: 0; } .m-subnav a { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem .5rem .5rem; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-paper); text-decoration: none; font-size: .82rem; font-weight: 600; color: var(--m-ink-soft); transition: .15s; } .m-subnav a b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef1f5; color: var(--m-ink-soft); font-size: .72rem; font-weight: 800; } .m-subnav a:hover { border-color: var(--m-accent); color: var(--m-ink); } .m-subnav a[aria-current="page"] { border-color: transparent; background: var(--m-ink); color: #fff; } .m-subnav a[aria-current="page"] b { background: var(--m-accent); color: #06212f; } /* Переход к соседней микротеме */ .m-subpager { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 2rem 0 1rem; } .m-subpager a { display: block; padding: .95rem 1.15rem; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-paper); text-decoration: none; transition: .15s; } .m-subpager a:hover { border-color: var(--m-accent); box-shadow: 0 6px 18px rgba(22, 32, 46, .07); } .m-subpager a.is-next { text-align: right; } .m-subpager small { display: block; font-size: .74rem; font-weight: 700; color: var(--m-ink-soft); } .m-subpager b { display: block; margin-top: .25rem; font-size: .93rem; font-weight: 700; color: var(--m-ink); line-height: 1.35; } /* Карточки микротем на странице темы: тот же маршрут, но со счётчиком задач. Колонкой, чтобы счётчик прижался к низу и метки выстроились в одну линию независимо от того, в сколько строк лёг заголовок. */ .m-route--cards a { display: flex; flex-direction: column; align-items: flex-start; height: 100%; } .m-route--cards em { display: inline-block; margin-top: auto; padding-top: .55rem; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--m-ink-soft); background: #eef1f5; border-radius: 6px; padding: .18rem .45rem; } /* «Как проходить тему» на странице-оглавлении */ .m-howto { margin: 2rem 0; padding: 1.4rem 1.6rem; border: 1px solid var(--m-line); border-left: 3px solid var(--m-accent); border-radius: 14px; background: var(--m-paper); } .m-howto h2 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 800; color: var(--m-ink); } .m-howto p { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.68; color: #2c3a4b; } .m-howto p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .m-sub { padding: 1.25rem 1.1rem 1.15rem; } /* Полоса микротем в одну строку с прокруткой: четырьмя плашками столбиком она съедала пол-экрана до начала конспекта. */ .m-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; margin-left: -.2rem; padding-left: .2rem; } .m-subnav::-webkit-scrollbar { display: none; } .m-subpager { grid-template-columns: 1fr; } .m-subpager a.is-next { text-align: left; } .m-howto { padding: 1.1rem 1.1rem; } } /* ============================================================ 9. Схема реакции Раньше реакции писались строкой вида «CH2=CH2 + H2 →(Ni, t) CH3–CH3»: условия втискивались в саму стрелку, а подпись к реакции держалась на инлайновом style прямо в разметке. В органике условие решает, какой получится продукт: одна и та же пара веществ при разной температуре даёт разные вещества. Поэтому реагент стоит над стрелкой, условия под ней — как в учебнике, — и глаз видит их раздельно, а не разбирает скобки. ============================================================ */ .m-rx { display: grid; gap: .55rem; margin: 1.1rem 0 1.3rem; } .m-rx__step { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .7rem; padding: .8rem 1rem; border: 1px solid var(--m-line); border-left: 4px solid var(--m-accent); border-radius: 11px; background: var(--m-paper); } .m-rx__mol { font-family: 'Cambria Math', Georgia, serif; font-size: 1.06rem; line-height: 1.5; color: var(--m-ink); } /* Стрелка: три строки — реагент, линия, условия. Строки расставлены явно (grid-row), иначе псевдоэлемент с линией встал бы первым. */ .m-rx__arrow { position: relative; flex: 0 0 auto; align-self: center; min-width: 84px; display: grid; grid-template-rows: 1fr 10px 1fr; justify-items: center; text-align: center; font-size: .72rem; line-height: 1.3; } .m-rx__arrow b { grid-row: 1; align-self: end; padding-bottom: 2px; font-weight: 700; color: var(--m-accent-dark); } .m-rx__arrow i { grid-row: 3; align-self: start; padding-top: 2px; font-style: normal; color: var(--m-ink-soft); } .m-rx__arrow::before { content: ''; grid-row: 2; align-self: center; justify-self: stretch; height: 1.5px; background: #94a3b8; } .m-rx__arrow::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 6px solid #94a3b8; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; } /* Название реакции или продукта — прижато к правому краю строки. */ .m-rx__tag { margin-left: auto; font-size: .78rem; color: var(--m-ink-soft); } /* Обратимая реакция: вторая линия и головка, смотрящая назад. */ .m-rx__step--eq .m-rx__arrow::after { border-left-color: #94a3b8; } .m-rx__step--eq .m-rx__arrow::before { height: 5px; background: none; border-top: 1.5px solid #94a3b8; border-bottom: 1.5px solid #94a3b8; } @media (max-width: 560px) { /* В строку три блока не помещаются: ставим друг под другом, а стрелку заменяем понятной сверху вниз. */ .m-rx__step { flex-direction: column; align-items: flex-start; gap: .25rem; } .m-rx__arrow { display: flex; gap: .45rem; min-width: 0; padding-left: 1px; text-align: left; } .m-rx__arrow::before, .m-rx__arrow::after { content: none; } .m-rx__arrow b::before { content: '\2193\00a0'; color: #94a3b8; } .m-rx__tag { margin-left: 0; } }