Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.18
edited by Agnease
on 2026/07/03 13:03
Change comment: There is no comment for this version
To version 28.20
edited by Agnease
on 2026/07/03 13:06
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
code
... ... @@ -247,34 +247,109 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
251 251  
252 -.trust-strip {
253 - padding: 18px 0;
254 - border-top: 1px solid @line;
252 +.contrast-band {
253 + position: relative;
254 + left: 50%;
255 + right: 50%;
256 + width: 100vw;
257 + margin-left: -50vw;
258 + margin-right: -50vw;
259 + overflow: hidden;
260 + padding: 54px 0;
261 + background:
262 + radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
263 + radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
264 + linear-gradient(135deg, @text 0%, @text-soft 100%);
265 + color: #fff;
255 255  
256 - ul {
257 - max-width: 960px;
267 + &::before {
268 + content: "";
269 + position: absolute;
270 + inset: 0;
271 + background:
272 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
273 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
274 + background-size: 52px 52px;
275 + opacity: .38;
276 + pointer-events: none;
277 + }
278 +
279 + .container {
280 + position: relative;
281 + z-index: 1;
282 + }
283 +
284 + .contrast-panel {
285 + max-width: 1040px;
258 258   margin: 0 auto;
259 - padding: 0;
260 - list-style: none;
261 - display: flex;
262 - justify-content: center;
263 - gap: 22px;
264 - flex-wrap: wrap;
265 - color: @muted;
266 - font-size: 13px;
287 + text-align: center;
267 267   }
268 268  
269 - li {
270 - display: flex;
290 + h2 {
291 + max-width: 860px;
292 + margin: 0 auto 12px;
293 + color: #fff;
294 + }
295 +
296 + .section-intro {
297 + max-width: 840px;
298 + margin: 0 auto 26px;
299 + color: #D9E3EE;
300 + }
301 +}
302 +
303 +.contrast-tags {
304 + max-width: 940px;
305 + margin: 0 auto;
306 + display: flex;
307 + flex-wrap: wrap;
308 + justify-content: center;
309 + gap: 10px;
310 +
311 + span {
312 + display: inline-flex;
271 271   align-items: center;
272 - gap: 7px;
314 + padding: 8px 13px;
315 + border: 1px solid fade(#fff, 18%);
316 + border-radius: 999px;
317 + background: fade(#fff, 8%);
318 + color: #F8FAFC;
319 + font-size: 13px;
320 + font-weight: 700;
321 + line-height: 1.2;
322 +
323 + &::before {
324 + content: "";
325 + width: 7px;
326 + height: 7px;
327 + margin-right: 8px;
328 + border-radius: 50%;
329 + background: @brand;
330 + box-shadow: 0 0 0 4px fade(@brand, 18%);
331 + }
273 273   }
333 +}
274 274  
275 - i {
276 - color: @brand;
335 +.contrast-support {
336 + max-width: 860px;
337 + margin: 30px auto 0;
338 + color: #D9E3EE;
339 + text-align: center;
340 + font-size: 15px;
341 + line-height: 1.7;
342 +}
343 +
344 +@media (max-width: 640px) {
345 + .contrast-band {
346 + padding: 40px 0;
277 277   }
348 +
349 + .contrast-tags span {
350 + font-size: 12px;
351 + padding: 8px 11px;
352 + }
278 278  }
279 279  
280 280  /* ========== Reusable Grids ========== */