/* Цвета вынесены в переменные, а тема выбирается атрибутом data-theme на : auto (по системе), light, dark. Атрибут ставит инлайновый скрипт в до отрисовки — иначе на долю секунды мелькала бы чужая тема. Светлая — Solarized Light, та же гамма, что у блога на blog.cosmdandy.dev. Её значения описаны дважды: для явного выбора и для auto при светлой системной теме. Объединить нельзя — @media и обычный селектор в одно правило не сходятся. Свечение (.glow) в обеих темах одинаковое: на кремовом фоне оно читается как акварельное пятно и связывает страницу с остальными сайтами. */ :root, :root[data-theme="dark"] { /* Длительность перекраски при смене темы. Одно значение на весь файл: иначе фон, текст и рамки приезжают вразнобой и это заметно. */ --theme-fade: 0.45s cubic-bezier(0.32, 0.72, 0, 1); --base01: #586e75; --base1: #93a1a1; --green: #859900; --bg: #000; --text: var(--base1); --heading: #ededed; --bio: #70757e; --now: #5a6068; --hover-text: #eee8d5; --meta: var(--base01); --dots: rgba(147, 161, 161, 0.25); --cursor-glow-1: rgba(237, 237, 237, 0.035); --cursor-glow-2: rgba(237, 237, 237, 0.012); --card-from: rgba(7, 54, 66, 0.25); --card-to: rgba(7, 54, 66, 0.10); --card-hover-from: rgba(7, 54, 66, 0.40); --card-hover-to: rgba(7, 54, 66, 0.20); --card-active-from: rgba(7, 54, 66, 0.50); --card-active-to: rgba(7, 54, 66, 0.30); --card-border: rgba(147, 161, 161, 0.08); --card-border-top: rgba(147, 161, 161, 0.14); --card-border-hover: rgba(147, 161, 161, 0.18); --card-border-top-hover: rgba(147, 161, 161, 0.25); --card-ring: rgba(147, 161, 161, 0.04); --card-ring-hover: rgba(147, 161, 161, 0.06); --card-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.7); --card-shadow-hover: 0 8px 32px -4px rgba(0, 0, 0, 0.8), 0 0 80px -20px rgba(42, 161, 152, 0.06); --badge-border: rgba(147, 161, 161, 0.12); --badge-shine-low: rgba(147, 161, 161, 0.04); --badge-shine-high: rgba(147, 161, 161, 0.18); --selection-bg: rgba(120, 40, 220, 0.4); --selection-fg: #ededed; --focus: rgba(0, 220, 255, 0.5); /* Гигантская «404» на фоне страницы ошибки. */ --ghost: rgba(237, 237, 237, 0.035); --ghost-mobile: rgba(237, 237, 237, 0.16); /* Плашка переключателя всегда контрастна фону: на тёмной теме светлая, на светлой тёмная. Так кнопка читается как отдельный предмет, а не растворяется в поверхности. */ --inv-surface: rgba(238, 232, 213, 0.94); --inv-line: rgba(88, 110, 117, 0.22); --inv-node: #657b83; --inv-ray: rgba(88, 110, 117, 0.38); --inv-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.85); } :root[data-theme="light"] { --bg: #fdf6e3; /* base3 */ --text: #586e75; /* base01 */ --heading: #073642; /* base02 */ --bio: #839496; /* base0 */ --now: #93a1a1; /* base1 */ --hover-text: #073642; --meta: #93a1a1; --dots: rgba(88, 110, 117, 0.18); --cursor-glow-1: rgba(7, 54, 66, 0.05); --cursor-glow-2: rgba(7, 54, 66, 0.018); /* Карточки на base2: та же логика «поверхность чуть плотнее фона», но со светлым основанием, иначе стекло превращается в грязь. */ --card-from: rgba(238, 232, 213, 0.55); --card-to: rgba(238, 232, 213, 0.30); --card-hover-from: rgba(238, 232, 213, 0.75); --card-hover-to: rgba(238, 232, 213, 0.50); --card-active-from: rgba(238, 232, 213, 0.85); --card-active-to: rgba(238, 232, 213, 0.60); --card-border: rgba(88, 110, 117, 0.14); --card-border-top: rgba(88, 110, 117, 0.20); --card-border-hover: rgba(88, 110, 117, 0.25); --card-border-top-hover: rgba(88, 110, 117, 0.32); --card-ring: rgba(88, 110, 117, 0.05); --card-ring-hover: rgba(88, 110, 117, 0.08); --card-shadow: 0 4px 24px -4px rgba(88, 110, 117, 0.18); --card-shadow-hover: 0 8px 32px -4px rgba(88, 110, 117, 0.24), 0 0 80px -20px rgba(42, 161, 152, 0.10); --badge-border: rgba(88, 110, 117, 0.18); --badge-shine-low: rgba(88, 110, 117, 0.04); --badge-shine-high: rgba(88, 110, 117, 0.16); --selection-fg: #073642; --focus: rgba(38, 139, 210, 0.6); --ghost: rgba(7, 54, 66, 0.06); --ghost-mobile: rgba(7, 54, 66, 0.14); --inv-surface: rgba(7, 54, 66, 0.94); --inv-line: rgba(147, 161, 161, 0.22); --inv-node: #93a1a1; --inv-ray: rgba(147, 161, 161, 0.40); --inv-shadow: 0 6px 24px -6px rgba(88, 110, 117, 0.35); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #fdf6e3; /* base3 */ --text: #586e75; /* base01 */ --heading: #073642; /* base02 */ --bio: #839496; /* base0 */ --now: #93a1a1; /* base1 */ --hover-text: #073642; --meta: #93a1a1; --dots: rgba(88, 110, 117, 0.18); --cursor-glow-1: rgba(7, 54, 66, 0.05); --cursor-glow-2: rgba(7, 54, 66, 0.018); /* Карточки на base2: та же логика «поверхность чуть плотнее фона», но со светлым основанием, иначе стекло превращается в грязь. */ --card-from: rgba(238, 232, 213, 0.55); --card-to: rgba(238, 232, 213, 0.30); --card-hover-from: rgba(238, 232, 213, 0.75); --card-hover-to: rgba(238, 232, 213, 0.50); --card-active-from: rgba(238, 232, 213, 0.85); --card-active-to: rgba(238, 232, 213, 0.60); --card-border: rgba(88, 110, 117, 0.14); --card-border-top: rgba(88, 110, 117, 0.20); --card-border-hover: rgba(88, 110, 117, 0.25); --card-border-top-hover: rgba(88, 110, 117, 0.32); --card-ring: rgba(88, 110, 117, 0.05); --card-ring-hover: rgba(88, 110, 117, 0.08); --card-shadow: 0 4px 24px -4px rgba(88, 110, 117, 0.18); --card-shadow-hover: 0 8px 32px -4px rgba(88, 110, 117, 0.24), 0 0 80px -20px rgba(42, 161, 152, 0.10); --badge-border: rgba(88, 110, 117, 0.18); --badge-shine-low: rgba(88, 110, 117, 0.04); --badge-shine-high: rgba(88, 110, 117, 0.16); --selection-fg: #073642; --focus: rgba(38, 139, 210, 0.6); --ghost: rgba(7, 54, 66, 0.06); --ghost-mobile: rgba(7, 54, 66, 0.14); --inv-surface: rgba(7, 54, 66, 0.94); --inv-line: rgba(147, 161, 161, 0.22); --inv-node: #93a1a1; --inv-ray: rgba(147, 161, 161, 0.40); --inv-shadow: 0 6px 24px -6px rgba(88, 110, 117, 0.35); } } @font-face { font-family: 'Inter'; font-weight: 400; font-display: block; src: url('fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-display: block; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } .dots { position: fixed; inset: 0; background-image: radial-gradient(circle, var(--dots) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; z-index: 0; } .glow { position: absolute; inset: -160px; border-radius: 80px; background: linear-gradient(45deg, rgba(255, 50, 100, 0.45) 0%, rgba(255, 80, 150, 0.30) 25%, rgba(120, 40, 220, 0.18) 50%, rgba(0, 220, 255, 0.30) 75%, rgba(0, 255, 255, 0.45) 100%); filter: blur(160px); pointer-events: none; z-index: 0; } .cursor-glow { position: fixed; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient( circle at center, var(--cursor-glow-1) 0%, var(--cursor-glow-2) 35%, transparent 60% ); pointer-events: none; z-index: 10; transform: translate(-50%, -50%); transition: opacity 0.4s; opacity: 0; } .cursor-glow.visible { opacity: 1; } main { position: relative; z-index: 2; padding: 24px; width: 100%; max-width: 420px; } .card { position: relative; text-align: center; } h1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.025em; color: var(--heading); margin-bottom: 8px; } .bio { font-size: 0.82rem; color: var(--bio); margin-bottom: 4px; } .now { font-size: 0.78rem; color: var(--now); letter-spacing: 0.01em; margin-bottom: 32px; } .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 6px rgba(133, 153, 0, 0.6); animation: livePulse 2.5s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .links { display: flex; flex-direction: column; gap: 8px; } .link-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; text-decoration: none; color: var(--text); font-size: 0.85rem; font-weight: 400; background: linear-gradient(180deg, var(--card-from) 0%, var(--card-to) 100%); border: 1px solid var(--card-border); border-top-color: var(--card-border-top); backdrop-filter: blur(25px); box-shadow: 0 0 0 1px var(--card-ring), var(--card-shadow); transform: translateZ(0); transition: transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.44s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.40s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.40s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.40s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.40s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; } .link-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--proximity-border, transparent); padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .link-item:visited { color: var(--text); } .link-item:hover { color: var(--hover-text); background: linear-gradient(180deg, var(--card-hover-from) 0%, var(--card-hover-to) 100%); border-color: var(--card-border-hover); border-top-color: var(--card-border-top-hover); box-shadow: 0 0 0 1px var(--card-ring-hover), var(--card-shadow-hover); transform: translate3d(0, -1px, 0); } .link-item:active { background: linear-gradient(180deg, var(--card-active-from) 0%, var(--card-active-to) 100%); transform: translate3d(0, 0, 0); } .link-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .link-item.disabled { opacity: 0.35; cursor: default; pointer-events: none; } .link-item svg { flex-shrink: 0; color: inherit; } .link-item span { flex-grow: 1; text-align: left; } .badge { flex-grow: 0 !important; font-size: 0.7rem; color: var(--base01); border: 1px solid var(--badge-border); border-radius: 6px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.04em; background: linear-gradient( 90deg, var(--badge-shine-low) 0%, var(--badge-shine-high) 50%, var(--badge-shine-low) 100% ) 0 0 / 200% 100%; animation: badgeShimmer 3.5s ease-in-out infinite; } @keyframes badgeShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes contentEnter { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes linkEnter { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes linkEnterDisabled { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); } to { opacity: 0.35; transform: translate3d(0, 0, 0) scale(1); } } h1, .bio, .now { transform: translateZ(0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: contentEnter 0.65s cubic-bezier(0.32, 0.72, 0, 1) backwards; } h1 { animation-delay: 0ms; } .bio { animation-delay: 60ms; } .now { animation-delay: 120ms; } .link-item { animation: linkEnter 0.55s cubic-bezier(0.32, 0.72, 0, 1) backwards; } .link-item.disabled { animation-name: linkEnterDisabled; } .link-item:nth-child(1) { animation-delay: 220ms; } .link-item:nth-child(2) { animation-delay: 280ms; } .link-item:nth-child(3) { animation-delay: 340ms; } .link-item:nth-child(4) { animation-delay: 400ms; } .link-item:nth-child(5) { animation-delay: 460ms; } .link-item:nth-child(6) { animation-delay: 520ms; } .link-item.copied { color: #859900; } .meta { position: fixed; bottom: 24px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; align-items: center; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--meta); pointer-events: none; transform: translateZ(0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: contentEnter 0.65s cubic-bezier(0.32, 0.72, 0, 1) 720ms backwards; } .meta a { pointer-events: auto; color: inherit; text-decoration: none; transition: color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .meta a:hover { color: var(--text); } .meta a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } .meta-sep { opacity: 0.5; } @media (prefers-reduced-motion: reduce) { .badge, .live-dot, h1, .bio, .now, .link-item, .meta { animation: none; } } @media (max-width: 480px) { .glow { inset: -40px; filter: blur(60px); } .cursor-glow { display: none; } h1 { font-size: 1.5rem; } .now { margin-bottom: 24px; } .link-item { padding: 12px 16px; } .meta { bottom: 16px; font-size: 0.7rem; } } /* ── Переключатель темы ───────────────────────────────────────────────────── Два состояния, солнце и луна: в разметке нет отдельного «авто». Пустой localStorage сам по себе означает «следуй за системой», а первый клик записывает явный выбор — так третий режим не нужен в интерфейсе, хотя по поведению он есть. Иконка показывает действующую тему, а не будущую: кнопка отвечает на вопрос «что сейчас», а не «что будет». */ .theme-switch { position: fixed; top: 24px; right: 24px; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 14px; border: 1px solid var(--inv-line); background: var(--inv-surface); box-shadow: var(--inv-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: contentEnter 0.65s cubic-bezier(0.32, 0.72, 0, 1) 620ms backwards; transition: background var(--theme-fade), border-color var(--theme-fade), box-shadow var(--theme-fade), transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-switch:hover { transform: translate3d(0, -1px, 0); } .theme-switch:active { transform: translate3d(0, 0, 0) scale(0.96); } .theme-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* Обе иконки лежат друг на друге: одна уезжает, вторая приезжает. */ .theme-switch svg { grid-area: 1 / 1; width: 22px; height: 22px; display: block; color: var(--inv-node); transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), color var(--theme-fade); } .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); } :root[data-theme="light"] .icon-sun, :root:not([data-theme]) .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } :root[data-theme="dark"] .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* В тёмной теме солнце должно уехать, даже если атрибута ещё нет. */ :root[data-theme="dark"] .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } :root:not([data-theme]) .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .theme-switch { animation: none; } } @media (max-width: 480px) { .theme-switch { top: 16px; right: 16px; width: 38px; height: 38px; } } /* ── Плавная смена темы ───────────────────────────────────────────────────── Переходы навешиваются только на время переключения и снимаются сразу после. Держать их постоянно нельзя: они перебили бы собственные анимации карточек и подсветку при наведении, у которых свои кривые и длительности. */ :root.theme-animating, :root.theme-animating *, :root.theme-animating *::before, :root.theme-animating *::after { transition: background-color var(--theme-fade), background-image var(--theme-fade), color var(--theme-fade), border-color var(--theme-fade), box-shadow var(--theme-fade), fill var(--theme-fade), stroke var(--theme-fade) !important; }