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