Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -234,304 +234,4 @@ 234 234 a { color: @brand; } 235 235 } 236 236 } 237 -/* ========== Agnease Revamp Additions ========== */ 238 238 239 -@brand-soft: #E7FFF8; 240 -@brand-bg: #F4FCFA; 241 - 242 -.hero-kicker { 243 - display: inline-flex; 244 - align-items: center; 245 - gap: 8px; 246 - color: @brand; 247 - background: fade(@brand, 8%); 248 - border: 1px solid fade(@brand, 18%); 249 - border-radius: 999px; 250 - padding: 6px 12px; 251 - margin-bottom: 14px; 252 - font-size: 13px; 253 - font-weight: 700; 254 -} 255 - 256 -.hero h1 { 257 - max-width: 760px; 258 - margin-left: auto; 259 - margin-right: auto; 260 - line-height: 1.18; 261 -} 262 - 263 -.hero .lead { 264 - max-width: 760px; 265 - font-size: 19px; 266 - line-height: 1.55; 267 -} 268 - 269 -.hero-support { 270 - max-width: 760px; 271 - margin: 14px auto 0; 272 - color: @muted; 273 - line-height: 1.55; 274 -} 275 - 276 -.hero-actions { 277 - display: flex; 278 - gap: 12px; 279 - flex-wrap: wrap; 280 - justify-content: center; 281 - margin-top: 22px; 282 - 283 - .btn-secondary { 284 - color: @brand; 285 - background: #fff; 286 - border: 1px solid fade(@brand, 35%); 287 - 288 - &:hover, 289 - &:focus { 290 - color: @brand-strong; 291 - border-color: @brand; 292 - background: @brand-bg; 293 - } 294 - } 295 -} 296 - 297 -.trust-strip { 298 - padding: 18px 0; 299 - border-top: 1px solid @line; 300 - border-bottom: 1px solid @line; 301 - background: #fff; 302 - 303 - ul { 304 - max-width: 920px; 305 - margin: 0 auto; 306 - padding: 0; 307 - list-style: none; 308 - display: flex; 309 - justify-content: center; 310 - gap: 22px; 311 - flex-wrap: wrap; 312 - color: @muted; 313 - font-size: 13px; 314 - } 315 - 316 - li { 317 - display: flex; 318 - align-items: center; 319 - gap: 7px; 320 - } 321 - 322 - i { 323 - color: @brand; 324 - } 325 -} 326 - 327 -.section-intro { 328 - max-width: 760px; 329 - margin: 0 auto 18px; 330 - text-align: center; 331 - color: @muted; 332 - font-size: 16px; 333 - line-height: 1.55; 334 -} 335 - 336 -.pathways { 337 - display: grid; 338 - grid-template-columns: repeat(3, minmax(0, 1fr)); 339 - grid-gap: 18px; 340 - max-width: 1040px; 341 - margin: 22px auto 0; 342 -} 343 - 344 -.pathway-card { 345 - background: #fff; 346 - border: 1px solid @line; 347 - border-radius: @radius; 348 - box-shadow: @shadow-sm; 349 - padding: 22px; 350 - display: flex; 351 - flex-direction: column; 352 - min-height: 100%; 353 - 354 - .pathway-icon { 355 - width: 46px; 356 - height: 46px; 357 - border-radius: 50%; 358 - display: flex; 359 - align-items: center; 360 - justify-content: center; 361 - color: @brand; 362 - background: fade(@brand, 10%); 363 - margin-bottom: 14px; 364 - font-size: 18px; 365 - } 366 - 367 - h3 { 368 - margin: 0 0 8px; 369 - color: @text; 370 - font-size: 20px; 371 - line-height: 1.25; 372 - } 373 - 374 - p { 375 - color: @muted; 376 - line-height: 1.55; 377 - margin: 0 0 14px; 378 - } 379 - 380 - ul { 381 - margin: 0 0 18px; 382 - padding-left: 18px; 383 - color: @muted; 384 - font-size: 13px; 385 - } 386 - 387 - li { 388 - margin: 5px 0; 389 - } 390 - 391 - .card-link { 392 - margin-top: auto; 393 - 394 - a { 395 - color: @brand; 396 - font-weight: 700; 397 - } 398 - } 399 -} 400 - 401 -.split-section { 402 - background: 403 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 404 -} 405 - 406 -.split-grid { 407 - display: grid; 408 - grid-template-columns: 1.1fr .9fr; 409 - grid-gap: 36px; 410 - max-width: 1040px; 411 - margin: 0 auto; 412 - align-items: center; 413 -} 414 - 415 -.split-copy { 416 - h2 { 417 - text-align: left; 418 - margin-top: 0; 419 - } 420 - 421 - p { 422 - color: @muted; 423 - line-height: 1.6; 424 - } 425 -} 426 - 427 -.process-list { 428 - counter-reset: process; 429 - margin: 0; 430 - padding: 0; 431 - list-style: none; 432 -} 433 - 434 -.process-list li { 435 - counter-increment: process; 436 - position: relative; 437 - padding: 16px 16px 16px 58px; 438 - margin-bottom: 12px; 439 - background: #fff; 440 - border: 1px solid @line; 441 - border-radius: @radius; 442 - box-shadow: @shadow-sm; 443 - color: @muted; 444 - line-height: 1.5; 445 - 446 - &:before { 447 - content: counter(process); 448 - position: absolute; 449 - left: 16px; 450 - top: 16px; 451 - width: 28px; 452 - height: 28px; 453 - border-radius: 50%; 454 - background: fade(@brand, 10%); 455 - color: @brand; 456 - display: flex; 457 - align-items: center; 458 - justify-content: center; 459 - font-weight: 800; 460 - } 461 - 462 - strong { 463 - display: block; 464 - color: @text; 465 - margin-bottom: 3px; 466 - } 467 -} 468 - 469 -.resource-strip { 470 - background: @brand-bg; 471 - 472 - .resource-grid { 473 - max-width: 1040px; 474 - margin: 20px auto 0; 475 - display: grid; 476 - grid-template-columns: repeat(2, minmax(0, 1fr)); 477 - grid-gap: 16px; 478 - } 479 - 480 - .resource-card { 481 - background: #fff; 482 - border: 1px solid @line; 483 - border-radius: @radius; 484 - padding: 18px; 485 - box-shadow: @shadow-sm; 486 - 487 - h4 { 488 - margin: 0 0 6px; 489 - color: @text; 490 - } 491 - 492 - p { 493 - color: @muted; 494 - margin: 0 0 10px; 495 - line-height: 1.5; 496 - } 497 - 498 - a { 499 - color: @brand; 500 - font-weight: 700; 501 - } 502 - } 503 -} 504 - 505 -.cta-panel { 506 - max-width: 860px; 507 - margin: 0 auto; 508 - padding: 30px; 509 - border-radius: @radius; 510 - border: 1px solid fade(@brand, 20%); 511 - background: 512 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 513 - box-shadow: @shadow-sm; 514 - text-align: center; 515 - 516 - h2 { 517 - margin-top: 0; 518 - } 519 - 520 - p { 521 - color: @muted; 522 - line-height: 1.55; 523 - } 524 -} 525 - 526 -@media (max-width: 900px) { 527 - .pathways, 528 - .split-grid, 529 - .resource-strip .resource-grid { 530 - grid-template-columns: 1fr; 531 - } 532 - 533 - .split-copy h2 { 534 - text-align: center; 535 - } 536 -} 537 -