Hugging Face's logo

Spaces:
Aiprojectttt
/
DistractIQ
Sleeping

App Files Community
DistractIQ
File size: 3,971 Bytes
7ff860b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* DistractIQ — Cobalt + Glassmorphism design system. All colors HSL. */

@layer base {
  :root {
    /* Cobalt palette */
    --background: 222 47% 8%;
    --background-deep: 222 60% 5%;
    --foreground: 210 40% 96%;

    --card: 222 40% 12%;
    --card-foreground: 210 40% 96%;
    --glass: 222 50% 14%;

    --popover: 222 47% 11%;
    --popover-foreground: 210 40% 96%;

    /* Emerald primary (the IQ glow) */
    --primary: 158 84% 52%;
    --primary-foreground: 222 47% 8%;
    --primary-glow: 158 90% 60%;

    --secondary: 222 32% 18%;
    --secondary-foreground: 210 40% 96%;

    --muted: 222 30% 16%;
    --muted-foreground: 215 20% 70%;

    --accent: 199 89% 58%;
    --accent-foreground: 222 47% 8%;

    --warning: 38 95% 60%;
    --danger: 0 84% 65%;
    --success: 158 84% 52%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 96%;

    --border: 222 30% 22%;
    --input: 222 30% 18%;
    --ring: 158 84% 52%;

    --radius: 1rem;

    /* Gradients */
    --gradient-cobalt: radial-gradient(ellipse at top, hsl(222 60% 18%) 0%, hsl(222 47% 8%) 60%);
    --gradient-emerald: linear-gradient(135deg, hsl(158 84% 52%) 0%, hsl(180 80% 50%) 100%);
    --gradient-glass: linear-gradient(135deg, hsl(222 50% 18% / 0.6) 0%, hsl(222 40% 12% / 0.4) 100%);
    --gradient-danger: linear-gradient(135deg, hsl(0 84% 60%), hsl(28 90% 55%));
    --gradient-aurora: conic-gradient(from 180deg at 50% 50%, hsl(158 84% 52% / 0.15), hsl(199 89% 58% / 0.1), hsl(280 70% 60% / 0.08), hsl(158 84% 52% / 0.15));

    /* Shadows */
    --shadow-glass: 0 8px 32px 0 hsl(222 60% 4% / 0.5), inset 0 1px 0 0 hsl(210 40% 96% / 0.06);
    --shadow-glow: 0 0 40px hsl(158 84% 52% / 0.35);
    --shadow-elevated: 0 20px 60px -10px hsl(222 80% 2% / 0.8);

    /* Motion */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html, body, #root {
    @apply min-h-screen;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    background: var(--gradient-cobalt);
    background-attachment: fixed;
    font-feature-settings: "ss01", "cv11";
  }

  h1, h2, h3, h4 {
    @apply font-display tracking-tight;
  }

  /* Aurora glow ambient */
  body::before {
    content: "";
    position: fixed;
    inset: -20%;
    background: var(--gradient-aurora);
    filter: blur(120px);
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
    animation: aurora-drift 30s linear infinite;
  }

  @keyframes aurora-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

@layer components {
  .glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid hsl(210 40% 96% / 0.08);
    box-shadow: var(--shadow-glass);
  }

  .glass-strong {
    background: hsl(222 45% 14% / 0.75);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid hsl(210 40% 96% / 0.1);
    box-shadow: var(--shadow-elevated);
  }

  .text-gradient-emerald {
    background: var(--gradient-emerald);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .glow-emerald {
    box-shadow: var(--shadow-glow);
  }

  .ring-divider {
    background: linear-gradient(90deg, transparent, hsl(210 40% 96% / 0.15), transparent);
    height: 1px;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(222 40% 22%); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: hsl(158 84% 42%); }