|
|
@@ -1,1537 +1,1537 @@
|
|
|
-/*
|
|
|
- * GENERAL
|
|
|
- */
|
|
|
-
|
|
|
-// fonts
|
|
|
-@font-face {
|
|
|
- font-family:"Fira Sans";
|
|
|
- src:url("../fonts/fira-sans-v6-latin-300.eot");
|
|
|
- src:url("../fonts/fira-sans-v6-latin-300.eot?#iefix") format("embedded-opentype"),
|
|
|
- url("../fonts/fira-sans-v6-latin-300.ttf?") format("truetype"),
|
|
|
- url("../fonts/fira-sans-v6-latin-300.woff?") format("woff"),
|
|
|
- url("../fonts/fira-sans-v6-latin-300.svg?") format("svg");
|
|
|
- font-weight:300;
|
|
|
- font-style:normal;
|
|
|
- font-display: swap;
|
|
|
-}
|
|
|
-@font-face {
|
|
|
- font-family:"Fira Sans";
|
|
|
- src:url("../fonts/fira-sans-v6-latin-regular.eot");
|
|
|
- src:url("../fonts/fira-sans-v6-latin-regular.eot?#iefix") format("embedded-opentype"),
|
|
|
- url("../fonts/fira-sans-v6-latin-regular.ttf?") format("truetype"),
|
|
|
- url("../fonts/fira-sans-v6-latin-regular.woff?") format("woff"),
|
|
|
- url("../fonts/fira-sans-v6-latin-regular.svg?") format("svg");
|
|
|
- font-weight:normal;
|
|
|
- font-style:normal;
|
|
|
- font-display: swap;
|
|
|
-}
|
|
|
-@font-face {
|
|
|
- font-family:"Fira Sans";
|
|
|
- src:url("../fonts/fira-sans-v6-latin-700.eot");
|
|
|
- src:url("../fonts/fira-sans-v6-latin-700.eot?#iefix") format("embedded-opentype"),
|
|
|
- url("../fonts/fira-sans-v6-latin-700.ttf?") format("truetype"),
|
|
|
- url("../fonts/fira-sans-v6-latin-700.woff?") format("woff"),
|
|
|
- url("../fonts/fira-sans-v6-latin-700.svg?") format("svg");
|
|
|
- font-weight:600;
|
|
|
- font-style:normal;
|
|
|
- font-display: swap;
|
|
|
-}
|
|
|
-
|
|
|
-h2 {
|
|
|
- margin-bottom: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-h3, h4, h5, h6,
|
|
|
-.h3, .h4, .h5, .h6 {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-h1, h2, h3, h4, h5, h6,
|
|
|
-.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
|
- &:first-child {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-h3,
|
|
|
-.h3 {
|
|
|
- margin-top: 40px;
|
|
|
- margin-bottom: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-h4,
|
|
|
-.h4 {
|
|
|
- margin-top: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-h4 + hr {
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.dropdown-item-important {
|
|
|
- color: rgba($antrazit, .6);
|
|
|
- font-weight: bold;
|
|
|
- @include hover-focus() {
|
|
|
- color: $body-color;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.dropdown-item-important:last-child {
|
|
|
- margin-top: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-down(md) {
|
|
|
- .dropdown-menu {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(lg) {
|
|
|
- .dropdown-divider {
|
|
|
- margin-left: $dropdown-item-padding-x;
|
|
|
- margin-right: $dropdown-item-padding-x;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-h2 {
|
|
|
- color: $primary;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.text-muted-dark {
|
|
|
- color: $gray-700;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-back {
|
|
|
- padding-left: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-white {
|
|
|
- @include button-variant($white, $white);
|
|
|
- color: $primary;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-hero,
|
|
|
-.ch-ggs-web-suite-cta-box {
|
|
|
- .btn-white:hover,
|
|
|
- .btn-white:focus {
|
|
|
- color: $primary;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//modal
|
|
|
-.modal-content {
|
|
|
- padding: 40px 40px 60px;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-header .close {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-header {
|
|
|
- padding: 0 0 10px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-header [data-dismiss*="modal"] {
|
|
|
- align-self: center;
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-header [data-dismiss*="modal"] .ifc {
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-footer {
|
|
|
- padding: 0;
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-title {
|
|
|
- color: $primary;
|
|
|
- font-size: $font-size-lg;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-body {
|
|
|
- padding: $common-padding 0;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//Forms
|
|
|
-
|
|
|
-form > .form-group:first-child > h3:first-child,
|
|
|
-form > .form-group:first-child > .h3:first-child {
|
|
|
- margin-top: 1rem;
|
|
|
-}
|
|
|
-
|
|
|
-label {
|
|
|
- margin-bottom: .25rem;
|
|
|
-}
|
|
|
-
|
|
|
-.input-group {
|
|
|
- background: white;
|
|
|
-}
|
|
|
-
|
|
|
-.input-group .btn {
|
|
|
- border-width: $input-border-width;
|
|
|
- border-color: $input-border-color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-input-group-iconed .btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 38px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-//links
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-link {
|
|
|
- margin-top: auto;
|
|
|
- font-weight: bold;
|
|
|
- color: $antrazit60;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: color;
|
|
|
- .ifc {
|
|
|
- margin-left: 5px;
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- transform: translateX(0);
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: transform;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article:hover,
|
|
|
-.ch-ggs-web-suite-card-simple:hover,
|
|
|
-.ch-ggs-web-suite-card-simple:focus {
|
|
|
- .ch-ggs-web-suite-card-link {
|
|
|
- color: $primary;
|
|
|
- .ifc {
|
|
|
- transform: translateX(8px);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.ch-ggs-web-suite-file-input-box {
|
|
|
- background: $antrazit05;
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-// seelct
|
|
|
-
|
|
|
-.ch-ggs-web-suite-select {
|
|
|
- position: relative;
|
|
|
- background: $input-bg;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-select:after {
|
|
|
- content: "\e901";
|
|
|
- font-family: icomoon;
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- top: 0px;
|
|
|
- right: 0px;
|
|
|
- bottom: 0px;
|
|
|
- width: 2.2em;
|
|
|
- margin: auto;
|
|
|
- pointer-events: none;
|
|
|
- transform: scale(1.5);
|
|
|
-}
|
|
|
-
|
|
|
-//background
|
|
|
-.ch-ggs-web-suite-select:before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- right: 0px;
|
|
|
- bottom: 0px;
|
|
|
- width: 2.2em;
|
|
|
- background: $antrazit15;
|
|
|
- border: 1px solid $input-border-color;
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-select select {
|
|
|
- background: transparent;
|
|
|
- width: 100%;
|
|
|
- padding-right: 2.5em;
|
|
|
- appearance: none;
|
|
|
- // Disable ugly ass outline on firefox
|
|
|
- &:-moz-focusring {
|
|
|
- color: transparent;
|
|
|
- text-shadow: 0 0 0 #000;
|
|
|
- }
|
|
|
- // Disable default arrow on IE 11+
|
|
|
- &::-ms-expand {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// IE 9 only
|
|
|
-@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
|
|
|
- .ch-ggs-web-suite-select{
|
|
|
- select {
|
|
|
- padding-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &:after, &:before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-// step navigation
|
|
|
-
|
|
|
-$step-number-block-margin: 20px;
|
|
|
-$step-margin: 30px;
|
|
|
-
|
|
|
-ol.ch-ggs-web-suite-order-steps {
|
|
|
- counter-reset: section;
|
|
|
- list-style-type: none;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: -$step-margin/4;
|
|
|
- padding-left: 0;
|
|
|
-
|
|
|
- li.error,
|
|
|
- li.loading,
|
|
|
- li.done,
|
|
|
- li.active {
|
|
|
- color: $primary;
|
|
|
-
|
|
|
- & .nav-link:before {
|
|
|
- background: $white;
|
|
|
- color: $primary;
|
|
|
- border-color: $white;
|
|
|
- }
|
|
|
- & .nav-link:after {
|
|
|
- background: $primary;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- li {
|
|
|
- display: block;
|
|
|
- position: relative;
|
|
|
- color: $antrazit25;
|
|
|
- margin-bottom: $step-margin/4;
|
|
|
- .nav-link {
|
|
|
- padding: 0px 30px 0px 0;
|
|
|
- background: $antrazit05;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- z-index: 0;
|
|
|
- &:before {
|
|
|
- // counter-increment: section;
|
|
|
- // content: counters(section,"");
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- flex: 0 0 2em;
|
|
|
- width: 2em;
|
|
|
- height: 2em;
|
|
|
- border-radius: 2em;
|
|
|
- line-height: 2em;
|
|
|
- margin: $step-number-block-margin $step-number-block-margin*2 $step-number-block-margin $step-number-block-margin;
|
|
|
- font-size: 1.25rem;
|
|
|
- background: $antrazit08;
|
|
|
- color: $antrazit25;
|
|
|
- border: 1px solid $antrazit25;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- &:after {
|
|
|
- z-index: -1;
|
|
|
- content: "";
|
|
|
- background: $antrazit08;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: calc(2em + #{$step-number-block-margin*2});
|
|
|
- height: calc(2em + #{$step-number-block-margin*2});
|
|
|
- font-size: 1.25rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-order-step-link-multi {
|
|
|
- // display: inline-flex;
|
|
|
- // flex-direction: column;
|
|
|
- position: relative;
|
|
|
- top: -10px;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- a:link:not(:hover):not(:focus),
|
|
|
- a:visited:not(:hover):not(:focus) {
|
|
|
- color: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- li.active,
|
|
|
- li.error,
|
|
|
- li.done {
|
|
|
- .nav-link {
|
|
|
- &:before {
|
|
|
- content: unicode("e900");
|
|
|
- font-family: $font-family-icons;
|
|
|
- line-height: 1.8em;
|
|
|
- speak: none;
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- font-variant: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- li.error {
|
|
|
- .nav-link {
|
|
|
- &:before {
|
|
|
- content: unicode("e906");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- li.loading {
|
|
|
- .nav-link {
|
|
|
- &:before {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-order-steps-loader {
|
|
|
- position: absolute;
|
|
|
- left: 19px;
|
|
|
- top: 19px;
|
|
|
- width: calc(2em + 10px);
|
|
|
- height: calc(2em + 10px);
|
|
|
- border-width: 0.2em;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// step navigation
|
|
|
-ol.ch-ggs-web-suite-steps {
|
|
|
- counter-reset: section;
|
|
|
- list-style-type: none;
|
|
|
- display: inline-block;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: -15px;
|
|
|
- margin-left: -30px;
|
|
|
- padding-left: 0;
|
|
|
-
|
|
|
- li.active {
|
|
|
- color: $primary;
|
|
|
-
|
|
|
- &::before {
|
|
|
- border-color: $primary;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- li {
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- color: $antrazit60;
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- margin: 0 30px 15px;
|
|
|
- &::before {
|
|
|
- counter-increment: section;
|
|
|
- content: counters(section,"");
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- margin-right: 10px;
|
|
|
- width: 2em;
|
|
|
- height: 2em;
|
|
|
- border-radius: 2em;
|
|
|
- background: #fff;
|
|
|
- border: 1px solid #ababab;
|
|
|
- border-top-color: rgb(171, 171, 171);
|
|
|
- border-right-color: rgb(171, 171, 171);
|
|
|
- border-bottom-color: rgb(171, 171, 171);
|
|
|
- border-left-color: rgb(171, 171, 171);
|
|
|
- text-align: center;
|
|
|
- line-height: 2em;
|
|
|
- font-size: 1.25rem;
|
|
|
- }
|
|
|
-
|
|
|
- a:link:not(:hover):not(:focus),
|
|
|
- a:visited:not(:hover):not(:focus) {
|
|
|
- color: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// image
|
|
|
-
|
|
|
-.ch-ggs-web-suite-image {
|
|
|
- margin-bottom: $paragraph-margin-bottom;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// download
|
|
|
-
|
|
|
-.ch-ggs-web-suite-download {
|
|
|
- display: flex;
|
|
|
- margin-bottom: $paragraph-margin-bottom;
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-download {
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-download-icon {
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- flex: 0 0 70px;
|
|
|
- background: $primary;
|
|
|
- color: $white;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: $grid-gutter-width;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: background;
|
|
|
- a.ch-ggs-web-suite-download:hover &,
|
|
|
- a.ch-ggs-web-suite-download:focus & {
|
|
|
- background: $link-hover-color;
|
|
|
- }
|
|
|
- > .ifc {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-download-info > *:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-download-title {
|
|
|
- font-weight: bold;
|
|
|
- color: $primary;
|
|
|
- display: inline-block;
|
|
|
- margin-bottom: 5px;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: color;
|
|
|
- &:first-child {
|
|
|
- margin-top: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- a.ch-ggs-web-suite-download:hover &,
|
|
|
- a.ch-ggs-web-suite-download:focus & {
|
|
|
- color: $link-hover-color;
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-download-text {
|
|
|
- color: $text-muted;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// cards
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-group {
|
|
|
- margin-bottom: 70px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-holder {
|
|
|
- margin-bottom: -30px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- border-bottom-width: 1px;
|
|
|
- border-bottom-style: solid;
|
|
|
- border-bottom-color: #efefef;
|
|
|
- box-shadow: 0 0 15px 0 rgba(0,0,0,0);
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: box-shadow;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-card {
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-img-fake {
|
|
|
- background: $antrazit08;
|
|
|
- color: $primary;
|
|
|
- display: flex;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: background-color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-img-fake:before {
|
|
|
- content: "";
|
|
|
- display: table;
|
|
|
- float: left;
|
|
|
- padding-bottom: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-img-fake .ifc {
|
|
|
- font-size: 120px;
|
|
|
- align-self: center;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- transition: $transition-base;
|
|
|
- text-shadow: 4px 8px 12px rgba(black, 0);
|
|
|
- transition-property: text-shadow, color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-img-fake .ifc-train-front {
|
|
|
- font-size: 130px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-img-fake .ifc-sea-ship-with-containers {
|
|
|
- font-size: 150px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-img-fake .ifc-air-transport {
|
|
|
- font-size: 150px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake,
|
|
|
-.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake {
|
|
|
- background: $primary-d-100;
|
|
|
- color: white;
|
|
|
- text-shadow: 4px 8px 12px rgba(black, 0.2);
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake .ifc,
|
|
|
-.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake .ifc {
|
|
|
- text-shadow: 4px 8px 12px rgba(black, 0.2);
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-main {
|
|
|
- flex: 1 1 auto;
|
|
|
- padding: 30px 15px 15px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card:hover,
|
|
|
-.ch-ggs-web-suite-card:focus {
|
|
|
- box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card .btn {
|
|
|
- background: white;
|
|
|
- border-color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card .btn,
|
|
|
-.ch-ggs-web-suite-card .btn .ifc {
|
|
|
- color: $antrazit60;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card:hover .btn,
|
|
|
-.ch-ggs-web-suite-card:focus .btn {
|
|
|
- background: $antrazit15;
|
|
|
- border-color: $antrazit15;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-title {
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 1.25rem;
|
|
|
- color: $body-color;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-title,
|
|
|
-.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-title {
|
|
|
- color: $primary-d-100;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-text {
|
|
|
- color: $body-color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-group {
|
|
|
- margin-bottom: 70px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-holder {
|
|
|
- margin-bottom: -30px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain {
|
|
|
- padding: 25px 25px 0px;
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: $white;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-card-plain {
|
|
|
- text-decoration: none;
|
|
|
- &,
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- color: $body-color;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-img-icon {
|
|
|
- color: $primary;
|
|
|
- display: flex;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: background-color;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-img-icon .ifc {
|
|
|
- font-size: 40px;
|
|
|
- align-self: center;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-main {
|
|
|
- flex: 1 1 auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-title {
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: $h4-font-size;
|
|
|
- color: $body-color;
|
|
|
- margin-bottom: 0.75em;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-plain-title,
|
|
|
-.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-plain-title {
|
|
|
- color: $primary-d-100;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-plain-text {
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-md;
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-group {
|
|
|
- margin-bottom: 70px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-holder {
|
|
|
- margin-bottom: -30px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple {
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: $white;
|
|
|
- margin-bottom: 30px;
|
|
|
- &:after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- z-index: -1;
|
|
|
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 8px 24px 0 rgba(0,0,0,0.2);
|
|
|
- opacity: 0;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: opacity;
|
|
|
- }
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- z-index: -1;
|
|
|
- border: 3px solid $primary;
|
|
|
- opacity: 0;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: opacity;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple:hover,
|
|
|
-.ch-ggs-web-suite-card-simple:focus {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-card-simple {
|
|
|
- text-decoration: none;
|
|
|
- &,
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- color: $body-color;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-img-icon {
|
|
|
- color: $primary;
|
|
|
- display: flex;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: background-color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-img-icon .ifc {
|
|
|
- margin-top: 60px;
|
|
|
- font-size: 60px;
|
|
|
- align-self: center;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-main {
|
|
|
- flex: 1 1 auto;
|
|
|
- padding: 25px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-title {
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 1.25rem;
|
|
|
- color: $body-color;
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple:hover .ch-ggs-web-suite-card-simple-title,
|
|
|
-.ch-ggs-web-suite-card-simple:focus .ch-ggs-web-suite-card-simple-title {
|
|
|
- color: $primary-d-100;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-simple-text {
|
|
|
- color: $body-color;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// article
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article {
|
|
|
- margin-bottom: 90px;
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-article {
|
|
|
- color: inherit;
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-content {
|
|
|
- padding: 40px 25px 0;
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
-
|
|
|
- > *:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-title {
|
|
|
- color: $primary;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: color;
|
|
|
-
|
|
|
- .ch-ggs-web-suite-article:hover & {
|
|
|
- color: $primary-d-100;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(md) {
|
|
|
- .ch-ggs-web-suite-article-content {
|
|
|
- padding: 40px 25px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(lg) {
|
|
|
- .ch-ggs-web-suite-article {
|
|
|
- margin-bottom: 120px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// link with icons
|
|
|
-
|
|
|
-.ch-ggs-web-suite-icon-link {
|
|
|
- display: inline-flex;
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-icon-link {
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-icon-link:hover,
|
|
|
-.ch-ggs-web-suite-icon-link:focus {
|
|
|
- opacity: 0.8;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-icon-link .ifc {
|
|
|
- margin-right: 10px;
|
|
|
- top: 5px;
|
|
|
- width: 15px;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * STEP 3
|
|
|
- */
|
|
|
-
|
|
|
-.ch-ggs-web-suite-dropdown .btn-block + .btn-block {
|
|
|
- margin-top: 0.3125rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-btn-group {
|
|
|
- margin-top: -$btn-block-spacing-y;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-btn-group-btn-group .btn {
|
|
|
- margin-top: $btn-block-spacing-y;
|
|
|
-}
|
|
|
-
|
|
|
-#ch-ggs-web-suite-packing-details {
|
|
|
- background-color: $antrazit08;
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-packing-cmds a {
|
|
|
- color: $antrazit25;
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-packing-cmds a .ifc {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-top: -10px;
|
|
|
- margin-bottom: -10px;
|
|
|
- font-size: 20px;
|
|
|
- color: $body-color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-packing-cmds a:hover,
|
|
|
-.ch-ggs-web-suite-packing-cmds a:focus,
|
|
|
-.ch-ggs-web-suite-packing-cmds a:hover .ifc,
|
|
|
-.ch-ggs-web-suite-packing-cmds a:focus .ifc {
|
|
|
- color: $primary;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//step 4
|
|
|
-
|
|
|
-.ch-ggs-web-suite-steps-pricing-details {
|
|
|
- margin-bottom: $common-padding;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-price {
|
|
|
- font-size: $font-size-xl;
|
|
|
- color: $primary;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 20px;
|
|
|
- margin-top: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-tax {
|
|
|
- margin-top: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// product Option
|
|
|
-
|
|
|
-.ch-ggs-web-suite-aside-box {
|
|
|
- position: sticky;
|
|
|
- top: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-gray {
|
|
|
- background: $gray-100;
|
|
|
- border: 1px solid $gray-200;
|
|
|
- padding: 25px 20px;
|
|
|
- margin-bottom: $grid-gutter-width;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-gray > *:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-payment-info {
|
|
|
- margin-top: $grid-gutter-width;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// new common box
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- background: $gray-100;
|
|
|
- border: 1px solid $gray-200;
|
|
|
- padding: 25px 20px;
|
|
|
- margin-bottom: $grid-gutter-width;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-main {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-main:last-child > *:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-footer {
|
|
|
- margin-top: auto;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-big {
|
|
|
- padding: 25px 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-boxed-xl {
|
|
|
- padding: 30px 40px;
|
|
|
-}
|
|
|
-
|
|
|
-// accordion
|
|
|
-
|
|
|
-.ch-ggs-accordion {
|
|
|
- margin-bottom: $paragraph-margin-bottom;
|
|
|
- border-radius: $border-radius;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion {
|
|
|
- margin-bottom: 0;
|
|
|
- border-radius: 0;
|
|
|
- border: 1px solid $antrazit15;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion + .ch-ggs-accordion {
|
|
|
- margin-top: -1px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion:first-child .ch-ggs-accordion-head,
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion:first-child {
|
|
|
- border-top-left-radius: $accordion-border-radius;
|
|
|
- border-top-right-radius: $accordion-border-radius;
|
|
|
-}
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion:last-child:not([open]) .ch-ggs-accordion-head,
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion:last-child .ch-ggs-accordion-content,
|
|
|
-.ch-ggs-accordion-group .ch-ggs-accordion:last-child {
|
|
|
- border-bottom-left-radius: $accordion-border-radius;
|
|
|
- border-bottom-right-radius: $accordion-border-radius;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-head {
|
|
|
- background: $antrazit05;
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- padding: 17px 20px;
|
|
|
- font-size: $font-size-base;
|
|
|
- @include hover() {
|
|
|
- color: $primary;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-content {
|
|
|
- padding: 30px;
|
|
|
- border-top: 1px solid $antrazit15;
|
|
|
- margin-top: -1px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-icon {
|
|
|
- margin-left: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 30px;
|
|
|
- color: $primary;
|
|
|
- &:before {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion-icon:before {
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: transform;
|
|
|
- transform: rotate(0deg);
|
|
|
- margin-right: 0;
|
|
|
- margin-left: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-accordion[open] .ch-ggs-accordion-icon:before {
|
|
|
- transform: rotate(180deg);
|
|
|
-}
|
|
|
-
|
|
|
-// package
|
|
|
-
|
|
|
-.ch-ggs-packages {
|
|
|
- margin-bottom: $paragraph-margin-bottom;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-package:not(:last-child) {
|
|
|
- padding-bottom: $grid-gutter-width;
|
|
|
- margin-bottom: $grid-gutter-width;
|
|
|
- border-bottom: 1px solid $antrazit15;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-package-title {
|
|
|
- display: flex;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-package-icon {
|
|
|
- margin-left: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 26px;
|
|
|
- color: $primary;
|
|
|
- &:before {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// account
|
|
|
-
|
|
|
-.tab-content {
|
|
|
- border-top: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-account-tabs-box > .nav-tabs {
|
|
|
- flex-wrap: nowrap;
|
|
|
-}
|
|
|
-.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-item {
|
|
|
- flex: 1 1 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-link.active {
|
|
|
- background: $gray-100;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-book-progress {
|
|
|
- height: 4px;
|
|
|
- margin-top: -1px;
|
|
|
-}
|
|
|
-
|
|
|
-// loading bar
|
|
|
-
|
|
|
-.ch-ggs-web-suite-loading-bar {
|
|
|
- position: relative;
|
|
|
- padding: 20px 30px;
|
|
|
- text-align: center;
|
|
|
- background: $antrazit05;
|
|
|
- margin-bottom: $paragraph-margin-bottom;
|
|
|
- overflow: hidden;
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- height: 4px;
|
|
|
- background: $antrazit08;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:after {
|
|
|
- background: $primary;
|
|
|
- left: -200px;
|
|
|
- width: 200px;
|
|
|
- animation: loading 2s linear infinite;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes loading {
|
|
|
- from{left:-200px; width: 10%;}
|
|
|
- 50% { width: 30%; }
|
|
|
- 80% { left: 50%; }
|
|
|
- 95% { left: 120%; width: 80%}
|
|
|
- to { left: 100%; }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-// new landing
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section {
|
|
|
- min-height: 100vh;
|
|
|
- padding: 120px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-dark {
|
|
|
- color: $white;
|
|
|
- background: $primary-d-200;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-hero {
|
|
|
- min-height: calc(100vh - 91px);
|
|
|
- background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xs.jpg');
|
|
|
- background-size: cover;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-title {
|
|
|
- font-size: 32px;
|
|
|
- display: flex;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-title-image {
|
|
|
- margin-bottom: 80px;
|
|
|
- max-height: 70px;
|
|
|
- width: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-title-icon {
|
|
|
- margin-right: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-hero-title,
|
|
|
-.ch-ggs-web-suite-landing-hero-text {
|
|
|
- color: $white;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-hero-title {
|
|
|
- font-size: 52px;
|
|
|
- font-size: 1.75rem;
|
|
|
- font-size: clamp(1.75rem, 4vw, 3.5rem);
|
|
|
- font-weight: 700;
|
|
|
- line-height: 1.35;
|
|
|
- text-align: left;
|
|
|
- border-bottom: 0;
|
|
|
- padding-bottom: 0;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-landing {
|
|
|
- color: $body-color;
|
|
|
-
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-landing-image {
|
|
|
- margin-bottom: 80px;
|
|
|
- max-height: 70px;
|
|
|
- width: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-landing {
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-landing:not(:last-child) {
|
|
|
- margin-bottom: 180px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-landing .lead {
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
|
|
|
- color: $white;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-article-content-aside {
|
|
|
- color: $primary-d-100;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
|
|
|
- color: $primary-l-200;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-hero-text {
|
|
|
- font-size: 22px;
|
|
|
- margin-bottom: 80px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover-text {
|
|
|
- opacity: 1;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: opacity;
|
|
|
- font-size: 18px;
|
|
|
- color: $body-color;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover-title {
|
|
|
- margin-bottom: 20px;
|
|
|
- font-weight: 700;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover {
|
|
|
- margin-bottom: $grid-gutter-width;
|
|
|
- padding: 30px;
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- &:after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- background: white;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: transform;
|
|
|
- transform: scale(1);
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- text-decoration: none;
|
|
|
- .ch-ggs-web-suite-card-hover-title {
|
|
|
- color: $primary;
|
|
|
- }
|
|
|
- .ch-ggs-web-suite-card-hover-text {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- &:after {
|
|
|
- transform: scale(1.025);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover-logo {
|
|
|
- max-height: 40px;
|
|
|
- width: auto;
|
|
|
- align-self: start;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover-main {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover-title {
|
|
|
- display: flex;
|
|
|
- font-size: 21px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-card-hover-icon {
|
|
|
- margin-right: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-article-title {
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-size: 2.625rem;
|
|
|
- display: flex;
|
|
|
- align-items: start;
|
|
|
- gap: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.ch-ggs-web-suite-article-landing {
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-simple-list {
|
|
|
- padding-left: 22px;
|
|
|
- @-moz-document url-prefix() {
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-facts-list {
|
|
|
- list-style: none;
|
|
|
- padding-left: 0;
|
|
|
- font-size: 22px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.ch-ggs-web-suite-facts-list-item {
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-facts-list-item-important {
|
|
|
- margin-top: 20px;
|
|
|
- font-weight: bolder;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-nav {
|
|
|
- font-size: 1.125rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-nav .nav-link .ifc {
|
|
|
- transform: rotate(-90deg);
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- bottom: -0.125em;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-landing-nav .nav-link.active {
|
|
|
- color: $primary-l-200;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-cta-box {
|
|
|
- background: $primary;
|
|
|
- color: $white;
|
|
|
- padding: 80px 60px;
|
|
|
- display: block;
|
|
|
- font-size: 1.375rem;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-cta-box-title {
|
|
|
- font-size: 2.625rem;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-weight: 700;
|
|
|
-}
|
|
|
-
|
|
|
-a.ch-ggs-web-suite-cta-box {
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-
|
|
|
-.ch-ggs-web-suite-cta-box-btn {
|
|
|
- margin-top: 80px;
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(sm) {
|
|
|
- .ch-ggs-web-suite-landing-section-hero {
|
|
|
- background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(md) {
|
|
|
- .ch-ggs-web-suite-landing-section-hero {
|
|
|
- background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-md.jpg');
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-card-hover-text {
|
|
|
- opacity: 1;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: opacity;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-card-hover-link {
|
|
|
- margin-top: auto;
|
|
|
- position: absolute;
|
|
|
- opacity: 0;
|
|
|
- transition: $transition-base;
|
|
|
- transition-property: opacity;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-card-hover {
|
|
|
- &:hover,
|
|
|
- &:focus {
|
|
|
- .ch-ggs-web-suite-card-hover-text {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- .ch-ggs-web-suite-card-hover-link {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-landing-nav {
|
|
|
- position: sticky;
|
|
|
- z-index: 1;
|
|
|
- overflow: hidden;
|
|
|
- top: 0;
|
|
|
- margin-top: -75px;
|
|
|
- &,
|
|
|
- & a {
|
|
|
- color: $white;
|
|
|
- }
|
|
|
- .container {
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
- background: $primary-d-200;
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
- content: "";
|
|
|
- background: $primary-d-200;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: -1;
|
|
|
- transition: $transition-base;
|
|
|
- transition-duration: 0.5s;
|
|
|
- transition-property: transform;
|
|
|
- width: calc((100vw - 720px)/2);
|
|
|
- transform: scaleX(0.3);
|
|
|
- }
|
|
|
-
|
|
|
- &:before {
|
|
|
- right: 100%;
|
|
|
- transform-origin: right;
|
|
|
- }
|
|
|
- &:after {
|
|
|
- left: 100%;
|
|
|
- transform-origin: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-landing-nav.stuck .container:before,
|
|
|
- .ch-ggs-web-suite-landing-nav.stuck .container:after {
|
|
|
- // max-width: 100%;
|
|
|
- transform: scaleX(1);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(lg) {
|
|
|
- .ch-ggs-web-suite-landing-section-hero {
|
|
|
- min-height: calc(100vh - 98px);
|
|
|
- background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-landing-nav {
|
|
|
- .container {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
- width: calc((100vw - 960px)/2);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@include media-breakpoint-up(xl) {
|
|
|
- .ch-ggs-web-suite-landing-section-hero {
|
|
|
- background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');
|
|
|
- }
|
|
|
-
|
|
|
- .ch-ggs-web-suite-landing-nav {
|
|
|
- .container {
|
|
|
- &:before,
|
|
|
- &:after {
|
|
|
- width: calc((100vw - 1140px)/2);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+/*
|
|
|
+ * GENERAL
|
|
|
+ */
|
|
|
+
|
|
|
+// fonts
|
|
|
+@font-face {
|
|
|
+ font-family:"Fira Sans";
|
|
|
+ src:url("../fonts/fira-sans-v6-latin-300.eot");
|
|
|
+ src:url("../fonts/fira-sans-v6-latin-300.eot?#iefix") format("embedded-opentype"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-300.ttf?") format("truetype"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-300.woff?") format("woff"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-300.svg?") format("svg");
|
|
|
+ font-weight:300;
|
|
|
+ font-style:normal;
|
|
|
+ font-display: swap;
|
|
|
+}
|
|
|
+@font-face {
|
|
|
+ font-family:"Fira Sans";
|
|
|
+ src:url("../fonts/fira-sans-v6-latin-regular.eot");
|
|
|
+ src:url("../fonts/fira-sans-v6-latin-regular.eot?#iefix") format("embedded-opentype"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-regular.ttf?") format("truetype"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-regular.woff?") format("woff"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-regular.svg?") format("svg");
|
|
|
+ font-weight:normal;
|
|
|
+ font-style:normal;
|
|
|
+ font-display: swap;
|
|
|
+}
|
|
|
+@font-face {
|
|
|
+ font-family:"Fira Sans";
|
|
|
+ src:url("../fonts/fira-sans-v6-latin-700.eot");
|
|
|
+ src:url("../fonts/fira-sans-v6-latin-700.eot?#iefix") format("embedded-opentype"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-700.ttf?") format("truetype"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-700.woff?") format("woff"),
|
|
|
+ url("../fonts/fira-sans-v6-latin-700.svg?") format("svg");
|
|
|
+ font-weight:600;
|
|
|
+ font-style:normal;
|
|
|
+ font-display: swap;
|
|
|
+}
|
|
|
+
|
|
|
+h2 {
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+h3, h4, h5, h6,
|
|
|
+.h3, .h4, .h5, .h6 {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+h1, h2, h3, h4, h5, h6,
|
|
|
+.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+h3,
|
|
|
+.h3 {
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+h4,
|
|
|
+.h4 {
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+h4 + hr {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown-item-important {
|
|
|
+ color: rgba($antrazit, .6);
|
|
|
+ font-weight: bold;
|
|
|
+ @include hover-focus() {
|
|
|
+ color: $body-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown-item-important:last-child {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-down(md) {
|
|
|
+ .dropdown-menu {
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(lg) {
|
|
|
+ .dropdown-divider {
|
|
|
+ margin-left: $dropdown-item-padding-x;
|
|
|
+ margin-right: $dropdown-item-padding-x;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-h2 {
|
|
|
+ color: $primary;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.text-muted-dark {
|
|
|
+ color: $gray-700;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-back {
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-white {
|
|
|
+ @include button-variant($white, $white);
|
|
|
+ color: $primary;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-hero,
|
|
|
+.ch-ggs-web-suite-cta-box {
|
|
|
+ .btn-white:hover,
|
|
|
+ .btn-white:focus {
|
|
|
+ color: $primary;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//modal
|
|
|
+.modal-content {
|
|
|
+ padding: 40px 40px 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header .close {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header [data-dismiss*="modal"] {
|
|
|
+ align-self: center;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header [data-dismiss*="modal"] .ifc {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-footer {
|
|
|
+ padding: 0;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-title {
|
|
|
+ color: $primary;
|
|
|
+ font-size: $font-size-lg;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ padding: $common-padding 0;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//Forms
|
|
|
+
|
|
|
+form > .form-group:first-child > h3:first-child,
|
|
|
+form > .form-group:first-child > .h3:first-child {
|
|
|
+ margin-top: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+label {
|
|
|
+ margin-bottom: .25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.input-group {
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+
|
|
|
+.input-group .btn {
|
|
|
+ border-width: $input-border-width;
|
|
|
+ border-color: $input-border-color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-input-group-iconed .btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//links
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-link {
|
|
|
+ margin-top: auto;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $antrazit60;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: color;
|
|
|
+ .ifc {
|
|
|
+ margin-left: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ transform: translateX(0);
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: transform;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article:hover,
|
|
|
+.ch-ggs-web-suite-card-simple:hover,
|
|
|
+.ch-ggs-web-suite-card-simple:focus {
|
|
|
+ .ch-ggs-web-suite-card-link {
|
|
|
+ color: $primary;
|
|
|
+ .ifc {
|
|
|
+ transform: translateX(8px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.ch-ggs-web-suite-file-input-box {
|
|
|
+ background: $antrazit05;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+// seelct
|
|
|
+
|
|
|
+.ch-ggs-web-suite-select {
|
|
|
+ position: relative;
|
|
|
+ background: $input-bg;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-select:after {
|
|
|
+ content: "\e901";
|
|
|
+ font-family: icomoon;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 2.2em;
|
|
|
+ margin: auto;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: scale(1.5);
|
|
|
+}
|
|
|
+
|
|
|
+//background
|
|
|
+.ch-ggs-web-suite-select:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 2.2em;
|
|
|
+ background: $antrazit15;
|
|
|
+ border: 1px solid $input-border-color;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-select select {
|
|
|
+ background: transparent;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 2.5em;
|
|
|
+ appearance: none;
|
|
|
+ // Disable ugly ass outline on firefox
|
|
|
+ &:-moz-focusring {
|
|
|
+ color: transparent;
|
|
|
+ text-shadow: 0 0 0 #000;
|
|
|
+ }
|
|
|
+ // Disable default arrow on IE 11+
|
|
|
+ &::-ms-expand {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// IE 9 only
|
|
|
+@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
|
|
|
+ .ch-ggs-web-suite-select{
|
|
|
+ select {
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after, &:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+// step navigation
|
|
|
+
|
|
|
+$step-number-block-margin: 20px;
|
|
|
+$step-margin: 30px;
|
|
|
+
|
|
|
+ol.ch-ggs-web-suite-order-steps {
|
|
|
+ counter-reset: section;
|
|
|
+ list-style-type: none;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: -$step-margin/4;
|
|
|
+ padding-left: 0;
|
|
|
+
|
|
|
+ li.error,
|
|
|
+ li.loading,
|
|
|
+ li.done,
|
|
|
+ li.active {
|
|
|
+ color: $primary;
|
|
|
+
|
|
|
+ & .nav-link:before {
|
|
|
+ background: $white;
|
|
|
+ color: $primary;
|
|
|
+ border-color: $white;
|
|
|
+ }
|
|
|
+ & .nav-link:after {
|
|
|
+ background: $primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ color: $antrazit25;
|
|
|
+ margin-bottom: $step-margin/4;
|
|
|
+ .nav-link {
|
|
|
+ padding: 0px 30px 0px 0;
|
|
|
+ background: $antrazit05;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 0;
|
|
|
+ &:before {
|
|
|
+ // counter-increment: section;
|
|
|
+ // content: counters(section,"");
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ flex: 0 0 2em;
|
|
|
+ width: 2em;
|
|
|
+ height: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ line-height: 2em;
|
|
|
+ margin: $step-number-block-margin $step-number-block-margin*2 $step-number-block-margin $step-number-block-margin;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ background: $antrazit08;
|
|
|
+ color: $antrazit25;
|
|
|
+ border: 1px solid $antrazit25;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ z-index: -1;
|
|
|
+ content: "";
|
|
|
+ background: $antrazit08;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: calc(2em + #{$step-number-block-margin*2});
|
|
|
+ height: calc(2em + #{$step-number-block-margin*2});
|
|
|
+ font-size: 1.25rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-order-step-link-multi {
|
|
|
+ // display: inline-flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ a:link:not(:hover):not(:focus),
|
|
|
+ a:visited:not(:hover):not(:focus) {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ li.active,
|
|
|
+ li.error,
|
|
|
+ li.done {
|
|
|
+ .nav-link {
|
|
|
+ &:before {
|
|
|
+ content: unicode("e900");
|
|
|
+ font-family: $font-family-icons;
|
|
|
+ line-height: 1.8em;
|
|
|
+ speak: none;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-variant: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ li.error {
|
|
|
+ .nav-link {
|
|
|
+ &:before {
|
|
|
+ content: unicode("e906");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ li.loading {
|
|
|
+ .nav-link {
|
|
|
+ &:before {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-order-steps-loader {
|
|
|
+ position: absolute;
|
|
|
+ left: 19px;
|
|
|
+ top: 19px;
|
|
|
+ width: calc(2em + 10px);
|
|
|
+ height: calc(2em + 10px);
|
|
|
+ border-width: 0.2em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// step navigation
|
|
|
+ol.ch-ggs-web-suite-steps {
|
|
|
+ counter-reset: section;
|
|
|
+ list-style-type: none;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: -15px;
|
|
|
+ margin-left: -30px;
|
|
|
+ padding-left: 0;
|
|
|
+
|
|
|
+ li.active {
|
|
|
+ color: $primary;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ border-color: $primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ color: $antrazit60;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin: 0 30px 15px;
|
|
|
+ &::before {
|
|
|
+ counter-increment: section;
|
|
|
+ content: counters(section,"");
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 2em;
|
|
|
+ height: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ababab;
|
|
|
+ border-top-color: rgb(171, 171, 171);
|
|
|
+ border-right-color: rgb(171, 171, 171);
|
|
|
+ border-bottom-color: rgb(171, 171, 171);
|
|
|
+ border-left-color: rgb(171, 171, 171);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2em;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:link:not(:hover):not(:focus),
|
|
|
+ a:visited:not(:hover):not(:focus) {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// image
|
|
|
+
|
|
|
+.ch-ggs-web-suite-image {
|
|
|
+ margin-bottom: $paragraph-margin-bottom;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// download
|
|
|
+
|
|
|
+.ch-ggs-web-suite-download {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: $paragraph-margin-bottom;
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-download {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-download-icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ flex: 0 0 70px;
|
|
|
+ background: $primary;
|
|
|
+ color: $white;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: $grid-gutter-width;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: background;
|
|
|
+ a.ch-ggs-web-suite-download:hover &,
|
|
|
+ a.ch-ggs-web-suite-download:focus & {
|
|
|
+ background: $link-hover-color;
|
|
|
+ }
|
|
|
+ > .ifc {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-download-info > *:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-download-title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: $primary;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: color;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ a.ch-ggs-web-suite-download:hover &,
|
|
|
+ a.ch-ggs-web-suite-download:focus & {
|
|
|
+ color: $link-hover-color;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-download-text {
|
|
|
+ color: $text-muted;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// cards
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-group {
|
|
|
+ margin-bottom: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-holder {
|
|
|
+ margin-bottom: -30px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border-bottom-width: 1px;
|
|
|
+ border-bottom-style: solid;
|
|
|
+ border-bottom-color: #efefef;
|
|
|
+ box-shadow: 0 0 15px 0 rgba(0,0,0,0);
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: box-shadow;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-card {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-img-fake {
|
|
|
+ background: $antrazit08;
|
|
|
+ color: $primary;
|
|
|
+ display: flex;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: background-color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-img-fake:before {
|
|
|
+ content: "";
|
|
|
+ display: table;
|
|
|
+ float: left;
|
|
|
+ padding-bottom: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-img-fake .ifc {
|
|
|
+ font-size: 120px;
|
|
|
+ align-self: center;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ transition: $transition-base;
|
|
|
+ text-shadow: 4px 8px 12px rgba(black, 0);
|
|
|
+ transition-property: text-shadow, color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-img-fake .ifc-train-front {
|
|
|
+ font-size: 130px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-img-fake .ifc-sea-ship-with-containers {
|
|
|
+ font-size: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-img-fake .ifc-air-transport {
|
|
|
+ font-size: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake,
|
|
|
+.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake {
|
|
|
+ background: $primary-d-100;
|
|
|
+ color: white;
|
|
|
+ text-shadow: 4px 8px 12px rgba(black, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake .ifc,
|
|
|
+.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake .ifc {
|
|
|
+ text-shadow: 4px 8px 12px rgba(black, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-main {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ padding: 30px 15px 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card:hover,
|
|
|
+.ch-ggs-web-suite-card:focus {
|
|
|
+ box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card .btn {
|
|
|
+ background: white;
|
|
|
+ border-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card .btn,
|
|
|
+.ch-ggs-web-suite-card .btn .ifc {
|
|
|
+ color: $antrazit60;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card:hover .btn,
|
|
|
+.ch-ggs-web-suite-card:focus .btn {
|
|
|
+ background: $antrazit15;
|
|
|
+ border-color: $antrazit15;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-title {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ color: $body-color;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-title,
|
|
|
+.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-title {
|
|
|
+ color: $primary-d-100;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-text {
|
|
|
+ color: $body-color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-group {
|
|
|
+ margin-bottom: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-holder {
|
|
|
+ margin-bottom: -30px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain {
|
|
|
+ padding: 25px 25px 0px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: $white;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-card-plain {
|
|
|
+ text-decoration: none;
|
|
|
+ &,
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ color: $body-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-img-icon {
|
|
|
+ color: $primary;
|
|
|
+ display: flex;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: background-color;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-img-icon .ifc {
|
|
|
+ font-size: 40px;
|
|
|
+ align-self: center;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-main {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-title {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: $h4-font-size;
|
|
|
+ color: $body-color;
|
|
|
+ margin-bottom: 0.75em;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-plain-title,
|
|
|
+.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-plain-title {
|
|
|
+ color: $primary-d-100;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-plain-text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-md;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-group {
|
|
|
+ margin-bottom: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-holder {
|
|
|
+ margin-bottom: -30px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple {
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: $white;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 8px 24px 0 rgba(0,0,0,0.2);
|
|
|
+ opacity: 0;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: opacity;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ border: 3px solid $primary;
|
|
|
+ opacity: 0;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: opacity;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple:hover,
|
|
|
+.ch-ggs-web-suite-card-simple:focus {
|
|
|
+ &:before,
|
|
|
+ &:after {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-card-simple {
|
|
|
+ text-decoration: none;
|
|
|
+ &,
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ color: $body-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-img-icon {
|
|
|
+ color: $primary;
|
|
|
+ display: flex;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: background-color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-img-icon .ifc {
|
|
|
+ margin-top: 60px;
|
|
|
+ font-size: 60px;
|
|
|
+ align-self: center;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-main {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ padding: 25px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-title {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ color: $body-color;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple:hover .ch-ggs-web-suite-card-simple-title,
|
|
|
+.ch-ggs-web-suite-card-simple:focus .ch-ggs-web-suite-card-simple-title {
|
|
|
+ color: $primary-d-100;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-simple-text {
|
|
|
+ color: $body-color;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// article
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article {
|
|
|
+ margin-bottom: 90px;
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-article {
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-content {
|
|
|
+ padding: 40px 25px 0;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ > *:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-title {
|
|
|
+ color: $primary;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: color;
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-article:hover & {
|
|
|
+ color: $primary-d-100;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(md) {
|
|
|
+ .ch-ggs-web-suite-article-content {
|
|
|
+ padding: 40px 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(lg) {
|
|
|
+ .ch-ggs-web-suite-article {
|
|
|
+ margin-bottom: 120px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// link with icons
|
|
|
+
|
|
|
+.ch-ggs-web-suite-icon-link {
|
|
|
+ display: inline-flex;
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-icon-link {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-icon-link:hover,
|
|
|
+.ch-ggs-web-suite-icon-link:focus {
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-icon-link .ifc {
|
|
|
+ margin-right: 10px;
|
|
|
+ top: 5px;
|
|
|
+ width: 15px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * STEP 3
|
|
|
+ */
|
|
|
+
|
|
|
+.ch-ggs-web-suite-dropdown .btn-block + .btn-block {
|
|
|
+ margin-top: 0.3125rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-btn-group {
|
|
|
+ margin-top: -$btn-block-spacing-y;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-btn-group-btn-group .btn {
|
|
|
+ margin-top: $btn-block-spacing-y;
|
|
|
+}
|
|
|
+
|
|
|
+#ch-ggs-web-suite-packing-details {
|
|
|
+ background-color: $antrazit08;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-packing-cmds a {
|
|
|
+ color: $antrazit25;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-packing-cmds a .ifc {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: -10px;
|
|
|
+ margin-bottom: -10px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: $body-color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-packing-cmds a:hover,
|
|
|
+.ch-ggs-web-suite-packing-cmds a:focus,
|
|
|
+.ch-ggs-web-suite-packing-cmds a:hover .ifc,
|
|
|
+.ch-ggs-web-suite-packing-cmds a:focus .ifc {
|
|
|
+ color: $primary;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//step 4
|
|
|
+
|
|
|
+.ch-ggs-web-suite-steps-pricing-details {
|
|
|
+ margin-bottom: $common-padding;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-price {
|
|
|
+ font-size: $font-size-xl;
|
|
|
+ color: $primary;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-tax {
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// product Option
|
|
|
+
|
|
|
+.ch-ggs-web-suite-aside-box {
|
|
|
+ position: sticky;
|
|
|
+ top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-gray {
|
|
|
+ background: $gray-100;
|
|
|
+ border: 1px solid $gray-200;
|
|
|
+ padding: 25px 20px;
|
|
|
+ margin-bottom: $grid-gutter-width;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-gray > *:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-payment-info {
|
|
|
+ margin-top: $grid-gutter-width;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// new common box
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ background: $gray-100;
|
|
|
+ border: 1px solid $gray-200;
|
|
|
+ padding: 25px 20px;
|
|
|
+ margin-bottom: $grid-gutter-width;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-main {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-main:last-child > *:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-footer {
|
|
|
+ margin-top: auto;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-big {
|
|
|
+ padding: 25px 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-boxed-xl {
|
|
|
+ padding: 30px 40px;
|
|
|
+}
|
|
|
+
|
|
|
+// accordion
|
|
|
+
|
|
|
+.ch-ggs-accordion {
|
|
|
+ margin-bottom: $paragraph-margin-bottom;
|
|
|
+ border-radius: $border-radius;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion {
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ border: 1px solid $antrazit15;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion + .ch-ggs-accordion {
|
|
|
+ margin-top: -1px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion:first-child .ch-ggs-accordion-head,
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion:first-child {
|
|
|
+ border-top-left-radius: $accordion-border-radius;
|
|
|
+ border-top-right-radius: $accordion-border-radius;
|
|
|
+}
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion:last-child:not([open]) .ch-ggs-accordion-head,
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion:last-child .ch-ggs-accordion-content,
|
|
|
+.ch-ggs-accordion-group .ch-ggs-accordion:last-child {
|
|
|
+ border-bottom-left-radius: $accordion-border-radius;
|
|
|
+ border-bottom-right-radius: $accordion-border-radius;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-head {
|
|
|
+ background: $antrazit05;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ padding: 17px 20px;
|
|
|
+ font-size: $font-size-base;
|
|
|
+ @include hover() {
|
|
|
+ color: $primary;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-content {
|
|
|
+ padding: 30px;
|
|
|
+ border-top: 1px solid $antrazit15;
|
|
|
+ margin-top: -1px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-icon {
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 30px;
|
|
|
+ color: $primary;
|
|
|
+ &:before {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion-icon:before {
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: transform;
|
|
|
+ transform: rotate(0deg);
|
|
|
+ margin-right: 0;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-accordion[open] .ch-ggs-accordion-icon:before {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+
|
|
|
+// package
|
|
|
+
|
|
|
+.ch-ggs-packages {
|
|
|
+ margin-bottom: $paragraph-margin-bottom;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-package:not(:last-child) {
|
|
|
+ padding-bottom: $grid-gutter-width;
|
|
|
+ margin-bottom: $grid-gutter-width;
|
|
|
+ border-bottom: 1px solid $antrazit15;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-package-title {
|
|
|
+ display: flex;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-package-icon {
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26px;
|
|
|
+ color: $primary;
|
|
|
+ &:before {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// account
|
|
|
+
|
|
|
+.tab-content {
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-account-tabs-box > .nav-tabs {
|
|
|
+ flex-wrap: nowrap;
|
|
|
+}
|
|
|
+.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-item {
|
|
|
+ flex: 1 1 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-link.active {
|
|
|
+ background: $gray-100;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-book-progress {
|
|
|
+ height: 4px;
|
|
|
+ margin-top: -1px;
|
|
|
+}
|
|
|
+
|
|
|
+// loading bar
|
|
|
+
|
|
|
+.ch-ggs-web-suite-loading-bar {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px 30px;
|
|
|
+ text-align: center;
|
|
|
+ background: $antrazit05;
|
|
|
+ margin-bottom: $paragraph-margin-bottom;
|
|
|
+ overflow: hidden;
|
|
|
+ &:before,
|
|
|
+ &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ height: 4px;
|
|
|
+ background: $antrazit08;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ background: $primary;
|
|
|
+ left: -200px;
|
|
|
+ width: 200px;
|
|
|
+ animation: loading 2s linear infinite;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes loading {
|
|
|
+ from{left:-200px; width: 10%;}
|
|
|
+ 50% { width: 30%; }
|
|
|
+ 80% { left: 50%; }
|
|
|
+ 95% { left: 120%; width: 80%}
|
|
|
+ to { left: 100%; }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+// new landing
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 120px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-dark {
|
|
|
+ color: $white;
|
|
|
+ background: $primary-d-200;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-hero {
|
|
|
+ min-height: calc(100vh - 91px);
|
|
|
+ background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xs.jpg');
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-title {
|
|
|
+ font-size: 32px;
|
|
|
+ display: flex;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-title-image {
|
|
|
+ margin-bottom: 80px;
|
|
|
+ max-height: 70px;
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-title-icon {
|
|
|
+ margin-right: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-hero-title,
|
|
|
+.ch-ggs-web-suite-landing-hero-text {
|
|
|
+ color: $white;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-hero-title {
|
|
|
+ font-size: 52px;
|
|
|
+ font-size: 1.75rem;
|
|
|
+ font-size: clamp(1.75rem, 4vw, 3.5rem);
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.35;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-landing {
|
|
|
+ color: $body-color;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-landing-image {
|
|
|
+ margin-bottom: 80px;
|
|
|
+ max-height: 70px;
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-landing {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-landing:not(:last-child) {
|
|
|
+ margin-bottom: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-landing .lead {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
|
|
|
+ color: $white;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-article-content-aside {
|
|
|
+ color: $primary-d-100;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
|
|
|
+ color: $primary-l-200;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-hero-text {
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover-text {
|
|
|
+ opacity: 1;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: opacity;
|
|
|
+ font-size: 18px;
|
|
|
+ color: $body-color;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover-title {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover {
|
|
|
+ margin-bottom: $grid-gutter-width;
|
|
|
+ padding: 30px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background: white;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: transform;
|
|
|
+ transform: scale(1);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ text-decoration: none;
|
|
|
+ .ch-ggs-web-suite-card-hover-title {
|
|
|
+ color: $primary;
|
|
|
+ }
|
|
|
+ .ch-ggs-web-suite-card-hover-text {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ transform: scale(1.025);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover-logo {
|
|
|
+ max-height: 40px;
|
|
|
+ width: auto;
|
|
|
+ align-self: start;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover-main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover-title {
|
|
|
+ display: flex;
|
|
|
+ font-size: 21px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-card-hover-icon {
|
|
|
+ margin-right: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-article-title {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 2.625rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: start;
|
|
|
+ gap: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.ch-ggs-web-suite-article-landing {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-simple-list {
|
|
|
+ padding-left: 22px;
|
|
|
+ @-moz-document url-prefix() {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-facts-list {
|
|
|
+ list-style: none;
|
|
|
+ padding-left: 0;
|
|
|
+ font-size: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.ch-ggs-web-suite-facts-list-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-facts-list-item-important {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-nav {
|
|
|
+ font-size: 1.125rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-nav .nav-link .ifc {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ bottom: -0.125em;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-landing-nav .nav-link.active {
|
|
|
+ color: $primary-l-200;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-cta-box {
|
|
|
+ background: $primary;
|
|
|
+ color: $white;
|
|
|
+ padding: 80px 60px;
|
|
|
+ display: block;
|
|
|
+ font-size: 1.375rem;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-cta-box-title {
|
|
|
+ font-size: 2.625rem;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+a.ch-ggs-web-suite-cta-box {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.ch-ggs-web-suite-cta-box-btn {
|
|
|
+ margin-top: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(sm) {
|
|
|
+ .ch-ggs-web-suite-landing-section-hero {
|
|
|
+ background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(md) {
|
|
|
+ .ch-ggs-web-suite-landing-section-hero {
|
|
|
+ background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-md.jpg');
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-card-hover-text {
|
|
|
+ opacity: 1;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: opacity;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-card-hover-link {
|
|
|
+ margin-top: auto;
|
|
|
+ position: absolute;
|
|
|
+ opacity: 0;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-property: opacity;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-card-hover {
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ .ch-ggs-web-suite-card-hover-text {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .ch-ggs-web-suite-card-hover-link {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-landing-nav {
|
|
|
+ position: sticky;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ top: 0;
|
|
|
+ margin-top: -75px;
|
|
|
+ &,
|
|
|
+ & a {
|
|
|
+ color: $white;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ background: $primary-d-200;
|
|
|
+ &:before,
|
|
|
+ &:after {
|
|
|
+ content: "";
|
|
|
+ background: $primary-d-200;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: -1;
|
|
|
+ transition: $transition-base;
|
|
|
+ transition-duration: 0.5s;
|
|
|
+ transition-property: transform;
|
|
|
+ width: calc((100vw - 720px)/2);
|
|
|
+ transform: scaleX(0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ right: 100%;
|
|
|
+ transform-origin: right;
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ left: 100%;
|
|
|
+ transform-origin: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-landing-nav.stuck .container:before,
|
|
|
+ .ch-ggs-web-suite-landing-nav.stuck .container:after {
|
|
|
+ // max-width: 100%;
|
|
|
+ transform: scaleX(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(lg) {
|
|
|
+ .ch-ggs-web-suite-landing-section-hero {
|
|
|
+ min-height: calc(100vh - 98px);
|
|
|
+ background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-landing-nav {
|
|
|
+ .container {
|
|
|
+ &:before,
|
|
|
+ &:after {
|
|
|
+ width: calc((100vw - 960px)/2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include media-breakpoint-up(xl) {
|
|
|
+ .ch-ggs-web-suite-landing-section-hero {
|
|
|
+ background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');
|
|
|
+ }
|
|
|
+
|
|
|
+ .ch-ggs-web-suite-landing-nav {
|
|
|
+ .container {
|
|
|
+ &:before,
|
|
|
+ &:after {
|
|
|
+ width: calc((100vw - 1140px)/2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
