@import url("../shared/template-base.css");

:root {
  --color-bg: #f6fbff;
  --color-bg-soft: #eaf6fb;
  --color-card: rgba(255, 255, 255, 0.76);
  --color-text: #10202a;
  --color-muted: #60727c;
  --color-primary: #24b8c7;
  --color-secondary: #8fe7ef;
  --color-border: rgba(16, 32, 42, 0.12);
  --hero-image: url("https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=1800&q=80");
}

.site-header {
  background: rgba(246, 251, 255, 0.78);
}

.site-header.is-scrolled {
  background: rgba(246, 251, 255, 0.94);
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(246, 251, 255, 0.92), rgba(246, 251, 255, 0.4)),
    var(--hero-image) center/cover no-repeat;
}