Merge pull request 'feat(frontend): redesign race dashboard' (#26) from feature/sport-dashboard-redesign into main

Reviewed-on: #26

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.4.3",
+      "version": "0.5.0",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.4.3",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/DatePickerField.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildMonthCells, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
+
+const MONTH_NAMES_RU = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь",
+];
+
+interface DatePickerFieldProps {
+  value: string;
+  name: string;
+  required?: boolean;
+  onChange: (value: string) => void;
+}
+
+function parseYmd(value: string): { year: number; monthIndex: number; day: number } | null {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return null;
+  }
+
+  const year = Number(value.slice(0, 4));
+  const monthIndex = Number(value.slice(5, 7)) - 1;
+  const day = Number(value.slice(8, 10));
+
+  if (!Number.isInteger(year) || !Number.isInteger(monthIndex) || !Number.isInteger(day)) {
+    return null;
+  }
+  if (monthIndex < 0 || monthIndex > 11) {
+    return null;
+  }
+
+  return { year, monthIndex, day };
+}
+
+function getInitialVisibleMonth(value: string): { year: number; monthIndex: number } {
+  const parsed = parseYmd(value);
+  if (parsed) {
+    return { year: parsed.year, monthIndex: parsed.monthIndex };
+  }
+
+  const now = new Date();
+  return { year: now.getFullYear(), monthIndex: now.getMonth() };
+}
+
+export function DatePickerField(props: DatePickerFieldProps): JSX.Element {
+  const { value, name, required, onChange } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [visibleMonth, setVisibleMonth] = useState(() => getInitialVisibleMonth(value));
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const parsed = parseYmd(value);
+    if (!parsed) {
+      return;
+    }
+    setVisibleMonth({ year: parsed.year, monthIndex: parsed.monthIndex });
+  }, [value]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    function handlePointerDown(event: MouseEvent): void {
+      if (rootRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      setIsOpen(false);
+    }
+
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const selected = parseYmd(value);
+  const todayYmd = toYmd(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+  const cells = useMemo(
+    () => buildMonthCells(visibleMonth.year, visibleMonth.monthIndex),
+    [visibleMonth],
+  );
+  const monthTitle = `${MONTH_NAMES_RU[visibleMonth.monthIndex]} ${visibleMonth.year}`;
+
+  function shiftMonth(delta: number): void {
+    setVisibleMonth((prev) => {
+      const next = new Date(Date.UTC(prev.year, prev.monthIndex + delta, 1));
+      return { year: next.getUTCFullYear(), monthIndex: next.getUTCMonth() };
+    });
+  }
+
+  return (
+    <div className="date-picker" ref={rootRef}>
+      <div className="date-picker__control">
+        <input
+          className="race-form__input date-picker__input"
+          type="text"
+          inputMode="numeric"
+          name={name}
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          onFocus={() => setIsOpen(true)}
+          placeholder="2026-05-03"
+          autoComplete="off"
+          required={required}
+        />
+        <button
+          className="date-picker__toggle"
+          type="button"
+          aria-label="Открыть календарь"
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((prev) => !prev)}
+        >
+          ▾
+        </button>
+      </div>
+
+      {isOpen ? (
+        <div className="date-picker__popover" role="dialog" aria-label="Выбор даты">
+          <div className="date-picker__header">
+            <button
+              className="date-picker__nav"
+              type="button"
+              aria-label="Предыдущий месяц"
+              onClick={() => shiftMonth(-1)}
+            >
+              ‹
+            </button>
+            <p className="date-picker__title">{monthTitle}</p>
+            <button
+              className="date-picker__nav"
+              type="button"
+              aria-label="Следующий месяц"
+              onClick={() => shiftMonth(1)}
+            >
+              ›
+            </button>
+          </div>
+          <div className="date-picker__weekdays" aria-hidden>
+            {WEEKDAY_LABELS_SHORT_RU.map((weekday) => (
+              <span key={weekday} className="date-picker__weekday">
+                {weekday}
+              </span>
+            ))}
+          </div>
+          <div className="date-picker__cells">
+            {cells.map((day, idx) => {
+              if (day === null) {
+                return <span key={`empty-${idx}`} className="date-picker__cell date-picker__cell--empty" />;
+              }
+
+              const ymd = toYmd(visibleMonth.year, visibleMonth.monthIndex, day);
+              const isSelected =
+                selected?.year === visibleMonth.year &&
+                selected.monthIndex === visibleMonth.monthIndex &&
+                selected.day === day;
+
+              return (
+                <button
+                  key={ymd}
+                  className={`date-picker__day${isSelected ? " date-picker__day--selected" : ""}${ymd === todayYmd ? " date-picker__day--today" : ""}`}
+                  type="button"
+                  onClick={() => {
+                    onChange(ymd);
+                    setIsOpen(false);
+                  }}
+                >
+                  {day}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/PaceTrendChart.tsx

@@ -55,16 +55,38 @@ export function PaceTrendChart(props: PaceTrendChartProps): JSX.Element {
     .join(" ");
 
   const last = series[series.length - 1]!;
+  const best = series.reduce((currentBest, item) => (item.minutes < currentBest.minutes ? item : currentBest), series[0]!);
+  const dotPoints = series.map((s, i) => {
+    const x = pad + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+    const norm = (maxM - s.minutes) / range;
+    const y = pad + (1 - norm) * innerH;
+    return { x, y, id: s.race.id };
+  });
 
   return (
     <div className="pace-chart">
       <svg className="pace-chart__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label="Динамика времени на дистанции">
+        <line className="pace-chart__grid-line" x1={pad} y1={pad} x2={w - pad} y2={pad} />
+        <line className="pace-chart__grid-line" x1={pad} y1={h - pad} x2={w - pad} y2={h - pad} />
         <polyline className="pace-chart__line" fill="none" points={points} />
+        {dotPoints.map((point, index) => (
+          <circle
+            key={point.id}
+            className={index === dotPoints.length - 1 ? "pace-chart__dot pace-chart__dot--last" : "pace-chart__dot"}
+            cx={point.x}
+            cy={point.y}
+            r="1.6"
+          />
+        ))}
       </svg>
+      <div className="pace-chart__stats">
         <p className="pace-chart__caption">
-        Последний пункт: {formatRaceDate(last.race.date)} — {last.race.finishTime} (
+          Последний: {formatRaceDate(last.race.date)} · {last.race.finishTime} · {last.minutes.toFixed(1)} мин
-        {last.minutes.toFixed(1)} мин)
         </p>
+        <p className="pace-chart__caption pace-chart__caption--best">
+          Лучший: {formatRaceDate(best.race.date)} · {best.race.finishTime} · {best.minutes.toFixed(1)} мин
+        </p>
+      </div>
     </div>
   );
 }

frontend/src/components/index.ts

@@ -1,3 +1,4 @@
+export { DatePickerField } from "./DatePickerField";
 export { PaceTrendChart } from "./PaceTrendChart";
 export { RacesCalendar } from "./RacesCalendar";
 export { StartTimeSelects } from "./StartTimeSelects";

frontend/src/lib/calendarUtils.ts

@@ -2,16 +2,20 @@ import type { Race } from "../api";
 
 export const WEEKDAY_LABELS_SHORT_RU: string[] = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
 
-/** Monday-based week: Mon=0 … Sun=6 */
+/** Monday-based week: Mon=0 ... Sun=6 */
+function mondayIndexFromJsDay(jsDay: number): number {
+  return (jsDay + 6) % 7;
+}
+
+/** Monday-based week: Mon=0 ... Sun=6 */
 export function mondayIndexFromDate(d: Date): number {
-  return (d.getDay() + 6) % 7;
+  return mondayIndexFromJsDay(d.getDay());
 }
 
 /** Grid cells for one month: `null` = empty, `1..31` = day of month. Padded to full weeks, at least 6 rows. */
 export function buildMonthCells(year: number, monthIndex: number): (number | null)[] {
-  const first = new Date(year, monthIndex, 1);
+  const lead = mondayIndexFromJsDay(new Date(Date.UTC(year, monthIndex, 1)).getUTCDay());
-  const lead = mondayIndexFromDate(first);
+  const dim = new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
-  const dim = new Date(year, monthIndex + 1, 0).getDate();
   const cells: (number | null)[] = [];
   for (let i = 0; i < lead; i += 1) {
     cells.push(null);

frontend/src/lib/index.ts

@@ -16,3 +16,5 @@ export {
 } from "./raceMetrics";
 
 export { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "./calendarUtils";
+export { getRaceVisual } from "./raceVisuals";
+export type { RaceVisualVariant } from "./raceVisuals";

frontend/src/lib/raceVisuals.ts

@@ -0,0 +1,206 @@
+import type { Race } from "../api";
+
+export type RaceVisualVariant = "short" | "half" | "marathon" | "trail" | "night";
+export type RaceVisualFit = "cover" | "contain";
+
+interface RaceVisual {
+  variant: RaceVisualVariant;
+  imageSrc: string;
+  fallbackSrc: string;
+  imageFit: RaceVisualFit;
+  label: string;
+}
+
+interface OfficialRaceVisual {
+  keywords: string[];
+  imageSrc: string;
+  imageFit?: RaceVisualFit;
+  label: string;
+}
+
+const FALLBACK_VISUALS: Record<RaceVisualVariant, RaceVisual> = {
+  short: {
+    variant: "short",
+    imageSrc: "/images/race-short.png",
+    fallbackSrc: "/images/race-short.png",
+    imageFit: "cover",
+    label: "Городской темп",
+  },
+  half: {
+    variant: "half",
+    imageSrc: "/images/race-half.png",
+    fallbackSrc: "/images/race-half.png",
+    imageFit: "cover",
+    label: "Полумарафон",
+  },
+  marathon: {
+    variant: "marathon",
+    imageSrc: "/images/race-marathon.png",
+    fallbackSrc: "/images/race-marathon.png",
+    imageFit: "cover",
+    label: "Марафон",
+  },
+  trail: {
+    variant: "trail",
+    imageSrc: "/images/race-trail.png",
+    fallbackSrc: "/images/race-trail.png",
+    imageFit: "cover",
+    label: "Трейл",
+  },
+  night: {
+    variant: "night",
+    imageSrc: "/images/race-night.png",
+    fallbackSrc: "/images/race-night.png",
+    imageFit: "cover",
+    label: "Ночной старт",
+  },
+};
+
+const OFFICIAL_VISUALS: OfficialRaceVisual[] = [
+  {
+    keywords: ["забег апрель"],
+    imageSrc: "https://aprilrun5km.runc.run/uploads/page_card_photos/AprilRun_photo_1.jpg",
+    label: "Забег Апрель",
+  },
+  {
+    keywords: ["быстрый пес"],
+    imageSrc: "https://fastdogxc.runc.run/uploads/page_card_photos/Dog_spring_2026-5.jpg",
+    label: "Кросс",
+  },
+  {
+    keywords: ["лисья гора"],
+    imageSrc: "https://foxhillxc.runc.run/uploads/page_card_photos/Fox_Spring_2026-0.jpg",
+    label: "Кросс",
+  },
+  {
+    keywords: ["казанский марафон"],
+    imageSrc: "https://static.tildacdn.com/tild3961-6436-4462-b738-356665613039/Frame_2131327895.png",
+    imageFit: "contain",
+    label: "Казанский марафон",
+  },
+  {
+    keywords: ["мышкинский полумарафон", "по шести холмам"],
+    imageSrc: "https://static.tildacdn.com/tild6133-6137-4865-b166-623532313531/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["забег.рф", "забег рф"],
+    imageSrc: "https://xn--80acghh.xn--p1ai/zabeg.jpg",
+    label: "ЗаБег.РФ",
+  },
+  {
+    keywords: ["переславский марафон", "александровские версты"],
+    imageSrc: "https://static.tildacdn.com/tild6432-3338-4533-b262-633339353335/photo_1.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["красочный забег"],
+    imageSrc: "https://colorrun5km.runc.run/uploads/page_card_photos/ColorRun2026-1.jpg",
+    label: "Красочный забег",
+  },
+  {
+    keywords: ["здорово кострома", "здорово, кострома"],
+    imageSrc: "https://static.tildacdn.com/tild6139-3539-4661-b232-386230336431/kostroma.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ночной забег москва"],
+    imageSrc: "https://nightrun10km.runc.run/uploads/page_card_photos/NightRun_2026-9.jpg",
+    label: "Ночной забег",
+  },
+  {
+    keywords: ["белые ночи"],
+    imageSrc: "https://wnmarathon.runc.run/uploads/page_card_photos/WN_photo_01.jpg",
+    label: "Белые ночи",
+  },
+  {
+    keywords: ["сергиевым путем", "сергиевым путём"],
+    imageSrc: "https://static.tildacdn.com/tild6236-3466-4239-b666-393061326338/serg.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ночной забег нижний новгород"],
+    imageSrc: "https://rrweb.russiarunning.com/-x740/generalimages/0531a1b8-3876-4620-8961-2fa374e474e5.png",
+    imageFit: "contain",
+    label: "Ночной забег",
+  },
+  {
+    keywords: ["suvorov extreme"],
+    imageSrc: "https://goldenultra.ru/grut/files/photos/100.jpg",
+    label: "Трейл",
+  },
+  {
+    keywords: ["рыбинский полумарафон", "великий хлебный путь"],
+    imageSrc: "https://static.tildacdn.com/tild6130-3230-4332-b932-366166366633/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ярославский полумарафон", "золотое кольцо"],
+    imageSrc: "https://static.tildacdn.com/tild6331-6333-4635-b635-376262373361/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["моя столица"],
+    imageSrc: "https://static.tildacdn.com/tild3263-3036-4639-b830-653365663832/-min.jpg",
+    imageFit: "contain",
+    label: "Моя столица",
+  },
+];
+
+function normalizeTitle(value: string): string {
+  return value
+    .toLowerCase()
+    .replaceAll("ё", "е")
+    .replace(/[«»|]/g, " ")
+    .replace(/[^\p{L}\p{N}.&]+/gu, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function getFallbackRaceVisual(race: Race): RaceVisual {
+  const title = normalizeTitle(race.title);
+
+  if (title.includes("ночной")) {
+    return FALLBACK_VISUALS.night;
+  }
+
+  if (
+    title.includes("trail") ||
+    title.includes("extreme") ||
+    title.includes("suvorov") ||
+    title.includes("трейл") ||
+    title.includes("экстрим")
+  ) {
+    return FALLBACK_VISUALS.trail;
+  }
+
+  if (Math.abs(race.distanceKm - 42.2) < 0.8) {
+    return FALLBACK_VISUALS.marathon;
+  }
+
+  if (Math.abs(race.distanceKm - 21.1) < 0.4) {
+    return FALLBACK_VISUALS.half;
+  }
+
+  return FALLBACK_VISUALS.short;
+}
+
+export function getRaceVisual(race: Race): RaceVisual {
+  const fallback = getFallbackRaceVisual(race);
+  const title = normalizeTitle(race.title);
+  const official = OFFICIAL_VISUALS.find((visual) =>
+    visual.keywords.some((keyword) => title.includes(normalizeTitle(keyword))),
+  );
+
+  if (!official) {
+    return fallback;
+  }
+
+  return {
+    ...fallback,
+    imageSrc: official.imageSrc,
+    fallbackSrc: fallback.imageSrc,
+    imageFit: official.imageFit ?? fallback.imageFit,
+    label: official.label,
+  };
+}

frontend/src/pages/DashboardPage.tsx

@@ -132,6 +132,11 @@ export function DashboardPage(): JSX.Element {
       .sort((left, right) => right.year - left.year || left.title.localeCompare(right.title, "ru-RU"));
   }, [races]);
 
+  const seasonProgress =
+    dashboardMetrics.seasonTotal > 0
+      ? Math.round((dashboardMetrics.seasonCompletedCount / dashboardMetrics.seasonTotal) * 100)
+      : 0;
+
   if (isLoading) {
     return (
       <section className="page page--dashboard" aria-busy="true">
@@ -152,12 +157,43 @@ export function DashboardPage(): JSX.Element {
 
   return (
     <section className="page page--dashboard">
-      <h1 className="page__title">Обзор</h1>
+      <section className="dashboard-hero" aria-label="Обзор сезона">
-      <p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
+        <div className="dashboard-hero__content">
+          <p className="dashboard-hero__eyebrow">Календарь сезона</p>
+          <h1 className="dashboard-hero__title">Беговой штаб</h1>
+          <p className="dashboard-hero__text">
+            Планируйте старты, держите фокус на ближайшей гонке и сравнивайте прогресс по дистанциям.
+          </p>
+          <div className="dashboard-hero__actions">
+            <Link className="btn btn--primary" to="/races">
+              Смотреть старты
+            </Link>
+            <Link className="btn btn--secondary dashboard-hero__secondary" to="/races/new">
+              Добавить старт
+            </Link>
+          </div>
+        </div>
+        <div className="dashboard-hero__panel">
+          <p className="dashboard-hero__panel-label">Ближайший старт</p>
+          {dashboardMetrics.nextRace ? (
+            <Link className="dashboard-hero__race-link" to={`/races/${dashboardMetrics.nextRace.id}`}>
+              <span className="dashboard-hero__race-title">{dashboardMetrics.nextRace.title}</span>
+              <span className="dashboard-hero__race-meta">
+                {formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
+              </span>
+              <span className="dashboard-hero__race-countdown">
+                {getRaceCountdownLabel(dashboardMetrics.nextRace.date)}
+              </span>
+            </Link>
+          ) : (
+            <p className="dashboard-hero__empty">Запланируйте первый старт сезона.</p>
+          )}
+        </div>
+      </section>
 
       <div className="dashboard-grid" aria-label="Ключевые метрики">
         <article
-          className={`dashboard-card${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
+          className={`dashboard-card dashboard-card--accent-blue${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
         >
           {dashboardMetrics.nextRace ? (
             <Link
@@ -182,7 +218,7 @@ export function DashboardPage(): JSX.Element {
         </article>
 
         <article
-          className={`dashboard-card${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
+          className={`dashboard-card dashboard-card--accent-coral${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
         >
           {dashboardMetrics.lastResult ? (
             <Link
@@ -206,7 +242,7 @@ export function DashboardPage(): JSX.Element {
         </article>
 
         <article
-          className={`dashboard-card${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
+          className={`dashboard-card dashboard-card--accent-lime${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
         >
           {dashboardMetrics.lastPersonalRecord ? (
             <Link
@@ -232,11 +268,14 @@ export function DashboardPage(): JSX.Element {
           )}
         </article>
 
-        <article className="dashboard-card">
+        <article className="dashboard-card dashboard-card--season dashboard-card--accent-violet">
           <h2 className="dashboard-card__title">Сезон</h2>
           <p className="dashboard-card__value">{dashboardMetrics.seasonTotal}</p>
           <p className="dashboard-card__meta">стартов в этом году</p>
           <p className="dashboard-card__hint">Завершено: {dashboardMetrics.seasonCompletedCount}</p>
+          <div className="dashboard-card__progress" aria-label={`Сезон завершен на ${seasonProgress}%`}>
+            <span style={{ width: `${seasonProgress}%` }} />
+          </div>
         </article>
       </div>
 

frontend/src/pages/RaceDayPage.tsx

@@ -2,7 +2,14 @@ import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
-import { formatDistance, formatRaceDate, getRaceStatusClassName, getRaceStatusLabel, sortByDateAsc } from "../lib";
+import {
+  formatDistance,
+  formatRaceDate,
+  getRaceStatusClassName,
+  getRaceStatusLabel,
+  getRaceVisual,
+  sortByDateAsc,
+} from "../lib";
 
 function getErrorMessage(error: unknown): string {
   if (error instanceof ApiError) {
@@ -70,24 +77,33 @@ export function RaceDayPage(): JSX.Element {
   if (!validYmd) {
     return (
       <section className="page page--race-day">
+        <div className="race-day-hero">
+          <p className="race-day-hero__eyebrow">Страница дня</p>
           <h1 className="page__title">Некорректная дата</h1>
-        <p className="page__subtitle">
           <Link className="page-link" to="/races">
             Вернуться к календарю стартов
           </Link>
-        </p>
+        </div>
       </section>
     );
   }
 
   return (
     <section className="page page--race-day">
-      <p className="page__subtitle">
+      <section className="race-day-hero" aria-label="Старты дня">
         <Link className="page-link" to="/races">
           ← Календарь стартов
         </Link>
-      </p>
+        <p className="race-day-hero__eyebrow">Старты дня</p>
         <h1 className="page__title">{heading}</h1>
+        <p className="page__subtitle">
+          {isLoading
+            ? "Загружаем расписание..."
+            : races.length > 0
+              ? `Запланировано стартов: ${races.length}`
+              : "Проверьте расписание или добавьте старт на эту дату."}
+        </p>
+      </section>
 
       {errorMessage ? (
         <p className="page__subtitle page__subtitle--error" role="alert">
@@ -107,19 +123,40 @@ export function RaceDayPage(): JSX.Element {
 
       {!isLoading && races.length > 0 ? (
         <ul className="race-day__list">
-          {races.map((race) => (
+          {races.map((race) => {
+            const visual = getRaceVisual(race);
+
+            return (
               <li key={race.id} className="race-day__item">
                 <Link className="race-day__link" to={`/races/${race.id}`}>
-                {race.title}
+                  <img
-              </Link>
+                    className={`race-day__image${
+                      visual.imageFit === "contain" ? " race-day__image--contain" : ""
+                    }`}
+                    src={visual.imageSrc}
+                    alt=""
+                    loading="lazy"
+                    referrerPolicy="no-referrer"
+                    onError={(event) => {
+                      event.currentTarget.onerror = null;
+                      event.currentTarget.classList.remove("race-day__image--contain");
+                      event.currentTarget.src = visual.fallbackSrc;
+                    }}
+                  />
+                  <span className="race-day__body">
+                    <span className="race-day__kicker">{visual.label}</span>
+                    <span className="race-day__title">{race.title}</span>
                     <span className="race-day__meta">
                       {formatDistance(race.distanceKm)} ·{" "}
                       <span className={getRaceStatusClassName(race.status, race.date)}>
                         {getRaceStatusLabel(race.status, race.date)}
                       </span>
                     </span>
+                  </span>
+                </Link>
               </li>
-          ))}
+            );
+          })}
         </ul>
       ) : null}
 

frontend/src/pages/RaceDetailsPage.tsx

@@ -7,6 +7,7 @@ import {
   getPaceLabel,
   getRaceStatusClassName,
   getRaceStatusLabel,
+  getRaceVisual,
   raceNeedsResultEntry,
 } from "../lib";
 import type { Race } from "../api";
@@ -139,18 +140,40 @@ export function RaceDetailsPage(): JSX.Element {
   }
 
   const isCompleted = race.status === "completed";
+  const visual = getRaceVisual(race);
 
   return (
     <section className="page page--race-details">
-      <div className="race-details-header">
+      <section className={`race-details-hero race-details-hero--${visual.variant}`} aria-label="Карточка старта">
-        <div className="race-details-header__main">
+        <img
+          className={`race-details-hero__image${
+            visual.imageFit === "contain" ? " race-details-hero__image--contain" : ""
+          }`}
+          src={visual.imageSrc}
+          alt=""
+          loading="eager"
+          referrerPolicy="no-referrer"
+          onError={(event) => {
+            event.currentTarget.onerror = null;
+            event.currentTarget.classList.remove("race-details-hero__image--contain");
+            event.currentTarget.src = visual.fallbackSrc;
+          }}
+        />
+        <div className="race-details-hero__shade" aria-hidden="true" />
+        <div className="race-details-hero__content">
+          <Link className="race-details-hero__back" to="/races">
+            ← Календарь стартов
+          </Link>
+          <p className="race-details-hero__eyebrow">{visual.label}</p>
           <h1 className="page__title">{race.title}</h1>
           <p className="page__subtitle">
             {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
           </p>
+          <span className={getRaceStatusClassName(race.status, race.date)}>
+            {getRaceStatusLabel(race.status, race.date)}
+          </span>
         </div>
-        <span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
+      </section>
-      </div>
 
       {raceNeedsResultEntry(race) ? (
         <p className="race-details-past-hint" role="status">

frontend/src/pages/RaceFormPage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { ApiError, createRace, getRaceById, updateRace } from "../api";
 import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
-import { StartTimeSelects } from "../components/StartTimeSelects";
+import { DatePickerField, StartTimeSelects } from "../components";
 import { isRaceDateInPast, parseFinishTimeToSeconds } from "../lib";
 
 function slugify(text: string): string {
@@ -274,17 +274,17 @@ export function RaceFormPage(): JSX.Element {
         <fieldset className="race-form__group">
           <legend className="race-form__legend">Основная информация</legend>
 
-          <label className="race-form__field">
+          <div className="race-form__field">
             <span className="race-form__label">Дата *</span>
-            <input
+            <DatePickerField
-              className="race-form__input"
-              type="date"
               name="date"
               value={form.date}
-              onChange={handleChange}
+              onChange={(next) => {
+                setForm((prev) => ({ ...prev, date: next }));
+              }}
               required
             />
-          </label>
+          </div>
 
           <label className="race-form__field">
             <span className="race-form__label">Название *</span>

frontend/src/pages/RacesPage.tsx

@@ -6,8 +6,10 @@ import { RacesCalendar } from "../components/RacesCalendar";
 import {
   formatDistance,
   formatRaceDate,
+  getRaceVisual,
   getRaceStatusClassName,
   getRaceStatusLabel,
+  parseRaceDate,
   splitRacesByDate,
 } from "../lib";
 
@@ -66,14 +68,42 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
       <h2 className="race-list__title">{title}</h2>
       {races.length > 0 ? (
         <ul className="race-list__items">
-          {races.map((race) => (
+          {races.map((race) => {
-            <li key={race.id} className="race-card race-card--action">
+            const visual = getRaceVisual(race);
+            const parsedDate = parseRaceDate(race.date);
+            const day = parsedDate.toLocaleDateString("ru-RU", { day: "2-digit" });
+            const month = parsedDate.toLocaleDateString("ru-RU", { month: "short" });
+
+            return (
+              <li key={race.id} className={`race-card race-card--action race-card--poster race-card--${visual.variant}`}>
                 <Link
                   className="race-card__link-surface"
                   to={`/races/${race.id}`}
                   aria-label={`Старт: ${race.title}`}
                 >
+                  <div className="race-card__image-wrap">
+                    <img
+                      className={`race-card__image${
+                        visual.imageFit === "contain" ? " race-card__image--contain" : ""
+                      }`}
+                      src={visual.imageSrc}
+                      alt=""
+                      loading="lazy"
+                      referrerPolicy="no-referrer"
+                      onError={(event) => {
+                        event.currentTarget.onerror = null;
+                        event.currentTarget.classList.remove("race-card__image--contain");
+                        event.currentTarget.src = visual.fallbackSrc;
+                      }}
+                    />
+                    <span className="race-card__date-badge">
+                      <span>{day}</span>
+                      <span>{month}</span>
+                    </span>
+                  </div>
+                  <div className="race-card__content">
                     <div className="race-card__main">
+                      <p className="race-card__kicker">{visual.label}</p>
                       <p className="race-card__title">
                         <span className="race-card__title-text">{race.title}</span>
                       </p>
@@ -81,12 +111,17 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
                         {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
                       </p>
                     </div>
+                    <div className="race-card__footer">
                       <span className={getRaceStatusClassName(race.status, race.date)}>
                         {getRaceStatusLabel(race.status, race.date)}
                       </span>
+                      <span className="race-card__cta">Открыть</span>
+                    </div>
+                  </div>
                 </Link>
               </li>
-          ))}
+            );
+          })}
         </ul>
       ) : (
         <p className="race-list__empty">Пока нет данных в этом разделе.</p>
@@ -198,9 +233,11 @@ export function RacesPage(): JSX.Element {
 
   return (
     <section className="page page--races">
+      <section className="races-hero" aria-label="Календарь стартов">
+        <div className="races-hero__content">
+          <p className="races-hero__eyebrow">Сезонная афиша</p>
           <h1 className="page__title">Календарь стартов</h1>
           <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
-
           <div className="races-view-toggle" role="group" aria-label="Вид отображения">
             <button
               type="button"
@@ -217,13 +254,8 @@ export function RacesPage(): JSX.Element {
               Календарь
             </button>
           </div>
-
+        </div>
-      {errorMessage && !isLoading ? (
+        <div className="races-hero__filters">
-        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
-          {errorMessage}
-        </p>
-      ) : null}
-
           <div className="races-filter" role="search" aria-label="Фильтр по дате">
             <label className="races-filter__field">
               <span className="races-filter__label">Год</span>
@@ -259,6 +291,14 @@ export function RacesPage(): JSX.Element {
               </select>
             </label>
           </div>
+        </div>
+      </section>
+
+      {errorMessage && !isLoading ? (
+        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
+          {errorMessage}
+        </p>
+      ) : null}
 
       {viewMode === "calendar" && monthFilter === "" ? (
         <p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>

frontend/src/styles/global.css

@@ -599,6 +599,92 @@ a {
   text-decoration: underline;
 }
 
+.race-details-hero {
+  position: relative;
+  min-height: 21rem;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
+  padding: var(--space-8);
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: var(--color-bg-deep);
+  box-shadow: var(--shadow-hero);
+}
+
+.race-details-hero__image,
+.race-details-hero__shade {
+  position: absolute;
+  inset: 0;
+}
+
+.race-details-hero__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.race-details-hero__image--contain {
+  padding: var(--space-5);
+  object-fit: contain;
+  background:
+    radial-gradient(circle at 20% 10%, rgba(185, 242, 74, 0.22), transparent 18rem),
+    linear-gradient(135deg, rgba(17, 104, 216, 0.38), rgba(7, 25, 39, 0.96)),
+    var(--color-bg-deep);
+}
+
+.race-details-hero__shade {
+  background:
+    linear-gradient(90deg, rgba(7, 25, 39, 0.92), rgba(7, 25, 39, 0.58) 48%, rgba(7, 25, 39, 0.18)),
+    linear-gradient(0deg, rgba(7, 25, 39, 0.72), transparent 58%);
+}
+
+.race-details-hero__content {
+  position: relative;
+  z-index: 1;
+  width: min(42rem, 100%);
+}
+
+.race-details-hero__back {
+  display: inline-flex;
+  width: fit-content;
+  margin-bottom: var(--space-5);
+  color: rgba(255, 255, 255, 0.84);
+  font-size: var(--font-size-caption);
+  font-weight: 800;
+}
+
+.race-details-hero__back:hover,
+.race-details-hero__back:focus-visible {
+  color: #ffffff;
+  text-decoration: underline;
+  outline: none;
+}
+
+.race-details-hero__eyebrow {
+  margin: 0 0 var(--space-2);
+  color: var(--color-lime);
+  font-size: var(--font-size-caption);
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.race-details-hero .page__title {
+  max-width: 38rem;
+  color: #ffffff;
+}
+
+.race-details-hero .page__subtitle {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.race-details-hero .race-card__status {
+  width: fit-content;
+  margin-top: var(--space-4);
+  box-shadow: 0 12px 24px rgba(7, 25, 39, 0.18);
+}
+
 /* ─── Race form ────────────────────────────────────────── */
 
 .race-form {
@@ -686,6 +772,138 @@ a {
   padding-bottom: var(--space-2);
 }
 
+.date-picker {
+  position: relative;
+  width: min(100%, 22rem);
+}
+
+.date-picker__control {
+  display: flex;
+  align-items: stretch;
+}
+
+.date-picker__input {
+  min-width: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.date-picker__toggle {
+  width: 3rem;
+  border: 1px solid var(--color-border);
+  border-left: none;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  background: var(--color-bg-deep);
+  color: #ffffff;
+  font: inherit;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.date-picker__toggle:hover,
+.date-picker__toggle:focus-visible {
+  background: var(--color-accent-strong);
+  outline: none;
+}
+
+.date-picker__popover {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  left: 0;
+  z-index: 12;
+  width: min(20rem, calc(100vw - var(--space-8)));
+  padding: var(--space-4);
+  border: 1px solid rgba(17, 104, 216, 0.2);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: var(--shadow-card-lift);
+}
+
+.date-picker__header {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.date-picker__title {
+  margin: 0;
+  color: var(--color-bg-deep);
+  font-weight: 900;
+  text-align: center;
+}
+
+.date-picker__nav {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: rgba(17, 104, 216, 0.08);
+  color: var(--color-accent);
+  font: inherit;
+  font-size: 1.25rem;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.date-picker__nav:hover,
+.date-picker__nav:focus-visible {
+  background: var(--color-lime);
+  color: #071927;
+  outline: none;
+}
+
+.date-picker__weekdays,
+.date-picker__cells {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.date-picker__weekdays {
+  margin-bottom: var(--space-1);
+}
+
+.date-picker__weekday {
+  color: var(--color-text-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-align: center;
+}
+
+.date-picker__cell,
+.date-picker__day {
+  min-height: 2.25rem;
+}
+
+.date-picker__day {
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--font-size-caption);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.date-picker__day:hover,
+.date-picker__day:focus-visible {
+  background: #e8f1ff;
+  border-color: rgba(17, 104, 216, 0.2);
+  outline: none;
+}
+
+.date-picker__day--today {
+  border-color: var(--color-accent);
+}
+
+.date-picker__day--selected {
+  background: var(--color-lime);
+  color: #071927;
+}
+
 .race-form__actions {
   display: flex;
   gap: var(--space-3);
@@ -986,6 +1204,672 @@ a {
   margin-top: var(--space-5);
 }
 
+/* ─── Sport dashboard refresh ─────────────────────────── */
+
+body {
+  background:
+    radial-gradient(circle at 12% 8%, rgba(185, 242, 74, 0.24), transparent 24rem),
+    radial-gradient(circle at 88% 0%, rgba(255, 111, 94, 0.16), transparent 22rem),
+    linear-gradient(180deg, #f5f9fb 0%, var(--color-bg) 46%, #e8f0f4 100%);
+}
+
+.app-shell__header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 1px 0 rgba(14, 31, 45, 0.06);
+  backdrop-filter: blur(16px);
+}
+
+.app-shell__brand {
+  color: var(--color-bg-deep);
+}
+
+.app-shell__link {
+  font-size: var(--font-size-caption);
+  font-weight: 700;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.app-shell__link:hover,
+.app-shell__link:focus-visible {
+  transform: translateY(-1px);
+}
+
+.app-shell__link--active,
+.app-shell__link--active:hover,
+.app-shell__link--active:focus-visible {
+  color: #071927;
+  background: var(--color-lime);
+}
+
+.app-shell__main {
+  width: min(1180px, 100%);
+  padding: var(--space-8) var(--space-6);
+}
+
+.page {
+  box-shadow: var(--shadow-card);
+}
+
+.page--dashboard,
+.page--races,
+.page--race-day {
+  padding: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.page__title {
+  letter-spacing: 0;
+  line-height: 1.08;
+  color: var(--color-bg-deep);
+}
+
+.dashboard-hero,
+.races-hero,
+.race-day-hero {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-hero);
+}
+
+.dashboard-hero {
+  min-height: 24rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
+  gap: var(--space-6);
+  align-items: end;
+  padding: var(--space-8);
+  color: #ffffff;
+  background:
+    linear-gradient(90deg, rgba(7, 25, 39, 0.9) 0%, rgba(7, 25, 39, 0.58) 46%, rgba(7, 25, 39, 0.1) 100%),
+    url("/images/runner-hero.png") center / cover;
+}
+
+.dashboard-hero__content,
+.dashboard-hero__panel {
+  position: relative;
+  z-index: 1;
+}
+
+.dashboard-hero__eyebrow,
+.races-hero__eyebrow,
+.race-day-hero__eyebrow {
+  margin: 0 0 var(--space-2);
+  color: var(--color-lime);
+  font-size: var(--font-size-caption);
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.dashboard-hero__title {
+  margin: 0;
+  max-width: 28rem;
+  color: #ffffff;
+  font-size: 4.25rem;
+  line-height: 0.95;
+  letter-spacing: 0;
+}
+
+.dashboard-hero__text {
+  max-width: 33rem;
+  margin: var(--space-4) 0 0;
+  color: rgba(255, 255, 255, 0.84);
+  font-size: 1.08rem;
+}
+
+.dashboard-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  margin-top: var(--space-6);
+}
+
+.dashboard-hero__secondary {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.36);
+}
+
+.dashboard-hero__secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.dashboard-hero__panel {
+  padding: var(--space-5);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: var(--radius-md);
+  background: rgba(7, 25, 39, 0.58);
+  backdrop-filter: blur(14px);
+}
+
+.dashboard-hero__panel-label,
+.dashboard-hero__empty {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: var(--font-size-caption);
+  font-weight: 700;
+}
+
+.dashboard-hero__race-link {
+  display: grid;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.dashboard-hero__race-title {
+  font-size: 1.45rem;
+  font-weight: 800;
+  line-height: 1.12;
+}
+
+.dashboard-hero__race-meta,
+.dashboard-hero__race-countdown {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.dashboard-hero__race-countdown {
+  width: fit-content;
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  color: #071927;
+  background: var(--color-lime);
+  font-size: var(--font-size-caption);
+  font-weight: 800;
+}
+
+.dashboard-grid {
+  gap: var(--space-5);
+}
+
+.dashboard-card,
+.race-list,
+.race-details-card,
+.race-form__group,
+.comparison-table-wrapper,
+.pace-chart,
+.races-cal__month,
+.race-day__item {
+  border-color: rgba(214, 225, 234, 0.92);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: var(--shadow-card);
+}
+
+.dashboard-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.dashboard-card::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0.28rem;
+  content: "";
+  background: var(--color-accent);
+}
+
+.dashboard-card--accent-blue::before {
+  background: var(--color-accent);
+}
+
+.dashboard-card--accent-coral::before {
+  background: var(--color-coral);
+}
+
+.dashboard-card--accent-lime::before {
+  background: var(--color-lime);
+}
+
+.dashboard-card--accent-violet::before {
+  background: var(--color-violet);
+}
+
+.dashboard-card__title,
+.race-details-card__title,
+.race-form__label,
+.races-filter__label {
+  color: #516372;
+}
+
+.dashboard-card__value {
+  font-size: 2rem;
+  line-height: 1.1;
+}
+
+.dashboard-card__progress {
+  height: 0.55rem;
+  margin-top: var(--space-4);
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e6eef4;
+}
+
+.dashboard-card__progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--color-lime), var(--color-violet));
+}
+
+.dashboard-section__title {
+  color: var(--color-bg-deep);
+}
+
+.pace-chart {
+  overflow: hidden;
+  padding: var(--space-5);
+  background:
+    linear-gradient(135deg, rgba(17, 104, 216, 0.08), rgba(185, 242, 74, 0.16)),
+    #ffffff;
+}
+
+.pace-chart__svg {
+  max-width: 100%;
+}
+
+.pace-chart__grid-line {
+  stroke: rgba(14, 31, 45, 0.12);
+  stroke-width: 0.8;
+  vector-effect: non-scaling-stroke;
+}
+
+.pace-chart__line {
+  stroke-width: 2.2;
+}
+
+.pace-chart__dot {
+  fill: #ffffff;
+  stroke: var(--color-accent);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.pace-chart__dot--last {
+  fill: var(--color-lime);
+  stroke: var(--color-bg-deep);
+}
+
+.pace-chart__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.pace-chart__caption {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--color-text);
+}
+
+.pace-chart__caption--best {
+  color: #0e5d3d;
+}
+
+.races-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
+  gap: var(--space-6);
+  align-items: end;
+  min-height: 18rem;
+  padding: var(--space-8);
+  background:
+    linear-gradient(90deg, rgba(7, 25, 39, 0.88), rgba(7, 25, 39, 0.48), rgba(7, 25, 39, 0.08)),
+    url("/images/race-half.png") center / cover;
+}
+
+.races-hero .page__title,
+.race-day-hero .page__title {
+  color: #ffffff;
+}
+
+.races-hero .page__subtitle,
+.race-day-hero .page__subtitle {
+  color: rgba(255, 255, 255, 0.76);
+}
+
+.races-hero__filters {
+  padding: var(--space-5);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(14px);
+}
+
+.races-hero__filters .races-filter {
+  margin-top: 0;
+}
+
+.races-hero__filters .races-filter__label {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.races-hero__filters .races-filter__select {
+  border-color: rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.races-view-toggle {
+  border-color: rgba(255, 255, 255, 0.24);
+  background: rgba(7, 25, 39, 0.28);
+}
+
+.races-view-toggle__btn {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.races-view-toggle__btn:hover,
+.races-view-toggle__btn:focus-visible {
+  color: #ffffff;
+}
+
+.races-view-toggle__btn--active {
+  color: #071927;
+  background: var(--color-lime);
+}
+
+.race-list {
+  padding: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.race-list__title {
+  color: var(--color-bg-deep);
+}
+
+.race-card--poster {
+  overflow: hidden;
+  padding: 0;
+  border-radius: var(--radius-md);
+}
+
+.race-card--poster .race-card__link-surface {
+  display: grid;
+  grid-template-columns: 8.75rem minmax(0, 1fr);
+  gap: 0;
+  min-height: 10rem;
+  padding: 0;
+}
+
+.race-card__image-wrap {
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+  background: var(--color-bg-deep);
+}
+
+.race-card__image {
+  width: 100%;
+  height: 100%;
+  min-height: 10rem;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.22s ease;
+}
+
+.race-card__image--contain {
+  padding: var(--space-2);
+  object-fit: contain;
+  background:
+    linear-gradient(135deg, rgba(17, 104, 216, 0.24), rgba(185, 242, 74, 0.14)),
+    var(--color-bg-deep);
+}
+
+.race-card--poster:hover .race-card__image,
+.race-card--poster:focus-within .race-card__image {
+  transform: scale(1.05);
+}
+
+.race-card--poster:hover .race-card__image--contain,
+.race-card--poster:focus-within .race-card__image--contain {
+  transform: scale(1.02);
+}
+
+.race-card__date-badge {
+  position: absolute;
+  top: var(--space-2);
+  left: var(--space-2);
+  display: grid;
+  min-width: 3rem;
+  padding: 0.25rem 0.45rem;
+  border-radius: var(--radius-sm);
+  color: #071927;
+  background: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  font-weight: 900;
+  line-height: 1.05;
+  box-shadow: 0 8px 18px rgba(7, 25, 39, 0.18);
+}
+
+.race-card__date-badge span:last-child {
+  color: var(--color-text-muted);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.race-card__content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4);
+}
+
+.race-card__kicker,
+.race-day__kicker {
+  margin: 0 0 var(--space-1);
+  color: var(--color-accent);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.race-card__title {
+  line-height: 1.18;
+}
+
+.race-card__title-text {
+  font-size: 1.05rem;
+  font-weight: 800;
+}
+
+.race-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.race-card__cta {
+  color: var(--color-accent);
+  font-size: var(--font-size-caption);
+  font-weight: 800;
+}
+
+.race-card__status {
+  border: 1px solid transparent;
+}
+
+.race-card__status--planned {
+  background: #e8f1ff;
+  color: var(--color-accent-strong);
+}
+
+.race-card__status--completed {
+  background: #e7f8ef;
+  color: var(--color-success);
+}
+
+.race-card__status--registered {
+  background: #fff0da;
+  color: #8a5100;
+}
+
+.races-cal-wrap {
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: var(--shadow-card);
+}
+
+.races-cal__hint,
+.races-cal__filter-hint {
+  color: #516372;
+}
+
+.races-cal__month {
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.races-cal__month:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-lift);
+}
+
+.races-cal__month-title {
+  color: var(--color-bg-deep);
+  font-weight: 800;
+}
+
+.races-cal__cell--has-race .races-cal__day-btn {
+  color: #071927;
+  background: linear-gradient(135deg, rgba(185, 242, 74, 0.7), rgba(17, 104, 216, 0.14));
+  border-color: rgba(17, 104, 216, 0.18);
+}
+
+.races-cal__cell--has-race .races-cal__day-btn:hover,
+.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
+  background: var(--color-lime);
+  border-color: var(--color-bg-deep);
+}
+
+.races-cal__popover {
+  border-color: rgba(17, 104, 216, 0.2);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-card-lift);
+}
+
+.races-cal__popover-link {
+  color: var(--color-bg-deep);
+}
+
+.races-cal__month-nav-item {
+  color: var(--color-accent);
+  text-decoration: none;
+  background: rgba(17, 104, 216, 0.08);
+}
+
+.races-cal__month-nav-item--active {
+  background: var(--color-bg-deep);
+  color: #ffffff;
+}
+
+.race-day-hero {
+  min-height: 14rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--space-8);
+  background:
+    linear-gradient(90deg, rgba(7, 25, 39, 0.9), rgba(7, 25, 39, 0.5), rgba(7, 25, 39, 0.08)),
+    url("/images/race-short.png") center / cover;
+}
+
+.race-day-hero .page-link {
+  width: fit-content;
+  margin: 0 0 var(--space-5);
+  color: #ffffff;
+}
+
+.race-day__list {
+  gap: var(--space-4);
+}
+
+.race-day__item {
+  overflow: hidden;
+  padding: 0;
+  border-radius: var(--radius-md);
+}
+
+.race-day__link {
+  display: grid;
+  grid-template-columns: 11rem minmax(0, 1fr);
+  color: inherit;
+  text-decoration: none;
+}
+
+.race-day__link:hover,
+.race-day__link:focus-visible {
+  text-decoration: none;
+}
+
+.race-day__image {
+  width: 100%;
+  height: 100%;
+  min-height: 8.5rem;
+  object-fit: cover;
+}
+
+.race-day__image--contain {
+  padding: var(--space-3);
+  object-fit: contain;
+  background:
+    linear-gradient(135deg, rgba(17, 104, 216, 0.22), rgba(185, 242, 74, 0.16)),
+    var(--color-bg-deep);
+}
+
+.race-day__body {
+  display: grid;
+  gap: var(--space-2);
+  align-content: center;
+  padding: var(--space-4);
+}
+
+.race-day__title {
+  color: var(--color-bg-deep);
+  font-size: 1.18rem;
+  font-weight: 800;
+  line-height: 1.18;
+}
+
+.btn {
+  box-shadow: 0 8px 18px rgba(14, 31, 45, 0.08);
+}
+
+.btn--primary {
+  background: var(--color-lime);
+  color: #071927;
+}
+
+.btn--primary:hover:not(:disabled) {
+  background: #aee83c;
+}
+
+.btn--secondary:hover:not(:disabled) {
+  background: #f2f6f9;
+}
+
+.dashboard-hero .dashboard-hero__secondary:hover:not(:disabled) {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.2);
+}
+
 /* ─── Responsive ───────────────────────────────────────── */
 
 @media (max-width: 900px) {
@@ -999,6 +1883,20 @@ a {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .dashboard-hero,
+  .races-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-hero {
+    min-height: 34rem;
+    background-position: 62% center;
+  }
+
+  .races-hero {
+    background-position: 62% center;
+  }
+
   .race-details-header {
     flex-direction: column;
   }
@@ -1010,6 +1908,41 @@ a {
 }
 
 @media (max-width: 560px) {
+  .app-shell__header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .app-shell__nav {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .app-shell__main {
+    padding: var(--space-4);
+  }
+
+  .dashboard-hero,
+  .races-hero,
+  .race-day-hero {
+    padding: var(--space-5);
+    border-radius: var(--radius-md);
+  }
+
+  .dashboard-hero__title {
+    font-size: 3rem;
+  }
+
+  .race-card--poster .race-card__link-surface,
+  .race-day__link {
+    grid-template-columns: 1fr;
+  }
+
+  .race-card__image,
+  .race-day__image {
+    max-height: 12rem;
+  }
+
   .races-cal__year {
     grid-template-columns: 1fr;
   }

frontend/src/styles/tokens.css

@@ -1,20 +1,26 @@
 :root {
-  --color-bg: #f3f5f7;
+  --color-bg: #edf3f6;
+  --color-bg-deep: #071927;
   --color-surface: #ffffff;
-  --color-text: #13202b;
+  --color-surface-soft: #f7fafc;
-  --color-text-muted: #5d6b77;
+  --color-text: #0e1f2d;
-  --color-accent: #1f7ae0;
+  --color-text-muted: #647483;
-  --color-border: #dce2e8;
+  --color-accent: #1168d8;
-  --color-success: #2f9e63;
+  --color-accent-strong: #0c48a0;
-  --color-warning: #c0821f;
+  --color-lime: #b9f24a;
-  --color-error: #cc3a3a;
+  --color-coral: #ff6f5e;
+  --color-violet: #6d5dfc;
+  --color-border: #d6e1ea;
+  --color-success: #168657;
+  --color-warning: #b77716;
+  --color-error: #c43333;
 
   --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
-  --font-size-h1: 2rem;
+  --font-size-h1: 2.35rem;
-  --font-size-h2: 1.5rem;
+  --font-size-h2: 1.35rem;
   --font-size-body: 1rem;
   --font-size-caption: 0.875rem;
-  --line-height-base: 1.5;
+  --line-height-base: 1.45;
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -25,8 +31,10 @@
   --space-8: 2rem;
 
   --radius-sm: 0.375rem;
-  --radius-md: 0.75rem;
+  --radius-md: 0.625rem;
-  --radius-lg: 1rem;
+  --radius-lg: 0.75rem;
 
-  --shadow-card-lift: 0 6px 20px rgba(19, 32, 43, 0.12);
+  --shadow-card: 0 10px 30px rgba(14, 31, 45, 0.08);
+  --shadow-card-lift: 0 16px 34px rgba(14, 31, 45, 0.16);
+  --shadow-hero: 0 22px 60px rgba(7, 25, 39, 0.24);
 }