/* --- Цветовые схемы --- */ :root { /* Светлая тема (уютный "сепия" с оранжевым акцентом) */ --bg-color: #fdf6e3; /* Фон: "состаренная бумага" */ --text-color: #586e75; /* Текст: приглушенный серо-синий */ --accent-color: #cb4b16; /* Акцент: теплый оранжевый */ --link-color: #fdf6e3; /* Текст на кнопке */ --link-bg: #657b83; /* Фон кнопки */ --link-hover-bg: #cb4b16; /* Фон кнопки при наведении (оранжевый) */ --link-hover-text: #ffffff; /* Текст на кнопке при наведении */ --glow-color: rgba(203, 75, 22, 0.5); /* Свечение (оранжевое) */ } /* ИСПРАВЛЕНИЕ: Мы применяем переменные темной темы, когда класс .dark-mode есть у */ html.dark-mode { /* Темная тема (глубокий "космос" с фиолетовым акцентом) */ --bg-color: #0d1117; /* Фон: почти черный, как на GitHub */ --text-color: #c9d1d9; /* Текст: светло-серый */ --accent-color: #8b5cf6; /* Акцент: насыщенный фиолетовый */ --link-color: #ffffff; /* Текст на кнопке */ --link-bg: #21262d; /* Фон кнопки */ --link-hover-bg: #8b5cf6; /* Фон кнопки при наведении (фиолетовый) */ --link-hover-text: #ffffff; /* Текст на кнопке при наведении */ --glow-color: rgba(139, 92, 246, 0.5); /* Свечение (фиолетовое) */ } /* --- Подключение локальных шрифтов --- */ @font-face { font-family: 'Fira Code'; src: url('../fonts/FiraCode-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Fira Code'; src: url('../fonts/FiraCode-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } /* --- Общие стили для всех устройств (используем переменные) --- */ body { background-color: var(--bg-color); color: var(--text-color); font-family: 'Fira Code', 'Source Code Pro', monospace; padding: 20px; font-size: 18px; line-height: 1.6; transition: background-color 0.3s, color 0.3s; /* Плавный переход */ } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; font-size: 2.2em; } a { color: var(--link-color); background-color: var(--link-bg); border: 1px solid var(--accent-color); padding: 10px 20px; margin: 8px; display: inline-block; transition: all 0.2s ease-in-out; } a:hover { background-color: var(--link-hover-bg); color: var(--link-hover-text); box-shadow: 0 0 10px var(--glow-color); } hr { border-color: var(--accent-color); opacity: 0.5; } /* Кнопка переключения темы */ #theme-toggle { position: fixed; /* Закрепим в углу */ top: 20px; right: 20px; cursor: pointer; background-color: var(--link-bg); /* Используем цвета темы */ border: 1px solid var(--accent-color); color: var(--text-color); font-size: 24px; /* Размер иконки */ padding: 5px 10px; border-radius: 5px; z-index: 1000; /* Чтобы была поверх всего */ transition: all 0.2s ease-in-out; } #theme-toggle:hover { box-shadow: 0 0 10px var(--glow-color); } /* --- Стили ТОЛЬКО для мобильных устройств --- */ @media (max-width: 768px) { body { font-size: 16px; padding: 10px; } h1 { font-size: 1.8em; } nav a, .project-links a { display: block; width: 90%; margin: 10px auto; } #theme-toggle { top: 10px; right: 10px; } }