AkurAI-Framework / site/frontend/glass.css

Latest change 8d7067ab5b862b25460ebbdbf35b265ac7e4f995 - OLI-208: flat corners in framework defaults (max 6px, 4px small, no pills) + tests/test_radius.sh by Ólafur Búi Ólafsson

/* AkurAI liquid-glass kit — tokens + surfaces. Load after styles.css/themes.css.
   One material, identity by tint: set --tint on :root or any container. */
:root {
  --tint: #4fe3c1;
  --glass-blur: 18px;
  --glass-fill: color-mix(in srgb, var(--tint) 7%, rgba(20, 25, 37, 0.55));
  --glass-edge: color-mix(in srgb, var(--tint) 32%, rgba(255, 255, 255, 0.14));
  --glass-shine: rgba(255, 255, 255, 0.16);
  --glass-radius: 6px;
  --glass-shadow: 0 30px 70px -34px #000, inset 0 1px 0 var(--glass-shine);
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--tint);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

.glass {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, var(--glass-shine), transparent 38%, transparent 70%, color-mix(in srgb, var(--tint) 14%, transparent));
  mix-blend-mode: screen; opacity: 0.6;
}
.glass-card { padding: 24px; }
.glass-nav { border-radius: 4px; padding: 6px 6px 6px 20px; }
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: color-mix(in srgb, var(--tint) 10%, var(--panel)); }
}
@media (prefers-contrast: more) {
  .glass { background: var(--panel); border-color: var(--fg); }
  .glass::before { display: none; }
}

.glass-aurora { position: relative; isolation: isolate; overflow-x: clip; }
.glass-aurora::before {
  content: ""; position: absolute; inset: -10% 0 auto; height: 70%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 25% 30%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 70%),
    radial-gradient(36% 55% at 75% 20%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%);
  filter: blur(40px);
  animation: glass-drift 18s ease-in-out infinite alternate;
}
@keyframes glass-drift { to { transform: translate3d(3%, 4%, 0) scale(1.06); } }

.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 6px 22px; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--fg); background: var(--glass-fill); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: background .2s, border-color .2s, transform .1s;
}
.btn-glass:hover { background: color-mix(in srgb, var(--tint) 18%, var(--glass-fill)); text-decoration: none; }
.btn-glass:active { transform: translateY(1px); }
.btn-glass-primary { background: var(--tint); color: #04140f; border-color: transparent; }
.btn-glass-primary:hover { background: color-mix(in srgb, var(--tint) 88%, #fff); }

.glass-input, .glass-field input, .glass-field textarea, .glass-field select {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; color: var(--fg);
  background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--glass-edge);
  border-radius: 6px;
}
.glass-field textarea { min-height: 120px; resize: vertical; }
.glass-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.glass-field.is-invalid input, .glass-field.is-invalid textarea { border-color: var(--danger); }
.glass-field .field-error { color: var(--danger); font-size: 13px; margin: 6px 0 0; }

.glass :focus-visible, .btn-glass:focus-visible, .glass-input:focus-visible,
.glass-field input:focus-visible, .glass-field textarea:focus-visible, .glass-field select:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus-ring);
}
a:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 4px; }

.glass-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.glass-tint { color: var(--tint); }

@media (prefers-reduced-motion: reduce) {
  .glass-aurora::before { animation: none; }
  .btn-glass { transition: none; }
  html { scroll-behavior: auto; }
}