Idea-Randomizer-Wheel/style.css at main · Aishwarya-2019/Idea-Randomizer-Wheel · 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
:root { --wheel-size: 360px; }

    body {
      background: radial-gradient(circle at 15% 10%, #0b1220 0%, #0f172a 40%, #111827 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    /* Layout helpers for the 3D wrapper & wheel */
    .wheel-3d {
      /* subtle perspective and tilt - static (not animated) */
      transform: rotateX(8deg);
      transform-style: preserve-3d;
      perspective: 900px;
      width: var(--wheel-size);
      height: var(--wheel-size);
      display:flex;
      align-items:center;
      justify-content:center;
      will-change: transform;
    }

    .wheel {
      width: calc(var(--wheel-size) - 28px);
      height: calc(var(--wheel-size) - 28px);
      border-radius: 50%;
      border: 12px solid rgba(255,255,255,0.06);
      overflow: hidden;
      position: relative;
      transition: transform 4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
      will-change: transform;
      box-shadow: inset 0 10px 30px rgba(0,0,0,0.6), 0 8px 30px rgba(2,6,23,0.6);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* small center knob */
    .wheel .center {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
      border: 2px solid rgba(255,255,255,0.06);
      display:flex;
      align-items:center;
      justify-content:center;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    }

    /* Top arrow */
    .arrow {
      width: 0;
      height: 0;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-bottom: 28px solid #facc15;
      filter: drop-shadow(0 4px 10px rgba(250,204,21,0.15));
      margin-bottom: 8px;
    }

    /* Sidebar glass card */
    .glass-card {
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      background-color: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(2,6,23,0.6);
    }

    /* result animations */
    @keyframes pop {
      0% { transform: scale(.8); opacity: 0; }
      60% { transform: scale(1.08); opacity: 1; }
      100% { transform: scale(1); }
    }
    .pop-animate { animation: pop .45s ease; }
    .glow {
      box-shadow: 0 8px 30px rgba(99,102,241,0.14), 0 0 18px rgba(236,72,153,0.06) inset;
    }

    /* small list scroll */
    .ideas-list { max-height: 200px; overflow:auto; }
    .ideas-list::-webkit-scrollbar { height: 6px; width: 6px; }
    .ideas-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 6px; }

    /* small responsive adjustments */
    @media (max-width: 900px) {
      :root { --wheel-size: 300px; }
    }
    @media (max-width: 640px) {
      :root { --wheel-size: 260px; }
    }