/* Shared "Under Construction" style for FoxyCosplay and Foayasha.com.
   Keep this file identical in both site folders.
   Default theme = FoxyCosplay orange. <body class="theme-foa"> = Foa blue & pink. */

:root {
  --ink: #3d372f;          /* warm charcoal, echoes the old #464037 headings */
  --muted: #7a7166;
  --bg: #fffaf2;
  --card: #ffffff;
  --blob-1: #fbe3b8;
  --blob-2: #fbe3b8;
  --bar: #e8960c;          /* top edge of the card */
  --badge: #e8960c;
  --stripe-a: #e8960c;
  --stripe-b: #fbe3b8;
}

/* Foa Cosplay: colours from the original foastyles.css */
.theme-foa {
  --ink: #1f2a5c;          /* soft navy (old site used #006) */
  --muted: #5f6787;
  --bg: #f6f8ff;
  --blob-1: #b5d9fd;       /* old light blue */
  --blob-2: #fbedfc;       /* old light pink */
  --bar: linear-gradient(90deg, #3889e2, #cc44c4);
  --badge: #cc44c4;
  --stripe-a: #3889e2;
  --stripe-b: #f3a6ee;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 10%, var(--blob-1) 0, transparent 40%),
    radial-gradient(circle at 85% 90%, var(--blob-2) 0, transparent 40%);
  color: var(--ink);
  font-family: "Nunito", Tahoma, Geneva, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: 52px 32px 36px;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(31, 42, 92, 0.10);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--bar);
}

.logo {
  display: block;
  margin: 0 auto 28px;
  max-width: 100%;
  height: auto;
}
.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--badge);
  border: 1.5px solid var(--badge);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 14px;
}

p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 auto 12px;
  max-width: 42ch;
}

/* Little "progress" stripe */
.stripe {
  height: 8px;
  border-radius: 999px;
  margin: 28px auto 24px;
  max-width: 260px;
  background: repeating-linear-gradient(
    -45deg,
    var(--stripe-a) 0 10px,
    var(--stripe-b) 10px 20px
  );
  background-size: 28px 28px;
  animation: slide 1.2s linear infinite;
}
@keyframes slide { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .stripe { animation: none; } }

footer {
  font-size: 0.85rem;
  color: var(--muted);
}