/* ========================================================== SPACE UI KIT CARD COMPONENT ========================================================== */ .ui-card { --card-accent: var(--accent-cyan); --card-bg: rgba(5, 14, 25, 0.92); --card-border: rgba(110, 180, 220, 0.22); position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: linear-gradient( 145deg, rgba(20, 48, 68, 0.30), var(--card-bg) ); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.20); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } /* ========================================================== HOVER ========================================================== */ .ui-card--interactive { cursor: pointer; } .ui-card--interactive:hover { border-color: color-mix( in srgb, var(--card-accent) 45%, transparent ); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.30), 0 0 18px color-mix( in srgb, var(--card-accent) 8%, transparent ); } /* ========================================================== ACCENT ========================================================== */ .ui-card::before { content: ""; position: absolute; top: -1px; left: 16px; width: 42px; height: 1px; background: var(--card-accent); box-shadow: 0 0 9px var(--card-accent); z-index: 2; } /* ========================================================== IMAGE / VISUAL ========================================================== */ .ui-card__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; overflow: hidden; border-bottom: 1px solid var(--card-border); background: radial-gradient( circle at center, color-mix( in srgb, var(--card-accent) 10%, transparent ), transparent 65% ); } .ui-card__visual-icon { color: var(--card-accent); font-family: var(--font-family-mono); font-size: 42px; text-shadow: 0 0 18px color-mix( in srgb, var(--card-accent) 35%, transparent ); } /* ========================================================== VISUAL GRID ========================================================== */ .ui-card__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient( rgba(255, 255, 255, 0.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px ); background-size: 24px 24px; pointer-events: none; } /* ========================================================== BODY ========================================================== */ .ui-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px; } .ui-card__eyebrow { margin: 0 0 6px; color: var(--card-accent); font-family: var(--font-family-mono); font-size: 7px; font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; } .ui-card__title { margin: 0; color: var(--text); font-family: var(--font-family-display); font-size: var(--font-md); font-weight: var(--weight-bold); letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } .ui-card__description { margin: 8px 0 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.55; } /* ========================================================== FOOTER ========================================================== */ .ui-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; } .ui-card__meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-family: var(--font-family-mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; } /* ========================================================== ARROW ========================================================== */ .ui-card__arrow { color: var(--card-accent); font-family: var(--font-family-mono); font-size: 14px; transition: transform 0.2s ease; } .ui-card--interactive:hover .ui-card__arrow { transform: translateX(4px); } /* ========================================================== ITEM ========================================================== */ .ui-card--item { max-width: 280px; } .ui-card--item .ui-card__visual { min-height: 130px; } .ui-card--item .ui-card__visual-icon { font-size: 38px; } /* ========================================================== MISSION ========================================================== */ .ui-card--mission { max-width: 360px; } .ui-card--mission .ui-card__visual { min-height: 170px; } .ui-card__mission-number { position: absolute; top: 12px; left: 12px; z-index: 3; color: var(--card-accent); font-family: var(--font-family-mono); font-size: 8px; font-weight: var(--weight-bold); letter-spacing: 0.08em; } /* ========================================================== CHARACTER ========================================================== */ .ui-card--character { max-width: 280px; } .ui-card--character .ui-card__visual { min-height: 190px; } .ui-card__character-level { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 5px 7px; border: 1px solid var(--card-border); background: rgba(3, 10, 18, 0.72); color: var(--card-accent); font-family: var(--font-family-mono); font-size: 7px; letter-spacing: 0.07em; } /* ========================================================== LEVEL ========================================================== */ .ui-card--level { max-width: 340px; } .ui-card--level .ui-card__visual { min-height: 110px; } .ui-card__level-number { color: var(--card-accent); font-family: var(--font-family-display); font-size: 46px; font-weight: var(--weight-bold); line-height: 1; } .ui-card__level-progress { width: min(100%, 220px); height: 3px; margin-top: 14px; overflow: hidden; border: 1px solid color-mix( in srgb, var(--card-accent) 20%, transparent ); background: rgba(255, 255, 255, 0.03); } .ui-card__level-progress-bar { width: 72%; height: 100%; background: var(--card-accent); box-shadow: 0 0 8px var(--card-accent); } /* ========================================================== RARITY ========================================================== */ .ui-card--rare { --card-accent: var(--accent-cyan); } .ui-card--epic { --card-accent: var(--accent-violet); border-color: rgba(180, 140, 255, 0.26); } .ui-card--legendary { --card-accent: var(--accent-yellow); border-color: rgba(255, 200, 87, 0.28); } /* ========================================================== SUCCESS ========================================================== */ .ui-card--success { --card-accent: var(--accent-green); border-color: rgba(101, 230, 164, 0.25); } /* ========================================================== DANGER ========================================================== */ .ui-card--danger { --card-accent: var(--accent-red); border-color: rgba(255, 102, 120, 0.28); } /* ========================================================== COMPACT ========================================================== */ .ui-card--compact .ui-card__body { padding: 12px; } .ui-card--compact .ui-card__description { margin-top: 5px; font-size: 9px; } .ui-card--compact .ui-card__footer { padding-top: 10px; } /* ========================================================== ASSET / SVG ICON ========================================================== */ .ui-card__visual-image { position: relative; z-index: 1; display: block; width: 56px; height: 56px; object-fit: contain; color: initial; filter: none; } /* ========================================================== SMALL ========================================================== */ .ui-card--sm { max-width: 220px; } /* ========================================================== LARGE ========================================================== */ .ui-card--lg { max-width: 440px; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 520px) { .ui-card__body { padding: 14px; } }