/* ========================================================= Sorei_kit.css Purpose: global tokens + reusable UI primitives Works with: plain HTML, Flask templates, static pages ========================================================= */ :root { /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; /* Radius */ --r-1: 10px; --r-2: 14px; --r-3: 20px; /* Shadows */ --shadow-1: 0 8px 30px rgba(0,0,0,.35); --shadow-2: 0 10px 50px rgba(0,0,0,.45); /* Color system (Dark default) */ --bg: #07080b; --bg-2: #0b0d12; --panel: rgba(255,255,255,0.04); --panel-2: rgba(255,255,255,0.07); --stroke: rgba(255,255,255,0.09); --stroke-2: rgba(255,255,255,0.14); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.65); --faint: rgba(255,255,255,0.45); /* Accents (Sorei vibe: cool lunar + subtle teal) */ --accent: #8bbcff; /* lunar blue */ --accent-2: #57e6d2; /* teal glow */ --danger: #ff6b6b; --warn: #ffd166; --ok: #58f2a7; /* Focus ring */ --focus: 0 0 0 3px rgba(139,188,255,0.25); /* Page */ --maxw: 1100px; } /* Optional light theme (toggle via data-theme="light" on ) */ html[data-theme="light"]{ --bg: #f7f9ff; --bg-2: #eef3ff; --panel: rgba(0,0,0,0.03); --panel-2: rgba(0,0,0,0.05); --stroke: rgba(0,0,0,0.08); --stroke-2: rgba(0,0,0,0.12); --text: rgba(0,0,0,0.88); --muted: rgba(0,0,0,0.62); --faint: rgba(0,0,0,0.45); } /* Base reset */ * { box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; font-family: var(--font-sans); background: radial-gradient(1200px 600px at 20% 10%, rgba(87,230,210,0.08), transparent 60%), radial-gradient(900px 500px at 80% 0%, rgba(139,188,255,0.10), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); letter-spacing: 0.2px; } /* Links */ a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; } /* Layout helpers */ .sk-container { max-width: var(--maxw); margin: 0 auto; padding: var(--s-7) var(--s-5); } .sk-stack > * + * { margin-top: var(--s-4); } .sk-row { display: flex; gap: var(--s-4); align-items: center; } .sk-wrap { flex-wrap: wrap; } .sk-spread { justify-content: space-between; } .sk-center { justify-content: center; } .sk-right { justify-content: flex-end; } .sk-muted { color: var(--muted); } /* Panels / Cards */ .sk-panel{ background: linear-gradient(180deg, var(--panel), transparent 140%); border: 1px solid var(--stroke); border-radius: var(--r-3); box-shadow: var(--shadow-1); padding: var(--s-6); backdrop-filter: blur(10px); } .sk-card{ background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-2); padding: var(--s-5); } .sk-divider{ height: 1px; background: var(--stroke); margin: var(--s-5) 0; } /* Headings */ .sk-title{ font-size: 28px; line-height: 1.15; margin: 0; letter-spacing: 0.3px; } .sk-subtitle{ margin: var(--s-2) 0 0 0; color: var(--muted); line-height: 1.4; } /* Buttons */ .sk-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-2); border: 1px solid var(--stroke); background: rgba(255,255,255,0.04); color: var(--text); cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select: none; } .sk-btn:hover{ background: rgba(255,255,255,0.07); border-color: var(--stroke-2); transform: translateY(-1px); } .sk-btn:active{ transform: translateY(0px); } .sk-btn:focus{ outline: none; box-shadow: var(--focus); } .sk-btn--primary{ border-color: rgba(139,188,255,0.35); background: linear-gradient(180deg, rgba(139,188,255,0.20), rgba(139,188,255,0.08)); } .sk-btn--ghost{ background: transparent; } .sk-btn--danger{ border-color: rgba(255,107,107,0.35); background: linear-gradient(180deg, rgba(255,107,107,0.20), rgba(255,107,107,0.08)); } /* Chips */ .sk-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255,255,255,0.03); color: var(--muted); font-size: 13px; } .sk-chip--accent{ border-color: rgba(87,230,210,0.35); color: rgba(87,230,210,0.95); } /* Inputs */ .sk-input, .sk-textarea, .sk-select{ width: 100%; border-radius: var(--r-2); border: 1px solid var(--stroke); background: rgba(0,0,0,0.18); color: var(--text); padding: 10px 12px; outline: none; } .sk-input:focus, .sk-textarea:focus, .sk-select:focus { box-shadow: var(--focus); border-color: rgba(139,188,255,0.35); } .sk-textarea{ min-height: 120px; resize: vertical; } /* Loading */ .sk-spinner{ width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.20); border-top-color: rgba(139,188,255,0.85); animation: skspin .8s linear infinite; } @keyframes skspin{ to { transform: rotate(360deg); } } /* Modal */ .sk-modal-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.60); display: none; align-items: center; justify-content: center; padding: var(--s-6); z-index: 9999; } .sk-modal-backdrop[data-open="true"]{ display: flex; } .sk-modal{ width: min(720px, 100%); border-radius: var(--r-3); border: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(10,12,18,0.96), rgba(10,12,18,0.82)); box-shadow: var(--shadow-2); padding: var(--s-6); } .sk-modal h2{ margin: 0 0 var(--s-3) 0; font-size: 20px; } .sk-modal p{ margin: 0; color: var(--muted); line-height: 1.5; } /* Toasts */ .sk-toasts{ position: fixed; right: var(--s-5); bottom: var(--s-5); display: grid; gap: var(--s-3); z-index: 99999; } .sk-toast{ min-width: 260px; max-width: 380px; border-radius: var(--r-2); border: 1px solid var(--stroke); background: rgba(10,12,18,0.92); box-shadow: var(--shadow-1); padding: 12px 12px; } .sk-toast .sk-toast-title{ font-weight: 600; margin: 0 0 6px 0; } .sk-toast .sk-toast-body{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; } .sk-toast--ok{ border-color: rgba(88,242,167,0.30); } .sk-toast--warn{ border-color: rgba(255,209,102,0.30); } .sk-toast--danger{ border-color: rgba(255,107,107,0.30); } /* Small screens */ @media (max-width: 720px){ .sk-container{ padding: var(--s-6) var(--s-4); } .sk-panel{ padding: var(--s-5); } }