Changes for page Public Web Site
Last modified by Agnease on 2026/07/03 16:14
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -249,19 +249,25 @@ 249 249 250 250 /* ========== Contrast Band ========== */ 251 251 252 -/* Full‑bleed wrapper */ 253 -.contrast-band-wrapper { 252 +.contrast-band { 254 254 position: relative; 255 - overflow: visible; 254 + z-index: 0; 255 + overflow: visible; /* allow pseudo-element to escape */ 256 + padding: 54px 0; 257 + border-top: 0; 258 + color: #fff; 259 + 260 + /* Remove gradient from here */ 261 + background: none; 256 256 } 257 257 258 258 /* Full‑bleed gradient background */ 259 -.contrast-band -wrapper::before {265 +.contrast-band::before { 260 260 content: ""; 261 261 position: absolute; 262 262 top: 0; 263 263 left: 50%; 264 - width: 100vw; 270 + width: 100vw; /* full viewport width */ 265 265 height: 100%; 266 266 transform: translateX(-50%); 267 267 z-index: -1; ... ... @@ -272,17 +272,7 @@ 272 272 linear-gradient(135deg, @text 0%, @text-soft 100%); 273 273 } 274 274 275 -/* Inner band (no gradient here anymore) */ 276 -.contrast-band { 277 - position: relative; 278 - z-index: 0; 279 - padding: 54px 0; 280 - border-top: 0; 281 - color: #fff; 282 - background: none; 283 -} 284 - 285 -/* Grid overlay */ 281 +/* Grid overlay stays exactly as you had it */ 286 286 .contrast-band::after { 287 287 content: ""; 288 288 position: absolute; ... ... @@ -296,12 +296,83 @@ 296 296 z-index: 0; 297 297 } 298 298 299 -/* Content stays above everything */ 300 300 .contrast-band .container { 301 301 position: relative; 302 302 z-index: 1; 303 303 } 304 304 300 +/* Everything below stays unchanged */ 301 +.contrast-panel { 302 + max-width: 1040px; 303 + margin: 0 auto; 304 + text-align: center; 305 +} 306 + 307 +.contrast-band h2 { 308 + max-width: 860px; 309 + margin: 0 auto 12px; 310 + color: #fff; 311 +} 312 + 313 +.contrast-band .section-intro { 314 + max-width: 840px; 315 + margin: 0 auto 26px; 316 + color: #D9E3EE; 317 +} 318 + 319 +.contrast-tags { 320 + max-width: 940px; 321 + margin: 0 auto; 322 + display: flex; 323 + flex-wrap: wrap; 324 + justify-content: center; 325 + gap: 10px; 326 +} 327 + 328 +.contrast-tags span { 329 + display: inline-flex; 330 + align-items: center; 331 + padding: 8px 13px; 332 + border: 1px solid fade(#fff, 18%); 333 + border-radius: 999px; 334 + background: fade(#fff, 8%); 335 + color: #F8FAFC; 336 + font-size: 13px; 337 + font-weight: 700; 338 + line-height: 1.2; 339 +} 340 + 341 +.contrast-tags span::before { 342 + content: ""; 343 + width: 7px; 344 + height: 7px; 345 + margin-right: 8px; 346 + border-radius: 50%; 347 + background: @brand; 348 + box-shadow: 0 0 0 4px fade(@brand, 18%); 349 +} 350 + 351 +.contrast-support { 352 + max-width: 860px; 353 + margin: 30px auto 0; 354 + color: #D9E3EE; 355 + text-align: center; 356 + font-size: 15px; 357 + line-height: 1.7; 358 +} 359 + 360 +@media (max-width: 640px) { 361 + .contrast-band { 362 + padding: 40px 0; 363 + } 364 + 365 + .contrast-tags span { 366 + font-size: 12px; 367 + padding: 8px 11px; 368 + } 369 +} 370 + 371 + 305 305 /* ========== Reusable Grids ========== */ 306 306 307 307 .card-grid,