AskSQLAI/frontend/src/components/Header.css at 5c224be69822b056bde5f9e99dec45b873c4ed6a · rahulapjs/AskSQLAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
.header {
    position: sticky;
    top: 1rem;
    margin: 1rem auto;
    max-width: 1200px;
    padding: 0.75rem 1.5rem;
    z-index: 1000;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    width: calc(100% - 2rem);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    /* Allow shrinking */
}

.logo-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--royal-blue), var(--accent-glow));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    flex-shrink: 0;
}

.logo-icon svg {
    width: 24px;
    height: 24px;
}

.logo-text {
    min-width: 0;
}

.logo-text h1 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-badge {
    background: linear-gradient(135deg, var(--accent-glow), var(--primary-glow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-subtitle {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.header-nav {
    display: flex;
    gap: 0.5rem;
}

.header-nav .btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.header-nav .btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .header {
        top: 0.5rem;
        padding: 0.6rem 1rem;
        margin: 0.5rem auto;
        border-radius: var(--radius-md) !important;
        width: calc(100% - 1rem);
    }

    .app-subtitle {
        display: none;
    }

    .header-nav .btn span {
        display: none;
        /* Hide text, keep icons on very small screens if button text is long */
    }
}

@media (max-width: 480px) {
    .logo-text h1 {
        font-size: 1.1rem;
    }

    .header-nav {
        gap: 0.4rem;
    }

    .header-nav .btn {
        padding: 0.5rem;
        min-width: 36px;
        height: 36px;
    }

    /* Just show icons in buttons on mobile to save space */
    .btn-text {
        display: none;
    }
}