/* ============================================ Prompt-Score™ — global.css Beta V2 · Frost / Icy Edition ============================================ */ /* ----------- GLOBAL BASE / QUALITY-OF-LIFE ----------- */ /* Sauberere Box-Model-Basis */ *, *::before, *::after { box-sizing: border-box; } /* Optional: Fokus ohne hässliche Standard-Outline (du nutzt Tailwind-Focus) */ :focus { outline: none; } /* Helper für weiche Transitions */ .ps-transition { transition: all 160ms ease; } /* ============================================ ICY THEME CLASSES (scoped) Active only when has class="theme-icy" ============================================ */ /* --- Icy Form Fields (Inputs, Textareas, Selects) --- */ .theme-icy .ps-icy-field { border-color: rgba(56, 189, 248, 0.75); box-shadow: 0 0 16px rgba(56, 189, 248, 0.20); background-color: rgba(0, 0, 0, 0.65); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .theme-icy .ps-icy-field:focus { border-color: rgba(129, 230, 217, 1.0); box-shadow: 0 0 28px rgba(45, 212, 191, 0.40); background-color: rgba(5, 18, 30, 0.96); } .theme-icy .ps-icy-field:hover { border-color: rgba(56, 189, 248, 0.95); } /* --- Icy Cards --- */ .theme-icy .ps-icy-card { border-color: rgba(56, 189, 248, 0.48); box-shadow: 0 0 26px rgba(56, 189, 248, 0.18); background-image: radial-gradient( circle at top left, rgba(56, 189, 248, 0.16), transparent 60% ); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .theme-icy .ps-icy-card:hover { border-color: rgba(56, 189, 248, 0.85); box-shadow: 0 0 32px rgba(56, 189, 248, 0.27); } /* --- Icy Primary Button (optional) --- */ .theme-icy .ps-icy-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 1.2rem; border-radius: 0.55rem; border: 1px solid rgba(56, 189, 248, 0.75); background-image: linear-gradient( 135deg, rgba(56, 189, 248, 0.4), rgba(14, 165, 233, 0.2), transparent ); color: #ecfeff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 24px rgba(56, 189, 248, 0.35); cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 80ms ease-out; } .theme-icy .ps-icy-btn-primary:hover { border-color: rgba(129, 230, 217, 1); box-shadow: 0 0 30px rgba(45, 212, 191, 0.5); transform: translateY(-1px); } .theme-icy .ps-icy-btn-primary:active { transform: translateY(0); box-shadow: 0 0 18px rgba(56, 189, 248, 0.32); } /* --- Icy Badge --- */ .theme-icy .ps-icy-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.7); background-color: rgba(15, 23, 42, 0.85); color: #e0f2fe; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* ============================================ XORA™ SPECIAL TAGS (for future branding) ============================================ */ .xora-tag { background: linear-gradient(90deg, #fef9c3, #fde047, #fef9c3); color: #111827; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; } /* Futuristische Divider-Linie */ .ps-divider { height: 1px; width: 100%; background: linear-gradient( to right, transparent, rgba(56, 189, 248, 0.35), transparent ); } /* ============================================ Soft Fade-In Animations ============================================ */ .ps-fade { opacity: 0; transform: translateY(6px); animation: psFadeIn 0.45s ease forwards; } @keyframes psFadeIn { to { opacity: 1; transform: translateY(0); } }