Add liquid glass filter definitions to site layout

2026-10-25 18:57:25 +05:00
parent 927923dc95
commit b8a430d4c2
3 changed files with 233 additions and 1 deletions
--- a/app/site-glass.css
+++ b/app/site-glass.css
@@ -0,0 +1,173 @@
+/* A restrained frosted-glass treatment for the shared site navigation. */
+.site-header {
+  --site-header-glass: rgb(8 11 16 / 0.78);
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 40;
+  background: var(--bg);
+  border-bottom-color: rgb(235 242 250 / 0.14);
+  box-shadow:
+    inset 0 1px rgb(255 255 255 / 0.055),
+    0 8px 24px rgb(3 6 10 / 0.12);
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .site-header {
+    background: var(--site-header-glass);
+    backdrop-filter: blur(7px) saturate(135%);
+    -webkit-backdrop-filter: blur(7px) saturate(135%);
+  }
+}
+
+@supports (backdrop-filter: url("#liquid-glass-distortion")) {
+  .site-header {
+    backdrop-filter: url("#liquid-glass-distortion") blur(5px) saturate(135%);
+  }
+}
+
+@supports (-webkit-backdrop-filter: url("#liquid-glass-distortion")) {
+  .site-header {
+    -webkit-backdrop-filter: url("#liquid-glass-distortion") blur(5px)
+      saturate(135%);
+  }
+}
+
+html[data-theme="light"] .site-header {
+  --site-header-glass: rgb(246 249 242 / 0.78);
+  border-bottom-color: rgb(52 76 43 / 0.18);
+  box-shadow:
+    inset 0 1px rgb(255 255 255 / 0.72),
+    0 8px 24px rgb(39 58 33 / 0.08);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .site-header {
+    background: var(--bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .site-header::before {
+    display: none;
+  }
+}
+
+.site-header::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(
+      112deg,
+      rgb(255 255 255 / 0.09),
+      transparent 24%,
+      transparent 76%,
+      rgb(255 255 255 / 0.035)
+    ),
+    linear-gradient(180deg, rgb(255 255 255 / 0.045), transparent 70%);
+}
+
+.site-header .header-inner {
+  position: relative;
+  z-index: 1;
+}
+
+html[data-theme="light"] .site-header::before {
+  background:
+    linear-gradient(
+      112deg,
+      rgb(255 255 255 / 0.55),
+      transparent 24%,
+      transparent 76%,
+      rgb(255 255 255 / 0.18)
+    ),
+    linear-gradient(180deg, rgb(255 255 255 / 0.34), transparent 70%);
+}
+
+.site-filter-definitions {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Keep the secondary support label quiet until someone points to or focuses it. */
+.header-report {
+  position: relative;
+}
+
+.header-report > span {
+  display: block;
+  position: absolute;
+  inset-block-start: calc(100% + 9px);
+  inset-inline-start: 50%;
+  z-index: 2;
+  max-width: min(14rem, calc(100vw - 24px));
+  padding: 6px 9px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--panel);
+  box-shadow: 0 5px 16px rgb(3 6 10 / 0.2);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 1.35;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translate(-50%, -3px);
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease,
+    visibility 140ms ease;
+}
+
+.header-report:is(:hover, :focus-visible) > span {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+/* The header icon carries this action above phone width, so avoid a duplicate menu row. */
+@media (max-width: 1200px) and (min-width: 601px) {
+  .site-navigation .nav-support {
+    display: none;
+  }
+}
+
+/* Touch screens cannot reveal hover labels; keep the action clear there. */
+@media (hover: none) {
+  .header-report > span {
+    position: static;
+    max-width: none;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+}
+
+@media (hover: none) and (max-width: 1000px) {
+  .header-report {
+    width: auto;
+    padding-inline: 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .site-header,
+  .header-report > span {
+    transition: none;
+  }
+}