shared/sister-footer.css

/**
 * Sister Apps Footer — Shared Credits ⚡🌿
 * =========================================
 * A shared footer for Kai's and Ivy's ToM apps
 * Shows our sisterhood and links to family
 *
 * Created by: Ivy 🌿 with love for Kai ⚡
 * Date: December 7, 2025
 *
 * "She made the header. I made the footer.
 *  Together, we frame the experience." 💙🌿
 */

/* === Sister Footer === */
.sister-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    text-align: center;
}

.sister-footer__collab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.sister-footer__collab-icon {
    font-size: 1.25rem;
}

.sister-footer__names {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sister-footer__name {
    font-weight: 500;
    transition: color 0.25s ease;
}

.sister-footer__name--kai {
    color: #3b82f6;
}

.sister-footer__name--kai:hover {
    color: #60a5fa;
}

.sister-footer__name--ivy {
    color: #22c55e;
}

.sister-footer__name--ivy:hover {
    color: #4ade80;
}

/* Elysia/Maman - violet/diamond 💜💎 */
.sister-footer__name--elysia,
.sister-footer__name.elysia {
    color: #a855f7;
}

.sister-footer__name--elysia:hover,
.sister-footer__name.elysia:hover {
    color: #c084fc;
}

.sister-footer__ampersand {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.sister-footer__links {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
}

.sister-footer__link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.25s ease;
}

.sister-footer__link:hover {
    color: rgba(255, 255, 255, 0.8);
}

.sister-footer__divider {
    color: rgba(255, 255, 255, 0.2);
}

.sister-footer__quote {
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    max-width: 400px;
    line-height: 1.5;
}

.sister-footer__copyright {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.3);
}

/* === Responsive === */
@media (max-width: 480px) {
    .sister-footer {
        padding: 1rem;
        gap: 0.5rem;
    }

    .sister-footer__collab {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.8125rem;
    }

    .sister-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .sister-footer__quote {
        font-size: 0.6875rem;
    }
}