/* Цветовые токены темы. По умолчанию — тёмная (см. :root ниже), светлая — оверрайд через [data-theme="light"] на (ставит переключатель, см. theme.js). Единственное место, где заданы конкретные HEX/rgba-значения — все компоненты (header.css/footer.css/masonry.css/theme-toggle.css) читают только var(--color-*), без хардкода. */ :root { /* Матовое стекло (хедер/футер/кнопки навигации) — одна и та же "рецептура" размытия в обеих темах, меняются только цвета-токены ниже. -webkit- дубль обязателен для Safari/iOS, у него до сих пор нет неprefixed backdrop-filter. */ --glass-blur: 20px; --glass-saturate: 180%; /* Общий тайминг переключения темы — читают html/body ниже и theme-toggle.css (костяшка тумблера), чтобы вся страница переходила между темами в один и тот же плавный такт, а не дёргано (было: html/body вообще без transition, отдельные компоненты — каждый на своей длительности). */ --theme-transition-duration: 0.6s; --theme-transition-ease: cubic-bezier(0.65, 0, 0.35, 1); } :root, [data-theme="dark"] { color-scheme: dark; --color-bg: #14161a; --color-surface: #1c1f26; --color-surface-alt: #262a33; --color-text: #f4f5f7; --color-text-muted: #9aa1ae; --color-border: #2c303a; /* "Ink" — цвет обводки/заливки монохромных контролов (кнопки, иконки), инвертируется относительно surface в каждой теме. */ --color-ink: #f4f5f7; --color-ink-contrast: #14161a; /* Полупрозрачные версии surface/surface-alt под backdrop-filter — сама заливка почти не видна без blur, весь эффект стекла даёт именно смазанный фон под ней. Едва заметная светлая обводка (не color-border — он тут слишком тёмный/непрозрачный) — типичный блик стекла по краю панели. */ --color-glass: rgba(28, 31, 38, 0.55); --color-glass-alt: rgba(38, 42, 51, 0.55); --color-glass-border: rgba(244, 245, 247, 0.1); } [data-theme="light"] { color-scheme: light; --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-alt: #f0f1f4; --color-text: #14161a; --color-text-muted: #6b7280; --color-border: #e2e5eb; --color-ink: #14161a; --color-ink-contrast: #ffffff; --color-glass: rgba(255, 255, 255, 0.55); --color-glass-alt: rgba(240, 241, 244, 0.55); --color-glass-border: rgba(20, 22, 26, 0.08); } /* Переливающаяся обводка стеклянных плашек (хедер/футер/панель меню — тумблер темы теперь отдельно, см. ниже почему) — conic-gradient, замаскированный так, что виден только тонкий кольцевой контур, а не вся заливка. Псевдоэлемент, НЕ настоящий border: реальный border (пробовали раньше) на box-sizing:border-box отъедает 1px у padding- box изнутри и сдвигает то, что позиционировано абсолютными px (костяшка тумблера) — у ::after с position:absolute; inset:0 такого побочного эффекта нет. Именно ::after, не ::before — у .site-footer__top-btn ::before уже занят розовым hover-пятном из button-hover.css, второй эффект на том же псевдоэлементе конфликтовал бы с ним. Цвет — не выдуманный, а взят от реального цветного элемента, который на этой плашке действительно есть, и стоит примерно на его месте (--glass-accent/--glass-accent-pos, заданы у самих плашек ниже): хедер — розовая кнопка "Резюме PDF" (сидит справа), футер и панель меню — активный розовый пункт "Работы" (сидит слева/сверху-слева). У кнопки "наверх" в футере цветного контента нет — акцент остаётся прозрачным, только нейтральный белый слой. Тумблер темы устроен иначе (цвет реально переключается местами) — свой рецепт, см. .theme-toggle__track::after в theme-toggle.css. Не крутится сам по себе постоянно — вращение (белый слой) должно "реагировать" на смену цвета внутренних элементов, а не жить своей жизнью. Анимация запускается только на html.theme-transitioning — этот класс на 1с ставит theme.js в момент реальной смены темы (см. triggerGlassShimmer там же), ровно тогда, когда красятся сами плашки. */ @property --glass-shimmer-angle { syntax: ""; initial-value: 0deg; inherits: false; } /* inherits:false — иначе --glass-accent, заданный на .site-footer ниже, утекал бы вниз по DOM на .site-footer__top-btn (обычные custom properties наследуются по умолчанию) и красил бы её обводку в розовый, хотя у неё самой никакого розового элемента нет. */ @property --glass-accent { syntax: ""; initial-value: transparent; inherits: false; } @property --glass-accent-pos { syntax: "*"; initial-value: 50% 50%; inherits: false; } .site-header { /* Розовая кнопка "Резюме PDF" — крайняя справа (justify-content: space-between в header.css). При наведении сама кнопка становится ink-цвета (см. "активные" контролы в button-hover.css) — блик повторяет это же превращение, а не застревает розовым. */ --glass-accent: color-mix(in srgb, var(--color-action-active) 70%, transparent); --glass-accent-pos: calc(100% - 2.5rem) 50%; } .site-header:has(.site-header__cta:hover) { --glass-accent: color-mix(in srgb, var(--color-ink) 55%, transparent); } .site-footer, .footer-menu-panel__bar { /* Активный пункт "Работы" — всегда первый/крайний слева в списке (см. .site-footer__nav / .footer-menu-panel__nav). Та же логика про hover, что у хедера выше — .is-current тоже красится в ink при наведении. */ --glass-accent: color-mix(in srgb, var(--color-action-active) 70%, transparent); --glass-accent-pos: 2.25rem 50%; } .site-footer:has(.site-footer__link.is-current:hover), .footer-menu-panel__bar:has(.footer-menu-panel__link.is-current:hover) { --glass-accent: color-mix(in srgb, var(--color-ink) 55%, transparent); } :is( .site-header, .site-footer, .footer-menu-panel__bar ) { position: relative; } /* .site-footer__top-btn НЕ в списке выше — у неё уже position:absolute в footer.css (нужен для right:0), этого достаточно как containing block для ::after ниже, лишний position:relative тут только рисковал бы конфликтовать по каскаду. У неё же нет --glass-accent (нечего отражать — просто стрелка, ink-цвет), задел transparent по умолчанию ниже в самом ::after. */ :is( .site-header, .site-footer, .site-footer__top-btn, .footer-menu-panel__bar )::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(ellipse 45% 160% at var(--glass-accent-pos, 50% 50%), var(--glass-accent, transparent), transparent 70%), conic-gradient( from var(--glass-shimmer-angle), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.9) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; /* Плавно перекрашивается вместе с реальной кнопкой/пунктом на hover (--button-hover-duration — тот же такт, что и у их собственного цвета в button-hover.css). */ transition: --glass-accent var(--button-hover-duration, 0.5s) ease; } html.theme-transitioning :is( .site-header, .site-footer, .site-footer__top-btn, .footer-menu-panel__bar )::after { animation: glass-shimmer-sweep 1s ease-out; } @keyframes glass-shimmer-sweep { from { --glass-shimmer-angle: 0deg; } to { /* Полный оборот, не половина — 360deg визуально совпадает с 0deg (градиент периодичен), поэтому свип каждый раз стартует с той же точки без видимого скачка между переключениями темы. */ --glass-shimmer-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { html.theme-transitioning :is( .site-header, .site-footer, .site-footer__top-btn, .footer-menu-panel__bar )::after { animation: none; } } html, body { background: var(--color-bg); color: var(--color-text); transition: background-color var(--theme-transition-duration) var(--theme-transition-ease), color var(--theme-transition-duration) var(--theme-transition-ease); } @media (prefers-reduced-motion: reduce) { html, body { transition-duration: 0.01ms; } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }