/* ========================================================= mathbesedina.ru — стили сайта Идея: школьная тетрадь в клетку как визуальный язык. Каждый курс имеет свой «цвет обложки» — это не украшение, а способ ориентироваться (Материалы ↔ Тесты используют одинаковую цветовую маркировку курсов). ========================================================= */ /* Шрифты подключены через в каждой страницы (не через @import здесь) — это позволяет браузеру загружать их параллельно с этим файлом, а не последовательно после него. */ :root{ /* --- палитра: «фонарь в тёмной комнате» --- Имена переменных сохранены прежними (--coral, --teal, --purple, --yellow), чтобы не трогать разметку — меняются только значения. --purple/--purple-deep теперь несут смысл «свет фонаря» и это же цвет Геометрии — совпадение специально, это наш пилотный курс. */ --paper: #FBF6E9; --paper-deep: #F3E7CC; --grid-line: #E4D3AA; --ink: #3B2A1D; --ink-soft: #6B5842; --card: #FFFDF6; --coral: #B5651D; /* было ярко-коралловый → корешок «Алгебра»: обожжённая глина */ --coral-deep: #8C4C14; --teal: #6F8F5B; /* было бирюзовый → корешок «Математика 5–6»: шалфей */ --teal-deep: #4F6B3E; --purple: #D98B2E; /* было фиолетовый → свет фонаря / корешок «Геометрия» */ --purple-deep: #A8661C; --yellow: #7A3B4C; /* было жёлтый → корешок «Вероятность»: старое вино */ --yellow-deep: #5C2837; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 8px; --shadow-card: 0 3px 14px rgba(59,42,29,0.12); --shadow-pop: 0 8px 26px rgba(59,42,29,0.16); --font-heading: 'PT Serif', Georgia, serif; --font-display: 'PT Sans', system-ui, sans-serif; --font-body: 'PT Sans', system-ui, sans-serif; --font-mono: 'Space Mono', monospace; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--font-body); color: var(--ink); background: var(--paper); min-height: 100vh; line-height: 1.55; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } a{ color: inherit; } img{ max-width:100%; display:block; } h1,h2,h3,h4{ font-family: var(--font-heading); margin: 0 0 .5em; font-weight:700; letter-spacing: normal; } h1{ font-size: clamp(2rem, 4vw, 3rem); font-weight:700; } h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); } h3{ font-size: 1.25rem; } p{ margin:0 0 1em; color: var(--ink-soft); } .mono{ font-family: var(--font-mono); } .container{ max-width: 1120px; margin: 0 auto; padding: 0 24px; } :focus-visible{ outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; } /* ---------- Верхняя навигация: «стикеры-закладки» ---------- */ .site-header{ position: sticky; top:0; z-index: 40; background: var(--paper); border-bottom: 2px solid var(--ink); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width: 1120px; margin:0 auto; gap: 16px; flex-wrap: nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .header-inner::-webkit-scrollbar{ display:none; } #auth-box{ flex-shrink:0; white-space:nowrap; } .brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.25rem; text-decoration:none; color: var(--ink); flex-shrink:0; } .brand-mark{ width:34px; height:34px; border-radius:9px; background: var(--coral); display:grid; place-items:center; color:white; font-family: var(--font-mono); font-weight:700; box-shadow: 0 3px 0 var(--coral-deep); transform: rotate(-6deg); } .main-nav{ display:flex; gap:6px; flex-wrap:nowrap; flex-shrink:0; } @media (max-width: 640px){ .header-inner{ padding:12px 16px; } .brand{ flex-shrink:0; } .tab{ padding:8px 12px 7px; font-size:.85rem; white-space:nowrap; } #auth-box{ flex-shrink:0; } } .mobile-sticky-cta{ display:none; } @media (max-width: 640px){ .mobile-sticky-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 14px; background:var(--card); border-top:2px solid var(--ink); box-shadow: 0 -6px 16px rgba(59,42,29,.12); } .mobile-sticky-cta .btn{ flex:1; justify-content:center; } body{ padding-bottom:64px; } } .tab{ font-family: var(--font-display); font-weight:600; font-size:.95rem; text-decoration:none; color: var(--ink); padding: 10px 16px 8px; border: 2px solid var(--ink); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--card); position: relative; top: 2px; transition: transform .15s ease, background .15s ease; } .tab:hover{ transform: translateY(-2px); } .tab.active{ background: var(--yellow); box-shadow: 0 -2px 0 var(--ink) inset; } .login-btn{ font-family: var(--font-display); font-weight:600; font-size:.9rem; background: var(--ink); color: var(--paper); border:none; border-radius: 10px; padding: 10px 16px; cursor:pointer; text-decoration:none; box-shadow: 0 3px 0 #241A12; } .login-btn:hover{ transform: translateY(1px); box-shadow: 0 2px 0 #241A12; } /* ---------- Hero ---------- */ .hero{ padding: 64px 0 40px; } .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; } @media (max-width: 860px){ .hero-grid{ grid-template-columns: 1fr; } } .author-card{ display:grid; grid-template-columns: 200px 1fr; gap:28px; } @media (max-width: 640px){ .author-card{ grid-template-columns: 1fr; } .author-card img{ max-width:220px; margin:0 auto; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size: .8rem; text-transform:uppercase; letter-spacing:.08em; background: var(--card); border:2px solid var(--ink); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; } .hero h1{ margin-bottom: .35em; } .hero .lead{ font-size: 1.15rem; max-width: 46ch; } .hero-actions{ display:flex; gap:14px; margin-top: 22px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:600; font-size: 1rem; padding: 13px 22px; border-radius: 12px; border: 2px solid var(--ink); text-decoration:none; cursor:pointer; background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); transition: transform .12s ease, box-shadow .12s ease; } .btn:hover{ transform: translate(-1px,-2px); } .btn-primary{ background: var(--coral); color:#fff; box-shadow: 0 6px 0 var(--coral-deep); } .btn-primary:hover{ box-shadow: 0 8px 0 var(--coral-deep); } .btn-ghost{ background:transparent; } .btn-sm{ padding: 8px 14px; font-size:.85rem; border-radius:9px; } /* ---------- Стопка тетрадей (иллюстрация на главной) ---------- */ .notebook-stack{ position:relative; height: 320px; } .nb{ position:absolute; width: 210px; height: 270px; border-radius: 14px; border: 2px solid var(--ink); box-shadow: var(--shadow-pop); padding: 18px; display:flex; flex-direction:column; justify-content:space-between; } .nb-spine{ position:absolute; left:0; top:0; bottom:0; width: 16px; border-right: 2px solid var(--ink); background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 6px, transparent 6px 14px); } .nb .nb-title{ font-family: var(--font-display); font-weight:700; color:#fff; font-size:1.05rem; } .nb .nb-sub{ font-family: var(--font-mono); color: rgba(255,255,255,.85); font-size:.8rem; } .nb1{ background: var(--teal); left: 0; top: 40px; transform: rotate(-9deg); z-index:1; } .nb2{ background: var(--purple); left: 110px; top: 6px; transform: rotate(4deg); z-index:2; } .nb3{ background: var(--coral); left: 60px; top: 60px; transform: rotate(-2deg); z-index:3; } .nb4{ background: var(--yellow); left: 170px; top: 90px; transform: rotate(10deg); z-index:0; } /* ---------- Секции / карточки ---------- */ .section{ padding: 48px 0; } .section-head{ max-width: 60ch; margin-bottom: 32px; } .cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; } .card{ background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; gap: 10px; } .card .tag{ align-self:flex-start; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding: 4px 10px; border-radius: 999px; color:#fff; } /* Цветовая маркировка курсов — используется одинаково на страницах «Материалы» и «Тесты» */ .tag-math56, .accent-math56{ background: var(--teal); } .tag-algebra, .accent-algebra{ background: var(--coral); } .tag-geometry, .accent-geometry{ background: var(--purple); } .tag-probability, .accent-probability{ background: var(--yellow); color:#fff; } .border-math56{ border-color: var(--teal-deep); } .border-algebra{ border-color: var(--coral-deep); } .border-geometry{ border-color: var(--purple-deep); } .border-probability{ border-color: var(--yellow-deep); } /* ---------- Шаги "как пользоваться" ---------- */ .steps{ counter-reset: step; display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:18px; } .step{ border: 2px dashed var(--ink); border-radius: var(--radius-md); padding: 18px; background: var(--card); } .step::before{ counter-increment: step; content: counter(step); font-family: var(--font-mono); font-weight:700; font-size:1.1rem; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background: var(--ink); color:var(--paper); margin-bottom:10px; } /* ---------- Пример карты «Кабинета» ---------- */ .map-example{ display:flex; flex-direction:column; gap:10px; } .map-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius: var(--radius-sm); background: var(--paper); border-left: 5px solid var(--ink-soft); } .map-row span:first-child{ font-family: var(--font-body); font-size:.95rem; } .map-status{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } .subject-picker{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 28px; } .subject-picker select, .subject-picker input{ font-family: var(--font-body); font-size:1rem; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 14px; background: var(--card); color: var(--ink); } .class-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 30px; } .class-tab{ font-family: var(--font-mono); font-weight:700; font-size:.95rem; border: 2px solid var(--ink); border-radius: 999px; padding: 8px 16px; background: var(--card); cursor:pointer; } .class-tab.active{ background: var(--ink); color: var(--paper); } .umk-block{ border: 2px solid var(--ink); border-radius: var(--radius-lg); margin-bottom: 22px; overflow:hidden; background: var(--card); box-shadow: var(--shadow-card); } .umk-head{ padding: 18px 22px; display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; } .umk-head h3{ margin:0; } .umk-authors{ font-size:.85rem; color: var(--ink-soft); margin:2px 0 0; } .section-list{ border-top: 2px solid var(--ink); } .section-row{ border-bottom: 1px dashed var(--grid-line); } .section-row:last-child{ border-bottom:none; } .section-row summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 22px; font-family: var(--font-display); font-weight:600; } .section-row summary::-webkit-details-marker{ display:none; } .section-row summary .hours{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-soft); font-weight:400; } .section-row summary .chev{ transition: transform .15s ease; font-size:1.1rem; } .section-row[open] summary .chev{ transform: rotate(90deg); } .teacher-row summary .chev{ transition: transform .15s ease; display:inline-block; } .teacher-row[open] summary .chev{ transform: rotate(90deg); } .section-body{ padding: 0 22px 20px; } .section-body .topic-text{ font-size:.92rem; } .material-list{ display:flex; flex-direction:column; gap:8px; margin: 10px 0 16px; } .material-item{ display:flex; align-items:center; gap:10px; border: 1.5px solid var(--grid-line); border-radius: 10px; padding: 8px 12px; font-size:.9rem; background: var(--paper-deep); } .material-item .ico{ font-size:1.05rem; } .material-item a{ text-decoration: underline; word-break: break-all; } .material-item .del{ margin-left:auto; border:none; background:none; cursor:pointer; color:var(--coral-deep); font-family: var(--font-mono); font-size:.8rem; } .empty-hint{ font-size:.85rem; color: var(--ink-soft); font-style: italic; } #courses-root, #quizzes-root{ min-height: 420px; } .attach-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-top: 1.5px dashed var(--grid-line); padding-top: 14px; } .attach-form input[type="text"], .attach-form input[type="url"]{ flex:1; min-width: 160px; font-family: var(--font-body); padding: 9px 12px; border-radius:8px; border: 1.5px solid var(--ink-soft); } .file-btn{ font-family: var(--font-mono); font-size:.8rem; cursor:pointer; border: 1.5px solid var(--ink); border-radius:8px; padding:9px 12px; background:var(--card); } .file-btn input{ display:none; } /* ---------- Тесты ---------- */ .quiz-card{ border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--card); padding: 24px; box-shadow: var(--shadow-card); margin-bottom: 22px; } .quiz-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; } .quiz-meta{ font-family: var(--font-mono); font-size:.8rem; color: var(--ink-soft); } .q{ margin: 22px 0; padding-top: 18px; border-top: 1.5px dashed var(--grid-line); } .q:first-of-type{ border-top:none; } .q-title{ font-weight:700; margin-bottom: 10px; } .options{ display:flex; flex-direction:column; gap:8px; } .option{ display:flex; align-items:center; gap:10px; border: 1.5px solid var(--ink-soft); border-radius:10px; padding: 10px 14px; cursor:pointer; font-size:.95rem; background: var(--paper); } .option:hover{ border-color: var(--ink); } .option input{ accent-color: var(--purple); width:16px; height:16px; } .option.correct{ border-color: var(--teal-deep); background: #E6F7F4; } .option.wrong{ border-color: var(--coral-deep); background: #FDEBE8; } .quiz-result{ margin-top: 18px; padding: 16px; border-radius: 12px; border: 2px dashed var(--ink); font-family: var(--font-display); font-weight:600; display:none; } .quiz-result.show{ display:block; } /* ---------- Регистрация: "витрина" для подростков ---------- */ .register-wrap{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 0; border: 2px solid var(--ink); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-pop); background: var(--card); } @media (max-width: 880px){ .register-wrap{ grid-template-columns: 1fr; } } .register-side{ position:relative; overflow:hidden; background: linear-gradient(160deg, var(--purple) 0%, var(--coral) 100%); color:#fff; padding: 36px 32px; display:flex; flex-direction:column; gap:22px; } .register-side::before, .register-side::after{ content:""; position:absolute; border-radius:50%; background: rgba(255,255,255,.14); } .register-side::before{ width:220px; height:220px; top:-70px; right:-70px; } .register-side::after{ width:140px; height:140px; bottom:-50px; left:-40px; background: rgba(255,255,255,.10); } .register-kicker{ font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; background: rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.5); display:inline-flex; padding:5px 12px; border-radius:999px; align-self:flex-start; position:relative; z-index:1; } .register-side h2{ position:relative; z-index:1; margin:0; font-size:1.7rem; } .register-side p{ position:relative; z-index:1; color: rgba(255,255,255,.92); margin:0; } .benefit-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; } .benefit-item{ display:flex; align-items:flex-start; gap:12px; } .benefit-ico{ flex:none; width:38px; height:38px; border-radius:11px; background: rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center; font-size:1.15rem; } .benefit-item b{ display:block; font-family: var(--font-display); font-size:.98rem; } .benefit-item span.small{ font-size:.85rem; color: rgba(255,255,255,.88); } .level-strip{ position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; padding-top: 6px; border-top: 1.5px dashed rgba(255,255,255,.45); } .level-chip{ font-family: var(--font-mono); font-size:.72rem; background: rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.5); padding: 5px 10px; border-radius: 999px; } .register-form-col{ padding: 36px 34px; } .register-form-col h1{ margin-bottom:.2em; } .role-toggle{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin: 8px 0 18px; } .role-card{ border: 2px solid var(--ink-soft); border-radius: var(--radius-md); padding: 14px; text-align:center; cursor:pointer; background: var(--paper); transition: transform .12s ease, border-color .12s ease, background .12s ease; } .role-card .ico{ font-size:1.6rem; display:block; margin-bottom:4px; } .role-card b{ font-family: var(--font-display); font-size:.95rem; } .role-card span{ display:block; font-size:.78rem; color: var(--ink-soft); } .role-card:hover{ transform: translateY(-2px); } .role-card.selected{ border-color: var(--purple-deep); background: var(--paper-deep); } .role-card input{ display:none; } .grade-pills{ display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0 4px; } .grade-pill{ font-family: var(--font-mono); font-weight:700; font-size:.92rem; border: 2px solid var(--ink-soft); border-radius: 999px; padding: 8px 15px; cursor:pointer; background: var(--paper); } .grade-pill.selected{ border-color: var(--ink); background: var(--teal-deep); color:#fff; } /* ---------- Обратная связь ---------- */ .feedback-form{ max-width: 560px; display:flex; flex-direction:column; gap: 14px; } .feedback-form label{ font-family: var(--font-display); font-weight:600; font-size:.92rem; } .feedback-form input, .feedback-form textarea, .feedback-form select{ font-family: var(--font-body); font-size:1rem; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); width:100%; } .feedback-form textarea{ min-height: 130px; resize: vertical; } .form-note{ font-size:.85rem; color: var(--ink-soft); } /* ---------- Футер ---------- */ .site-footer{ border-top: 2px solid var(--ink); margin-top: 60px; padding: 28px 0; font-size:.85rem; color: var(--ink-soft); } .footer-inner{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } /* ---------- Утилиты ---------- */ .flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .badge{ font-family: var(--font-mono); font-size:.72rem; padding:4px 10px; border-radius:999px; border:1.5px solid var(--ink); background:var(--card); } .divider{ height:2px; background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px); margin: 40px 0; border:none; } /* ---------- Интро-сцена: фонарь ---------- */ #intro-overlay{ position: fixed; inset: 0; z-index: 999; background: var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 22px; padding: 24px; text-align:center; cursor: pointer; animation: intro-hide .8s ease forwards; animation-delay: 3.6s; } .intro-glow{ width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--purple) 0%, rgba(217,139,46,.35) 55%, rgba(217,139,46,0) 76%); opacity: 0; animation: intro-glow-in 1.6s ease forwards; animation-delay: .2s; } .intro-line{ margin:0; opacity:0; } .intro-line-1{ font-family: var(--font-heading); font-style: italic; color: var(--ink); font-size: clamp(1.25rem, 3.2vw, 1.9rem); max-width: 20ch; animation: intro-text-in 1.2s ease forwards; animation-delay: 1.4s; } .intro-line-2{ font-family: var(--font-display); font-weight:700; font-size: .85rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); animation: intro-text-in 1s ease forwards; animation-delay: 2.7s; } @keyframes intro-glow-in{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } } @keyframes intro-text-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } @keyframes intro-hide{ to{ opacity:0; visibility:hidden; pointer-events:none; } } @media (prefers-reduced-motion: reduce){ #intro-overlay{ display:none; } }