embark.css
1 *, 2 *:before, 3 *:after { 4 -webkit-box-sizing: inherit; 5 box-sizing: inherit; } 6 7 html { 8 -webkit-box-sizing: border-box; 9 box-sizing: border-box; 10 background-color: #fff; 11 font-size: 10px; 12 font-weight: normal; 13 text-rendering: optimizeLegibility; } 14 15 body { 16 margin: 0; 17 padding: 16px; 18 color: #080E1A; 19 font-family: Roboto, sans-serif; 20 font-size: 18px; 21 font-weight: 400; 22 line-height: 1.45; 23 -webkit-font-smoothing: antialiased; 24 -moz-osx-font-smoothing: grayscale; } 25 @media screen and (min-width: 767px) { 26 body { 27 padding: 0; } } 28 29 input, 30 textarea, 31 select { 32 display: block; 33 margin: 0; 34 padding: 12px 8px; 35 width: 100%; 36 border: 1px solid #D6D9DE; 37 border-radius: 5px; 38 background-color: #fff; 39 color: #080E1A; 40 font-family: Roboto, sans-serif; 41 font-size: 18px; 42 line-height: 1; } 43 input:focus, 44 textarea:focus, 45 select:focus { 46 outline: transparent; 47 border-color: get-brand(primary); } 48 input:disabled, 49 textarea:disabled, 50 select:disabled { 51 cursor: not-allowed; 52 color: #6E7786; } 53 54 input[type="color"] { 55 padding: 0; } 56 57 input[type="search"] { 58 padding: 16px 32px; 59 -webkit-appearance: none; 60 border-radius: 150px; } 61 62 textarea { 63 resize: none; } 64 65 fieldset { 66 margin: 0; 67 padding: 0; 68 border: none; } 69 70 legend { 71 font-weight: 700; } 72 73 label { 74 color: #6E7786; 75 font-weight: 700; 76 text-transform: uppercase; } 77 78 h1, 79 h2, 80 h3, 81 h4, 82 h5, 83 h6 { 84 margin: 0; 85 font-weight: 700; 86 line-height: 1.45; } 87 88 h1 { 89 font-size: 3rem; } 90 @media screen and (min-width: 767px) { 91 h1 { 92 font-size: 4.8rem; } } 93 94 h2 { 95 font-size: 2.4rem; } 96 @media screen and (min-width: 767px) { 97 h2 { 98 font-size: 3.6rem; } } 99 100 h3 { 101 font-size: 2.4rem; } 102 @media screen and (min-width: 767px) { 103 h3 { 104 font-size: 3rem; } } 105 106 h4, 107 h5, 108 h6 { 109 font-size: 1.8rem; } 110 111 a { 112 cursor: pointer; 113 color: #FAB266; 114 text-decoration: none; } 115 a:hover { 116 color: #FBBE7D; } 117 a:focus { 118 text-decoration: underline; } 119 120 img { 121 height: auto; 122 max-width: 100%; 123 width: auto; } 124 125 ul, ol { 126 margin: 0; 127 padding: 0; 128 margin-left: 16px; } 129 130 table { 131 width: 100%; 132 table-layout: fixed; 133 border: 1px solid #D6D9DE; 134 border-collapse: collapse; 135 word-wrap: break-word; 136 margin-top: 16px; } 137 138 th, 139 td { 140 padding: 8px; 141 border-left: 1px solid #D6D9DE; 142 border-top: 1px solid #D6D9DE; } 143 th:first-child, 144 td:first-child { 145 border-left: 0; } 146 147 thead td, 148 thead th { 149 border-top: 0; } 150 151 button { 152 cursor: pointer; 153 margin: 0; 154 padding: 0; 155 -moz-appearance: none; 156 appearance: none; 157 -webkit-appearance: none; 158 border: none; 159 background: transparent; 160 color: #080E1A; 161 font-family: Roboto, sans-serif; 162 font-size: 18px; 163 line-height: 1; } 164 165 p { 166 margin: 0; } 167 168 .o-distance { 169 margin-top: 32px; } 170 @media screen and (min-width: 767px) { 171 .o-distance { 172 margin-top: 64px; } } 173 174 .o-distance-s { 175 margin-top: 8px; } 176 177 .o-distance-m { 178 margin-top: 16px; } 179 180 .o-distance-l { 181 margin-top: 32px; } 182 183 .o-distance-xl { 184 margin-top: 64px; } 185 186 .o-distance-xxl { 187 margin-top: 64px; } 188 @media screen and (min-width: 767px) { 189 .o-distance-xxl { 190 margin-top: 128px; } } 191 192 .o-container { 193 max-width: 980px; 194 margin-left: auto; 195 margin-right: auto; } 196 197 .o-container-medium { 198 max-width: 700px; 199 margin-left: auto; 200 margin-right: auto; } 201 202 .o-center { 203 -webkit-box-pack: center; 204 -ms-flex-pack: center; 205 justify-content: center; 206 text-align: center; } 207 208 .o-container-center { 209 margin-left: auto; 210 margin-right: auto; } 211 212 .o-flex { 213 margin: 0; 214 padding: 0; 215 list-style: none; 216 display: -webkit-box; 217 display: -ms-flexbox; 218 display: flex; 219 -webkit-box-orient: horizontal; 220 -webkit-box-direction: normal; 221 -ms-flex-direction: row; 222 flex-direction: row; } 223 .o-flex__item { 224 margin-left: 16px; } 225 .o-flex__item:first-child { 226 margin-left: 0; } 227 228 .o-flex-center { 229 -webkit-box-align: center; 230 -ms-flex-align: center; 231 align-items: center; } 232 233 .o-flex-space-between { 234 -webkit-box-pack: justify; 235 -ms-flex-pack: justify; 236 justify-content: space-between; } 237 238 .o-nowrap { 239 -ms-flex-wrap: nowrap !important; 240 flex-wrap: nowrap !important; } 241 242 .o-row { 243 margin-top: get-stack-spacing(m); } 244 245 [class*="o-grid__column-"] { 246 margin-top: 32px; 247 margin-left: 32px; } 248 249 .o-grid { 250 display: -webkit-box; 251 display: -ms-flexbox; 252 display: flex; 253 -webkit-box-orient: horizontal; 254 -webkit-box-direction: normal; 255 -ms-flex-direction: row; 256 flex-direction: row; 257 -ms-flex-wrap: wrap; 258 flex-wrap: wrap; 259 margin-left: -32px; 260 margin-top: -32px; } 261 .o-grid__column--1-1 { 262 width: calc(100% - 32px); } 263 .o-grid__column--1-4 { 264 width: calc(25% - 32px); } 265 .o-grid__column--1-5 { 266 width: calc(20% - 32px); } 267 .o-grid__column--1-2 { 268 width: calc(50% - 32px); } 269 .o-grid__column--3-4 { 270 width: calc(75% - 32px); } 271 .o-grid__column--1-3 { 272 width: calc(33.333% - 32px); } 273 .o-grid__column--2-3 { 274 width: calc(66.666% - 32px); } 275 @media screen and (min-width: 600px) { 276 .o-grid__column--medium-1-2 { 277 width: calc(50% - 32px); } } 278 @media screen and (min-width: 767px) { 279 .o-grid__column--medium-1-3 { 280 width: calc(33.33% - 32px); } } 281 @media screen and (min-width: 600px) { 282 .o-grid__column--medium-2-3 { 283 width: calc(66.666% - 32px); } } 284 @media screen and (min-width: 767px) { 285 .o-grid__column--large-1-2 { 286 width: calc(50% - 32px); } } 287 @media screen and (min-width: 767px) { 288 .o-grid__column--large-1-3 { 289 width: calc(33.33% - 32px); } } 290 @media screen and (min-width: 767px) { 291 .o-grid__column--large-2-3 { 292 width: calc(66.666% - 32px); } } 293 @media screen and (min-width: 767px) { 294 .o-grid__column--large-1-4 { 295 width: calc(25% - 32px); } } 296 @media screen and (min-width: 767px) { 297 .o-grid__column--large-1-5 { 298 width: calc(20% - 32px); } } 299 300 .o-head-up { 301 position: relative; } 302 .o-head-up__item { 303 position: absolute; } 304 .o-head-up__item--top-left { 305 left: 8px; 306 top: 8px; } 307 .o-head-up__item--top-right { 308 right: 8px; 309 top: 8px; } 310 .o-head-up__item--middle-right { 311 right: 8px; 312 top: 50%; 313 -webkit-transform: translateY(-50%); 314 transform: translateY(-50%); } 315 316 .c-header { 317 padding: 16px 16px 32px; 318 position: relative; 319 background-color: #0D3E62; 320 color: #AECEE3; } 321 @media screen and (min-width: 767px) { 322 .c-header { 323 padding: 32px 32px 128px; } } 324 .c-header__content { 325 position: relative; 326 z-index: 10; } 327 .c-header__background { 328 height: 100%; 329 left: 0; 330 opacity: .3; 331 position: absolute; 332 top: 0; 333 width: 100%; 334 background-image: url(../../assets/images/EMBARK_HEADER_ALT_OPTIMIZED.jpg); 335 background-position: center right; 336 background-repeat: no-repeat; 337 background-size: cover; } 338 @media screen and (min-width: 600px) { 339 .c-header__background { 340 opacity: 1; } } 341 .c-header input { 342 border-color: #547E99; 343 background-color: rgba(84, 126, 153, 0.85); 344 color: #fff; } 345 .c-header input::-webkit-input-placeholder { 346 color: #fff; } 347 .c-header input:-moz-placeholder { 348 color: #fff; } 349 .c-header input::-moz-placeholder { 350 color: #fff; } 351 .c-header input:-ms-input-placeholder { 352 color: #fff; } 353 .c-header__top { 354 -webkit-box-align: center; 355 -ms-flex-align: center; 356 align-items: center; 357 display: -webkit-box; 358 display: -ms-flexbox; 359 display: flex; 360 -webkit-box-orient: horizontal; 361 -webkit-box-direction: normal; 362 -ms-flex-direction: row; 363 flex-direction: row; 364 -webkit-box-pack: justify; 365 -ms-flex-pack: justify; 366 justify-content: space-between; } 367 .c-header__body { 368 margin-top: 32px; 369 max-width: 600px; } 370 @media screen and (min-width: 767px) { 371 .c-header__body { 372 margin-top: 64px; } } 373 .c-header .c-title, 374 .c-header .c-subtitle { 375 text-shadow: 0 0 25px rgba(0, 0, 0, 0.6); } 376 377 .c-header--compact { 378 padding-bottom: 50px; } 379 .c-header--compact .c-header__background { 380 opacity: .4; } 381 382 .c-footer { 383 padding: 16px; 384 background-image: url(../../assets/images/rocket-start.svg); 385 background-position: bottom right; 386 background-size: 100%; 387 background-repeat: no-repeat; 388 background-color: #0D3E62; } 389 @media screen and (min-width: 767px) { 390 .c-footer { 391 padding: 32px; } } 392 .c-footer__top { 393 -webkit-box-align: center; 394 -ms-flex-align: center; 395 align-items: center; 396 display: -webkit-box; 397 display: -ms-flexbox; 398 display: flex; 399 -webkit-box-orient: vertical; 400 -webkit-box-direction: normal; 401 -ms-flex-direction: column; 402 flex-direction: column; } 403 @media screen and (min-width: 600px) { 404 .c-footer__top { 405 -webkit-box-orient: horizontal; 406 -webkit-box-direction: normal; 407 -ms-flex-direction: row; 408 flex-direction: row; } } 409 .c-footer__top__title { 410 margin-bottom: 16px; 411 margin-right: 32px; } 412 @media screen and (min-width: 600px) { 413 .c-footer__top__title { 414 margin-bottom: 0; } } 415 .c-footer__body { 416 margin-top: 16px; } 417 .c-footer__bottom { 418 margin-top: 64px; } 419 .c-footer .two-columns { 420 columns: 2; 421 -webkit-columns: 2; 422 -moz-columns: 2; } 423 .c-footer .o-grid__column--1-1 { 424 text-align: center; } 425 @media screen and (min-width: 480px) { 426 .c-footer .o-grid__column--1-1 { 427 text-align: left; } } 428 429 .o-heading { 430 max-width: 600px; 431 margin: 0 auto; } 432 .o-heading__subtitle { 433 margin-top: 8px; } 434 .o-heading__footer { 435 margin-top: 16px; } 436 437 .o-list-bare { 438 margin: 0; 439 padding: 0; 440 list-style: none; 441 margin-top: 8px; } 442 .o-list-bare .o-list-bare__child { 443 margin: 0; 444 padding: 0; 445 list-style: none; 446 margin-top: 16px; } 447 .o-list-bare .o-list-bare__child .o-list-bare__item { 448 margin-left: 1em; 449 line-height: 1.3; } 450 .o-list-bare__item { 451 margin-top: 16px; 452 line-height: 1.3; } 453 .o-list-bare__item:first-child { 454 margin-top: 0; } 455 456 .o-ellipsis { 457 overflow: hidden; 458 text-overflow: ellipsis; 459 white-space: nowrap; } 460 461 .o-list-inline { 462 margin: 0; 463 padding: 0; 464 list-style: none; 465 -webkit-box-align: center; 466 -ms-flex-align: center; 467 align-items: center; 468 display: -webkit-box; 469 display: -ms-flexbox; 470 display: flex; 471 -webkit-box-orient: horizontal; 472 -webkit-box-direction: normal; 473 -ms-flex-direction: row; 474 flex-direction: row; 475 -ms-flex-wrap: wrap; 476 flex-wrap: wrap; 477 margin-left: -32px; 478 margin-top: -8px; } 479 .o-list-inline__item { 480 display: inline-block; 481 margin-left: 32px; 482 margin-top: 8px; 483 vertical-align: middle; } 484 485 @media screen and (min-width: 767px) { 486 .o-guided-content { 487 max-width: 980px; 488 margin-left: auto; 489 margin-right: auto; 490 position: relative; } } 491 492 @media screen and (min-width: 1160px) { 493 .o-guided-content { 494 max-width: 1160px; } } 495 496 @media screen and (min-width: 767px) { 497 .o-guided-content__wrapper { 498 display: -webkit-box; 499 display: -ms-flexbox; 500 display: flex; 501 -webkit-box-orient: horizontal; 502 -webkit-box-direction: normal; 503 -ms-flex-direction: row; 504 flex-direction: row; 505 -ms-flex-wrap: wrap; 506 flex-wrap: wrap; } } 507 508 .o-guided-content__guide { 509 left: 0; 510 height: 100%; 511 position: fixed; 512 top: 0; 513 width: 300px; 514 z-index: 20; 515 -webkit-transform: translateX(-100%); 516 transform: translateX(-100%); 517 -webkit-transition: -webkit-transform .3s; 518 transition: -webkit-transform .3s; 519 transition: transform .3s; 520 transition: transform .3s, -webkit-transform .3s; } 521 @media screen and (min-width: 767px) { 522 .o-guided-content__guide { 523 height: auto; 524 -ms-flex-preferred-size: 300px; 525 flex-basis: 300px; 526 -webkit-box-flex: 0; 527 -ms-flex-positive: 0; 528 flex-grow: 0; 529 margin-right: 32px; 530 padding-right: 32px; 531 position: static; 532 width: 300px; 533 border-right: 1px solid #D6D9DE; 534 -webkit-transform: none; 535 transform: none; } } 536 .o-guided-content__guide.is-active { 537 -webkit-transform: translateX(0); 538 transform: translateX(0); } 539 540 .o-guided-content__content { 541 margin-top: 16px; } 542 @media screen and (min-width: 767px) { 543 .o-guided-content__content { 544 margin-top: 0; 545 width: calc(100% - 350px); } } 546 @media screen and (min-width: 1160px) { 547 .o-guided-content__content { 548 width: calc(100% - 560px); } } 549 .o-guided-content__content h2, .o-guided-content__content h3, .o-guided-content__content p, .o-guided-content__content ul { 550 margin-top: 16px; } 551 .o-guided-content__content a { 552 font-weight: bold; } 553 554 .o-guided-content__addition { 555 display: none; } 556 @media screen and (min-width: 1160px) { 557 .o-guided-content__addition { 558 font-size: 0.9em; 559 bottom: 0; 560 display: block; 561 -ms-flex-preferred-size: 220px; 562 flex-basis: 220px; 563 -webkit-box-flex: 0; 564 -ms-flex-positive: 0; 565 flex-grow: 0; 566 left: 100%; 567 padding: 16px; 568 width: 220px; } } 569 570 .o-overlap { 571 margin-bottom: 30%; } 572 @media screen and (min-width: 1023px) { 573 .o-overlap { 574 margin-bottom: 400px; } } 575 .o-overlap__image { 576 margin-bottom: -30%; } 577 @media screen and (min-width: 1023px) { 578 .o-overlap__image { 579 margin-bottom: -400px; } } 580 581 .o-buttonbar { 582 display: -webkit-box; 583 display: -ms-flexbox; 584 display: flex; 585 -webkit-box-orient: vertical; 586 -webkit-box-direction: normal; 587 -ms-flex-direction: column; 588 flex-direction: column; 589 margin-top: 16px; } 590 @media screen and (min-width: 600px) { 591 .o-buttonbar { 592 -webkit-box-orient: horizontal; 593 -webkit-box-direction: normal; 594 -ms-flex-direction: row; 595 flex-direction: row; 596 margin-left: -32px; } } 597 .o-buttonbar__item { 598 margin-top: 8px; } 599 @media screen and (min-width: 600px) { 600 .o-buttonbar__item { 601 margin-left: 32px; 602 margin-top: 0; } } 603 604 .o-media { 605 display: -webkit-box; 606 display: -ms-flexbox; 607 display: flex; 608 -webkit-box-orient: vertical; 609 -webkit-box-direction: normal; 610 -ms-flex-direction: column; 611 flex-direction: column; } 612 @media screen and (min-width: 1023px) { 613 .o-media { 614 -webkit-box-orient: horizontal; 615 -webkit-box-direction: normal; 616 -ms-flex-direction: row; 617 flex-direction: row; } } 618 .o-media__asset { 619 margin-top: -175px; 620 -webkit-box-ordinal-group: 2; 621 -ms-flex-order: 1; 622 order: 1; } 623 @media screen and (min-width: 1023px) { 624 .o-media__asset { 625 bottom: -200px; 626 margin-top: 0; 627 -webkit-box-ordinal-group: initial; 628 -ms-flex-order: initial; 629 order: initial; 630 position: absolute; 631 right: 0; 632 width: 70%; 633 -webkit-transform: translateX(25%); 634 transform: translateX(25%); } } 635 .o-media__body { 636 -webkit-box-ordinal-group: 3; 637 -ms-flex-order: 2; 638 order: 2; } 639 @media screen and (min-width: 1023px) { 640 .o-media__body { 641 -webkit-box-ordinal-group: initial; 642 -ms-flex-order: initial; 643 order: initial; 644 padding-right: 32px; 645 width: 50%; } } 646 647 .o-standard-page h2, .o-standard-page h3, .o-standard-page p, .o-standard-page ul, .o-standard-page .c-notification { 648 margin-top: 16px; } 649 650 .o-standard-page h1, .o-standard-page h2, .o-standard-page h3 { 651 font-weight: 500; } 652 653 .o-standard-page h1, .o-standard-page h2, .o-standard-page h3, .o-standard-page h4 { 654 border-bottom: 1px dotted #D6D9DE; 655 padding-bottom: 0.1em; 656 padding-top: 0.2em; } 657 .o-standard-page h1:hover .icon, .o-standard-page h2:hover .icon, .o-standard-page h3:hover .icon, .o-standard-page h4:hover .icon { 658 display: inline-block; } 659 .o-standard-page h1 a .icon, .o-standard-page h2 a .icon, .o-standard-page h3 a .icon, .o-standard-page h4 a .icon { 660 display: none; } 661 662 .o-standard-page h1 { 663 font-size: 3.4rem; } 664 665 .o-standard-page h2 { 666 font-size: 2.6rem; } 667 668 .o-standard-page h3 { 669 font-size: 2.2rem; } 670 671 .o-standard-page h4 { 672 margin-top: 1em; } 673 674 .o-standard-page p { 675 line-height: 1.5; } 676 677 .o-standard-page p code, .o-standard-page li code { 678 background: #f0f0f0; 679 padding: 0.05em 0.2em; 680 border-radius: 0.15em; 681 border: 1px solid #e0e0e0; } 682 683 .o-standard-page li { 684 margin-top: 16px; } 685 686 .c-icon { 687 display: inline-block; 688 fill: currentColor; 689 height: 24px; 690 stroke-width: 0; 691 stroke: currentColor; 692 vertical-align: baseline; 693 width: 24px; } 694 695 .c-icon--xs { 696 height: 16px; 697 width: 16px; } 698 699 .c-icon--s { 700 height: 24px; 701 width: 24px; } 702 703 .c-icon--m { 704 height: 32px; 705 width: 32px; } 706 707 .c-icon--l { 708 height: 48px; 709 width: 48px; } 710 711 .c-icon--xl { 712 height: 64px; 713 width: 64px; } 714 715 .c-button { 716 cursor: pointer; 717 display: inline-block; 718 padding: 16px 32px; 719 vertical-align: top; 720 -webkit-appearance: none; 721 -moz-appearance: none; 722 border-radius: 5px; 723 border: 1px solid transparent; 724 border-radius: 5px; 725 background: #FAB266; 726 color: #fff; 727 font-size: 1.8rem; 728 font-weight: bold; 729 line-height: 1; 730 text-align: center; 731 text-decoration: none; 732 text-transform: uppercase; } 733 .c-button:hover { 734 border-color: #FAB266; 735 background-color: transparent; 736 color: #FAB266; } 737 .c-button:focus { 738 text-decoration: none; } 739 740 .c-button--quite { 741 border-color: #547E99; 742 background-color: #547E99; 743 color: #fff; } 744 .c-button--quite:hover { 745 border-color: #AECEE3; 746 background-color: transparent; 747 color: #AECEE3; } 748 749 .c-button--destructive { 750 border-color: #E73B3B; 751 background-color: #E73B3B; 752 color: #fff; } 753 .c-button--destructive:hover { 754 border-color: #E73B3B; 755 background-color: transparent; 756 color: #E73B3B; } 757 758 .c-button--ghost { 759 border-color: #fff; 760 background-color: #fff; 761 color: #FAB266; } 762 763 .c-button--plain { 764 border-color: transparent; 765 background-color: transparent; 766 color: #FAB266; } 767 768 .c-button--minion { 769 padding: 8px 16px; 770 font-size: 1.8rem; } 771 772 .c-button--stateless { 773 cursor: default; 774 background-color: #547E99; 775 font-weight: normal; 776 text-transform: initial; } 777 .c-button--stateless:hover { 778 border-color: #547E99; 779 background-color: #547E99; 780 color: #fff; } 781 782 .c-button--squared { 783 padding: 8px; 784 line-height: 0; } 785 .c-button--squared .c-icon { 786 display: block; 787 line-height: 0; } 788 789 .c-box { 790 overflow: hidden; 791 padding: 24px 20px; 792 position: relative; 793 border-radius: 5px; 794 border: 1px solid #D6D9DE; 795 border-radius: 0; 796 background-repeat: no-repeat; 797 background-position: top center; 798 background-size: 100%; } 799 @media screen and (min-width: 767px) { 800 .c-box { 801 padding: 48px 40px; 802 background-size: 1228px 340px; } } 803 .c-box:focus { 804 text-decoration: none; } 805 .c-box__title { 806 margin-top: 16px; } 807 .c-box__subtitle { 808 margin-top: 4px; } 809 .c-box__footer { 810 margin-top: 16px; } 811 .c-box__body { 812 position: relative; 813 z-index: 10; } 814 .c-box__overlay { 815 height: 100%; 816 left: 0; 817 opacity: .6; 818 position: absolute; 819 top: 0; 820 width: 100%; 821 z-index: 5; 822 border-radius: 5px; 823 background: #000; } 824 .c-box__offset { 825 position: absolute; 826 right: 16px; 827 top: 16px; } 828 .c-box--universe .c-box { 829 color: #fff; } 830 .c-box--universe .c-box .u-link-uniform { 831 color: #fff !important; } 832 833 .c-box--edgy { 834 border-radius: 0; } 835 836 .c-box--cover { 837 display: -webkit-box; 838 display: -ms-flexbox; 839 display: flex; 840 -webkit-box-orient: vertical; 841 -webkit-box-direction: normal; 842 -ms-flex-direction: column; 843 flex-direction: column; 844 -webkit-box-pack: end; 845 -ms-flex-pack: end; 846 justify-content: flex-end; 847 border: 0; 848 background-position: center; 849 background-repeat: no-repeat; 850 background-size: cover; 851 color: #fff; } 852 853 .c-box--spot { 854 background-color: #007e7f; 855 background-image: linear-gradient(62deg, #003e65 0%, #51b988 100%); 856 color: #fff; } 857 858 .c-box--whisper { 859 background-color: #fff; 860 color: #6E7786; } 861 862 .c-box--dark { 863 background-color: #0D3E62; 864 color: #AECEE3; } 865 866 .c-box--universe { 867 background-color: #080E1A; 868 color: #6E7786; } 869 870 .c-box--visible { 871 overflow: visible; } 872 873 .c-box--unframed { 874 padding: 0; 875 border: none; } 876 877 .c-title { 878 font-size: 4.8rem; 879 line-height: 1; } 880 @media screen and (min-width: 767px) { 881 .c-title { 882 font-size: 5.8rem; } } 883 884 .c-category-title { 885 font-size: 1.8rem; 886 font-weight: 700; 887 text-transform: uppercase; } 888 889 .c-section-title { 890 font-size: 3.6rem; 891 line-height: 1; } 892 @media screen and (min-width: 767px) { 893 .c-section-title { 894 font-size: 4.8rem; } } 895 896 .c-subtitle { 897 font-size: 1.8rem; } 898 @media screen and (min-width: 767px) { 899 .c-subtitle { 900 font-size: 2.4rem; } } 901 902 .c-title-level-2 { 903 font-size: 3rem; 904 font-weight: 700; } 905 906 .c-title-level-3 { 907 font-size: 2.4rem; 908 font-weight: 700; } 909 910 .c-body-title { 911 font-size: 18px; 912 font-weight: 700; } 913 914 .c-meta { 915 font-size: 1.8rem; } 916 917 .c-link { 918 position: relative; 919 font-weight: 700; } 920 .c-link:before { 921 content: ''; 922 height: 2px; 923 margin-top: 2px; 924 position: absolute; 925 top: 100%; 926 width: 100%; 927 background: #FAB266; } 928 .c-link:hover:before, .c-link:focus:before { 929 display: none; } 930 931 .c-link--ghost { 932 color: #fff; } 933 .c-link--ghost:before { 934 background-color: #fff; } 935 936 .c-tag { 937 -webkit-box-align: center; 938 -ms-flex-align: center; 939 align-items: center; 940 display: -webkit-inline-box; 941 display: -ms-inline-flexbox; 942 display: inline-flex; 943 -webkit-box-orient: horizontal; 944 -webkit-box-direction: normal; 945 -ms-flex-direction: row; 946 flex-direction: row; 947 padding: 8px; 948 border-radius: 5px; 949 color: #fff; 950 font-size: 1.5rem; 951 font-weight: bold; 952 line-height: .8; } 953 .c-tag__value { 954 margin-left: 8px; } 955 956 .c-tag--light { 957 background-color: #547E99; } 958 959 .c-avatar { 960 height: 80px; 961 width: 80px; 962 border-radius: 150px; } 963 964 .c-avatar-small { 965 height: 40px; 966 width: 40px; 967 border-radius: 150px; } 968 969 .c-notification { 970 padding: 16px; 971 border: 1px solid #D6D9DE; 972 border-radius: 5px; } 973 .c-notification p:first-child { 974 margin-top: 0; } 975 .c-notification a { 976 border-bottom: 1px solid #080E1A; 977 color: #080E1A; } 978 .c-notification a:hover { 979 border-bottom: 0; } 980 981 .c-notification--danger { 982 border-color: #E73B3B; 983 background: #FADFD8; } 984 985 .c-notification--success { 986 border-color: #90CCBC; 987 background: #EBF5EF; } 988 989 .c-notification--info { 990 border-color: #9DB2E5; 991 background: #CFDFF4; } 992 993 .c-navigation { 994 height: 100%; 995 position: fixed; 996 left: 0; 997 top: 0; 998 width: 320px; 999 z-index: 20; 1000 background: #fff; 1001 -webkit-transform: translateX(-100%); 1002 transform: translateX(-100%); 1003 -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s; 1004 transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s; 1005 transition: transform 0.3s, box-shadow 0.3s; 1006 transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s; } 1007 @media screen and (min-width: 767px) { 1008 .c-navigation { 1009 height: auto; 1010 position: static; 1011 width: auto; 1012 background: transparent; 1013 -webkit-box-shadow: none; 1014 box-shadow: none; 1015 -webkit-transform: none; 1016 transform: none; } } 1017 .c-navigation.is-active { 1018 -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 1019 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 1020 -webkit-transform: translateX(0); 1021 transform: translateX(0); } 1022 @media screen and (min-width: 767px) { 1023 .c-navigation.is-active { 1024 -webkit-box-shadow: none; 1025 box-shadow: none; } } 1026 .c-navigation__list { 1027 margin: 0; 1028 padding: 0; 1029 list-style: none; } 1030 @media screen and (min-width: 767px) { 1031 .c-navigation__list { 1032 -webkit-box-align: center; 1033 -ms-flex-align: center; 1034 align-items: center; 1035 display: -webkit-box; 1036 display: -ms-flexbox; 1037 display: flex; 1038 -webkit-box-orient: horizontal; 1039 -webkit-box-direction: normal; 1040 -ms-flex-direction: row; 1041 flex-direction: row; } } 1042 .c-navigation__item { 1043 padding-bottom: 16px; 1044 padding-top: 16px; 1045 border-top: 1px solid #D6D9DE; } 1046 @media screen and (min-width: 767px) { 1047 .c-navigation__item { 1048 margin-left: 16px; 1049 padding-bottom: 0; 1050 padding-top: 0; 1051 border-top: 0; } } 1052 .c-navigation__item:first-child { 1053 padding-top: 0; 1054 border-top: 0; } 1055 .c-navigation__trigger { 1056 background: transparent; 1057 border: 0; } 1058 .c-navigation__close { 1059 background: transparent; 1060 border: 0; } 1061 @media screen and (min-width: 767px) { 1062 .c-navigation__close { 1063 display: none; } } 1064 .c-navigation__anchor { 1065 display: block; 1066 color: #080E1A; } 1067 @media screen and (min-width: 767px) { 1068 .c-navigation__anchor { 1069 color: #fff; } } 1070 .c-navigation__anchor.is-active { 1071 font-weight: bold; } 1072 .c-navigation__header { 1073 -webkit-box-align: center; 1074 -ms-flex-align: center; 1075 align-items: center; 1076 display: -webkit-box; 1077 display: -ms-flexbox; 1078 display: flex; 1079 -webkit-box-orient: horizontal; 1080 -webkit-box-direction: normal; 1081 -ms-flex-direction: row; 1082 flex-direction: row; 1083 -webkit-box-pack: justify; 1084 -ms-flex-pack: justify; 1085 justify-content: space-between; 1086 padding: 16px; 1087 border-bottom: 1px solid #D6D9DE; } 1088 @media screen and (min-width: 767px) { 1089 .c-navigation__header { 1090 display: none; } } 1091 .c-navigation__body { 1092 padding: 16px; } 1093 @media screen and (min-width: 767px) { 1094 .c-navigation__body { 1095 margin-top: 8px; 1096 padding: 0; 1097 line-height: 1; } } 1098 .c-navigation__subnav { 1099 padding-left: 16px; } 1100 1101 .c-checklist { 1102 margin: 0; 1103 padding: 0; 1104 list-style: none; 1105 color: #6E7786; } 1106 .c-checklist__item { 1107 display: -webkit-box; 1108 display: -ms-flexbox; 1109 display: flex; 1110 -webkit-box-orient: horizontal; 1111 -webkit-box-direction: normal; 1112 -ms-flex-direction: row; 1113 flex-direction: row; 1114 margin-top: 16px; 1115 padding-top: 4px; } 1116 .c-checklist__circle { 1117 display: block; 1118 height: 32px; 1119 margin-right: 16px; 1120 margin-top: -4px; 1121 position: relative; 1122 width: 32px; 1123 border-radius: 150px; 1124 background: #AECEE3; } 1125 .c-checklist__circle .c-checklist__icon { 1126 height: 16px; 1127 left: 50%; 1128 position: absolute; 1129 top: 50%; 1130 width: 16px; 1131 color: #547E99; 1132 -webkit-transform: translate(-50%, -50%); 1133 transform: translate(-50%, -50%); } 1134 1135 .c-guide { 1136 overflow: auto; 1137 background: #fff; } 1138 .c-guide__header { 1139 display: -webkit-box; 1140 display: -ms-flexbox; 1141 display: flex; 1142 -webkit-box-orient: horizontal; 1143 -webkit-box-direction: normal; 1144 -ms-flex-direction: row; 1145 flex-direction: row; 1146 -webkit-box-pack: justify; 1147 -ms-flex-pack: justify; 1148 justify-content: space-between; 1149 padding: 16px; 1150 border-bottom: 1px solid #D6D9DE; } 1151 .c-guide__body { 1152 overflow: auto; 1153 padding: 16px; } 1154 .c-guide a.is-active { 1155 font-weight: bold; } 1156 .c-guide.is-active { 1157 -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 1158 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } 1159 1160 .highlight { 1161 margin-left: 0; 1162 margin-right: 0; 1163 margin-top: 1em; 1164 margin-bottom: 0; 1165 display: block; 1166 overflow: auto; } 1167 .highlight.hljs, .highlight .hljs { 1168 border-radius: 0.3em; } 1169 .highlight .hljs { 1170 margin-top: 0; 1171 margin-bottom: 0; } 1172 .highlight table { 1173 display: block; 1174 width: 100%; 1175 border: 0; } 1176 .highlight tbody, 1177 .highlight tr, 1178 .highlight td { 1179 display: block; 1180 padding: 0; 1181 border: 0; } 1182 1183 figure.highlight { 1184 margin-top: 0; } 1185 1186 .c-meta { 1187 font-size: 1.5rem; 1188 position: relative; } 1189 .c-meta a { 1190 font-weight: normal; 1191 color: #0D3E62; } 1192 .c-meta a .c-icon { 1193 vertical-align: middle; } 1194 1195 .c-logo { 1196 display: block; 1197 height: 50px; 1198 width: 136px; 1199 background: url(../../assets/images/logo.svg) no-repeat; 1200 background-size: 100%; 1201 color: transparent; 1202 font-size: 0; 1203 line-height: 0; } 1204 .c-logo--negative { 1205 background-image: url(../../assets/images/logo-negative.svg); } 1206 1207 .u-list-reset { 1208 margin: 0; 1209 padding: 0; 1210 list-style: none; } 1211 1212 .u-hidden { 1213 display: none; } 1214 1215 .u-hidden-until-medium { 1216 display: none; } 1217 @media screen and (min-width: 600px) { 1218 .u-hidden-until-medium { 1219 display: inherit; } } 1220 1221 .u-hidden-until-large { 1222 display: none; } 1223 @media screen and (min-width: 767px) { 1224 .u-hidden-until-large { 1225 display: inherit; } } 1226 1227 @media screen and (min-width: 600px) { 1228 .u-hidden-medium-up { 1229 display: none; } } 1230 1231 @media screen and (min-width: 767px) { 1232 .u-hidden-large-up { 1233 display: none; } } 1234 1235 .u-text-normal { 1236 color: #080E1A !important; 1237 text-decoration: none; } 1238 1239 .u-text-death { 1240 color: #6E7786 !important; } 1241 1242 .u-text-light { 1243 color: #547E99 !important; } 1244 1245 .u-text-ghost { 1246 color: #fff !important; } 1247 1248 .u-text-danger { 1249 color: #E73B3B !important; } 1250 1251 .u-link { 1252 color: #FAB266 !important; } 1253 .u-link:hover, .u-link:focus { 1254 color: #FBBE7D !important; } 1255 1256 .u-link-uniform { 1257 color: #080E1A !important; } 1258 .u-link-uniform:hover, .u-link-uniform:focus, .u-link-uniform.is-active { 1259 color: #FBBE7D !important; } 1260 1261 .u-link-ghost { 1262 color: #fff !important; } 1263 .u-link-ghost:hover, .u-link-ghost:focus { 1264 color: #AECEE3 !important; } 1265 1266 pre { 1267 position: relative; } 1268 1269 pre .c-button { 1270 position: absolute; 1271 right: 8px; 1272 top: 8px; }