Skip to content

Commit fbfa46f

Browse files
nkissebenkissebe
committed
Home page polish, BETA badging, narrow-viewport tightening
The marketing landing page (site-src/templates/home.html) gets a substantive pass plus a BETA stamp on both the hero logo and the docs-page menu bar. Home page changes: - Title bar uses the brand name "BotShield" and a hero-h1 variation ("Adaptive bot mitigation for Apache"). - GitHub and download links wired to hubzero/botshield + its releases page (the build script's download_href is now config- driven, mirroring github_href). - CAPTCHA panel: heading shifted from "challenge providers" to "CAPTCHA providers" (search intent), plus FriendlyCaptcha and GeeTest provider badges. The form-PoW badge label drops the jargon: "Form PoW" → "Built-in PoW". - Bots panel: heading "Crawlers held to policy" → "Bots recognized and held to policy", four additional badges in a second row (Bytespider, PerplexityBot, Forged bot, Scraper), body copy rewritten to honestly describe what we identify bots by (UA, behavior, operator-loaded CIDR ranges). - Reputation panel: technical labels swapped for operator- language (Bloom filter → First-sight check, SHM ring → IP reputation, HMAC cookie → User trust cookie), three new badges (Survives restart, Host load tracking, Replay defense), and body copy that drops the "no Redis, no cloud" framing in favor of a scoped "no external service for scoring or reputation memory" claim. - New "Four capabilities feeding one decision" feature row (replaces the previous comparison table) styled as typographic rows rather than another card grid. - New "Apache delivers. BotShield decides." why-panel: three pillars on what makes BotShield Apache-native rather than a service. Single horizontal rule under the heading; matches the site's panel chrome. - CTA band copy: "Install. Configure. Tune. The Guide walks you through it." Replaces awkward three-action sentence and the now-stale "operational model" reference. - Doc-card grid on the home is filtered to a curated featured set (6 entries). Build script falls back to all docs if no entry is marked featured, so removing all featured flags is non-destructive. BETA stamp: - Big tilted ink-red BETA over the right edge of the hero shield emblem. - Smaller BETA centered in the docs-page header bar; hides at ≤720px viewport width to avoid colliding with wrapping nav. Narrow-viewport judgment card: - Between 681 and 980 px viewport, the Σ kernel column is removed entirely and the chip grid switches to two columns, so robots.txt / Score / App / etc. fit inside the panel without overflowing the right edge. Above 980 the kernel stays. site.json carries the slug/title/source rename for site-model and the de-"operator" summary edits (split from the previous commit because the rebuilt docs/ output lands here).
1 parent 8628ea7 commit fbfa46f

19 files changed

Lines changed: 985 additions & 407 deletions

File tree

‎docs/assets/site.css‎

Lines changed: 241 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ pre {
136136
.workflow-panel,
137137
.matrix-panel,
138138
.docs-panel,
139+
.why-panel,
139140
.cta-band,
140141
.docs-sidebar,
141142
.docs-article,
@@ -148,6 +149,7 @@ pre {
148149
}
149150

150151
.site-header {
152+
position: relative;
151153
display: flex;
152154
align-items: center;
153155
justify-content: flex-start;
@@ -158,6 +160,33 @@ pre {
158160
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
159161
}
160162

163+
.site-header__beta {
164+
position: absolute;
165+
left: 50%;
166+
top: 50%;
167+
transform: translate(-50%, -50%) rotate(-8deg);
168+
font-family: var(--font-display);
169+
font-weight: 900;
170+
font-size: 0.98rem;
171+
letter-spacing: 0.18em;
172+
color: #d54a3c;
173+
border: 2px solid #d54a3c;
174+
padding: 0.1rem 0.55rem 0.15rem;
175+
border-radius: 0.3rem;
176+
opacity: 0.8;
177+
text-transform: uppercase;
178+
pointer-events: none;
179+
user-select: none;
180+
white-space: nowrap;
181+
z-index: 1;
182+
}
183+
184+
@media (max-width: 720px) {
185+
.site-header__beta {
186+
display: none;
187+
}
188+
}
189+
161190
.site-header--compact {
162191
position: sticky;
163192
top: 0.8rem;
@@ -329,11 +358,44 @@ pre {
329358
}
330359

331360
.hero__brand--split {
361+
position: relative;
332362
flex-direction: column;
333363
align-items: center;
334364
gap: 0.75rem;
335365
}
336366

367+
.hero__beta-stamp {
368+
position: absolute;
369+
top: 0.5rem;
370+
left: calc(50% + 4.4rem);
371+
z-index: 2;
372+
font-family: var(--font-display);
373+
font-weight: 900;
374+
font-size: clamp(2rem, 5vw, 3.2rem);
375+
letter-spacing: 0.18em;
376+
color: #d54a3c;
377+
border: 4px solid #d54a3c;
378+
padding: 0.25rem 0.85rem 0.3rem;
379+
border-radius: 0.45rem;
380+
transform: rotate(-12deg);
381+
opacity: 0.78;
382+
text-transform: uppercase;
383+
pointer-events: none;
384+
user-select: none;
385+
white-space: nowrap;
386+
text-shadow: 0 0 2px rgba(213, 74, 60, 0.18);
387+
}
388+
389+
@media (max-width: 720px) {
390+
.hero__beta-stamp {
391+
top: 0.25rem;
392+
left: calc(50% + 3rem);
393+
font-size: clamp(1.4rem, 7vw, 2rem);
394+
border-width: 3px;
395+
padding: 0.15rem 0.6rem 0.2rem;
396+
}
397+
}
398+
337399
.hero__emblem {
338400
display: block;
339401
width: min(100%, 13.5rem);
@@ -427,6 +489,7 @@ pre {
427489

428490
.matrix-panel,
429491
.docs-panel,
492+
.why-panel,
430493
.cta-band {
431494
margin: 0 0 1.35rem;
432495
padding: 1.35rem;
@@ -1055,6 +1118,16 @@ pre {
10551118
border-color: rgba(79, 141, 249, 0.5);
10561119
}
10571120

1121+
.cap-brand--friendly .cap-brand__mark {
1122+
background: linear-gradient(180deg, #34c759, #1f9d3e);
1123+
border-color: rgba(52, 199, 89, 0.5);
1124+
}
1125+
1126+
.cap-brand--geetest .cap-brand__mark {
1127+
background: linear-gradient(180deg, #8b5cf6, #6d28d9);
1128+
border-color: rgba(139, 92, 246, 0.5);
1129+
}
1130+
10581131
.cap-brand--pow .cap-brand__mark {
10591132
background: linear-gradient(180deg, #2cd0ec, #0fb5d2);
10601133
border-color: rgba(68, 226, 255, 0.55);
@@ -1080,63 +1153,174 @@ pre {
10801153
border-color: rgba(217, 119, 87, 0.55);
10811154
}
10821155

1156+
.cap-brand--bytespider .cap-brand__mark {
1157+
background: linear-gradient(180deg, #ef4444, #b91c1c);
1158+
border-color: rgba(239, 68, 68, 0.55);
1159+
}
1160+
1161+
.cap-brand--perplexitybot .cap-brand__mark {
1162+
background: linear-gradient(180deg, #f97316, #c2410c);
1163+
border-color: rgba(249, 115, 22, 0.55);
1164+
}
1165+
1166+
.cap-brand--forged .cap-brand__mark {
1167+
background: linear-gradient(180deg, #a16207, #713f12);
1168+
border-color: rgba(161, 98, 7, 0.55);
1169+
}
1170+
1171+
.cap-brand--scraper .cap-brand__mark {
1172+
background: linear-gradient(180deg, #475569, #1e293b);
1173+
border-color: rgba(71, 85, 105, 0.55);
1174+
}
1175+
10831176
.cap-brand--bloom .cap-brand__mark,
10841177
.cap-brand--shm .cap-brand__mark,
1085-
.cap-brand--hmac .cap-brand__mark {
1178+
.cap-brand--hmac .cap-brand__mark,
1179+
.cap-brand--restart .cap-brand__mark,
1180+
.cap-brand--load .cap-brand__mark,
1181+
.cap-brand--replay .cap-brand__mark {
10861182
background: linear-gradient(180deg, rgba(68, 226, 255, 0.16), rgba(68, 226, 255, 0.05));
10871183
border-color: rgba(68, 226, 255, 0.45);
10881184
}
10891185

10901186
.cap-brand--bloom .cap-brand__mark svg circle,
10911187
.cap-brand--shm .cap-brand__mark svg circle,
10921188
.cap-brand--hmac .cap-brand__mark svg circle,
1189+
.cap-brand--restart .cap-brand__mark svg circle,
1190+
.cap-brand--load .cap-brand__mark svg circle,
1191+
.cap-brand--replay .cap-brand__mark svg circle,
10931192
.cap-brand--bloom .cap-brand__mark svg path,
10941193
.cap-brand--shm .cap-brand__mark svg path,
1095-
.cap-brand--hmac .cap-brand__mark svg path {
1194+
.cap-brand--hmac .cap-brand__mark svg path,
1195+
.cap-brand--restart .cap-brand__mark svg path,
1196+
.cap-brand--load .cap-brand__mark svg path,
1197+
.cap-brand--replay .cap-brand__mark svg path {
10961198
stroke: rgba(220, 246, 255, 0.78);
10971199
fill: transparent;
10981200
}
10991201

1100-
.cap-brand--bloom .cap-brand__mark svg circle {
1202+
.cap-brand--bloom .cap-brand__mark svg circle,
1203+
.cap-brand--load .cap-brand__mark svg circle {
11011204
fill: rgba(220, 246, 255, 0.78);
11021205
stroke: none;
11031206
}
11041207

11051208
.cap-brand--bloom .cap-brand__mark svg circle.cap-brand__hot,
1106-
.cap-brand--shm .cap-brand__mark svg circle.cap-brand__hot {
1209+
.cap-brand--shm .cap-brand__mark svg circle.cap-brand__hot,
1210+
.cap-brand--restart .cap-brand__mark svg circle.cap-brand__hot,
1211+
.cap-brand--load .cap-brand__mark svg circle.cap-brand__hot {
11071212
fill: #44e2ff;
11081213
stroke: none;
11091214
filter: drop-shadow(0 0 4px rgba(68, 226, 255, 0.7));
11101215
}
11111216

1112-
.table-wrap {
1113-
overflow-x: auto;
1217+
.capability-list {
1218+
list-style: none;
1219+
margin: 0;
1220+
padding: 0;
1221+
border-top: 1px solid rgba(68, 226, 255, 0.25);
11141222
}
11151223

1116-
.feature-matrix {
1117-
width: 100%;
1118-
border-collapse: collapse;
1119-
min-width: 36rem;
1224+
.capability-list__row {
1225+
display: grid;
1226+
grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
1227+
gap: 1.25rem 2rem;
1228+
padding: 1.4rem 0;
1229+
border-bottom: 1px solid rgba(68, 226, 255, 0.25);
11201230
}
11211231

1122-
.feature-matrix th,
1123-
.feature-matrix td {
1124-
padding: 0.9rem 0.95rem;
1125-
border: 1px solid rgba(68, 226, 255, 0.45);
1126-
text-align: left;
1127-
vertical-align: top;
1232+
.capability-list__name {
1233+
margin: 0;
1234+
font-size: 1.05rem;
1235+
font-weight: 700;
1236+
color: #f8fbff;
1237+
letter-spacing: 0.005em;
11281238
}
11291239

1130-
.feature-matrix th {
1131-
color: #f8fbff;
1132-
background: rgba(68, 226, 255, 0.1);
1240+
.capability-list__body {
1241+
display: grid;
1242+
gap: 0.45rem;
1243+
}
1244+
1245+
.capability-list__use-case {
1246+
margin: 0;
1247+
color: var(--ink);
1248+
}
1249+
1250+
.capability-list__outcome {
1251+
margin: 0;
1252+
color: var(--ink-soft);
11331253
font-size: 0.92rem;
1134-
font-weight: 700;
11351254
}
11361255

1137-
.feature-matrix td {
1256+
.capability-list__outcome::before {
1257+
content: "Outcome — ";
1258+
color: var(--accent);
1259+
font-weight: 600;
1260+
letter-spacing: 0.04em;
1261+
text-transform: uppercase;
1262+
font-size: 0.75rem;
1263+
margin-right: 0.35rem;
1264+
}
1265+
1266+
@media (max-width: 640px) {
1267+
.capability-list__row {
1268+
grid-template-columns: 1fr;
1269+
gap: 0.55rem;
1270+
padding: 1.1rem 0;
1271+
}
1272+
}
1273+
1274+
.why-list {
1275+
list-style: none;
1276+
margin: 0;
1277+
padding: 0;
1278+
display: grid;
1279+
grid-template-columns: repeat(3, minmax(0, 1fr));
1280+
gap: 2.25rem;
1281+
}
1282+
1283+
.why-panel .panel-heading {
1284+
padding-bottom: 1.4rem;
1285+
margin-bottom: 2rem;
1286+
border-bottom: 1px solid rgba(68, 226, 255, 0.3);
1287+
}
1288+
1289+
.why-list__item {
1290+
display: flex;
1291+
flex-direction: column;
1292+
gap: 0.7rem;
1293+
}
1294+
1295+
.why-list__name {
1296+
margin: 0;
1297+
font-size: 1.1rem;
1298+
color: #f8fbff;
1299+
letter-spacing: 0.005em;
1300+
line-height: 1.3;
1301+
}
1302+
1303+
.why-list__body {
1304+
margin: 0;
11381305
color: var(--ink-soft);
1139-
background: rgba(255, 255, 255, 0.02);
1306+
font-size: 0.96rem;
1307+
line-height: 1.55;
1308+
}
1309+
1310+
.why-list__body code {
1311+
font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
1312+
font-size: 0.85em;
1313+
background: rgba(68, 226, 255, 0.12);
1314+
padding: 0.05em 0.4em;
1315+
border-radius: 0.25em;
1316+
color: #d4f8ff;
1317+
}
1318+
1319+
@media (max-width: 880px) {
1320+
.why-list {
1321+
grid-template-columns: 1fr;
1322+
gap: 1.6rem;
1323+
}
11401324
}
11411325

11421326
.doc-card-grid {
@@ -1590,6 +1774,40 @@ pre {
15901774
}
15911775
}
15921776

1777+
@media (max-width: 980px) and (min-width: 681px) {
1778+
.judgment-kernel {
1779+
display: none;
1780+
}
1781+
1782+
.judgment-grid {
1783+
grid-template-columns: 1fr 1fr;
1784+
grid-template-areas: none;
1785+
gap: 0.55rem;
1786+
}
1787+
1788+
.judgment-chip {
1789+
padding: 0.42rem 0.5rem;
1790+
min-height: 2.4rem;
1791+
border-radius: 0.65rem;
1792+
}
1793+
1794+
.judgment-chip strong {
1795+
font-size: 0.78rem;
1796+
}
1797+
1798+
.judgment-chip small {
1799+
font-size: 0.6rem;
1800+
}
1801+
1802+
.judgment-more {
1803+
display: none;
1804+
}
1805+
1806+
.workflow-card--judgment .workflow-note {
1807+
margin-top: 0.6rem;
1808+
}
1809+
}
1810+
15931811
@media (max-width: 680px) {
15941812
.workflow {
15951813
grid-template-columns: 1fr;
@@ -1695,6 +1913,7 @@ pre {
16951913
.workflow-panel,
16961914
.matrix-panel,
16971915
.docs-panel,
1916+
.why-panel,
16981917
.cta-band,
16991918
.docs-sidebar,
17001919
.docs-article {

0 commit comments

Comments
 (0)