styles.css (12250B)
1 .lang-slector { 2 float: right; 3 padding-top: 2mm; 4 padding-bottom: 4mm; 5 margin-left: 15px; 6 margin-right: 15px; 7 } 8 9 html { 10 overflow-y: scroll; 11 } 12 13 ul nav { 14 background-color: rgb(8, 8, 8); 15 border-radius: 0px; 16 } 17 18 .c_acronym { 19 background-color: #A5C663; 20 } 21 22 .wallet-page { 23 --wallet-blue: #0042b3; 24 --wallet-blue-dark: #003281; 25 --wallet-blue-light: #eef4ff; 26 --wallet-border: #d8dee8; 27 --wallet-muted: #545b66; 28 } 29 30 .wallet-hero { 31 background: linear-gradient(135deg, #f7faff 0%, #eef4ff 100%); 32 border-bottom: 1px solid var(--wallet-border); 33 padding: 3.5rem 1rem 3rem; 34 text-align: center; 35 } 36 37 #body_content .wallet-hero .container { 38 margin-bottom: 0; 39 max-width: 800px; 40 padding-bottom: 0; 41 padding-top: 0; 42 } 43 44 .wallet-hero h1 { 45 font-size: clamp(2.25rem, 5vw, 3.5rem); 46 font-weight: 700; 47 letter-spacing: -0.03em; 48 margin-bottom: 1rem; 49 } 50 51 .wallet-lead { 52 color: #303641; 53 font-size: 1.2rem; 54 line-height: 1.6; 55 margin: 0 auto; 56 max-width: 720px; 57 } 58 59 .wallet-highlights { 60 display: flex; 61 flex-wrap: wrap; 62 gap: 0.75rem 1.5rem; 63 justify-content: center; 64 list-style: none; 65 margin: 1.5rem 0 0; 66 padding: 0; 67 } 68 69 .wallet-highlights li::before { 70 color: #357a22; 71 content: "\2713"; 72 font-weight: 700; 73 margin-right: 0.4rem; 74 } 75 76 #body_content .wallet-content { 77 max-width: 1120px; 78 padding-bottom: 0; 79 padding-top: 1rem; 80 } 81 82 .wallet-section { 83 margin-top: 3.5rem; 84 } 85 86 .wallet-section-heading { 87 margin-bottom: 1.25rem; 88 } 89 90 .wallet-section-heading h2, 91 .wallet-action-notice h2, 92 .wallet-demo h2, 93 .wallet-resources h2 { 94 font-size: clamp(1.6rem, 3vw, 2rem); 95 font-weight: 650; 96 margin-bottom: 0.35rem; 97 } 98 99 .wallet-section-heading p { 100 color: var(--wallet-muted); 101 margin: 0; 102 } 103 104 .wallet-grid { 105 display: grid; 106 gap: 1.5rem; 107 grid-template-columns: repeat(2, minmax(0, 1fr)); 108 } 109 110 .wallet-card { 111 background: #fff; 112 border: 1px solid var(--wallet-border); 113 border-radius: 0.75rem; 114 box-shadow: 0 0.25rem 1rem rgba(21, 39, 68, 0.06); 115 display: flex; 116 flex-direction: column; 117 justify-content: space-between; 118 min-height: 250px; 119 padding: 1.5rem; 120 } 121 122 .wallet-card h3 { 123 font-size: 1.65rem; 124 margin-bottom: 0.65rem; 125 } 126 127 .wallet-card p:not(.wallet-platform-label) { 128 color: var(--wallet-muted); 129 } 130 131 .wallet-platform-label { 132 color: var(--wallet-blue); 133 font-size: 0.8rem; 134 font-weight: 700; 135 letter-spacing: 0.08em; 136 margin-bottom: 0.45rem; 137 text-transform: uppercase; 138 } 139 140 .wallet-actions { 141 display: flex; 142 flex-wrap: wrap; 143 gap: 0.75rem; 144 margin-top: 1.5rem; 145 } 146 147 #body_content .wallet-page a.wallet-button { 148 align-items: center; 149 border: 2px solid var(--wallet-blue); 150 border-radius: 0.4rem; 151 display: inline-flex; 152 font-weight: 600; 153 justify-content: center; 154 min-height: 44px; 155 padding: 0.55rem 1rem; 156 text-align: center; 157 text-decoration: none; 158 } 159 160 #body_content .wallet-page a.wallet-button-primary, 161 #body_content .wallet-page a.wallet-button-primary:link, 162 #body_content .wallet-page a.wallet-button-primary:visited { 163 background: var(--wallet-blue); 164 color: #fff; 165 } 166 167 #body_content .wallet-page a.wallet-button-primary:hover { 168 background: var(--wallet-blue-dark); 169 border-color: var(--wallet-blue-dark); 170 color: #fff; 171 } 172 173 #body_content .wallet-page a.wallet-button-secondary, 174 #body_content .wallet-page a.wallet-button-secondary:link, 175 #body_content .wallet-page a.wallet-button-secondary:visited { 176 background: #fff; 177 color: var(--wallet-blue-dark); 178 } 179 180 #body_content .wallet-page a.wallet-button-secondary:hover { 181 background: var(--wallet-blue-light); 182 color: var(--wallet-blue-dark); 183 } 184 185 #body_content .wallet-page a.wallet-button:focus-visible, 186 .wallet-action-direct:focus-visible { 187 outline: 3px solid #f5a623; 188 outline-offset: 3px; 189 } 190 191 .wallet-advanced-options { 192 border-bottom: 1px solid var(--wallet-border); 193 } 194 195 .wallet-advanced-options details { 196 border-top: 1px solid var(--wallet-border); 197 padding: 0; 198 } 199 200 .wallet-advanced-options summary { 201 cursor: pointer; 202 font-size: 1.15rem; 203 font-weight: 650; 204 padding: 1.15rem 0.25rem; 205 } 206 207 .wallet-advanced-options summary:focus-visible { 208 outline: 3px solid #f5a623; 209 outline-offset: 3px; 210 } 211 212 .wallet-details-content { 213 max-width: 800px; 214 padding: 0 0.25rem 1.5rem 1.5rem; 215 } 216 217 .wallet-warning { 218 background: #fff7e6; 219 border-left: 4px solid #b96a00; 220 padding: 0.85rem 1rem; 221 } 222 223 .wallet-action-notice, 224 .wallet-demo { 225 align-items: center; 226 background: var(--wallet-blue-light); 227 border-left: 5px solid var(--wallet-blue); 228 border-radius: 0.5rem; 229 display: flex; 230 gap: 2rem; 231 justify-content: space-between; 232 margin-top: 4rem; 233 padding: 1.75rem 2rem; 234 } 235 236 .wallet-action-notice { 237 margin-top: 2rem; 238 } 239 240 .wallet-action-notice[hidden] { 241 display: none; 242 } 243 244 .wallet-action-notice p, 245 .wallet-demo p { 246 margin-bottom: 0; 247 } 248 249 .wallet-action-notice .wallet-button, 250 .wallet-demo .wallet-button { 251 flex: 0 0 auto; 252 } 253 254 .wallet-action-options { 255 display: flex; 256 flex: 0 0 auto; 257 flex-direction: column; 258 gap: 0.25rem; 259 max-width: 100%; 260 text-align: center; 261 } 262 263 .wallet-action-direct { 264 font-size: 0.9rem; 265 min-height: 44px; 266 padding: 0.5rem; 267 } 268 269 .wallet-resources { 270 margin: 3.5rem 0 1rem; 271 } 272 273 .wallet-resources ul { 274 display: flex; 275 flex-wrap: wrap; 276 gap: 0.75rem 1.75rem; 277 list-style: none; 278 margin: 1rem 0 0; 279 padding: 0; 280 } 281 282 .wallet-resources a { 283 font-weight: 550; 284 } 285 286 @media (max-width: 767.98px) { 287 .wallet-hero { 288 padding: 2.5rem 0.5rem 2.25rem; 289 } 290 291 .wallet-highlights { 292 align-items: center; 293 flex-direction: column; 294 gap: 0.5rem; 295 } 296 297 .wallet-section { 298 margin-top: 2.75rem; 299 } 300 301 .wallet-grid { 302 grid-template-columns: 1fr; 303 } 304 305 .wallet-card { 306 min-height: auto; 307 } 308 309 .wallet-actions { 310 align-items: stretch; 311 flex-direction: column; 312 } 313 314 .wallet-action-notice, 315 .wallet-demo { 316 align-items: flex-start; 317 flex-direction: column; 318 gap: 1rem; 319 margin-top: 3rem; 320 padding: 1.5rem; 321 } 322 323 .wallet-action-notice { 324 margin-top: 2rem; 325 } 326 327 .wallet-action-options, 328 .wallet-demo .wallet-button { 329 width: 100%; 330 } 331 } 332 333 a, 334 a:link, 335 a:visited { 336 text-decoration: grey underline; 337 color: black; 338 } 339 340 nav a, 341 nav a:link, 342 nav a:visited { 343 text-decoration: none; 344 } 345 346 .navbar-light .navbar-nav .nav-link { 347 /* 0,0,0,.5 makes it problematic to read, 348 simply black is less problematic */ 349 color: rgb(0, 0, 0); 350 text-decoration: underline; 351 } 352 353 .skip { 354 position: absolute; 355 left: -10000px; 356 top: auto; 357 width: 1px; 358 height: 1px; 359 overflow: hidden; 360 } 361 362 .skip:focus { 363 position: static; 364 width: auto; 365 height: auto; 366 background: white; 367 padding: 5px; 368 } 369 370 #body_content a:hover { 371 transition: background-color 0.3s; 372 background-color: rgba(200, 200, 200, 0.5); 373 } 374 375 .c_intro { 376 min-height: 97vh; 377 } 378 379 /* don't show the language selector in the dropdown on mobile devices, 380 * since it's in the top bar already. 381 */ 382 .in .nav-lang { 383 display: none; 384 } 385 386 .mobile-lang { 387 margin-left: 5px; 388 margin-top: 8px; 389 } 390 391 #mybody { 392 /* override ugly bootstrap defaults */ 393 color: black; 394 position: relative; 395 min-height: 100%; 396 } 397 398 #body_content { 399 height: 100%; 400 } 401 402 footer { 403 position: relative; 404 bottom: 0; 405 height: 340px; 406 } 407 408 .btn-dark { 409 background-color: #595959; 410 } 411 412 413 #mybody nav { 414 border-radius: 0px; 415 } 416 417 footer { 418 padding-top: 2em; 419 margin-top: 2em; 420 } 421 422 423 #body_content .container { 424 margin-bottom: 2em; 425 padding-top: 1em; 426 padding-bottom: 1em; 427 } 428 429 #body_content { 430 /* push footer down */ 431 min-height: 80vh; 432 } 433 434 .footer-list { 435 list-style: none; 436 } 437 438 .cushion-above { 439 padding-top: 2em; 440 } 441 442 .cushion-below { 443 padding-bottom: 2em; 444 } 445 446 .invert { 447 -webkit-filter: invert(100%); 448 filter: invert(100%); 449 } 450 451 /* overrides bootstrap defaults. */ 452 .navbar-brand { 453 display: contents; 454 } 455 456 .checkmark { 457 height: 1em; 458 width: 1em; 459 margin-right: 0.3em; 460 vertical-align: baseline; 461 position: relative; 462 top: 0.2em; 463 } 464 465 .checklist { 466 margin-top: 1em; 467 margin-bottom: 1em; 468 list-style-type: none; 469 padding-left: 0px; 470 font-size: 1.2rem; 471 } 472 473 .tlr { 474 display: inline-block; 475 position: relative; 476 } 477 478 .tlr::before { 479 content: ""; 480 position: absolute; 481 width: 100%; 482 height: 25%; 483 bottom: 0; 484 left: 0.2em; 485 background: rgba(170, 57, 57, 0.3); 486 z-index: -1; 487 } 488 489 490 .timeline header { 491 text-align: left; 492 margin-bottom: 5px; 493 } 494 495 ul.timeline { 496 list-style-type: none; 497 position: relative; 498 } 499 500 ul.timeline:before { 501 content: ' '; 502 background: #d4d9df; 503 display: inline-block; 504 position: absolute; 505 left: 29px; 506 width: 2px; 507 height: 100%; 508 z-index: 400; 509 } 510 511 ul.timeline>li { 512 margin: 20px 0; 513 padding-left: 20px; 514 } 515 516 ul.timeline>li:before { 517 content: ' '; 518 background: white; 519 display: inline-block; 520 position: absolute; 521 border-radius: 50%; 522 border: 3px solid #0042b3; 523 left: 20px; 524 width: 20px; 525 height: 20px; 526 z-index: 400; 527 } 528 529 .section-consortium .divider { 530 position: relative; 531 border-bottom: 1px solid #f0f0f0; 532 margin-bottom: 30px; 533 margin-top: 30px; 534 } 535 536 .section-consortium .divider:before { 537 position: absolute; 538 content: ''; 539 width: 30px; 540 height: 30px; 541 border: 1px solid #f0f0f0; 542 left: 50%; 543 margin-left: -15px; 544 top: 50%; 545 background: #fff; 546 margin-top: -15px; 547 -webkit-transform: rotate(45deg); 548 -moz-transform: rotate(45deg); 549 -ms-transform: rotate(45deg); 550 transform: rotate(45deg); 551 } 552 553 .section-consortium .divider:after { 554 position: absolute; 555 content: ''; 556 width: 20px; 557 height: 20px; 558 border: 1px solid #A5C663; 559 left: 50%; 560 margin-left: -10px; 561 top: 50%; 562 background: #A5C663; 563 margin-top: -10px; 564 -webkit-transform: rotate(45deg); 565 -moz-transform: rotate(45deg); 566 -ms-transform: rotate(45deg); 567 transform: rotate(45deg); 568 } 569 570 .section-consortium .card-note { 571 overflow: hidden; 572 line-height: 1.5rem; 573 height: 4.5rem; 574 min-height: 4.5rem; 575 } 576 577 578 .consortium a, 579 .consortium a:link, 580 .consortium a:visited { 581 text-decoration: underline; 582 color: black; 583 } 584 585 .consortium h4 { 586 color: #555; 587 text-align: left; 588 text-transform: uppercase; 589 font-weight: bold; 590 position: relative; 591 margin: 30px 0 60px; 592 padding: 5px; 593 } 594 595 .consortium h4::after { 596 content: ""; 597 width: 170px; 598 position: absolute; 599 text-align: left; 600 height: 13%; 601 bottom: 0; 602 left: 0.2em; 603 background: #4e7bca; 604 z-index: -1; 605 } 606 607 .consortium .list-group { 608 max-height: 400px; 609 margin-bottom: 10px; 610 overflow: scroll; 611 -webkit-overflow-scrolling: touch; 612 } 613 614 .consortium .mb-1 { 615 color: #555; 616 } 617 618 .consortium .list-group-item, 619 .consortium .list-group-item-action { 620 text-decoration: none; 621 } 622 623 .announce .col-center { 624 margin: 0 auto; 625 float: none !important; 626 } 627 628 .announce .carousel { 629 margin-bottom: 10px; 630 padding: 0 70px; 631 } 632 633 .announce .description { 634 max-height: 100px; 635 min-height: 100px; 636 overflow: scroll; 637 } 638 639 .announce .contact { 640 max-height: 90px; 641 min-height: 90px; 642 /* overflow: scroll; */ 643 } 644 645 .announce .carousel .carousel-item { 646 color: #999; 647 font-size: 14px; 648 text-align: center; 649 overflow: hidden; 650 min-height: 290px; 651 } 652 653 .announce .carousel .carousel-item .img-box { 654 width: 258px; 655 height: 160px; 656 margin: 0 auto; 657 padding: 5px; 658 border: 1px solid #ddd; 659 border-radius: 5%; 660 } 661 662 .announce .carousel .img-box img { 663 width: 100%; 664 height: 100%; 665 display: block; 666 border-radius: 5px; 667 } 668 669 .announce .carousel .testimonial { 670 padding: 30px 0 10px; 671 } 672 673 .announce .carousel .overview { 674 font-style: italic; 675 } 676 677 .announce .carousel .overview b { 678 text-transform: uppercase; 679 color: #4e7bca; 680 } 681 682 .announce .carousel-control-prev, 683 .announce .carousel-control-next { 684 width: 40px; 685 height: 40px; 686 margin-top: -20px; 687 top: 50%; 688 background: none; 689 } 690 691 .announce .carousel-control-prev i, 692 .announce .carousel-control-next i { 693 font-size: 68px; 694 line-height: 42px; 695 position: absolute; 696 display: inline-block; 697 color: rgba(0, 0, 0, 0.8); 698 text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000; 699 } 700 701 .announce .carousel-indicators { 702 bottom: -40px; 703 } 704 705 .announce .carousel-indicators button, 706 .announce .carousel-indicators button.active { 707 width: 12px; 708 height: 12px; 709 margin: 1px 3px; 710 border-radius: 50%; 711 border: none; 712 } 713 714 .announce .carousel-indicators button { 715 background: #999; 716 border-color: transparent; 717 box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2); 718 } 719 720 .announce .carousel-indicators button.active { 721 background: #555; 722 box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2); 723 }