quantum-cryptography-lab/style.css at main · Thinking-Experiment-Sims/quantum-cryptography-lab · 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
:root {

  --bg-950: #e9f4fb;
  --bg-900: #fff4dd;
  --bg-800: #ffffff;
  --text-100: #123140;
  --text-300: #4b6570;
  --gold-500: #0f7e9b;
  --gold-400: #0b5f77;
  --surface: rgba(255, 255, 255, 0.96);
  --border: #c8dbe3;
  --shadow-lg: 0 12px 24px rgba(12, 54, 68, 0.12);

}
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }

        .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }

        /* Custom Scrollbar for the simulation track */
        .sim-track::-webkit-scrollbar {
            height: 12px;
        }

        .sim-track::-webkit-scrollbar-track {
            background: #1e293b;
            border-radius: 6px;
        }

        .sim-track::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 6px;
        }

        .sim-track::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        /* Film Simulation Styles */
        .polaroid-film {
            background: rgba(40, 40, 40, 0.85);
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
            transition: all 0.3s ease;
        }

        .polaroid-mark {
            opacity: 0.8;
            stroke-width: 3;
            stroke-linecap: round;
        }

        /* Photon Animation */
        @keyframes pulse-glow {

            0%,
            100% {
                box-shadow: 0 0 10px #3b82f6;
            }

            50% {
                box-shadow: 0 0 20px #60a5fa;
            }
        }

        .photon-node {
            animation: pulse-glow 2s infinite;
        }

        /* Interactive Elements */
        .btn-primary {
            @apply bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition-colors duration-200 shadow-lg flex items-center gap-2;
        }

        .btn-secondary {
            @apply bg-slate-700 hover:bg-slate-600 text-white font-semibold py-2 px-4 rounded transition-colors duration-200 border border-slate-600 flex items-center gap-2;
        }

        .card {
            @apply bg-slate-800 border border-slate-700 rounded-xl p-6 shadow-xl;
        }

        .step-number {
            @apply w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold flex-shrink-0;
        }