@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"); .maintenance-page { position: relative; max-width: 1100px; margin: 36px auto 0 auto; padding: 48px 20px 80px 20px; font-family: "Manrope", "Space Grotesk", sans-serif; color: var(--text-primary); overflow: hidden; } .maintenance-page::before, .maintenance-page::after { content: ""; position: absolute; border-radius: 999px; filter: blur(0px); opacity: 0.6; z-index: 0; pointer-events: none; } .maintenance-page::before { width: 420px; height: 420px; top: -140px; right: -140px; background: radial-gradient(circle at 30% 30%, rgba(20, 215, 255, 0.28), transparent 60%); } .maintenance-page::after { width: 520px; height: 520px; bottom: -220px; left: -200px; background: radial-gradient(circle at 30% 30%, rgba(30, 198, 118, 0.24), transparent 60%); } .maintenance-hero, .maintenance-grid, .maintenance-footer { position: relative; z-index: 1; } .maintenance-hero { padding: 36px 36px 30px 36px; border-radius: 22px; background: color-mix(in srgb, var(--card-bg) 84%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); animation: riseIn 0.7s ease-out both; } @supports not (background: color-mix(in srgb, #000 50%, transparent)) { .maintenance-hero { background: rgba(21, 32, 48, 0.86); border: 1px solid rgba(255, 255, 255, 0.12); } html[data-color-mode="light"] .maintenance-hero { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(11, 18, 32, 0.14); } } .maintenance-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(20, 215, 255, 0.12); color: var(--primary); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; } .maintenance-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; } .maintenance-hero h1 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: clamp(2.2rem, 3vw, 3.1rem); margin: 0; color: var(--text-primary); } .maintenance-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(30, 198, 118, 0.12); color: var(--secondary); font-weight: 700; font-size: 0.78rem; } .maintenance-lead { margin: 16px 0 8px 0; color: var(--text-muted); font-size: 1.05rem; max-width: 70ch; } .maintenance-support { margin: 0 0 20px 0; color: var(--text-secondary); font-weight: 600; } .maintenance-link { color: var(--primary); text-decoration: underline; font-weight: 700; } .maintenance-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border-radius: 14px; background: linear-gradient(120deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(20, 215, 255, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(20, 215, 255, 0.35); } .maintenance-note { color: var(--text-muted); font-weight: 600; } .maintenance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; } .maintenance-card { padding: 22px 22px 24px 22px; border-radius: 18px; background: color-mix(in srgb, var(--card-bg) 78%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); animation: riseIn 0.7s ease-out both; } .maintenance-card:nth-child(1) { animation-delay: 0.12s; } .maintenance-card:nth-child(2) { animation-delay: 0.22s; } .maintenance-card:nth-child(3) { animation-delay: 0.32s; } .maintenance-card h2 { font-family: "Space Grotesk", "Manrope", sans-serif; font-size: 1.2rem; margin: 0 0 10px 0; color: var(--text-primary); } .maintenance-card p { margin: 0; color: var(--text-muted); font-size: 0.98rem; } .maintenance-footer { margin-top: 32px; text-align: center; color: var(--text-secondary); font-weight: 600; animation: riseIn 0.7s ease-out both; animation-delay: 0.4s; } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 980px) { .maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .maintenance-page { padding: 28px 16px 64px 16px; } .maintenance-hero { padding: 26px 20px 24px 20px; } .maintenance-grid { grid-template-columns: 1fr; } .maintenance-actions { flex-direction: column; align-items: flex-start; } }