diff --git a/public/css/main.css b/public/css/main.css index 72e987d..4a8a0a1 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -560,7 +560,7 @@ a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover { margin-top: 0; margin-bottom: 0; padding: 0.8rem; - border: 1px solid var(--line); + border: 1px solid transparent; border-radius: calc(var(--radius-card) * 0.7); background: var(--bg-elevated); box-shadow: 0 16px 38px hsla(0, 0%, 0%, 0.2); @@ -755,6 +755,7 @@ a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover { right: 0; z-index: 90; background: var(--bg-elevated); + border-color: transparent; } /* Плавающая панель: fixed + координаты из JS; фон — токены v12-glass внизу файла */ @@ -5134,6 +5135,13 @@ html[data-theme="dark"] { color-mix(in srgb, var(--surface) 52%, transparent) ); --v12-glass-neutral-border: color-mix(in srgb, var(--line) 75%, hsla(0, 0%, 100%, 0.08)); + /* Градиентный бордер: сверху белый засвет -> снизу прозрачно */ + --v12-glass-neutral-border-grad: linear-gradient( + to bottom, + hsla(0, 0%, 100%, 0.55) 0%, + hsla(0, 0%, 100%, 0.16) 38%, + hsla(0, 0%, 100%, 0) 100% + ); --v12-glass-neutral-shadow: 0 14px 32px hsla(0, 0%, 0%, 0.4), inset 0 1px 0 hsla(0, 0%, 100%, 0.09); @@ -5151,6 +5159,13 @@ html[data-theme="light"] { color-mix(in srgb, var(--bg-elevated) 38%, transparent) ); --v12-glass-neutral-border: color-mix(in srgb, var(--line) 58%, hsla(0, 0%, 0%, 0.07)); + /* Градиентный бордер: сверху белый засвет -> снизу прозрачно (light: ярче) */ + --v12-glass-neutral-border-grad: linear-gradient( + to bottom, + hsla(0, 0%, 100%, 0.9) 0%, + hsla(0, 0%, 100%, 0.3) 42%, + hsla(0, 0%, 100%, 0) 100% + ); --v12-glass-neutral-shadow: 0 14px 28px hsla(var(--theme-h), 22%, 38%, 0.11), inset 0 1px 0 hsla(0, 0%, 100%, 0.9), @@ -5165,7 +5180,7 @@ html[data-theme="light"] { html[data-theme="dark"] .header--scrolled .header__inner, html[data-theme="light"] .header--scrolled .header__inner { background: var(--v12-glass-neutral-bg); - border-color: var(--v12-glass-neutral-border); + border-color: transparent; box-shadow: var(--v12-glass-neutral-shadow); backdrop-filter: var(--v12-glass-neutral-filter-elevated); -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated); @@ -5176,12 +5191,50 @@ html[data-theme="light"] .header--scrolled .header__inner { html[data-theme="dark"] .glass-neutral, html[data-theme="light"] .glass-neutral { background: var(--v12-glass-neutral-bg); - border-color: var(--v12-glass-neutral-border); + border-color: transparent; box-shadow: var(--v12-glass-neutral-shadow); backdrop-filter: var(--v12-glass-neutral-filter); -webkit-backdrop-filter: var(--v12-glass-neutral-filter); } +/* Градиентный бордер (сверху засвет -> снизу прозрачно) через mask. + Исключаем .fab (там ::before занят shine). */ +html[data-theme="dark"] .glass-neutral:not(.fab), +html[data-theme="light"] .glass-neutral:not(.fab), +html[data-theme="dark"] .header--scrolled .header__inner, +html[data-theme="light"] .header--scrolled .header__inner, +html[data-theme="dark"] .nav-more__dock, +html[data-theme="light"] .nav-more__dock, +html[data-theme="dark"] #nav-more-menu-floating, +html[data-theme="light"] #nav-more-menu-floating { + position: relative; +} +html[data-theme="dark"] .glass-neutral:not(.fab)::before, +html[data-theme="light"] .glass-neutral:not(.fab)::before, +html[data-theme="dark"] .header--scrolled .header__inner::before, +html[data-theme="light"] .header--scrolled .header__inner::before, +html[data-theme="dark"] .nav-more__dock::before, +html[data-theme="light"] .nav-more__dock::before, +html[data-theme="dark"] #nav-more-menu-floating::before, +html[data-theme="light"] #nav-more-menu-floating::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 1px; + background: var(--v12-glass-neutral-border-grad); + -webkit-mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + mask-composite: exclude; + pointer-events: none; + z-index: 1; +} + html[data-theme="dark"] .theme-picker__panel.glass-neutral, html[data-theme="dark"] .cookie-notice.glass-neutral, html[data-theme="light"] .theme-picker__panel.glass-neutral, @@ -5282,7 +5335,7 @@ html[data-theme="light"] .nav-more__dock, html[data-theme="dark"] #nav-more-menu-floating, html[data-theme="light"] #nav-more-menu-floating { background: var(--v12-glass-neutral-bg); - border-color: var(--v12-glass-neutral-border); + border-color: transparent; box-shadow: var(--v12-glass-neutral-shadow); backdrop-filter: var(--v12-glass-neutral-filter-elevated); -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);