ikcoach/styles.css at main · thinkik/ikcoach · 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
132
133
134
135
136
137
138
139
140
141
    /* ====== Design-Token ====== */
    :root{
      --bg: #0f1220;            /* dark gradient base */
      --bg2: #181c33;
      --text: #E8EAF2;          /* light text */
      --muted: #A9B0C6;
      --brand: #7C5CFF;         /* iris */
      --brand-2: #10D4D2;       /* aqua */
      --accent: #FF7AC6;        /* pink */
      --ok: #22C55E;            /* green */
      --warn: #FDBA74;          /* orange */
      --danger: #EF4444;        /* red */
      --card: rgba(255,255,255,0.06);
      --glass: rgba(255,255,255,0.08);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-sm: 12px;
      --radius-lg: 28px;
    }
    [data-theme="light"]{
      --bg: #f7f8fc;
      --bg2: #eef1f9;
      --text: #121526;
      --muted: #47506b;
      --card: rgba(0,0,0,0.05);
      --glass: rgba(255,255,255,0.6);
      --shadow: 0 10px 25px rgba(18,21,38,.12);
    }
    *{box-sizing:border-box}
    html,body{min-height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      line-height:1.5;
      letter-spacing:.2px;
    }
    a{color:inherit}
    .container{width:min(1200px, 92vw); margin-inline:auto}
    .glass{background:var(--card); backdrop-filter:saturate(130%) blur(8px); box-shadow:var(--shadow)}
    .btn{display:inline-flex; align-items:center; gap:.6rem; border:1px solid transparent; cursor:pointer; padding:.8rem 1.1rem; border-radius:999px; font-weight:650; text-decoration:none; transition:.25s ease; user-select:none}
    .btn-primary{color:white; background:linear-gradient(135deg,var(--brand),var(--brand-2));}
    .btn-primary:hover{transform:translateY(-1px); filter:brightness(1.06)}
    .btn-ghost{background:transparent; border-color:rgba(255,255,255,.25)}
    .btn-ghost:hover{background:var(--card)}
    header{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);}
    .nav{display:flex; align-items:center; justify-content:space-between; padding: .8rem 0}
    .brand{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.4px}
    .brand .logo{width:38px; height:38px; border-radius:12px; background:conic-gradient(from 180deg at 50% 50%, var(--brand), var(--brand-2), var(--accent), var(--brand)); box-shadow:0 6px 18px rgba(124,92,255,.35)}
    nav ul{display:flex; gap:.8rem; list-style:none; padding:0; margin:0; flex-wrap:wrap}
    nav a{padding:.6rem .9rem; border-radius:999px; text-decoration:none; color:var(--text); opacity:.9}
    nav a:hover{background:var(--card)}
    .progress-badge{font-variant-numeric:tabular-nums; padding:.4rem .7rem; border-radius:999px; background:var(--card); display:inline-flex; gap:.4rem; align-items:center}

    /* Hero */
    #hero{position:relative; overflow:hidden}
    .hero-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:2.2rem; padding: 3.6rem 0 2.6rem}
    .hero h1{font-size: clamp(2rem, 3.1vw, 3.2rem); line-height:1.1; letter-spacing:.2px; margin:0 0 1rem}
    .hero p{font-size: clamp(1.02rem, 1.3vw, 1.15rem); color:var(--muted)}
    .hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem}
    .hero-card{border-radius: var(--radius-lg); padding:1.2rem; position:relative}
    .sparkle{position:absolute; inset:0; background:radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.16), transparent 40%); pointer-events:none}
    .stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1rem}
    .stat{padding:.9rem; border-radius:14px; text-align:center; background:var(--glass)}
    .stat .num{font-weight:800; font-size:1.1rem}

    /* Sections */
    section{scroll-margin-top:80px}
    .section-title{font-size: clamp(1.4rem, 2vw, 2rem); margin:0 0 .6rem}
    .section-sub{color:var(--muted); margin:0 0 1.2rem}

    /* Stepper (Recherchepfad) */
    .stepper{display:grid; grid-template-columns: 320px 1fr; gap:1.2rem}
    .steps{background:var(--card); border-radius:var(--radius); padding:.8rem; overflow:auto; max-height:520px}
    .steps button{display:flex; width:100%; align-items:center; gap:.8rem; padding:.7rem .8rem; border:none; background:transparent; color:var(--text); cursor:pointer; border-radius:12px; text-align:left}
    .steps button[aria-current="step"], .steps button:hover{background:rgba(124,92,255,.16)}
    .steps .index{width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:700; font-size:.9rem}
    .panel{background:var(--card); border-radius:var(--radius); padding:1rem; min-height:520px; position:relative}
    .panel .controls{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem}
    .input, textarea, select{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--text); padding:.7rem .8rem; border-radius:12px; outline:none; width:100%}
    textarea{min-height:96px}
    .chips{display:flex; gap:.5rem; flex-wrap:wrap}
    .chip{padding:.4rem .6rem; border-radius:999px; background:rgba(124,92,255,.15); border:1px dashed rgba(124,92,255,.45); font-size:.9rem}

    .info-btn{position:absolute; top:1rem; right:1rem; border:none; background:transparent; cursor:pointer; font-size:1.1rem; color:var(--muted)}
    .info-btn:hover{color:var(--text)}
    .modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:100}
    .modal-content{background:var(--bg2); padding:1rem; border-radius:var(--radius); max-width:420px; width:92%; box-shadow:var(--shadow)}

    /* Suchlabor */
    .lab-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem}
    .group{padding:.8rem; border-radius:14px; background:var(--card)}
    .tagbox{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.5rem}
    .tag{display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .6rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18)}
    .tag button{border:none; background:transparent; cursor:pointer; color:var(--muted)}
    .query{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: #0b0d18; color:#d6e0ff; border-radius:14px; padding:1rem; overflow:auto}
    [data-theme="light"] .query{background:#121526; color:#e7ecff}

    /* Quellen-Check (DnD) */
    .board{display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem}
    .col{border:2px dashed rgba(255,255,255,.2); border-radius:16px; padding:.7rem; min-height:240px}
    .col h4{margin:.2rem 0 .6rem}
    .card{background:var(--glass); border-radius:14px; padding:.7rem; margin:.5rem 0; cursor:grab}
    .card:active{cursor:grabbing}

    /* Zitiertrainer */
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}

    /* Quiz */
    .quiz{display:grid; gap:.8rem}
    .q{padding:.8rem; border-radius:14px; background:var(--card)}
    .answers{display:grid; gap:.5rem}
    .answers button{padding:.6rem .7rem; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; text-align:left}
    .answers button.correct{border-color: rgba(34,197,94,.7)}
    .answers button.wrong{border-color: rgba(239,68,68,.75)}

    /* Journal */
    .journal-entry{padding:.6rem; border-radius:14px; background:var(--card); margin:.4rem 0;}

    /* Utilities */
    .row{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; position:relative}
    .hint{color:var(--muted); font-size:.95rem}
    .ok{color:var(--ok)} .danger{color:var(--danger)}
    .hidden{display:none !important}
    .fade-in{animation:fade .5s ease both}
    @keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

    /* Synonym-Vorschläge */
    .suggestions{position:absolute; top:100%; left:0; background:var(--card); border:1px solid rgba(255,255,255,.2); border-radius:12px; max-height:180px; overflow:auto; z-index:20}
    .suggestions div{padding:.4rem .6rem; cursor:pointer}
    .suggestions div:hover{background:rgba(255,255,255,.1)}

    /* Responsive */
    @media (max-width: 980px){
      .hero-wrap{grid-template-columns:1fr}
      .stepper{grid-template-columns:1fr}
      .lab-grid{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
      .board{grid-template-columns:1fr}
    }