/* ========================= 0) ЖЁСТКИЙ СБРОС / BASE ========================= */ /* Современный reset + предсказуемые размеры */ *, *::before, *::after { box-sizing: border-box; } /* Убираем типичную "старую стилистику" */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } /* Таблицы: без промежутков и "наследия" */ table { border-collapse: collapse; border-spacing: 0; } td, th { vertical-align: top; } /* Ссылки/кнопки без дефолтных эффектов */ a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: none; } button { cursor: pointer; } /* Изображения */ img { max-width: 100%; height: auto; display: block; } /* Убираем "курсив" у address и т.п. */ address { font-style: normal; } /* ========================= 1) ШРИФТЫ ========================= */ @font-face { font-family: "Kaori Cyrillic"; src: local("Kaori Cyrillic"), local("KaoriRegular"), url("https://yubileyniy.ucoz.net/srifty/KaoriRegular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* Nunito: если у вас уже подключён в другом месте — можно убрать. Если нет — подключите через Google Fonts в (см. HTML ниже). */ :root{ --ui-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nunito: "Nunito", var(--ui-sans); --kaori: "Kaori Cyrillic", var(--ui-sans); /* ========================= 2) ЦВЕТА / ГРАДИЕНТЫ ========================= */ --bg: #f6fbef; --card: #ffffff; --text: #1f2a1f; --muted: #4a5a4a; --brand: #775F10; /* цвет "ЮБИЛЕЙНЫЙ" */ --line: rgba(31, 42, 31, 0.12); /* мягкая зелень */ --g1: #b0d088; --g2: #9bc06a; --g3: #a2c674; --g4: #d2ebb4; --header-grad: linear-gradient(135deg, var(--g4), var(--g1) 45%, var(--g2)); --chip-grad: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); --btn-grad: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.7)); --soft-shadow: 0 6px 18px rgba(0,0,0,0.08); /* размеры для доступности */ --radius: 14px; --pad: 12px; --tap: 48px; /* минимальная высота тапа */ } /* ========================= 3) ОСНОВНОЙ LAYOUT / PWA-готовность ========================= */ html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; background: var(--bg); } body{ min-height: 100%; font-family: var(--nunito); font-size: 18px; /* крупнее для плохого зрения */ line-height: 1.35; color: var(--text); background: var(--bg); /* iOS safe-area */ padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* Контейнер "страницы" */ .pda-page{ width: min(720px, 100%); margin: 0 auto; padding: 10px 10px 0; } /* ========================= 4) ХЕДЕР (верхняя строка из таблицы) ========================= */ /* uCoz PDA часто рисует шапку таблицей: переоформим её как "app bar" */ .pda-header{ background: var(--header-grad); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--soft-shadow); overflow: hidden; } /* заставляем таблицу быть "флексоподобной" визуально */ .pda-header table{ width: 100%; } .pda-header td{ padding: 12px; vertical-align: middle; } /* Лого-слово */ .pda-logo{ font-family: var(--kaori); letter-spacing: 1px; text-transform: uppercase; color: var(--brand); font-size: 22px; line-height: 1.1; white-space: nowrap; } /* Правая часть (пользователь/выход) */ .pda-user{ text-align: right; font-size: 16px; color: rgba(31,42,31,0.85); } .pda-user a{ text-decoration: underline; text-underline-offset: 3px; } /* ========================= 5) СЕКЦИИ-КАРТОЧКИ вместо "серых таблиц" ========================= */ .pda-card{ margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,0.06); overflow: hidden; } .pda-card__title{ padding: 12px 12px; background: linear-gradient(135deg, rgba(210,235,180,0.9), rgba(176,208,136,0.65)); border-bottom: 1px solid var(--line); font-weight: 700; color: rgba(31,42,31,0.9); } .pda-card__body{ padding: 12px; } /* ========================= 6) КНОПКИ / ПЛИТКИ (для меню) ========================= */ /* Внутри $SMENU_1$ часто простой список/таблица ссылок. Сделаем "плитки" через стили ссылок внутри блока меню. */ .pda-menu a{ display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 10px 12px; margin: 8px 0; border-radius: 12px; background: var(--btn-grad); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-weight: 700; } .pda-menu a:active{ transform: translateY(1px); } /* ========================= 7) ФОРМА ВХОДА ========================= */ .pda-login form{ display: grid; gap: 10px; } .pda-login input[type="text"], .pda-login input[type="password"], .pda-login input[type="email"], .pda-login input[type="tel"], .pda-login input[type="search"]{ width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; } .pda-login input[type="submit"], .pda-login button{ min-height: var(--tap); padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(31,42,31,0.20); background: linear-gradient(180deg, rgba(176,208,136,0.9), rgba(155,192,106,0.8)); font-weight: 800; } /* ========================= 8) ФОРУМ / $BODY$ ========================= */ .forumContent{ margin-top: 10px; } /* Уберём "пустую полоску" forum-menu */ .forum-menu{ display: none; } /* Подчистим типичные таблицы форума */ .forumContent table{ width: 100% !important; background: transparent !important; } .forumContent td, .forumContent th{ padding: 10px !important; border-bottom: 1px solid var(--line); } /* Заголовки и хлебные крошки (если есть) */ .forumContent h1, .forumContent h2, .forumContent h3{ font-family: var(--nunito); font-weight: 800; margin: 8px 0 10px; } /* Ссылки в контенте */ .forumContent a{ text-decoration: underline; text-underline-offset: 3px; } /* ========================= 9) НИЖНЯЯ НАВИГАЦИЯ (фиксированная) ========================= */ .pda-bottomnav{ position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .pda-bottomnav__inner{ width: min(720px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 10px; } .pda-navbtn{ min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--chip-grad); display: grid; place-items: center; gap: 2px; padding: 6px 8px; } .pda-navbtn strong{ font-size: 14px; letter-spacing: 0.3px; } .pda-navbtn span{ font-size: 20px; line-height: 1; } /* ========================= 10) "Полная версия" и копирайт ========================= */ .pda-footer{ margin: 12px 0 90px; /* место под нижнюю панель */ text-align: center; color: rgba(31,42,31,0.75); } .pda-footer a{ display: inline-block; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-decoration: underline; text-underline-offset: 3px; } .copyright{ margin: 10px 0 0; padding: 0 10px 20px; text-align: center; font-size: 14px; color: rgba(31,42,31,0.6); }