/* ========================================================================== Design tokens ========================================================================== Все переменные определены только в области .home, чтобы не влиять на другие страницы. Значения подобраны для темной, выразительной палитры и соблюдают контраст WCAG AA. */ /* * Layout and palette for the exercises landing page. The variables defined * within .home correspond to the light theme by default. When the * `dark-theme` class is present on the body element the variables are * overridden to provide a deep yet slightly lifted dark palette. These * tokens are used throughout this stylesheet to colour backgrounds, * borders, text and accents. */ .home { /* Light theme values (default) */ --home-bg: #f5f7fa; --home-surface: #ffffff; --home-card: #f0f4f8; --home-text: #1e293b; --home-muted: #64748b; --home-border: #d1d5db; --home-primary: #7c3aed; --home-accent: var(--home-primary); --home-hover: var(--navbar-hover-background); /* Typography */ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-feature-settings: "tnum" 1, "lnum" 1; font-size: 16px; line-height: 1.5; /* Basic layout */ background-color: var(--home-bg); color: var(--home-text); min-height: 100vh; padding-top: 0rem; padding-bottom: 0rem; } /* Dark theme overrides for the exercise page. When the body element * carries the `dark-theme` class these values take precedence. This palette * is slightly lighter than the original dark theme to improve legibility * while still maintaining depth. */ /* When any ancestor has `dark-theme` (typically or ) * override the exercise page tokens. This selector ensures the dark * palette is applied immediately when the class is added to the document * element early in the page load. */ .dark-theme .home { --home-bg: #0d1117; --home-surface: #161b22; --home-card: #1e2530; --home-text: #c9d1d9; --home-muted: #8b949e; --home-border: #30363d; --home-primary: #8c76ec; --home-accent: var(--home-primary); --home-hover: var(--navbar-hover-background); } /* ========================================================================== Layout ========================================================================== Контейнеры секций и сетка. Сетка адаптивная: количество колонок меняется в зависимости от ширины экрана. Gap подобран под вертикальный ритм. */ .home-section { margin-bottom: 1rem; /* Increase internal padding so the coloured background doesn't hug the tiles */ background-color: var(--home-surface); border-radius: 16px; border: 1px solid var(--home-border); /* Умеренная тень для светлой темы: чуть сильнее, чем на странице прогресса */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 0.75rem 1rem; } .home-section__title { font-weight: 600; line-height: 1.25; margin: 0 0 1rem 0; padding-bottom: 0.25rem; font-size: 1.5rem; /* slightly larger heading */ color: var(--home-text); position: relative; } .home-section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--home-border); opacity: 0.6; } /* Responsive grid using auto-fit: ensures as many tiles as possible fit * onto a single row based on the available width while respecting a * reasonable minimum width. The 180px minimum makes the tiles narrower * so four arithmetic exercises fit comfortably on a desktop row and * collapse gracefully on smaller screens. */ .home-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ========================================================================== Tiles ========================================================================== Кнопки‑карточки, представляющие упражнения. Имеют вертикальную ориентацию (aspect‑ratio 3/4), минимальные размеры и плавные состояния при наведении, нажатии и фокусе. */ .home-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background-color: var(--home-card); border: 1px solid var(--home-border); border-radius: 16px; /* Небольшая тень для плиток-упражнений */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); color: var(--home-text); transition-property: transform, box-shadow, background-color, border-color; transition-duration: 0.18s; transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); min-width: 160px; min-height: 120px; /* Wider orientation: width greater than height */ aspect-ratio: 4 / 3; overflow: hidden; /* Remove tap highlight on touch devices */ -webkit-tap-highlight-color: transparent; /* Prevent text selection on tiles to avoid blue highlight on hover */ user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; /* Remove underline from any nested text elements */ text-decoration: none; } /* Remove the subtle gradient overlay to simplify the design */ .home-tile::before { content: ""; display: none; } /* Содержимое плитки */ .home-tile__symbol { font-size: 2.2rem; /* more compact and allows horizontal orientation */ line-height: 1; font-weight: 600; color: var(--home-primary); } .home-tile__label { margin-top: 0.35rem; font-size: 0.65rem; /* more compact */ font-weight: 500; color: var(--home-muted); text-decoration: none; } /* Hover state: cards subtly lift and emphasise their border. The * background colour lightens or darkens slightly depending on theme. */ .home-tile:hover { background-color: var(--home-hover); border-color: var(--home-accent); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); } /* Active state: slightly less lift to simulate pressing */ .home-tile:active { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Focus state for keyboard navigation */ .home-tile:focus-visible { outline: 2px solid var(--home-accent); outline-offset: 3px; } /* Ensure no child element inside the tile gets an underline on hover */ .home-tile * { text-decoration: none; } /* ========================================================================== Floating Action Button (FAB) ========================================================================== Плавающая кнопка для поддержки. Фиксируется в правом нижнем углу и имеет градиентный фон. */ /* Floating action button (support/donate). A simple pill‑shaped button * anchored to the bottom right of the viewport. We avoid gradients for a * cleaner look and ensure the hover and active states mirror those of * the exercise tiles. */ .home-fab { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 14px; background-color: var(--home-primary); color: #fff; font-weight: 600; cursor: pointer; /* Чуть более выраженная тень для плавающей кнопки */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); border: none; transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); } .home-fab:hover { background-color: var(--home-accent); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .home-fab:active { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28); } .home-fab:focus-visible { outline: 2px solid var(--home-accent); outline-offset: 2px; } @media (max-width: 599px) { .home-fab { right: 16px; bottom: 16px; } } /* ========================================================================== Accessibility ========================================================================== Для пользователей, предпочитающих уменьшенное движение, отключаем все анимации и переходы внутри .home. */ @media (prefers-reduced-motion: reduce) { .home * { transition: none !important; animation: none !important; } } .home a.home-tile, .home a.home-tile:link, .home a.home-tile:visited, .home a.home-tile:hover, .home a.home-tile:focus, .home a.home-tile:active{ text-decoration: none !important; color: inherit; } /* ============================================================= Тени для тёмной темы на главной странице Для тёмной темы используем светлые оттенки тени, чтобы элементы отделялись от фона. Эти правила применяются только когда ancestor имеет класс `dark-theme`. ============================================================= */ .dark-theme .home-section { box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05); } .dark-theme .home-tile { box-shadow: 0 2px 4px rgba(255, 255, 255, 0.04); } .dark-theme .home-tile:hover { box-shadow: 0 6px 12px rgba(255, 255, 255, 0.08); } .dark-theme .home-tile:active { box-shadow: 0 4px 8px rgba(255, 255, 255, 0.06); } .dark-theme .home-fab { box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1); } .dark-theme .home-fab:hover { box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15); } .dark-theme .home-fab:active { box-shadow: 0 5px 12px rgba(255, 255, 255, 0.1); }