/* ------------------------------------------------------------------ do.pravoslavnayashkola.ru — оформление главной страницы и страницы входа в стиле z.pravoslavnayashkola.ru (local_pravoslavfront). Подключается из /pfront/landing.html через $CFG->additionalhtmltopofbody. ------------------------------------------------------------------ */ /* ============================ 1. Палитра ============================ */ /* По умолчанию — тёмная тема. Светлая включается атрибутом на , его выставляет скрипт в landing.html (запоминается в localStorage). */ :root { --pf-bg-start: #1a1410; --pf-bg-end: #2a1f17; --pf-header-bg: rgba(15, 11, 8, 0.6); --pf-card-start: #2d2218; --pf-card-end: #1f1812; --pf-card-hover: rgba(212, 175, 106, 0.15); --pf-card-active-start: #3a2a1c; --pf-card-active-end: #2a1f17; --pf-input-bg: #241b13; --pf-border: #4a3a26; --pf-border-soft: #4a3a26; --pf-accent: #d4af6a; --pf-accent-soft: rgba(212, 175, 106, 0.18); --pf-text-strong: #f0e2c0; --pf-text-base: #e8d9b5; --pf-text-muted: #a89976; --pf-text-dim: #8a7a5a; --pf-text-faint: #6b5e40; --pf-on-accent: #1a1410; } html[data-pf-theme="light"] { --pf-bg-start: #f5ecd6; --pf-bg-end: #e8ddc0; --pf-header-bg: rgba(245, 237, 215, 0.75); --pf-card-start: #fdf8ea; --pf-card-end: #f5ecd6; --pf-card-hover: rgba(139, 106, 37, 0.12); --pf-card-active-start: #ebe0c4; --pf-card-active-end: #e0d4b3; --pf-input-bg: #fffdf6; --pf-border: #c9b58a; --pf-border-soft: #d9c8a0; --pf-accent: #8b6a25; --pf-accent-soft: rgba(139, 106, 37, 0.18); --pf-text-strong: #2a1f10; --pf-text-base: #3a2e1f; --pf-text-muted: #6b5840; --pf-text-dim: #8a7a5a; --pf-text-faint: #a89976; --pf-on-accent: #fdf8ea; } /* ================= 2. Где показывать наши блоки ===================== */ /* Разметка вставляется в начало на всех страницах Moodle, поэтому по умолчанию она скрыта (см. также страховочный inline-стиль в landing.html на случай, если этот файл не загрузится). */ #pf-landing { display: none; } #pf-loginhead { display: none; } body#page-site-index #pf-landing { display: flex; } body.pagelayout-login #pf-loginhead { display: block; } /* ============ 3. Главная: убираем стандартный интерфейс Moodle ======= */ body#page-site-index nav.navbar, body#page-site-index nav.fixed-top, body#page-site-index #nav-drawer, body#page-site-index [data-region="drawer"], body#page-site-index .secondary-navigation, body#page-site-index #page-header, body#page-site-index #page-footer, body#page-site-index #region-main-box { display: none !important; } body#page-site-index #page, body#page-site-index #page-wrapper, body#page-site-index #page-content, body#page-site-index #topofscroll { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } body#page-site-index { padding-top: 0 !important; margin-top: 0 !important; background: var(--pf-bg-start); } /* ========================= 4. Общая оболочка ======================== */ #pf-landing { font-family: 'Georgia', 'Times New Roman', serif; background: linear-gradient(180deg, var(--pf-bg-start) 0%, var(--pf-bg-end) 100%); color: var(--pf-text-base); min-height: 100vh; flex-direction: column; transition: background 0.4s ease, color 0.4s ease; box-sizing: border-box; } #pf-landing *, #pf-landing *::before, #pf-landing *::after, #pf-loginhead *, #pf-loginhead *::before, #pf-loginhead *::after { box-sizing: border-box; } /* Гасим ссылочные стили Moodle внутри наших блоков. */ #pf-landing a, #pf-landing a:link, #pf-landing a:visited, #pf-landing a:hover, #pf-landing a:focus, #pf-landing a:active, #pf-loginhead a, #pf-loginhead a:link, #pf-loginhead a:visited, #pf-loginhead a:hover, #pf-loginhead a:focus, #pf-loginhead a:active { color: inherit; text-decoration: none; background: none; } #pf-landing button, #pf-loginhead button { font-family: inherit; } /* ============================ 5. Шапка ============================= */ .pf-site-header { border-bottom: 1px solid var(--pf-border); background: var(--pf-header-bg); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: 'Georgia', 'Times New Roman', serif; color: var(--pf-text-base); } .pf-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .pf-brand-emblem { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--pf-accent); color: var(--pf-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .pf-brand-text { font-size: 0.95rem; line-height: 1.25; min-width: 0; } .pf-brand-org { font-size: 0.7rem; color: var(--pf-text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; } .pf-brand-name { display: block; color: var(--pf-text-base); } .pf-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .pf-theme-toggle { width: 38px; height: 38px; border: 1px solid var(--pf-accent); background: transparent; color: var(--pf-accent); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; } .pf-theme-toggle:hover { background: var(--pf-accent); color: var(--pf-on-accent); } .pf-theme-toggle svg { width: 18px; height: 18px; display: block; } /* Селекторы с двумя классами — иначе правило .pf-theme-toggle svg выше перебивает их по специфичности и видны сразу обе иконки. */ .pf-theme-toggle .pf-icon-moon { display: none; } html[data-pf-theme="light"] .pf-theme-toggle .pf-icon-sun { display: none; } html[data-pf-theme="light"] .pf-theme-toggle .pf-icon-moon { display: block; } .pf-btn { border: 1px solid var(--pf-accent); color: var(--pf-accent); background: transparent; padding: 8px 22px; border-radius: 2px; font-family: inherit; font-size: 0.9rem; text-decoration: none; transition: all 0.2s; cursor: pointer; white-space: nowrap; letter-spacing: 0.05em; } .pf-btn:hover { background: var(--pf-accent); color: var(--pf-on-accent); } /* Залитый вариант — для главного действия («Регистрация» рядом с «Войти»). */ .pf-btn-primary { background: var(--pf-accent); color: var(--pf-on-accent); } .pf-btn-primary:hover { background: transparent; color: var(--pf-accent); box-shadow: 0 0 0 2px var(--pf-accent-soft); } /* Кнопка зависит от того, вошёл пользователь или нет: Moodle ставит на класс notloggedin для гостей. */ .pf-btn-login, .pf-btn-signup, .pf-btn-dash, .pf-foot-guest, .pf-foot-user { display: none; } body.notloggedin .pf-btn-login, body.notloggedin .pf-btn-signup, body.notloggedin .pf-foot-guest { display: inline-block; } body:not(.notloggedin) .pf-btn-dash, body:not(.notloggedin) .pf-foot-user { display: inline-block; } /* ====================== 6. Главная: содержимое ====================== */ .pf-main { flex: 1; padding: 60px 20px; } .pf-container { max-width: 1280px; margin: 0 auto; } .pf-page-header { text-align: center; margin-bottom: 60px; } .pf-page-header h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: normal; color: var(--pf-accent); margin: 0 0 12px; letter-spacing: 0.02em; line-height: 1.15; font-family: inherit; } .pf-page-header p { font-size: clamp(0.95rem, 2.5vw, 1.1rem); color: var(--pf-text-muted); font-style: italic; margin: 0; } .pf-divider { width: 60px; height: 1px; background: var(--pf-accent); margin: 20px auto; } .pf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* Пока курс один — карточка по центру, а не растянута на всю ширину. */ .pf-cards-1 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .pf-card { background: linear-gradient(180deg, var(--pf-card-start) 0%, var(--pf-card-end) 100%); border: 1px solid var(--pf-border-soft); border-radius: 4px; padding: 36px 24px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; } .pf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--pf-accent), transparent); } .pf-card:hover { transform: translateY(-6px); border-color: var(--pf-accent); box-shadow: 0 10px 30px var(--pf-card-hover); } .pf-card:active { transform: translateY(-2px); } .pf-card-disabled { opacity: 0.5; cursor: not-allowed; } .pf-card-disabled:hover { transform: none; box-shadow: none; } .pf-card-number { font-size: 3rem; color: var(--pf-accent); line-height: 1; margin-bottom: 16px; } .pf-card-title { font-size: 1.25rem; color: var(--pf-text-strong); margin-bottom: 10px; line-height: 1.3; } .pf-card-subtitle { font-size: 0.9rem; color: var(--pf-text-muted); font-style: italic; margin-bottom: 18px; } .pf-card-desc { font-size: 0.85rem; color: var(--pf-text-dim); line-height: 1.5; } /* Карточка только с римской цифрой — без названия и описания. */ .pf-cards-numonly { max-width: 240px; } .pf-card-numonly { padding: 40px 24px; } .pf-card-numonly .pf-card-number { margin-bottom: 0; } /* ========================= 7. Подвал главной ======================== */ .pf-site-footer { border-top: 1px solid var(--pf-border); background: var(--pf-header-bg); padding: 24px 32px; margin-top: 60px; } .pf-footer-row { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pf-footer-contacts { font-size: 0.85rem; color: var(--pf-text-muted); line-height: 1.7; } #pf-landing .pf-footer-contacts a { color: var(--pf-accent); border-bottom: 1px dotted var(--pf-text-faint); } #pf-landing .pf-footer-contacts a:hover { border-bottom-style: solid; } .pf-divider-dot { margin: 0 10px; color: var(--pf-border); } #pf-landing .pf-foot-link { font-size: 0.75rem; color: var(--pf-text-faint); letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px dotted var(--pf-border); padding-bottom: 1px; transition: color 0.2s; } #pf-landing .pf-foot-link:hover { color: var(--pf-text-muted); border-bottom-color: var(--pf-text-muted); } /* ===================== 8. Страница входа Moodle ===================== */ body.pagelayout-login { background: linear-gradient(180deg, var(--pf-bg-start) 0%, var(--pf-bg-end) 100%); background-color: var(--pf-bg-start); color: var(--pf-text-base); font-family: 'Georgia', 'Times New Roman', serif; } body.pagelayout-login #page { padding-top: 0 !important; } body.pagelayout-login #page-content { padding-top: 32px; } body.pagelayout-login h1, body.pagelayout-login h2, body.pagelayout-login h3, body.pagelayout-login .card-title h2 { font-family: 'Georgia', 'Times New Roman', serif; font-weight: normal; color: var(--pf-accent); } body.pagelayout-login .card { background: linear-gradient(180deg, var(--pf-card-start) 0%, var(--pf-card-end) 100%); border: 1px solid var(--pf-border-soft); border-radius: 4px; color: var(--pf-text-base); position: relative; overflow: hidden; } body.pagelayout-login .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--pf-accent), transparent); } body.pagelayout-login .card-header { background: transparent; border-bottom: 1px solid var(--pf-border-soft); padding: 22px 16px 18px; font-size: 1.5rem; color: var(--pf-accent); } /* Логотип Moodle в шапке карточки выключен — название школы уже выведено в нашей шапке выше. Чтобы вернуть его, удалите правило. */ body.pagelayout-login .card-header img { display: none; } body.pagelayout-login .pf-login-title { display: block; font-size: 1.5rem; color: var(--pf-accent); letter-spacing: 0.02em; } body.pagelayout-login .pf-login-title small { display: block; margin-top: 8px; font-size: 0.85rem; font-style: italic; color: var(--pf-text-muted); letter-spacing: 0; } body.pagelayout-login .card-body { padding: 28px 24px; } body.pagelayout-login label, body.pagelayout-login p, body.pagelayout-login b, body.pagelayout-login strong { color: var(--pf-text-base); } body.pagelayout-login .form-control { background: var(--pf-input-bg); border: 1px solid var(--pf-border); color: var(--pf-text-strong); border-radius: 2px; padding: 11px 14px; height: auto; font-family: inherit; font-size: 0.95rem; } body.pagelayout-login .form-control::placeholder { color: var(--pf-text-faint); opacity: 1; } body.pagelayout-login .form-control:focus { background: var(--pf-input-bg); border-color: var(--pf-accent); color: var(--pf-text-strong); box-shadow: 0 0 0 2px var(--pf-accent-soft); outline: none; } /* Автозаполнение Chrome/Safari иначе заливает поле белым. */ body.pagelayout-login input:-webkit-autofill, body.pagelayout-login input:-webkit-autofill:hover, body.pagelayout-login input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--pf-input-bg) inset; -webkit-text-fill-color: var(--pf-text-strong); caret-color: var(--pf-text-strong); } body.pagelayout-login .btn-primary, body.pagelayout-login #loginbtn { background: var(--pf-accent); border: 1px solid var(--pf-accent); color: var(--pf-on-accent); border-radius: 2px; font-family: inherit; letter-spacing: 0.05em; padding: 10px 22px; transition: all 0.2s; text-shadow: none; } body.pagelayout-login .btn-primary:hover, body.pagelayout-login #loginbtn:hover, body.pagelayout-login #loginbtn:focus { background: transparent; color: var(--pf-accent); box-shadow: 0 0 0 2px var(--pf-accent-soft); } body.pagelayout-login a { color: var(--pf-accent); } body.pagelayout-login a:hover { color: var(--pf-accent); text-decoration: underline; } body.pagelayout-login .rememberpass label, body.pagelayout-login .forgetpass { color: var(--pf-text-muted); } /* Служебная иконка «?» у подсказки про cookies — бирюзовый Bootstrap выбивается. */ body.pagelayout-login .icon.text-info, body.pagelayout-login .text-info { color: var(--pf-text-muted) !important; } body.pagelayout-login input[type="checkbox"] { accent-color: var(--pf-accent); } body.pagelayout-login .alert-danger, body.pagelayout-login .loginerrors { background: rgba(160, 60, 45, 0.14); border: 1px solid #a03c2d; color: #f0c9bf; border-radius: 2px; } html[data-pf-theme="light"] body.pagelayout-login .alert-danger, html[data-pf-theme="light"] body.pagelayout-login .loginerrors { background: rgba(160, 60, 45, 0.08); color: #7a2418; } body.pagelayout-login #page-footer { background: var(--pf-header-bg) !important; border-top: 1px solid var(--pf-border); color: var(--pf-text-muted) !important; font-size: 0.82rem; } body.pagelayout-login #page-footer a { color: var(--pf-text-muted); } body.pagelayout-login #page-footer a:hover { color: var(--pf-accent); } /* Кнопка «Создать учетную запись» в блоке «Вы в первый раз на нашем сайте?» — это главное действие карточки, поэтому делаем её залитой, как на главной. */ body.pagelayout-login #signup .btn-secondary { background: var(--pf-accent); border: 1px solid var(--pf-accent); color: var(--pf-on-accent); } body.pagelayout-login #signup .btn-secondary:hover { background: transparent; color: var(--pf-accent); box-shadow: 0 0 0 2px var(--pf-accent-soft); } /* Шапка над формой входа */ #pf-loginhead .pf-site-header { margin-bottom: 0; } /* =================== 8a. Страница регистрации ======================= */ /* signup.php идёт с pagelayout-login и со своей карточкой, поэтому палитра, поля и кнопки из раздела 8 уже применились. Здесь — только то, чего нет на странице входа: сама форма (mform) и её заголовки. */ /* В карточке снова выводится логотип Moodle — прячем блок целиком, заголовок «Новая учетная запись» ниже остаётся. */ body#page-login-signup .card-title.text-xs-center { display: none; } body#page-login-signup .card-title h3 { margin-bottom: 18px; } body.pagelayout-login .mform fieldset { border: 0; padding: 0; margin: 0 0 10px; } body.pagelayout-login .mform legend, body.pagelayout-login .mform legend a, body.pagelayout-login .mform .ftoggler, body.pagelayout-login .mform .ftoggler a { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.05rem; color: var(--pf-accent); text-decoration: none; } body.pagelayout-login .collapsible-actions .collapseexpand { color: var(--pf-text-muted); cursor: pointer; font-size: 0.85rem; } body.pagelayout-login .collapsible-actions .collapseexpand:hover { color: var(--pf-accent); } body.pagelayout-login .col-form-label, body.pagelayout-login .mform label { color: var(--pf-text-base); } body.pagelayout-login .form-control-static { color: var(--pf-text-muted); } /* Bootstrap раскрашивает утилиты через !important — перебиваем тем же. */ body.pagelayout-login .text-danger, body.pagelayout-login .text-danger .icon { color: #d98b7a !important; } body.pagelayout-login .form-control-feedback, body.pagelayout-login .invalid-feedback { color: #f0c9bf; } body.pagelayout-login select.custom-select, body.pagelayout-login select.form-control { background: var(--pf-input-bg); border: 1px solid var(--pf-border); color: var(--pf-text-strong); border-radius: 2px; height: auto; padding: 10px 12px; font-family: inherit; font-size: 0.95rem; } body.pagelayout-login select.custom-select:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 2px var(--pf-accent-soft); outline: none; } body.pagelayout-login .btn-secondary { background: transparent; border: 1px solid var(--pf-border); color: var(--pf-text-base); border-radius: 2px; font-family: inherit; letter-spacing: 0.05em; padding: 10px 22px; text-shadow: none; } body.pagelayout-login .btn-secondary:hover { background: transparent; border-color: var(--pf-accent); color: var(--pf-accent); } /* Кнопки формы: «Создать мой новый аккаунт» и «Отмена» — в одну строку с отступом. */ body#page-login-signup #fgroup_id_buttonar .form-group { margin-right: 10px; } /* Подсказки «?» у полей. */ body.pagelayout-login .mform .btn-link { color: var(--pf-text-muted); } body.pagelayout-login .mform .btn-link:hover { color: var(--pf-accent); } /* ========================== 9. Адаптив ============================= */ @media (max-width: 960px) { .pf-site-header { padding: 12px 20px; } .pf-brand-text { font-size: 0.85rem; } .pf-brand-org { font-size: 0.65rem; } .pf-main { padding: 48px 18px; } .pf-page-header { margin-bottom: 44px; } .pf-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } .pf-cards-1 { grid-template-columns: 1fr; } .pf-card { padding: 32px 22px; } .pf-card-number { font-size: 2.6rem; margin-bottom: 14px; } .pf-site-footer { padding: 22px 20px; } .pf-header-actions { gap: 10px; } } @media (max-width: 600px) { .pf-site-header { padding: 12px 14px; gap: 10px; flex-wrap: wrap; } .pf-header-actions { flex-wrap: wrap; justify-content: flex-end; } .pf-brand-emblem { width: 32px; height: 32px; font-size: 0.95rem; } .pf-brand-text { font-size: 0.74rem; line-height: 1.2; } .pf-brand-org { font-size: 0.56rem; } .pf-header-actions { gap: 8px; } .pf-theme-toggle { width: 32px; height: 32px; } .pf-theme-toggle svg { width: 15px; height: 15px; } .pf-btn { padding: 6px 12px; font-size: 0.78rem; } .pf-main { padding: 32px 16px; } .pf-page-header { margin-bottom: 32px; } .pf-page-header h1 { margin-bottom: 8px; } .pf-divider { margin: 14px auto; width: 48px; } .pf-cards { grid-template-columns: 1fr; gap: 14px; } .pf-card { padding: 22px 20px; display: grid; grid-template-columns: 64px 1fr; gap: 18px; text-align: left; align-items: center; } .pf-card::before { display: none; } .pf-card-left { border-right: 1px solid var(--pf-border-soft); padding-right: 14px; text-align: center; } .pf-card-number { font-size: 2.4rem; margin-bottom: 0; } .pf-card-title { font-size: 1.1rem; margin-bottom: 4px; } .pf-card-subtitle { margin-bottom: 8px; font-size: 0.85rem; } .pf-card-desc { font-size: 0.82rem; line-height: 1.45; } .pf-card-numonly { display: block; grid-template-columns: none; text-align: center; padding: 26px 20px; } .pf-card:hover { transform: none; box-shadow: none; } .pf-card:active { background: linear-gradient(180deg, var(--pf-card-active-start) 0%, var(--pf-card-active-end) 100%); } .pf-site-footer { padding: 20px 16px; margin-top: 32px; } .pf-footer-row { flex-direction: column; gap: 14px; text-align: center; } .pf-footer-contacts { font-size: 0.8rem; } .pf-divider-dot { display: none; } .pf-contact-line { display: block; } #pf-landing .pf-foot-link { font-size: 0.7rem; } body.pagelayout-login .card-body { padding: 22px 16px; } } @media (max-width: 380px) { .pf-brand-emblem { display: none; } .pf-brand-text { font-size: 0.7rem; } .pf-btn { padding: 6px 10px; font-size: 0.74rem; } } @media (max-width: 340px) { .pf-card { grid-template-columns: 52px 1fr; gap: 14px; padding: 18px 16px; } .pf-card-numonly { grid-template-columns: none; padding: 22px 16px; } .pf-card-number { font-size: 2rem; } .pf-card-title { font-size: 1rem; } .pf-card-desc { font-size: 0.78rem; } }