backend/static/css/theme.css

/* =====================================================================
   Codingo — Premium design system (theme.css)
   Single source of truth for the new look. Linked AFTER the legacy inline
   <style> in base.html so these rules win and cascade across every page.
   Direction: premium light product + cinematic dark hero/navbar/footer.
   ===================================================================== */

:root {
    /* Brand */
    --brand-1: #6366f1;      /* indigo */
    --brand-2: #8b5cf6;      /* violet */
    --spark:   #22d3ee;      /* cyan accent */
    --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    --grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));

    /* Neutrals (light product surface) */
    --bg:      #f5f6fb;
    --surface: #ffffff;
    --ink:     #0b1020;
    --muted:   #5b6478;
    --line:    #e7e9f2;

    /* Night (hero / navbar / footer) */
    --night:   #0b1020;
    --night-2: #141a2e;

    /* Radius + shadow + spacing scale */
    --r-sm: 12px;
    --r:    18px;
    --r-lg: 26px;
    --shadow-sm: 0 2px 8px rgba(13, 20, 40, .06);
    --shadow:    0 12px 30px rgba(13, 20, 40, .08);
    --shadow-lg: 0 24px 60px rgba(13, 20, 40, .14);

    /* Legacy variable names remapped so existing rules adopt the new palette */
    --primary:   #6366f1;
    --secondary: #8b5cf6;
    --accent:    #22d3ee;
    --light:     #f5f6fb;
    --dark:      #0b1020;
}

/* ---- Typography ---------------------------------------------------- */
* { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
h1, h2, h3, .logo, .section-title h2, .hero h1, .cta h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}
body {
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- Glass navbar (dark, keeps white nav buttons working) --------- */
header {
    background: rgba(255, 255, 255, .8) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 1px 0 rgba(13, 20, 40, .04), 0 8px 24px rgba(13, 20, 40, .04) !important;
    padding: .85rem 1rem !important;
    color: var(--ink) !important;
}
.logo, .logo-part1 { font-weight: 700; color: var(--ink) !important; }
.logo-part2 { color: var(--brand-1) !important; font-style: normal; animation: none; text-shadow: none; }
.logo-part3 { color: var(--brand-2) !important; }
.welcome-message { background: rgba(99, 102, 241, .08) !important; color: var(--ink) !important; border-radius: 999px; }

/* ---- Buttons ------------------------------------------------------- */
.btn {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .6rem 1.4rem !important;
}
.btn-primary {
    background: var(--grad) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(99, 102, 241, .35) !important;
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(99, 102, 241, .45) !important; }
.btn-outline {
    background: var(--surface) !important;
    border: 1.5px solid var(--line) !important;
    color: var(--ink) !important;
}
.btn-outline:hover { background: #f0f1fb !important; border-color: rgba(99, 102, 241, .4) !important; }
.btn-logout {
    background: transparent !important;
    border: 1.5px solid rgba(99, 102, 241, .45) !important;
    color: var(--brand-1) !important;
    border-radius: 999px !important;
}
.btn-logout:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }

/* ---- Light hero with soft color mesh + subtle dot texture --------- */
.hero {
    position: relative;
    background:
        radial-gradient(620px 320px at 14% 12%, rgba(99, 102, 241, .18), transparent 60%),
        radial-gradient(560px 300px at 86% 6%, rgba(34, 211, 238, .16), transparent 60%),
        radial-gradient(720px 400px at 50% 120%, rgba(139, 92, 246, .18), transparent 60%),
        linear-gradient(180deg, #fbfbff 0%, #edf0fe 100%) !important;
    color: var(--ink) !important;
    padding: 5rem 1rem 5.5rem !important;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
/* faint dot grid for a subtle "tech" texture, masked so it fades out */
.hero::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: radial-gradient(rgba(99, 102, 241, .14) 1px, transparent 1.5px) !important;
    background-size: 24px 24px !important;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 5%, #000 35%, transparent 80%);
    mask-image: radial-gradient(ellipse 75% 65% at 50% 5%, #000 35%, transparent 80%);
    animation: none !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; font-weight: 700; color: var(--ink) !important; }
.hero p { color: var(--muted) !important; font-size: 1.15rem !important; }

/* LUNA avatar — soft, warm color halo (tasteful, not a light show) */
.luna-avatar { border: 4px solid #ffffff !important;
    box-shadow: 0 18px 45px rgba(13, 20, 40, .16), 0 0 0 1px var(--line) !important; }
.luna-glow { background: radial-gradient(circle, rgba(139, 92, 246, .42) 0%, rgba(34, 211, 238, .16) 45%, transparent 72%) !important;
    opacity: .85 !important; filter: blur(20px) !important; }

/* Eyebrow chip — tasteful brand accent on light */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem 1rem; margin-bottom: 1.25rem;
    border-radius: 999px; font-size: .85rem; font-weight: 600;
    color: var(--brand-1); background: var(--grad-soft);
    border: 1px solid rgba(99, 102, 241, .2);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-1);
    animation: pulse 2s ease-in-out infinite alternate; }

/* Gradient accent for the LUNA wordmark in the hero headline */
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Hero stage — holds the avatar plus floating "live" status chips */
.hero-stage {
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin-bottom: 1.75rem;
}
.float-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    white-space: nowrap;
    z-index: 3;
    animation: chipFloat 4s ease-in-out infinite;
}
.float-chip .ico { font-size: 1rem; line-height: 1; }
.float-chip.tl { top: 8px; left: -36px; }
.float-chip.br { bottom: 8px; right: -44px; animation-delay: 2s; }

@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@media (max-width: 560px) {
    .float-chip.tl { left: -8px; }
    .float-chip.br { right: -8px; }
}

/* ---- Sections / titles -------------------------------------------- */
.content-section, .features {
    background:
        radial-gradient(700px 320px at 88% 0%, rgba(99, 102, 241, .07), transparent 60%),
        radial-gradient(620px 300px at 6% 100%, rgba(34, 211, 238, .06), transparent 60%),
        var(--bg) !important;
}
.section-title h2 { color: var(--ink) !important; font-size: 2.3rem !important; }
.section-title h2::after { background: var(--grad) !important; height: 4px !important; border-radius: 4px; }
.section-title p { color: var(--muted) !important; font-size: 1.05rem; }

/* ---- Cards (premium light) ---------------------------------------- */
.feature-card, .card, .job-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.feature-card:hover, .card:hover, .job-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: rgba(99, 102, 241, .35) !important;
}
.feature-icon {
    background: var(--grad-soft) !important;
    font-size: 2.2rem !important;
    color: var(--brand-1) !important;
}
.feature-content h3 { color: var(--ink) !important; }
.feature-content h3::after { background: var(--grad) !important; }

/* Job card headers adopt the brand gradient */
.job-header, .card-header { background: var(--grad) !important; }

/* ---- CTA band — the single, tasteful gradient moment -------------- */
.cta {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
}
.cta h2, .cta p { color: #fff !important; }

/* ---- Footer (light) ----------------------------------------------- */
footer { background: var(--surface) !important; color: var(--muted) !important; border-top: 1px solid var(--line); }
.footer-col p { color: var(--muted) !important; }
.footer-col h3 { color: var(--ink) !important; }
.footer-col h3::after { background: var(--grad) !important; }
.footer-col a { color: var(--muted) !important; }
.footer-col a:hover { color: var(--brand-1) !important; }
.social-links a { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line); }
.social-links a:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent; }
.copyright { color: var(--muted) !important; border-top: 1px solid var(--line) !important; }

/* ---- Floating chatbot button -------------------------------------- */
#chatbot-nav { background: var(--grad) !important; box-shadow: 0 10px 26px rgba(99, 102, 241, .5) !important; }
#chatbot-nav:hover { transform: scale(1.08) !important; }
#chat-messages .user-bubble { background: var(--grad) !important; }

/* =====================================================================
   "How it works" animated pipeline (used on the landing page)
   Pure CSS reveal — auto-plays on load, films beautifully.
   ===================================================================== */
.pipeline { background: linear-gradient(180deg, #fff, var(--bg)); padding: 5rem 1rem; }
.pipe-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}
.pipe-track::before {
    content: ''; position: absolute; top: 46px; left: 8%; right: 8%; height: 3px;
    background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(139,92,246,.5), rgba(34,211,238,.15));
    border-radius: 3px; z-index: 0;
}
.pipe-step {
    position: relative; z-index: 1; text-align: center; padding: 0 .5rem;
    opacity: 0; transform: translateY(18px);
    animation: pipeReveal .7s ease forwards;
}
.pipe-step:nth-child(1) { animation-delay: .15s; }
.pipe-step:nth-child(2) { animation-delay: .40s; }
.pipe-step:nth-child(3) { animation-delay: .65s; }
.pipe-step:nth-child(4) { animation-delay: .90s; }
.pipe-step:nth-child(5) { animation-delay: 1.15s; }
.pipe-node {
    width: 92px; height: 92px; margin: 0 auto 1.1rem; border-radius: 24px;
    display: grid; place-items: center; font-size: 2.1rem;
    color: #fff; background: var(--grad);
    box-shadow: 0 14px 30px rgba(99, 102, 241, .35);
    position: relative;
}
.pipe-node::after {
    content: ''; position: absolute; inset: -6px; border-radius: 28px;
    border: 2px solid rgba(139, 92, 246, .4);
    animation: pipeHalo 2.4s ease-in-out infinite;
}
.pipe-step:nth-child(even) .pipe-node::after { animation-delay: 1.2s; }
.pipe-step h4 { font-family: 'Space Grotesk', sans-serif; color: var(--ink); margin-bottom: .4rem; font-size: 1.05rem; }
.pipe-step p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.pipe-num {
    display: inline-block; font-size: .75rem; font-weight: 700; color: var(--brand-1);
    background: var(--grad-soft); border-radius: 999px; padding: .15rem .7rem; margin-bottom: .8rem;
}

@keyframes pipeReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes pipeHalo {
    0%, 100% { transform: scale(1); opacity: .5; }
    50%      { transform: scale(1.08); opacity: 0; }
}

@media (max-width: 860px) {
    .pipe-track { grid-template-columns: 1fr 1fr; }
    .pipe-track::before { display: none; }
}
@media (max-width: 480px) {
    .pipe-track { grid-template-columns: 1fr; }
}