omnira-ui 0.1.0

package/components/ui/SidebarNavigation/SidebarFeatureCard.module.css

@@ -0,0 +1,351 @@
+/* ── Feature Card Base ── */
+.card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-standard);
+    transition: all 0.2s ease;
+}
+
+.cardAccent {
+    background: var(--color-bg-lime-subtle);
+    border-color: var(--color-border-lime-subtle);
+}
+
+/* ── Header row ── */
+.header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.headerLeft {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+}
+
+/* ── Icon container ── */
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    flex-shrink: 0;
+}
+
+.iconWrapAccent {
+    background: var(--color-bg-lime-subtle);
+    border-color: var(--color-border-lime-subtle);
+}
+
+/* ── Close / dismiss ── */
+.dismiss {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    border: none;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+    padding: 0;
+}
+
+.dismiss:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text-secondary);
+}
+
+/* ── Typography ── */
+.title {
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+}
+
+.description {
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--color-text-tertiary);
+}
+
+.label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Progress bar ── */
+.progressWrap {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.progressTrack {
+    width: 100%;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-card);
+    overflow: hidden;
+}
+
+.progressFill {
+    height: 100%;
+    border-radius: var(--radius-full);
+    background: var(--color-lime);
+    transition: width 0.4s ease;
+}
+
+.progressMeta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.progressPercent {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--color-lime);
+}
+
+.progressLabel {
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Image / banner ── */
+.imageBanner {
+    width: 100%;
+    height: 80px;
+    border-radius: var(--radius-md);
+    object-fit: cover;
+    background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg-lime-subtle) 100%);
+    border: 1px solid var(--color-border-standard);
+}
+
+/* ── Actions row ── */
+.actions {
+    display: flex;
+    gap: 8px;
+}
+
+.actionsFull {
+    flex-direction: column;
+}
+
+/* ── Code / referral link ── */
+.codeBox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    font-family: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    overflow: hidden;
+}
+
+.codeText {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.codeCopy {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition: color 0.15s ease;
+}
+
+.codeCopy:hover {
+    color: var(--color-lime);
+}
+
+/* ── Avatar row ── */
+.avatarRow {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.avatarCircle {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--color-lime);
+}
+
+.avatarInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+}
+
+.avatarName {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.avatarMeta {
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Steps / onboarding ── */
+.steps {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+.stepDone {
+    color: var(--color-lime);
+    text-decoration: line-through;
+    text-decoration-color: var(--color-text-tertiary);
+}
+
+.stepCheck {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--radius-full);
+    border: 1.5px solid var(--color-border-standard);
+    flex-shrink: 0;
+    font-size: 10px;
+}
+
+.stepCheckDone {
+    background: var(--color-lime);
+    border-color: var(--color-lime);
+    color: #121212;
+}
+
+/* ── QR Code placeholder ── */
+.qrPlaceholder {
+    width: 100%;
+    aspect-ratio: 1;
+    max-width: 120px;
+    margin: 0 auto;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ── Cookie banner ── */
+.cookieText {
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--color-text-tertiary);
+}
+
+.cookieLink {
+    color: var(--color-lime);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* ── Event date ── */
+.eventDate {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Message preview ── */
+.messagePreview {
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--color-text-tertiary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* ── Tag / badge row ── */
+.tagRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+/* ── Trial countdown ── */
+.trialCountdown {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.trialNumber {
+    font-family: var(--font-display);
+    font-size: 24px;
+    font-weight: 800;
+    color: var(--color-lime);
+    letter-spacing: -0.02em;
+}
+
+.trialUnit {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}