MineGeo/app/site-glass.css

/* A restrained frosted-glass treatment for the shared site navigation. */
.site-header {
  --site-header-glass: rgb(8 11 16 / 0.68);
  position: sticky;
  inset-block-start: 16px;
  z-index: 40;
  height: 72px;
  margin: 16px clamp(12px, 2vw, 28px) 0;
  overflow: visible;
  background: var(--bg);
  border: 1px solid rgb(235 242 250 / 0.16);
  border-radius: 22px;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.12),
    inset 0 -1px rgb(255 255 255 / 0.025),
    0 12px 36px rgb(3 6 10 / 0.24),
    0 2px 8px rgb(3 6 10 / 0.16);
  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(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
}

@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.72);
  border-color: rgb(52 76 43 / 0.18);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.82),
    inset 0 -1px rgb(255 255 255 / 0.28),
    0 12px 36px rgb(39 58 33 / 0.12),
    0 2px 8px rgb(39 58 33 / 0.06);
}

@media (max-width: 700px) {
  .site-header {
    inset-block-start: 10px;
    height: 60px;
    margin: 10px 10px 0;
    border-radius: 18px;
  }
}

@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;
  border-radius: inherit;
  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;
  }
}