/* ========================================================================== 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 — final approved V13 palette */ --home-bg: #e9e5da; --home-surface: #f4f0e5; --home-control: #eee7dc; --home-card: #e5dfd4; --home-text: #1b221b; --home-muted: #4e574f; --home-border: #c6c3b7; --home-primary: var(--accent-primary); --home-accent: var(--home-primary); --home-symbol: var(--accent-primary); --home-hover: #d9d5cc; /* 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); 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: var(--background); --home-surface: var(--container-background); --home-control: var(--container-background); --home-card: var(--block-background); --home-text: var(--text-color); --home-muted: var(--navbar-text-color); --home-border: var(--divider-color); --home-primary: var(--accent-primary); --home-accent: var(--home-primary); --home-symbol: var(--link-color); --home-hover: var(--navbar-hover-background); min-height: 100vh; } /* Compact brand lockup: it explains the product without introducing a * separate hero surface or competing with the exercise actions. */ .home-intro { margin: 0 0 0.75rem; padding: 0.35rem 0.75rem; background-color: var(--home-surface); border: 1px solid var(--home-border); border-radius: 16px; box-shadow: var(--surface-shadow-major); } .home-intro__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; margin: 0; color: var(--home-text); font-size: 1rem; font-weight: 500; line-height: 1.35; } .home-intro__lead { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; } .home-intro__brand { font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 750; letter-spacing: -0.025em; } .home-intro__separator { color: var(--home-symbol); font-weight: 650; } .home-intro__tagline { color: var(--home-text); font-size: clamp(1.1rem, 1.4vw, 1.225rem); font-weight: 500; opacity: 0.78; } @media (min-width: 768px) { /* Reuse part of the existing Bootstrap top padding so the lockup does not * meaningfully push the exercise sections down. */ .page-views-home .site-content.container.mt-5.pt-5 { padding-top: 1rem !important; } } @media (max-width: 767px) { .home-intro { margin: 0 2px 0.45rem; padding: 0.25rem 0.65rem 0.3rem; border-radius: 14px; } .home-intro__title { display: block; line-height: 1.3; } .home-intro__lead { gap: 0.3rem; } .home-intro__brand { font-size: 1.16rem; } .home-intro__separator { display: none; } .home-intro__tagline { display: block; margin-top: 0.05rem; max-width: 34rem; font-size: 0.95rem; line-height: 1.35; } } /* ========================================================================== 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: var(--surface-shadow-major); 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)); } .home-grid--calculus { grid-template-columns: minmax(180px, 320px); justify-content: center; } /* ========================================================================== 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: var(--surface-shadow-control); 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-symbol); } .home-tile__label { margin-top: 0.35rem; font-size: 0.65rem; /* more compact */ font-weight: 500; color: var(--home-muted); text-decoration: none; } @media (min-width: 768px) { .home-section__title { font-size: 1.6rem; } .home-tile__symbol { font-size: 2.35rem; } .home-tile__label { font-size: 0.75rem; } } .home-tile--integration { justify-content: stretch; } .home-tile__primary { display: flex; flex: 1 1 auto; width: 100%; min-height: 76px; flex-direction: column; align-items: center; justify-content: center; color: inherit; text-decoration: none; } .home-tile__secondary { display: inline-flex; width: calc(100% - 24px); min-height: 44px; align-items: center; justify-content: center; gap: .25rem; margin: 0 12px 12px; padding: 8px 12px; border: 1px solid var(--home-border); border-radius: 10px; background: var(--home-control); color: var(--home-text); font-size: .78rem; font-weight: 700; line-height: 1.25; text-decoration: none; transition: border-color .18s ease, background-color .18s ease; } .home-tile__secondary:hover { border-color: var(--home-accent); background: var(--home-hover); color: var(--home-text); } /* Keep both links inside the Integration tile on the warm Numiro palette. * Bootstrap otherwise applies its blue hover/focus link colour and underline. */ .home a.home-tile__primary, .home a.home-tile__primary:link, .home a.home-tile__primary:visited, .home a.home-tile__primary:hover, .home a.home-tile__primary:focus, .home a.home-tile__primary:active, .home a.home-tile__secondary, .home a.home-tile__secondary:link, .home a.home-tile__secondary:visited, .home a.home-tile__secondary:hover, .home a.home-tile__secondary:focus, .home a.home-tile__secondary:active { color: var(--home-text) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .home a.home-tile__primary .home-tile__symbol, .home a.home-tile__primary:hover .home-tile__symbol, .home a.home-tile__primary:focus .home-tile__symbol, .home a.home-tile__primary:active .home-tile__symbol { color: var(--home-symbol) !important; text-decoration: none !important; } .home a.home-tile__primary .home-tile__label, .home a.home-tile__primary:hover .home-tile__label, .home a.home-tile__primary:focus .home-tile__label, .home a.home-tile__primary:active .home-tile__label { color: var(--home-muted) !important; text-decoration: none !important; } .home-tile__primary:focus-visible, .home-tile__secondary:focus-visible { outline: 2px solid var(--home-accent); outline-offset: -2px; } /* 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: var(--surface-shadow-hover); } /* Active state: slightly less lift to simulate pressing */ .home-tile:active { transform: translateY(-1px); box-shadow: var(--surface-shadow-control); } /* 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: #f4f0e5; 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-intro, .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); }