klussenmetliefde/style.css at main · SimBeSim/klussenmetliefde · 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
    :root{
      --bg:#0f1226;
      --panel:#161a36;
      --ink:#e8ecff;
      --muted:#b7c0ff;
      --accent:#7ae1ff;
      --ok:#34A853;
      --ok2:#1d7a3e;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    html,body{
      margin:0;padding:0;
      background:var(--bg);
      color:var(--ink);
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;}
    .wrap{max-width:900px;
          margin:24px auto;
          padding:0 16px}
    .card{background:linear-gradient(180deg,#14183a,#0e1230);
          border:1px solid #2a2f63;
          border-radius:20px;
          box-shadow:var(--shadow);padding:22px 22px 26px;
          position:relative;}

    .ttl{font-size:clamp(20px,6vw,34px);font-weight:800;margin:0 0 10px}
    .progress{display:flex;gap:8px;align-items:center;margin:8px 0 12px;flex-wrap:wrap}

    .dot{width:8px;
         height:8px;
         border-radius:999px;
         box-shadow:inset 0 0 0 2px #4250aa}
    .dot.is-active{background:#56c7ff;
                   box-shadow:0 0 0 3px #243164, inset 0 0 0 2px #56c7ff}
    .dot.is-done{background:#5d65d8
                 ;opacity:.9}

    .stage{min-height:46vh;
           display:flex;
           justify-content:center;
           align-items:center;
           overflow:hidden}
    .stage-inner{width:100%}

    .text{font-size:clamp(18px,5vw,30px);
          line-height:1.35}
    .text span{white-space:pre-wrap}
    .text{overflow-wrap:anywhere}

    .actions{display:flex;
             gap:14px;
             justify-content:flex-end;
             margin-top:18px}

    .btn{border:none;
         border-radius:18px;
         padding:12px 18px;
         font-weight:700;
         cursor:pointer}
    .btn:disabled{display:none;
                  opacity:0;
                  cursor:not-allowed}
    .btn--prev{background:#273061;
               color:#9fb1ff;
               transform:scale(.95)}
    .btn--next{background:linear-gradient(180deg,var(--ok),var(--ok2));
               color:#fff;
               transform:scale(.95)}

    /* YouTube container */
    #ytbox{display:none;
           aspect-ratio:16/9;
           width:100%;
           border-radius:14px;
           overflow:hidden;
           margin:8px 0}