QtFuzzer/wizard-theme.css at main · WizardML7/QtFuzzer · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
/* ============================================================
   WizardML7 Theme — design tokens + dark baseline + project-page helpers
   Pair with wizard-theme.js (which sets --accent live).
   These :root values are the *fallback* (used before JS runs).
   ============================================================ */
:root {
  --accent: #13C4DC;          /* live-swapped by wizard-theme.js   */
  --accent-hot: #45E2F3;      /* brighter hover shade              */
  --accent-rgb: 19, 196, 220; /* for rgba(var(--accent-rgb), .3)   */

  /* Praetorian-derived dark surfaces (stable, not themed) */
  --wz-bg:        #0D0D0D;
  --wz-bg-soft:   #11161a;
  --wz-card:      #1A1F23;
  --wz-line:      #2a3036;
  --wz-fg:        #ffffff;
  --wz-fg-dim:    #A0A4A8;
  --wz-fg-mute:   #535B61;

  --wz-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wz-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Optional baseline — apply by adding class="wz" to <body>.
   Leave it off if a page already has its own layout you want to keep. */
body.wz {
  margin: 0;
  background: var(--wz-bg);
  color: var(--wz-fg);
  font-family: var(--wz-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
body.wz a { color: var(--accent); text-decoration: none; transition: color .2s; }
body.wz a:hover { color: var(--accent-hot); }
body.wz ::selection { background: var(--accent); color: #fff; }

/* Helper utility classes (use anywhere) */
.wz-accent      { color: var(--accent) !important; }
.wz-accent-bg   { background: var(--accent) !important; color: #fff !important; }
.wz-accent-border { border-color: var(--accent) !important; }
.wz-glow        { box-shadow: 0 0 32px rgba(var(--accent-rgb), .3); }

/* Eyebrow / mono label, Praetorian-style */
.wz-eyebrow {
  font-family: var(--wz-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Primary button */
.wz-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: #0D0D0D;
  font-family: var(--wz-font); font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 4px; border: 0; cursor: pointer;
  transition: background .2s;
}
.wz-btn:hover { background: var(--accent-hot); color: #0D0D0D; }

/* Ghost button */
.wz-btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--wz-fg);
  font-weight: 700; font-size: 15px; padding: 13px 22px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.34); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.wz-btn-ghost:hover { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); color: var(--wz-fg); }

/* When the buttons are links inside the dark baseline, the generic
   `body.wz a` color rule (specificity 0,1,1) would otherwise override
   the button text color. These higher-specificity rules keep button
   text legible: near-black on the bright accent fill, theme color on
   the ghost outline. */
body.wz a.wz-btn,
body.wz a.wz-btn:hover { color: #0D0D0D; }
body.wz a.wz-btn-ghost { color: var(--wz-fg); }
body.wz a.wz-btn-ghost:hover { color: var(--wz-fg); }

/* ============================================================
   Project-page layout helpers
   Used by the WizardML7 project pages (Cuckoo-Watchtower, QtFuzzer,
   AudioCovertChannel, metadataAnalyzer, ChatCSEC) to match the
   landing page. Build a page as:
     <nav class="wz-nav">…</nav>
     <main class="wz-main">
       <header class="wz-hero">…</header>
       <section class="wz-prose">…</section>
     </main>
   ============================================================ */

/* Sticky top nav */
.wz-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(13,13,13,.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wz-line);
}
.wz-nav-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--wz-mono); font-size: 14px; font-weight: 500;
  color: var(--wz-fg); letter-spacing: .04em;
}
.wz-nav-brand .wz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .9); }
.wz-nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.wz-nav-links a {
  font-size: 14px; color: var(--wz-fg-dim); text-decoration: none;
  font-family: var(--wz-font); transition: color .18s;
}
.wz-nav-links a:hover { color: var(--accent); }

/* Page body wrapper */
.wz-main {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  padding: 72px 24px 96px;
}

/* Hero block */
.wz-hero { margin-bottom: 56px; }
.wz-hero h1 {
  font-size: clamp(36px, 6vw, 54px); line-height: 1.04; font-weight: 800;
  letter-spacing: -.02em; margin: 14px 0 18px; color: var(--wz-fg);
}
.wz-hero .wz-lede {
  font-size: 19px; line-height: 1.6; color: var(--wz-fg-dim);
  max-width: 640px; margin: 0 0 30px;
}
.wz-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Prose / content area */
.wz-prose h2 {
  font-size: 13px; font-family: var(--wz-mono); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  margin: 48px 0 8px;
}
.wz-prose h3 { font-size: 22px; font-weight: 700; color: var(--wz-fg); margin: 14px 0 14px; letter-spacing: -.01em; }
.wz-prose h4 { font-size: 17px; font-weight: 700; color: var(--wz-fg); margin: 26px 0 10px; }
.wz-prose p  { color: var(--wz-fg-dim); font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.wz-prose ul, .wz-prose ol { color: var(--wz-fg-dim); font-size: 16px; line-height: 1.7; margin: 0 0 20px; padding-left: 22px; }
.wz-prose li { margin: 0 0 9px; }
.wz-prose li strong, .wz-prose p strong { color: var(--wz-fg); font-weight: 700; }
.wz-prose a { color: var(--accent); text-decoration: none; }
.wz-prose a:hover { color: var(--accent-hot); text-decoration: underline; }
.wz-prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--wz-line); margin: 8px 0 12px; }

/* Inline code + code blocks */
.wz-prose code {
  font-family: var(--wz-mono); font-size: .92em;
  background: rgba(var(--accent-rgb), .12); color: var(--accent-hot);
  padding: 2px 6px; border-radius: 4px;
}
.wz-prose pre {
  background: var(--wz-card); border: 1px solid var(--wz-line); border-radius: 10px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 20px;
}
.wz-prose pre code { background: none; color: #e6edf3; padding: 0; font-size: 14px; line-height: 1.6; }

/* Card — group a section in a bordered surface */
.wz-section-card {
  background: var(--wz-card); border: 1px solid var(--wz-line);
  border-radius: 14px; padding: 28px 30px; margin: 0 0 22px;
}

/* Footer */
.wz-footer {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto; padding: 28px 24px 48px;
  border-top: 1px solid var(--wz-line);
  color: var(--wz-fg-mute); font-size: 14px;
}
.wz-footer a { color: var(--wz-fg-dim); text-decoration: none; }
.wz-footer a:hover { color: var(--accent); }

/* ============================================================
   Responsive — phones & small screens
   The switcher's own mobile rules live in wizard-theme.js (injected),
   so they also apply on the landing page (which loads only the JS).
   ============================================================ */

/* Never let a long word/URL push the layout wider than the screen */
body.wz, .wz-prose p, .wz-prose li, .wz-hero .wz-lede { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 640px) {
  .wz-nav {
    padding: 10px 16px;
    gap: 6px 16px;
    justify-content: flex-start;
    /* let the nav scroll with the page instead of eating vertical space when it wraps */
    position: static;
  }
  /* roomier tap targets for the wrapped nav links (≈44px row height) */
  .wz-nav-links { gap: 14px 18px; }
  .wz-nav-links a { padding: 8px 2px; font-size: 15px; }

  .wz-main { padding: 36px 18px 72px; }
  .wz-hero { margin-bottom: 40px; }
  .wz-hero .wz-lede { font-size: 17px; }
  /* full-width, comfortably tall buttons that stack on narrow screens */
  .wz-hero-actions { gap: 10px; }
  .wz-hero-actions .wz-btn,
  .wz-hero-actions .wz-btn-ghost { flex: 1 1 auto; justify-content: center; padding: 14px 18px; }

  .wz-prose h2 { margin-top: 36px; }
  .wz-prose h3 { font-size: 20px; }
  .wz-prose pre { padding: 14px 14px; border-radius: 8px; }
  .wz-prose pre code { font-size: 13px; }

  .wz-footer { padding: 24px 18px 96px; } /* extra bottom room so the switcher pill never sits on the links */
  .wz-section-card { padding: 22px 20px; }
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  body.wz a, .wz-nav-links a, .wz-btn, .wz-btn-ghost { transition: none; }
}