/********************************************
*
* Variables
*
* 0. General
* 1. Colors
* 2. Transitions
* 3. Media Queries
*
*********************************************/
/* 0. General
*********************************************/
/* Img path */
/* 1. Colors
*********************************************/
/* Global */
/* Common platform bar / Footer colors */
/* RSI Theme */
/* Star Citizen Theme */
/* S42 Theme */
/* 2. Transitions
*********************************************/
/* Transitions - Speed */
/* Transitions - Easing - ヽ( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ */
/* 3. Media Queries
*********************************************/
/* Deprecated media queries */
/* Default media queries */
/**************
Used with RSI.Components.SVG .
This exists because you can't change the color of the fill on linked images or
background tags. But with this and the JS tool you can decare the logos as simple classes
and change their fill color.
When IE supports SVG background masks we can change most (all) of these over
and remove the JS component.
https://caniuse.com/#feat=css-masks
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
To make additional icons export from any program with styles set to 'inline'
and run through an SVG optimiser. https://jakearchibald.github.io/svgomg/
Then replace all double quotes with single quotes and paste into the
background-image link. Check that the style tag has things you want to
override removed (usually the fills)
*************/
/* Base styles for an inline icon, to be overridden */
.c-iconed {
display: inline-block;
position: relative;
width: 1.5em;
margin: 0em 0.5em 0em 0em;
/* If using an icon as a BG Image to fill container*/
}
.c-iconed__icon {
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
width: 1em;
flex: 0 1 1em;
transition: opacity 250ms ease-out;
}
.c-iconed__icon svg {
max-height: 100%;
/* Just needed for IE11 */
max-width: 100%;
flex: 1 0 100%;
}
.c-iconed__image {
display: block;
height: 100%;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
flex: 1 1 100%;
}
.js-svg-inliner {
visibility: hidden;
}
.h-svg svg {
width: 100%;
/* defaults */
height: 100%;
}
/* Icons used in the page footers */
.c-iconed__icon--twitch {
background-image: url("data:image/svg+xml;utf8,");
}
.c-iconed__icon--twitter {
background-image: url("data:image/svg+xml;utf8,");
}
.c-iconed__icon--facebook {
background-image: url("data:image/svg+xml;utf8,");
}
.c-iconed__icon--youtube {
background-image: url("data:image/svg+xml;utf8,");
}
.c-iconed__icon--instagram {
background-image: url("data:image/svg+xml;utf8,");
}
/* Icons used in the page footers, and the notification bar background */
.h-svg__logo-star-citizen {
background-image: url("data:image/svg+xml;utf8,");
}
.h-svg__logo-star-citizen--fullcolor {
background-image: url("/rsi/static/css/common/svg/cig/logo-star-citizen--fullcolor.svg");
}
.h-svg__logo-squadron42 {
background-image: url("/rsi/static/css/common/svg/cig/logo-squadron42.svg");
}
.h-svg__logo-squadron42--fullcolor {
background-image: url("/rsi/static/css/common/svg/cig/logo-squadron42--fullcolor.svg");
}
.h-svg__logo-rsi {
background-image: url("data:image/svg+xml;utf8,");
}
.h-svg__logo-rsi--fullcolor {
background-image: url("/rsi/static/css/common/svg/cig/logo-rsi--fullcolor.svg");
}
.h-svg__logo-cig {
background-image: url("/rsi/static/css/common/svg/cig/logo-cig.svg");
}
/* Icons used in the matrix, holoviewer and sales pages */
.c-iconed__icon--checkmark {
background-image: url("data:image/svg+xml;utf8,");
}
.c-iconed__icon--arrow {
background-image: url("data:image/svg+xml;utf-8,");
}
.c-iconed__icon--close {
background-image: url("data:image/svg+xml;utf-8,");
}
.c-account__icon {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.c-account__icon--smaller {
width: 12px;
height: 12px;
}
.c-account__icon-lock {
background-image: url("/rsi/static/images/header/sidebar/account/lock.svg");
}
.c-account__icon-go {
background-image: url("/rsi/static/images/header/sidebar/account/go.svg");
}
.c-account__icon-success {
background-image: url("/rsi/static/images/header/sidebar/account/success.svg");
}
.c-account__icon-talk {
background-image: url("/rsi/static/images/header/sidebar/account/talk.svg");
}
.c-account__icon-star-citizen {
background-image: url("/rsi/static/images/header/sidebar/account/star-citizen.svg");
}
.c-account__icon-trash {
background-image: url("/rsi/static/images/header/sidebar/account/trash.svg");
}
.c-account__icon-profile {
background-image: url("/rsi/static/images/header/sidebar/account/profile.svg");
}
.c-account__icon-power {
background-image: url("/rsi/static/images/header/sidebar/account/power.svg");
}
/* Selectlist */
.selectlist {
border: 1px solid #162a3f;
color: #00d2ff;
height: 29px;
border-radius: 5px;
position: relative;
margin: 2px 0px;
display: block;
}
.selectlist:hover {
cursor: pointer;
}
.selectlist.w200 {
width: 200px;
}
.selectlist.w170 {
width: 170px;
}
.selectlist > .arrow {
background: url('/rsi/static/images/forms/selectlist/arrow.png') no-repeat left center;
height: 29px;
width: 34px;
float: right;
}
.selectlist > span {
line-height: 22px;
height: 22px;
width: 60%;
display: block;
padding: 4px 10px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.selectlist > .body {
display: none;
border: 1px solid #162a3f;
color: #00d2ff;
border-radius: 0px 0px 5px 5px;
margin-right: 10px;
position: absolute;
z-index: 20;
width: 95%;
margin-top: -1px;
box-shadow: 0px 3px 12px -6px #555555;
}
.selectlist ul {
padding-left: 5px;
}
.selectlist ul li.selected {
background-color: transparent;
font-weight: normal;
color: #fff;
}
.selectlist ul li.hover,
.selectlist ul li.hover.selected {
cursor: pointer;
background-color: #00D2FF;
color: #000;
}
.selectlist option li,
.selectlist ul li {
font-size: 12px;
padding: 2px 5px;
line-height: 16px;
height: 16px;
list-style: none;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
select.selectlist {
line-height: 22px;
height: 22px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: url('/rsi/static/images/forms/selectlist/arrow.png') no-repeat right center #000;
}
.selectlist ul li img,
a.selectlist span img {
height: 16px;
width: 16px;
margin: 0;
}
.l-notification-container {
margin: 0 auto;
box-sizing: border-box;
width: 100%;
}
.l-notification-container .l-notification__wrapper:nth-child(even) .c-notification {
background-color: #262627;
}
.l-notification-container .l-notification__wrapper:nth-child(odd) .c-notification {
background-color: #202121;
}
.l-notification__wrapper {
flex: 1 0 auto;
flex-wrap: wrap;
width: 100%;
z-index: 1000;
box-sizing: border-box;
}
.l-notification__wrapper:last-child {
padding-right: 0;
}
.l-notification__wrapper.is-hidden {
display: none;
}
.c-notification {
display: flex;
align-items: center;
font-family: "univia-pro", sans-serif;
background-color: #2F2F2F;
color: #798185;
font-size: 14px;
line-height: 18px;
height: 100%;
box-sizing: border-box;
}
.c-notification__inner-wrapper {
position: relative;
z-index: 1;
display: flex;
width: 100%;
padding: 25px 65px 25px 130px;
max-width: 1440px;
margin: 0 auto;
box-sizing: border-box;
mix-blend-mode: luminosity;
}
@media only screen and (max-width: 1400px) {
.c-notification__inner-wrapper {
padding: 0 40px 0 40px;
}
}
@media only screen and (max-width: 1024px) {
.c-notification__inner-wrapper {
padding: 0 20px 0 20px;
flex-direction: column;
}
}
@media only screen and (max-width: 760px) {
.c-notification__inner-wrapper {
padding: 0 20px;
}
}
.c-notification-button {
font-weight: bold;
color: #798185;
display: inline-block;
text-transform: uppercase;
font-size: 12px;
align-items: center;
cursor: pointer;
vertical-align: middle;
/* checkmark styling */
}
.c-notification-button .c-iconed__icon {
display: inline-block;
flex-shrink: 0;
width: 16px;
margin-left: 5px;
fill: #CBE7EF;
vertical-align: middle;
}
.c-notification-button .c-iconed__icon--arrow {
transform: rotate(-180deg);
position: relative;
top: -2px;
}
.c-notification-button .c-iconed__icon--close {
width: 17px;
height: 17px;
}
.c-notification-button .c-iconed__icon svg {
flex-shrink: 0;
width: 17px;
height: 17px;
}
.c-notification-button__text {
letter-spacing: 0.03em;
border-bottom: 1px solid #ffffff;
display: inline-block;
}
/*
* The notifications contained in the bar across the top of the page
*/
.c-notification {
display: flex;
align-items: center;
font-family: "univia-pro", sans-serif;
background-color: #2F2F2F;
color: #798185;
font-size: 14px;
line-height: 18px;
height: 100%;
box-sizing: border-box;
}
.l-notification-bar--sc .c-notification {
background-color: #2F2F2F;
}
.l-notification-bar--s42 .c-notification {
background-color: #2F2F2F;
}
.c-notification--cookie {
background-color: #262627;
}
.l-notification-bar--sc .c-notification--cookie {
background-color: #262627;
}
.l-notification-bar--s42 .c-notification--cookie {
background-color: #262627;
}
.c-notification--privacy {
background-color: #202121;
}
.l-notification-bar--sc .c-notification--privacy {
background-color: #202121;
}
.l-notification-bar--s42 .c-notification--privacy {
background-color: #202121;
}
.c-notification--announcement {
position: relative;
}
.c-notification--announcement::before,
.c-notification--announcement::after {
content: "";
background-blend-mode: luminosity;
background-color: #2F2F2F;
background-image: url('/rsi/static/images/squadron42/_new/s42-diagonal-pattern.svg');
background-position: 0% 0%;
background-repeat: repeat-y;
background-size: contain;
position: absolute;
display: block;
width: 72px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.l-notification-bar--sc .c-notification--announcement::before,
.l-notification-bar--sc .c-notification--announcement::after {
background-color: #2F2F2F;
}
.l-notification-bar--s42 .c-notification--announcement::before,
.l-notification-bar--s42 .c-notification--announcement::after {
background-color: #2F2F2F;
}
@media only screen and (max-width: 1400px) {
.c-notification--announcement::before,
.c-notification--announcement::after {
opacity: 0.5;
}
}
.c-notification--announcement::after {
left: auto;
right: 0;
}
.c-notification--announcement.c-notification--c,
.c-notification--announcement.c-notification--c::before,
.c-notification--announcement.c-notification--c::after {
background-color: #711C1C;
}
.l-notification-bar--sc .c-notification--announcement.c-notification--c,
.l-notification-bar--sc .c-notification--announcement.c-notification--c::before,
.l-notification-bar--sc .c-notification--announcement.c-notification--c::after {
background-color: #711C1C;
}
.l-notification-bar--s42 .c-notification--announcement.c-notification--c,
.l-notification-bar--s42 .c-notification--announcement.c-notification--c::before,
.l-notification-bar--s42 .c-notification--announcement.c-notification--c::after {
background-color: #711C1C;
}
.c-notification--announcement.c-notification--w,
.c-notification--announcement.c-notification--w::before,
.c-notification--announcement.c-notification--w::after {
background-color: #852F0C !important;
}
.c-notification--announcement.c-notification--p,
.c-notification--announcement.c-notification--p::before,
.c-notification--announcement.c-notification--p::after {
background-color: #064a7c !important;
}
@media only screen and (max-width: 1400px) {
.c-notification {
padding: 25px 0 25px 0;
}
}
@media only screen and (max-width: 1024px) {
.c-notification {
padding: 25px 0 25px 0;
}
}
@media only screen and (max-width: 760px) {
.c-notification {
padding: 20px 0;
}
}
.c-notification br {
display: none;
}
@media only screen and (max-width: 1024px) {
.c-notification br {
display: block;
}
}
.c-notification__inner {
position: relative;
z-index: 1;
display: flex;
width: 100%;
padding: 25px 65px 25px 130px;
max-width: 1440px;
margin: 0 auto;
box-sizing: border-box;
mix-blend-mode: luminosity;
}
@media only screen and (max-width: 1400px) {
.c-notification__inner {
padding: 0 40px 0 40px;
}
}
@media only screen and (max-width: 1024px) {
.c-notification__inner {
padding: 0 20px 0 20px;
flex-direction: column;
}
}
@media only screen and (max-width: 760px) {
.c-notification__inner {
padding: 0 20px;
}
}
.c-notification__content,
.c-notification__actions {
display: flex;
width: 50%;
flex-wrap: wrap;
}
@media only screen and (max-width: 1024px) {
.c-notification__content,
.c-notification__actions {
width: 100%;
}
}
.c-notification__content {
flex-direction: column;
}
@media only screen and (max-width: 1024px) {
.c-notification__content {
margin-bottom: 15px;
}
}
.c-notification__title {
display: block;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 5px;
}
.c-notification__message {
color: #798185;
}
.c-notification__message a {
color: #798185;
font-weight: 100;
font-family: "univia-pro", sans-serif;
border-bottom: 1px solid #ffffff;
transition: color 0.3s ease-in-out, border 0.3s ease-in-out;
}
.c-notification__message a:hover,
.c-notification__message a:focus {
color: rgba(121, 129, 133, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.c-notification__actions {
align-items: center;
justify-content: flex-end;
}
@media only screen and (max-width: 1024px) {
.c-notification__actions {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.c-notification__actions {
flex-direction: column;
align-items: flex-start;
}
}
.c-notification__actions-label {
margin: 0 30px;
}
@media only screen and (max-width: 1400px) {
.c-notification__actions-label {
margin: 0 10px;
}
}
@media (max-width: 767px) {
.c-notification__actions-label {
margin: 0 0 10px 0;
}
}
@media (max-width: 767px) {
.c-notification__wrapper-link {
margin-bottom: 10px;
}
.c-notification__wrapper-link:last-child {
margin-bottom: 0;
}
}
.c-notification__button {
font-weight: bold;
color: #798185;
display: inline-block;
text-transform: uppercase;
font-size: 12px;
align-items: center;
cursor: pointer;
vertical-align: middle;
/* checkmark styling */
}
.c-notification__button .c-iconed__icon {
display: inline-block;
flex-shrink: 0;
width: 16px;
margin-left: 5px;
fill: #CBE7EF;
vertical-align: middle;
}
.c-notification__button .c-iconed__icon--arrow {
transform: rotate(-180deg);
position: relative;
top: -2px;
}
.c-notification__button .c-iconed__icon--close {
width: 17px;
height: 17px;
}
.c-notification__button .c-iconed__icon svg {
flex-shrink: 0;
width: 17px;
height: 17px;
}
.c-notification__button-text {
letter-spacing: 0.03em;
border-bottom: 1px solid #ffffff;
display: inline-block;
}
/*
* The bar across the top of pages which contains dismissable notifications
*/
.l-notification-bar {
width: 100%;
position: relative;
z-index: 499;
transition: height 1000ms ease-in-out, opacity 1000ms ease-in-out;
overflow: hidden;
padding: 0px;
display: flex;
justify-content: center;
flex-flow: row wrap;
box-sizing: border-box;
}
.l-notification-bar__boxes {
margin: 0 auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
}
.l-notification-bar__box {
flex: 1 0 auto;
flex-wrap: wrap;
width: 100%;
z-index: 1000;
box-sizing: border-box;
}
.l-notification-bar__box:last-child {
padding-right: 0;
}
.l-notification-bar__box.is-hidden {
display: none;
}
@media (max-width: 1000px) {
.l-notification-bar {
position: absolute;
margin-top: 45px;
z-index: 99;
}
}
@media (max-width: 1023px) {
body.mobile-lock {
overflow: hidden;
}
}
#bodyWrapper {
position: relative;
overflow-x: hidden;
}
#bodyWrapper.disable-scroll {
overflow-y: scroll;
height: 100%;
}
#connect .c-header__platform-bar,
#enlist .c-header__platform-bar {
position: relative;
z-index: 125;
}
.c-header-wrapper.is-full-screen .c-right-sidebar--signin {
width: 100%;
}
.c-header-wrapper.is-search-open .c-brand-menu__backdrop,
.c-header-wrapper.is-account-open .c-brand-menu__backdrop,
.c-header-wrapper.is-mobile-menu-open .c-brand-menu__backdrop {
background-color: rgba(38, 38, 39, 0.75);
width: 100%;
height: 100%;
position: absolute;
z-index: 85;
}
.c-header-wrapper.is-search-open .c-cross-site-menu-item--search .c-cross-site-menu-item-arrow {
transform: rotate(225deg);
}
@media (min-width: 1024px) {
.c-header-wrapper.is-account-open .c-cross-site-menu-item--account:after {
transform: rotate(90deg);
}
}
.c-header-wrapper.is-account-open .c-right-sidebar--account,
.c-header-wrapper.is-account-open .c-right-sidebar--signin {
transform: translateX(0);
}
.c-header-wrapper .c-right-sidebar {
position: fixed;
height: 100vh;
top: 0px;
width: 460px;
right: 0;
transform: translateX(100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 90;
transition-duration: 600ms;
transition-timing-function: cubic-bezier(0.4, 0.44, 0.26, 1.01);
box-sizing: border-box;
}
.c-header-wrapper .c-right-sidebar .js-toggle-account__backdrop {
width: 100vw;
height: 100vh;
position: fixed;
right: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0.7);
transition: all 600ms cubic-bezier(0.4, 0.44, 0.26, 1.01);
}
.c-header-wrapper .c-right-sidebar .js-toggle-account__backdrop.invisible {
pointer-events: none;
opacity: 0;
visibility: hidden;
}
@media (max-width: 1023px) {
.c-header-wrapper .c-right-sidebar {
height: calc(100% - 50px);
top: 50px;
width: calc(100% - 50px);
z-index: 120;
justify-content: flex-start;
}
}
@media (max-width: 375px) {
.c-header-wrapper .c-right-sidebar {
width: 100%;
}
}
.c-header-wrapper .c-right-sidebar ::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.c-header-wrapper .c-right-sidebar ::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.c-header-wrapper .c-right-sidebar ::-webkit-scrollbar-thumb {
border: none;
border-radius: 50px;
}
.c-header-wrapper .c-right-sidebar ::-webkit-scrollbar-track {
border: none;
border-radius: 0px;
}
.c-header-wrapper .c-right-sidebar ::-webkit-scrollbar-corner {
background: transparent;
}
@media (max-width: 1023px) {
.c-header-wrapper .c-right-sidebar__back {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
text-transform: uppercase;
box-sizing: border-box;
padding-left: 15px;
flex-shrink: 0;
color: #aaa;
}
.c-header-wrapper .c-right-sidebar__back:before {
content: '';
display: inline-block;
width: 13px;
height: 19px;
mask: url("/rsi/static/images/header/sidebar/account/sc-line-arrow.svg") left center no-repeat;
-webkit-mask: url("/rsi/static/images/header/sidebar/account/sc-line-arrow.svg") left center no-repeat;
mask-size: 13px 19px;
-webkit-mask-size: 13px 19px;
transform: rotate(180deg);
margin-right: 10px;
background-color: #aaa;
}
}
@media (min-width: 1024px) {
.c-header-wrapper .c-right-sidebar__back {
display: block;
position: absolute;
font-size: 0px;
top: 50px;
right: 10px;
height: 30px;
width: 30px;
}
.c-header-wrapper .c-right-sidebar__back span {
display: block;
position: relative;
width: 18px;
height: 3px;
transition: 0.25s ease-in-out;
}
.c-header-wrapper .c-right-sidebar__back span:nth-child(1) {
transform: rotate(45deg);
top: 9px;
left: 7px;
}
.c-header-wrapper .c-right-sidebar__back span:nth-child(2) {
transform: rotate(-45deg);
top: 6px;
left: 7px;
}
}
@media (min-width: 1024px) {
.c-header-wrapper .c-right-sidebar__back {
display: none;
}
}
.c-header-wrapper .c-right-sidebar__form {
border-radius: 4px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100vh;
transition-duration: 500ms;
transition-delay: 550ms;
padding: 26px;
}
.c-header-wrapper .c-right-sidebar__form.is-hidden {
overflow: hidden;
}
@media (max-width: 1023px) {
.c-header-wrapper .c-right-sidebar__form {
width: 100%;
}
}
@media (min-width: 1024px) {
.c-header-wrapper .c-right-sidebar__form {
width: 392px;
}
}
.c-header-wrapper .c-right-sidebar__form-title {
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
line-height: 17px;
margin-bottom: 20px;
}
.c-header-wrapper .c-right-sidebar__form-error-message {
font-size: 12px;
color: #F24D4D;
letter-spacing: 1.29px;
line-height: 16px;
margin: 0px -26px 0px;
padding: 0px 26px 0px 56px;
max-height: 0px;
transition-duration: 160ms;
position: relative;
overflow: hidden;
display: flex;
}
.c-header-wrapper .c-right-sidebar__form-error-message svg {
margin-right: 10px;
}
.c-header-wrapper .c-right-sidebar__form-success-message {
font-size: 16px;
color: #48AD23;
letter-spacing: 1.71px;
line-height: 17px;
display: none;
text-transform: uppercase;
margin-bottom: 26px;
align-self: flex-end;
}
.c-header-wrapper .c-right-sidebar__form-label {
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
margin-bottom: 7px;
margin-top: 0px;
}
.c-header-wrapper .c-right-sidebar__form-input {
margin: 0px 0px 11px 0px;
font-size: 14px;
letter-spacing: 1px;
padding: 0px 15px;
}
@media (min-width: 1024px) {
.c-header-wrapper .c-right-sidebar__form-input {
width: 340px;
height: 35px;
}
}
.c-header-wrapper .c-right-sidebar__form-input::placeholder {
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
line-height: 30px;
}
.c-header-wrapper .c-right-sidebar__form-input--device {
padding-left: 36px;
background-size: 21px 17px;
background-position: 7px 9px;
background-repeat: no-repeat;
}
.c-header-wrapper .c-right-sidebar__form-checkbox {
visibility: hidden;
position: absolute;
}
.c-header-wrapper .c-right-sidebar__form-checkbox:checked + .c-right-sidebar__form-checkbox-label:after {
opacity: 1;
}
.c-header-wrapper .c-right-sidebar__form-checkbox-label {
padding-left: 30px;
letter-spacing: 1.5px;
line-height: 17px;
font-size: 12px;
position: relative;
display: block;
}
.c-header-wrapper .c-right-sidebar__form-checkbox-label:before,
.c-header-wrapper .c-right-sidebar__form-checkbox-label:after {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
margin-left: -30px;
}
.c-header-wrapper .c-right-sidebar__form-checkbox-label:before {
width: 20px;
height: 20px;
}
.c-header-wrapper .c-right-sidebar__form-checkbox-label:after {
width: 20px;
height: 20px;
background-position: center center;
background-repeat: no-repeat;
margin-top: -17px;
transition-duration: 160ms;
opacity: 0;
}
.c-header-wrapper .c-right-sidebar__form-captcha {
padding-bottom: 10px;
}
.c-header-wrapper .c-right-sidebar__form-submit {
background: none;
border: none;
margin-bottom: 26px;
padding: 0px;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
height: auto;
align-self: flex-end;
background-repeat: no-repeat;
background-position: right center;
background-size: 7px 12px;
padding-right: 14px;
font-family: "univia-pro", sans-serif;
text-transform: uppercase;
}
.c-header-wrapper .c-right-sidebar__form-submit:hover {
cursor: pointer;
}
.c-header-wrapper .c-right-sidebar__form .selectlist {
height: 35px;
border-radius: 0px;
margin: 0px 0px 11px 0px;
}
.c-header-wrapper .c-right-sidebar__form .selectlist .arrow {
margin-top: 15px;
margin-right: 10px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1A5469;
background-color: transparent;
}
.c-header-wrapper .c-right-sidebar__form .selectlist > span {
font-size: 14px;
letter-spacing: 1px;
font-weight: 300;
}
.c-header-wrapper .c-right-sidebar__form .selectlist > .body {
border-radius: 0px;
margin-top: 6px;
}
.c-header-wrapper .c-right-sidebar__form .selectlist ul li {
height: 30px;
font-size: 14px;
letter-spacing: 1px;
font-weight: 300;
line-height: 28px;
}
.c-header-wrapper .c-right-sidebar__form .slideup-on-success {
max-height: 300px;
transition-duration: 160ms;
overflow: hidden;
}
.c-header-wrapper .c-right-sidebar__form .slidedown-on-success {
color: #48AD23;
max-height: 0px;
transition-duration: 160ms;
overflow: hidden;
text-align: right;
margin: -20px 0px 20px;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
}
.c-header-wrapper .c-right-sidebar__form-icon-link {
font-size: 11px;
letter-spacing: 1.38px;
line-height: 17px;
padding-left: 4px;
display: inline-flex;
align-items: center;
}
.c-header-wrapper .c-right-sidebar__form-icon-link .c-account__icon {
margin-right: 5px;
}
.c-header-wrapper .c-right-sidebar__form-icon-link:before {
content: '';
position: relative;
display: inline-block;
left: -4px;
background-position: center center;
background-repeat: no-repeat;
}
.c-header-wrapper .c-right-sidebar__form-icon-link--recovery,
.c-header-wrapper .c-right-sidebar__form-icon-link--signin {
margin-right: 10px;
}
.c-header-wrapper .c-right-sidebar__form-icon-link--backup {
margin-right: 37px;
}
.c-header-wrapper .c-right-sidebar__form-icon-link--backup:before {
width: 30px;
height: 10.5px;
top: 2px;
mask-image: url("/rsi/static/images/header/sidebar/account/stars.svg");
-webkit-mask-image: url("/rsi/static/images/header/sidebar/account/stars.svg");
}
.c-header-wrapper .c-right-sidebar__form .l-oneline {
display: flex;
justify-content: flex-start;
}
.c-header-wrapper .c-right-sidebar__form .l-oneline--fill {
justify-content: space-between;
}
.c-header-wrapper .c-right-sidebar__form.has-error .c-right-sidebar__form-error-message {
margin-bottom: 15px;
padding: 15px 26px 15px 56px;
max-height: 100vh;
}
.c-header-wrapper .c-right-sidebar__form.is-successful .c-right-sidebar__form-success-message {
display: inline-block;
}
.c-header-wrapper .c-right-sidebar__form.is-successful .c-right-sidebar__form-submit {
display: none;
}
.c-header-wrapper .c-right-sidebar__form.is-successful .slideup-on-success {
max-height: 0px;
padding: 0px;
border: 0px solid transparent;
margin: 0px;
}
.c-header-wrapper .c-right-sidebar__form.is-successful .slidedown-on-success {
max-height: 300px;
}
.c-header-wrapper .c-right-sidebar__form.is-hidden {
max-height: 0px;
border: 1px solid transparent;
padding: 0px 26px;
transition-delay: 0ms;
}
.c-header-wrapper .c-right-sidebar__form.is-loading {
animation: formLoading 1.6s infinite linear;
}
@keyframes formLoading {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.c-header-wrapper .c-right-sidebar__form--two-step .c-right-sidebar__form-icon-link--backup {
margin-top: -8px;
margin-bottom: 20px;
}
@media (min-width: 1024px) {
.c-header-wrapper .c-right-sidebar--account {
padding-top: 37px;
}
}
.c-header-wrapper .c-right-sidebar--account .btn-clipped-corners {
position: relative;
display: flex;
align-items: center;
outline: none;
border: none;
z-index: 0;
}
.c-header-wrapper .c-right-sidebar--account .btn-clipped-corners::before,
.c-header-wrapper .c-right-sidebar--account .btn-clipped-corners::after {
position: absolute;
display: block;
width: 12px;
height: 12px;
z-index: 1;
}
.c-header-wrapper .c-right-sidebar--account .btn-clipped-corners::before {
left: 0;
}
.c-header-wrapper .c-right-sidebar--account .btn-clipped-corners::after {
right: 0;
transform: rotate(180deg);
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile {
padding: 25px;
display: flex;
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-metas {
width: 80px;
height: 110px;
display: flex;
flex-wrap: wrap;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-metas-avatar {
width: 80px;
height: 80px;
border-width: 1px;
border-style: solid;
border-radius: 4px 4px 0px 0px;
flex-shrink: 0;
box-sizing: border-box;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-metas-badge {
width: 40px;
height: 30px;
border-width: 1px;
border-style: solid;
flex-shrink: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-metas-badge--icon {
border-right: none;
border-top: none;
border-radius: 0px 0px 0px 4px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-metas-badge--org {
border-top: none;
border-radius: 0px 0px 4px 0px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-metas-badge--image {
width: 24px;
height: 24px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-left: 15px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-identity {
width: 100%;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-displayname {
height: 17px;
font-size: 15px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
display: block;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-handle {
height: 17px;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
display: block;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout {
flex-grow: 1;
display: flex;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-icon {
width: 12px;
height: 13px;
display: flex;
align-items: center;
margin-right: 5px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-icon svg path {
fill: #FF5A5A;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-label {
transform: translateY(-1px);
font-family: "univia-pro", sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .7px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-button {
padding: 5px 15px;
margin: auto 0 0 auto;
cursor: pointer;
font-size: 13px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-button::before {
top: -4px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-button::after {
bottom: -4px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits {
width: 142px;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits-line {
width: 100%;
display: flex;
justify-content: space-between;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits-label {
width: auto;
height: 17px;
font-size: 10px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
flex-shrink: 0;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits-amount {
width: auto;
height: 17px;
font-size: 10px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
text-align: right;
flex-shrink: 0;
white-space: nowrap;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits-amount--pledge {
color: #04E7E7;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits-amount--uec {
color: #FFB400;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits-amount--rec {
color: #AEE5F4;
}
@media (max-width: 1023px) {
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-displayname {
height: auto;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-identity {
order: 1;
max-width: 60%;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-credits {
order: 3;
width: 100%;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout {
order: 2;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__profile-info-signout-button {
margin-top: 0;
padding: 10px 15px;
place-self: flex-start;
}
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
padding: 0px 25px 25px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
width: 100%;
max-width: 48%;
padding: 10px 30px;
box-sizing: border-box;
border-radius: 3px;
transition: all 150ms ease-out;
}
#welcome-hub .c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link {
font-size: 19px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link:nth-child(n + 3) {
margin-top: 15px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link::before {
top: -6px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link::after {
bottom: -6px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link-icon {
display: flex;
align-items: center;
margin-right: 5px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link-icon svg path {
transition: fill 150ms ease-out;
will-change: fill;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link-label {
transform: translateY(-1px);
font-family: "univia-pro", sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .7px;
}
@media (max-width: 767px) {
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link {
width: 100%;
max-width: 100%;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__links-link:nth-child(n + 2) {
margin-top: 15px;
}
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__unconfirmed-account {
box-sizing: border-box;
width: 100%;
padding: 0px 25px 25px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__unconfirmed-account-inner {
margin: 0;
padding: 15px 20px;
font-size: 15px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar__unconfirmed-account-inner em {
display: block;
font-weight: bold;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-tabs {
width: 100%;
height: 100%;
margin-top: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-tabs__list {
display: flex;
justify-content: space-between;
flex-shrink: 0;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-tabs__tab {
height: 20px;
padding: 15px 25px 0px;
text-transform: uppercase;
box-sizing: border-box;
position: relative;
max-width: 50%;
font-size: 17px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-tabs__tab:after {
content: '';
width: 24px;
height: 20px;
display: inline-block;
left: 100%;
top: 0px;
position: absolute;
mask-image: url("/rsi/static/images/header/sidebar/account/tab-end.svg");
-webkit-mask-image: url("/rsi/static/images/header/sidebar/account/tab-end.svg");
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-tabs__content {
height: 100%;
display: flex;
flex-direction: column;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts {
height: 100%;
display: flex;
flex-direction: column;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search {
border: none;
width: 100%;
flex-shrink: 0;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search-input {
width: 100%;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search-submit {
width: 14px;
height: 14px;
display: inline-block;
right: 30px;
margin-top: 13px;
position: absolute;
transition: 0.25s ease-in-out;
transform-origin: center center;
box-sizing: border-box;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search-submit span {
display: block;
position: relative;
width: 9px;
height: 2px;
transition: 0.25s ease-in-out;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search-submit span:nth-child(1) {
transform: rotate(45deg);
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search-submit span:nth-child(2) {
transform: rotate(-45deg);
top: 3px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__search-amount {
height: 17px;
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results {
height: 100%;
display: flex;
flex-direction: column;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-title-wrapper {
height: 40px;
width: 100%;
flex-shrink: 0;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-title {
letter-spacing: 1.82px;
line-height: 17px;
line-height: 40px;
padding-left: 25px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-title--results {
display: none;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list {
height: 100%;
overflow-y: auto;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item {
display: flex;
height: 80px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-avatar {
border-radius: 4px;
border-width: 1px;
border-style: solid;
width: 48px;
height: 48px;
margin: 15px 0px 15px 25px;
flex-shrink: 0;
background-size: 48px 48px;
background-repeat: no-repeat;
background-position: center center;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-info {
margin: 15px 0px 15px 15px;
flex-grow: 1;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-displayname {
display: block;
font-size: 13px;
letter-spacing: 1.39px;
line-height: 17px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-handle {
display: block;
font-size: 11px;
letter-spacing: 1.38px;
line-height: 17px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-actions {
display: flex;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-action {
display: block;
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
line-height: 17px;
margin-top: 5px;
padding-left: 6px;
padding-right: 20px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-action:first-child {
padding-left: 0;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-action:before {
content: '';
display: inline-block;
left: -6px;
position: relative;
top: 2px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-action--unfollow {
display: none;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item-action .h-svg {
position: relative;
top: -2px;
margin-right: 5px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item.is-following .c-account-sidebar-contacts__results-list-item-action--follow {
display: none;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts__results-list-item.is-following .c-account-sidebar-contacts__results-list-item-action--unfollow {
display: block;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts.is-searching .c-account-sidebar-contacts__search-submit {
transform: rotate(-90deg);
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts.is-searching .c-account-sidebar-contacts__search-submit span {
width: 18px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts.is-searching .c-account-sidebar-contacts__search-submit span:nth-child(2) {
top: -1px;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts.is-searching .c-account-sidebar-contacts__results-title--contacts {
display: none;
}
.c-header-wrapper .c-right-sidebar--account .c-account-sidebar-contacts.is-searching .c-account-sidebar-contacts__results-title--results {
display: block;
}
@media (min-width: 1024px) {
.c-header-wrapper .c-right-sidebar--account.is-open:before {
transform: rotate(90deg);
}
}
.c-header-wrapper .c-right-sidebar.is-open {
right: 0%;
}
.c-header-wrapper .c-right-sidebar.is-absolute {
position: absolute;
}
.c-header-wrapper .c-right-sidebar .js-toggle-search__backdrop,
.c-header-wrapper .c-right-sidebar .js-toggle-signin__backdrop,
.c-header-wrapper .c-right-sidebar .js-toggle-account__backdrop {
height: 100vh;
position: fixed;
right: 460px;
z-index: -1;
}
@media (max-width: 1023px) {
.c-header-wrapper .c-right-sidebar .js-toggle-search__backdrop,
.c-header-wrapper .c-right-sidebar .js-toggle-signin__backdrop,
.c-header-wrapper .c-right-sidebar .js-toggle-account__backdrop {
height: 100%;
width: 50px;
left: -50px;
right: unset;
}
}
#connect {
overflow: hidden;
}
#connect .c-right-sidebar--signin {
transform: none;
width: 100%;
transition-duration: 0ms;
}
.c-menu-link {
font-size: 16px;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition-duration: 160ms;
}
.c-menu-link--small {
font-size: 14px;
}
@media (max-width: 1023px) {
.c-menu-link--small {
font-size: 16px;
}
}
.c-menu-link--disabled {
opacity: 0.3;
}
.c-menu-link----rsi {
font-family: Electrolize, sans-serif;
color: #08658B;
transition-duration: 160ms;
}
@media (min-width: 1024px) {
.c-menu-link----rsi {
letter-spacing: 0.095em;
}
}
.c-menu-link----rsi:hover {
color: #fff;
}
.c-menu-link----rsi--small {
color: #77EAF6;
}
@media (max-width: 1023px) {
.c-menu-link----rsi--small {
color: #30A7B8;
}
}
.c-menu-link----rsi--small:hover {
color: #FFF;
}
.c-menu-link----s42 {
line-height: 65px;
font-weight: 600;
color: #6D6D6D;
}
@media only screen and (max-width: 1024px) {
.c-menu-link----s42 {
color: #818F84;
}
}
.c-menu-link----s42:hover,
.c-menu-link----s42.is-active {
color: #C2BEAE;
}
.c-menu-link----sc {
color: #6D6D6D;
}
@media only screen and (max-width: 1024px) {
.c-menu-link----sc {
color: #C3C3C3;
}
}
.c-menu-link----sc:hover {
color: #fff;
}
.c-menu-link----citizencon {
color: rgba(255, 255, 255, 0.8);
font-weight: 900;
font-size: 14px;
}
.c-menu-link----citizencon:hover {
color: #FFFFFF;
}
.c-brand-menu {
z-index: 125;
position: relative;
}
.c-brand-menu----sc .c-brand-menu__logo .h-svg {
width: 100%;
max-width: 90px;
position: relative;
}
.c-brand-menu----sc .c-brand-menu__logo .h-svg::before {
content: '';
width: 120px;
height: 120px;
opacity: 0.5;
position: absolute;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
z-index: -1;
background: radial-gradient(circle, #5F757A 0%, rgba(33, 33, 33, 0) 70%);
}
.c-brand-menu:after {
background-color: rgba(0, 0, 0, 0);
transition-duration: 0.3s;
width: 100%;
height: 100%;
position: fixed;
display: block;
content: '';
top: 0px;
z-index: -1;
right: -100%;
}
.c-brand-menu__hamburger {
display: block;
width: 50px;
height: 50px;
z-index: 120;
top: 0px;
left: 0px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1023px) {
.c-brand-menu__hamburger {
position: fixed;
}
}
@media (min-width: 1024px) {
.c-brand-menu__hamburger {
display: none;
}
}
.c-brand-menu__section {
display: none;
}
@media (max-width: 1023px) {
.c-brand-menu__section {
display: block;
font-size: 13px;
left: 70px;
line-height: 50px;
position: fixed;
text-transform: uppercase;
top: 0;
z-index: 120;
}
.c-brand-menu__section::after {
content: "\2122";
font-size: 10px;
position: relative;
top: -4px;
}
}
@media (max-width: 1023px) {
.c-brand-menu__container {
height: calc(100% - 45px);
display: flex;
flex-direction: column;
left: -100%;
max-width: 420px;
position: fixed;
transition-duration: 0.3s;
width: calc(100% - 60px);
z-index: 100;
top: 45px;
overflow: hidden;
}
}
.c-brand-menu__logo {
box-sizing: border-box;
}
.c-brand-menu__logo .h-svg {
width: 40%;
}
.c-brand-menu__logo a {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
@media (max-width: 1023px) {
.c-brand-menu__logo {
width: 100%;
flex-shrink: 0;
padding: 10px 25px 0 40px;
align-items: flex-start;
}
.c-brand-menu__logo a {
justify-content: flex-start;
}
}
@media (max-width: 1023px) {
.c-brand-menu__items {
display: block;
width: 100%;
height: 100%;
max-height: 500px;
margin: 0;
padding: 0px 0px 0 50px;
box-sizing: border-box;
}
}
@media (max-width: 767px) {
.c-brand-menu__items {
height: 70%;
display: block;
}
}
@media (max-width: 1023px) {
.c-brand-menu__items-container {
height: 70%;
}
}
@media (max-width: 767px) {
.c-brand-menu__items-container {
height: 100%;
}
}
@media (max-width: 1023px) {
.c-brand-menu__item {
display: block;
text-align: left;
box-sizing: border-box;
}
}
.c-brand-menu__item .c-brand-submenu {
overflow: hidden;
}
@media (max-width: 1023px) {
.c-brand-menu__item .c-brand-submenu {
left: 100%;
position: absolute;
height: 70%;
top: 131px;
width: 0px;
z-index: 120;
grid-template-rows: 30px auto;
display: grid;
}
}
@media (max-width: 767px) {
.c-brand-menu__item .c-brand-submenu {
height: 100%;
}
}
@media (min-width: 1024px) {
.c-brand-menu__item .c-brand-submenu {
display: flex;
}
}
@media (max-width: 1023px) {
.c-brand-menu__item .c-brand-submenu-back {
padding-top: 10px;
}
}
@media (min-width: 1024px) {
.c-brand-menu__item .c-brand-submenu-back {
display: none;
}
}
@media (max-width: 1023px) {
.c-brand-menu__item .c-brand-submenu__items {
flex-direction: column;
padding: 0px 0px 10px 20px;
}
}
.c-brand-menu__item .c-brand-submenu__item a {
display: block;
padding: 15px;
}
@media (max-width: 1023px) {
.is-hovered .c-brand-menu__item.is-open .c-brand-submenu {
left: 0px;
width: 100%;
}
}
@media (max-width: 1023px) {
.c-brand-menu__link {
height: 100%;
width: 100%;
display: block;
padding: 15px 0;
line-height: 1;
}
}
@media (max-width: 1023px) {
.c-brand-menu__cta {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #252525;
transition-duration: 240ms;
width: 100%;
height: calc(100% - 600px);
box-sizing: border-box;
flex-shrink: 0;
padding-top: 30px;
padding-left: 30px;
}
}
@media (max-width: 767px) {
.c-brand-menu__cta {
height: 95px;
justify-content: center;
padding-top: 0;
}
}
@media (max-width: 1023px) {
.c-brand-menu__cta .c-btn--playnow:not(.c-btn--togglemore) {
height: 45px;
line-height: 45px;
}
}
@media (max-width: 1023px) {
.c-brand-menu__cta .c-btn--playnow:not(.c-btn--togglemore) div:first-of-type {
border-image-slice: 23 28 fill;
}
}
@media (max-width: 1023px) {
.c-brand-menu__cta .c-btn--playnow:not(.c-btn--togglemore) div:last-of-type {
height: calc(100% - 10px);
width: calc(100% - 10px);
top: 5px;
left: 5px;
}
}
@media (max-width: 1023px) {
.c-brand-menu__cta .c-btn--playnow:not(.c-btn--togglemore)__text strong:last-child {
padding-left: 0px;
}
}
@media (max-width: 1023px) {
.c-brand-menu__cta .c-btn--playnow:not(.c-btn--togglemore)__text strong:first-child {
padding-right: 5px;
}
}
@media (max-width: 1023px) {
.c-brand-menu.is-open .c-brand-menu__backdrop {
background-color: rgba(38, 38, 39, 0.75);
height: calc(100% - 45px);
width: 100%;
left: 0;
position: fixed;
bottom: 0;
z-index: 85;
}
}
@media (max-width: 1023px) {
.c-brand-menu.is-open .c-brand-menu__container {
left: 0px;
}
}
@media (min-width: 1024px) {
.c-brand-menu.is-sticky {
position: fixed;
top: 0px;
}
}
/* Standard colors across all platforms */
.c-platform-footer-brand {
color: #979c9f;
padding: 40px 15px 30px 15px;
margin: 0;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.c-platform-footer-brand--platform,
.c-platform-footer-brand--utility {
padding: 40px 20px 30px 30px;
}
.c-platform-footer-brand--rsi {
padding-left: 20px;
}
.c-platform-footer-brand::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: 36px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: opacity;
}
.c-platform-footer-brand__title {
font-family: "univia-pro";
font-weight: normal;
letter-spacing: 0.16em;
font-size: 12px;
height: 80px;
display: flex;
align-items: flex-end;
text-transform: uppercase;
margin: 0;
padding-bottom: 22px;
position: relative;
transition: color 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
}
.c-platform-footer-brand__arrow {
display: none;
}
@media only screen and (max-width: 1024px) {
.c-platform-footer-brand {
padding: 20px 40px;
position: relative;
}
.c-platform-footer-brand--s42 {
padding-left: 29px;
}
.c-platform-footer-brand--rsi {
padding-left: 36px;
}
.c-platform-footer-brand--platform,
.c-platform-footer-brand--utility {
padding: 20px 40px 20px 105px;
}
.c-platform-footer-brand__title {
padding-bottom: 0;
height: auto;
position: relative;
}
.c-platform-footer-brand__arrow {
display: block;
}
.c-platform-footer-brand__arrow svg {
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(270deg);
transition: transform 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: transform;
}
.c-platform-footer-brand::before {
border-bottom-right-radius: 0;
border-bottom-left-radius: 36px;
border-top-left-radius: 4px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 26px 100%, 0 calc(100% - 26px));
}
}
.c-platform-footer-list {
margin: 10px 0 0 0;
padding-left: 60px;
}
.c-platform-footer-list--rsi {
padding-left: 68px;
}
.c-platform-footer-list--s42 {
padding-left: 70px;
}
.c-platform-footer-list--utility,
.c-platform-footer-list--platform {
padding-left: 0;
}
@media only screen and (max-width: 1024px) {
.c-platform-footer-list {
display: none;
}
.is-open .c-platform-footer-list {
display: block;
}
}
.c-platform-footer-social {
position: relative;
flex: 1 0 auto;
margin: 0;
padding: 30px 30px 0 0;
}
.c-platform-footer-social .l-social-links {
margin: 15px 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: opacity;
padding: 0 0 0 45px;
}
.c-platform-footer-social::before {
content: "";
border-bottom-right-radius: 36px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
position: absolute;
top: -45px;
left: 0;
right: 0;
bottom: 0;
height: calc(100% + 45px);
width: 100%;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: opacity;
}
.c-platform-footer-social .c-arrow-link {
display: flex;
align-items: center;
justify-content: flex-end;
}
.c-platform-footer-social .c-arrow-link:hover,
.c-platform-footer-social .c-arrow-link:focus {
filter: none;
}
.c-platform-footer-social .c-arrow-link__arrow {
position: relative;
transform: none;
}
.c-platform-footer-social .c-arrow-link__arrow svg {
transform: rotate(270deg);
transition: transform 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: transform;
}
@media only screen and (max-width: 1024px) {
.c-platform-footer-social {
display: none;
padding: 20px 33px 20px 20px;
}
.c-platform-footer-social .c-arrow-link {
justify-content: flex-start;
padding-left: 45px;
}
.c-platform-footer-social .c-arrow-link__arrow {
margin-left: auto;
}
.c-platform-footer-social::before {
border-bottom-right-radius: 0;
border-bottom-left-radius: 36px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 26px 100%, 0 calc(100% - 26px));
}
.c-platform-footer-social .l-social-links {
position: relative;
padding-left: 35px;
display: none;
}
}
.c-platform-footer-link {
display: block;
font-family: "univia-pro", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.064em;
text-transform: uppercase;
transition-duration: 160ms;
position: relative;
color: #ababab;
transition: 0.3s color cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: color;
}
@supports (mix-blend-mode: luminosity) {
.c-platform-footer-link {
color: #979c9f;
mix-blend-mode: luminosity;
}
}
.c-platform-footer-link:hover,
.c-platform-footer-link:focus,
.c-platform-footer-link--active {
color: #CFDEE8;
}
.c-platform-footer-link--icon {
display: flex;
align-items: center;
}
@media only screen and (max-width: 1170px) {
.c-platform-footer-link {
font-size: 12px;
letter-spacing: 0;
}
}
@media only screen and (max-width: 1024px) {
.c-platform-footer-link {
letter-spacing: 0.064em;
}
}
.l-platform-copyright-container {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 100%;
max-width: 990px;
padding: 25px 15px 20px 15px;
}
.c-platform-copyright {
position: relative;
z-index: 30;
box-sizing: border-box;
/* Default RSI Color */
background-color: #1a252d;
/* Squadron 42 Variant */
/* Star Citizen Variant */
}
.c-platform-copyright--s42 {
background-color: #202219;
}
.c-platform-copyright--sc {
background-color: #262627;
}
.c-platform-copyright *,
.c-platform-copyright *::before,
.c-platform-copyright *::after {
box-sizing: inherit;
}
.c-platform-copyright__logo {
width: 60px;
display: block;
position: relative;
z-index: 15;
}
.c-platform-copyright__logo .c-iconed__icon {
width: 100%;
fill: #979C9F;
}
.c-platform-copyright__logo svg {
fill: #979C9F;
}
.c-platform-copyright__body {
padding-left: 50px;
color: #979C9F;
font-size: 10px;
letter-spacing: 0.08em;
font-weight: 400;
line-height: 22px;
text-align: center;
margin: 0;
}
@media only screen and (max-width: 1024px) {
.l-platform-copyright-container {
max-width: 81.33%;
margin: 0 0 0 auto;
}
.c-platform-copyright__body {
padding-left: 45px;
text-align: left;
line-height: 1.6em;
}
}
@media only screen and (max-width: 375px) {
.l-platform-copyright-container {
max-width: 100%;
}
}
/* Starting to rework this */
.c-cross-brand-footer-sitemap {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-bottom: 0px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
position: relative;
}
@media only screen and (max-width: 1400px) {
.c-cross-brand-footer-sitemap {
position: static;
}
}
@keyframes MixBlendModeAnimationHack {
0% {
mix-blend-mode: normal;
}
100% {
mix-blend-mode: luminosity;
}
}
.c-platform-footer {
box-sizing: border-box;
background: #131a21;
display: flex;
flex-wrap: wrap;
padding: 0 0 20px 0;
}
.c-platform-footer *,
.c-platform-footer *::before,
.c-platform-footer *::after {
box-sizing: inherit;
}
.c-platform-footer h1,
.c-platform-footer h2,
.c-platform-footer h3,
.c-platform-footer h4,
.c-platform-footer h5,
.c-platform-footer h6 {
color: inherit;
}
.c-platform-footer ul,
.c-platform-footer ol {
list-style: none;
}
.c-platform-footer .l-column {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 240px;
}
.c-platform-footer .l-column--smaller {
max-width: 210px;
}
.c-platform-footer .c-brand {
font-family: "univia-pro", sans-serif;
text-transform: uppercase;
font-size: 12px;
line-height: 1.1em;
letter-spacing: 1px;
box-sizing: border-box;
color: #979c9f;
position: relative;
display: flex;
align-items: center;
align-self: center;
transition: color 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: color;
}
.c-platform-footer .c-brand__arrow svg {
display: none;
}
.c-platform-footer .c-brand__label {
position: relative;
padding-left: 15px;
margin-left: 10px;
}
.c-platform-footer .c-brand__label::before {
content: "";
display: block;
position: absolute;
width: 1px;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0.6;
background-image: linear-gradient(180deg, #595959, #595959);
height: 60px;
transition: opacity 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01), background-image 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01), height 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: opacity, height, background-image;
}
.c-platform-footer .c-brand__logo {
position: relative;
display: block;
width: 54px;
height: 80px;
flex-shrink: 0;
}
.c-platform-footer .c-brand__logo::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -36px;
margin-left: -36px;
height: 72px;
width: 72px;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: opacity;
z-index: 0;
}
.c-platform-footer .c-brand__logo--sc {
width: 50px;
}
.c-platform-footer .c-brand__logo--sc::before {
background: radial-gradient(circle, #5F757A 0%, rgba(33, 33, 33, 0) 60%);
}
.c-platform-footer .c-brand__logo--s42 {
width: 61px;
}
.c-platform-footer .c-brand__logo--s42::before {
background: radial-gradient(#778842 15%, rgba(93, 104, 56, 0.5) 40%, rgba(33, 33, 33, 0) 70%);
}
.c-platform-footer .c-brand__logo--rsi {
width: 54px;
}
.c-platform-footer .c-brand__logo--rsi::before {
background: radial-gradient(circle, rgba(71, 140, 177, 0.5) 0%, rgba(71, 140, 177, 0) 60%);
}
.c-platform-footer .c-brand .h-svg {
fill: #6E6E6E;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all .3s linear;
}
.c-platform-footer .c-brand .h-svg svg {
fill: #6E6E6E;
}
.c-platform-footer .c-brand .h-svg:not([class$="--fullcolor"]) {
animation: MixBlendModeAnimationHack 0s linear 2s forwards;
}
.c-platform-footer [class$="--fullcolor"] {
opacity: 0;
}
.c-platform-footer--rsi [class$="rsi--fullcolor"] {
opacity: 1;
}
.c-platform-footer--sc [class$="star-citizen--fullcolor"] {
opacity: 1;
}
.c-platform-footer--s42 [class$="s42--fullcolor"] {
opacity: 1;
}
.c-platform-footer .c-iconed__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 100%;
max-width: 40px;
}
.c-platform-footer .c-iconed__icon svg {
display: inline-block;
vertical-align: middle;
width: 23px;
height: 23px;
flex: none;
max-width: none;
max-height: none;
}
.c-platform-footer .c-iconed__icon--facebook svg {
width: 12px;
height: 23px;
}
.l-platform-footer-container {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1150px;
padding: 0 20px;
margin: 0 auto;
}
.c-platform-footer__column:hover .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column:focus .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column.is-open .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column.social-is-open .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column.is-active .c-platform-footer-brand .c-brand__label::before {
background: linear-gradient(180deg, #1090EF, #647553 33.3333333%, #876D4A 66.6666667%, #CC8B25);
height: 80px;
}
.c-platform-footer__column:hover .c-platform-footer-brand [class$="--fullcolor"],
.c-platform-footer__column:focus .c-platform-footer-brand [class$="--fullcolor"],
.c-platform-footer__column.is-open .c-platform-footer-brand [class$="--fullcolor"],
.c-platform-footer__column.social-is-open .c-platform-footer-brand [class$="--fullcolor"],
.c-platform-footer__column.is-active .c-platform-footer-brand [class$="--fullcolor"] {
opacity: 1;
}
.c-platform-footer__column:hover .c-platform-footer-brand::before,
.c-platform-footer__column:focus .c-platform-footer-brand::before,
.c-platform-footer__column.is-open .c-platform-footer-brand::before,
.c-platform-footer__column.social-is-open .c-platform-footer-brand::before,
.c-platform-footer__column.is-active .c-platform-footer-brand::before,
.c-platform-footer__column:hover .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column:focus .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column.is-open .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column.social-is-open .c-platform-footer-brand .c-brand__label::before,
.c-platform-footer__column.is-active .c-platform-footer-brand .c-brand__label::before {
opacity: 1;
}
.c-platform-footer__column:hover .c-brand__logo--sc::before,
.c-platform-footer__column:focus .c-brand__logo--sc::before,
.c-platform-footer__column.is-open .c-brand__logo--sc::before,
.c-platform-footer__column.social-is-open .c-brand__logo--sc::before,
.c-platform-footer__column.is-active .c-brand__logo--sc::before,
.c-platform-footer__column:hover .c-brand__logo--rsi::before,
.c-platform-footer__column:focus .c-brand__logo--rsi::before,
.c-platform-footer__column.is-open .c-brand__logo--rsi::before,
.c-platform-footer__column.social-is-open .c-brand__logo--rsi::before,
.c-platform-footer__column.is-active .c-brand__logo--rsi::before {
opacity: 0.4;
}
.c-platform-footer__column:hover .c-brand__logo--s42::before,
.c-platform-footer__column:focus .c-brand__logo--s42::before,
.c-platform-footer__column.is-open .c-brand__logo--s42::before,
.c-platform-footer__column.social-is-open .c-brand__logo--s42::before,
.c-platform-footer__column.is-active .c-brand__logo--s42::before {
opacity: 0.6;
}
.c-platform-footer__column.is-open .c-platform-footer-social,
.c-platform-footer__column.is-open .c-platform-footer-list {
display: block;
}
.c-platform-footer__column.is-open .c-platform-footer-social::before {
opacity: 1;
}
.c-platform-footer__column.is-open .c-brand__arrow svg,
.c-platform-footer__column.is-open .c-platform-footer-brand__arrow svg {
transform: translateY(-50%) rotate(90deg);
}
.c-platform-footer__column.social-is-open .c-platform-footer-social::before {
opacity: 1;
}
.c-platform-footer__column.social-is-open .l-social-links {
display: block;
max-height: 600px;
opacity: 1;
}
.c-platform-footer__column.social-is-open .c-arrow-link__arrow svg {
transform: rotate(90deg);
}
.c-platform-footer .c-arrow-link__arrow svg,
.c-platform-footer .c-brand__arrow svg,
.c-platform-footer .c-platform-footer-brand__arrow svg {
fill: #55a5b6;
}
.c-platform-footer__column:hover .c-brand,
.c-platform-footer .is-active .c-brand,
.c-platform-footer .is-open .c-brand,
.c-platform-footer__column:hover .c-platform-footer-brand,
.c-platform-footer .is-active .c-platform-footer-brand,
.c-platform-footer .is-open .c-platform-footer-brand {
color: #CFDEE8;
}
.c-platform-footer .is-open .c-brand__arrow svg,
.c-platform-footer .is-open .c-platform-footer-brand__arrow svg {
fill: #42edf8;
}
.c-platform-footer .social-is-open .c-arrow-link__arrow svg {
fill: #42edf8;
}
.c-platform-footer .c-platform-footer-brand::before {
background: #1a252d;
}
.c-platform-footer .c-platform-footer-social::before {
background: #202b33;
}
.c-platform-footer--s42 {
background: #1a1c13;
}
.c-platform-footer--s42 .c-arrow-link__arrow svg,
.c-platform-footer--s42 .c-brand__arrow svg,
.c-platform-footer--s42 .c-platform-footer-brand__arrow svg {
fill: #a06123;
}
.c-platform-footer--s42__column:hover .c-brand,
.c-platform-footer--s42 .is-active .c-brand {
color: #BEBCA7;
}
.c-platform-footer--s42 .is-open .c-brand__arrow svg,
.c-platform-footer--s42 .is-open .c-platform-footer-brand__arrow svg {
fill: #d08808;
}
.c-platform-footer--s42 .social-is-open .c-arrow-link__arrow svg {
fill: #d08808;
}
.c-platform-footer--s42 .c-platform-footer-brand::before {
background: #25261d;
}
.c-platform-footer--s42 .c-platform-footer-social::before {
background: #2b2e21;
}
.c-platform-footer--sc {
background: #1a1a1a;
}
.c-platform-footer--sc .c-arrow-link__arrow svg,
.c-platform-footer--sc .c-brand__arrow svg,
.c-platform-footer--sc .c-platform-footer-brand__arrow svg {
fill: #cc7619;
}
.c-platform-footer--sc__column:hover .c-brand,
.c-platform-footer--sc .is-active .c-brand {
color: #C3C6C9;
}
.c-platform-footer--sc .is-open .c-brand__arrow svg,
.c-platform-footer--sc .is-open .c-platform-footer-brand__arrow svg {
fill: #e49035;
}
.c-platform-footer--sc .social-is-open .c-arrow-link__arrow svg {
fill: #e49035;
}
.c-platform-footer--sc .c-platform-footer-brand::before {
background: #262627;
}
.c-platform-footer--sc .c-platform-footer-social::before {
background: #2f2f2f;
}
@media only screen and (max-width: 1024px) {
.l-platform-footer-container {
flex-direction: column;
align-items: flex-end;
padding-right: 0;
}
.c-platform-footer .l-column {
display: block;
max-width: 81.33%;
}
.c-platform-footer .c-brand__arrow {
display: block;
position: absolute;
top: 50%;
right: 0;
transform: none;
}
.c-platform-footer .c-brand__arrow svg {
display: block;
transform: translateY(-50%) rotate(270deg);
transition: transform 0.3s cubic-bezier(0.4, 0.44, 0.26, 1.01);
will-change: transform;
}
}
@media only screen and (max-width: 375px) {
.c-platform-footer .l-column {
max-width: 100%;
}
}
/* The right arrow ">" SVG */
/* The download arrow "\/" SVG */
.c-arrow-link {
position: relative;
display: block;
cursor: pointer;
transition: filter 200ms ease-in-out;
filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
/* Color theme Modifiers */
/* Blocks */
/* Text below the link */
}
.c-arrow-link:hover {
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
}
.c-arrow-link--color-sc {
fill: #a06123;
}
.c-arrow-link--color-s42 {
fill: #B47300;
}
.c-arrow-link--color-rsi {
fill: #42edf8;
}
.c-arrow-link.is-open .c-arrow-link__arrow {
transform: rotate(270deg);
}
.c-arrow-link__arrow {
cursor: pointer;
display: flex;
align-items: center;
transform: rotate(180deg) translateY(2px);
transition: transform 200ms ease-in-out;
width: 26px;
height: 26px ;
position: absolute;
left: 0px;
top: 0px;
background-image: url("data:image/svg+xml;utf8,");
}
.c-arrow-link__arrow--download {
transform: rotate(0deg) translateY(-2px);
width: 17px;
background-image: url("data:image/svg+xml;utf8,");
}
.c-arrow-link__arrow svg {
max-height: 100%;
/* Just needed for IE11 */
max-width: 100%;
flex: 1 0 100%;
}
.c-arrow-link__text {
cursor: pointer;
font-family: "univia-pro", sans-serif;
padding: 0px 0 5px 0px;
margin-left: 30px;
font-size: 16px;
position: relative;
display: inline;
color: rgba(255, 255, 255, 0.9);
font-weight: 100;
letter-spacing: 1px;
/* Rainbow underline */
/* All caps text */
}
.c-arrow-link__text--underline::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 1px;
left: 50%;
transform: translate(-50%, 0);
bottom: 0px;
background: linear-gradient(-90deg, #1090EF, #647553 33.3333333%, #876D4A 66.6666667%, #CC8B25);
transition: width 0.3s ease-in-out;
}
.c-arrow-link__text--allcaps {
text-transform: uppercase;
}
.c-arrow-link__description {
display: block;
margin-left: 29px;
margin-top: 5px;
color: rgba(255, 255, 255, 0.7);
}
#cookiebanner {
background: #262627;
color: #798185;
font-size: 0.9rem;
opacity: 1 !important;
}
#cookiebanner .banner {
max-width: 1440px;
padding: 0 65px 0 130px;
margin: auto;
}
#cookiebanner .top {
display: flex;
align-items: center;
}
#cookiebanner .banner-text {
flex: 1;
margin-right: 50px;
}
#cookiebanner .banner-text h2 {
color: #ffffff;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: bold;
line-height: 1.6;
padding: 10px 0 5px;
margin: 15px 0;
}
#cookiebanner .banner-text p {
line-height: 1.3;
text-align: justify;
color: #798185;
font-size: 0.9rem;
}
#cookiebanner .banner-accept-buttons {
margin-left: auto;
font-size: 0.8rem;
color: #798185;
}
#cookiebanner .banner-accept-buttons .banner-accept-button {
display: inline-block;
position: relative;
text-transform: uppercase;
cursor: pointer;
color: #798185;
transition: color 0.3s ease;
}
#cookiebanner .banner-accept-buttons .banner-accept-button:hover {
color: #ffffff;
}
#cookiebanner .banner-accept-buttons .banner-accept-button:hover::after {
background: #ffffff;
}
#cookiebanner .banner-accept-buttons .banner-accept-button:hover svg {
fill: #ffffff;
}
#cookiebanner .banner-accept-buttons .banner-accept-button:after {
content: "";
display: block;
height: 1px;
left: 0;
right: 0;
background: #798185;
position: absolute;
bottom: -5px;
transition: background 0.3s ease;
}
#cookiebanner .banner-accept-buttons .banner-accept-button .c-iconed__icon {
display: inline-block;
height: 18px;
width: 18px;
}
#cookiebanner .banner-accept-buttons .banner-accept-button svg {
fill: #798185;
transition: fill 0.3s ease;
}
#cookiebanner .banner-accept-buttons .or {
margin: 0 10px;
display: inline-block;
}
#cookiebanner label {
color: #798185;
display: inline-block;
margin-left: 3px;
margin-right: 20px;
font-size: 0.9rem;
font-weight: normal;
}
#cookiebanner .show-more-button {
cursor: pointer;
position: relative;
color: #ffffff;
font-size: 1rem;
display: inline-block;
}
#cookiebanner .show-more-button::after {
display: block;
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(-90deg, #1090ef, #647553 33.3333333%, #876d4a 66.6666667%, #cc8b25);
}
#cookiebanner .show-more-button .hide {
display: none;
}
#cookiebanner .show-more-button .c-iconed__icon {
height: 18px;
width: 18px;
margin-left: 5px;
position: relative;
top: 3px;
}
#cookiebanner .show-more-button svg {
fill: #cc7619;
height: 18px;
width: 18px;
transition: transform 0.3s ease;
}
#cookiebanner .show-more-button .show svg {
transform: rotate(90deg);
}
#cookiebanner .show-more-button .hide svg {
transform: rotate(-90deg);
}
#cookiebanner .tab-headers {
display: flex;
margin-top: 25px;
}
#cookiebanner .tab-headers .tab-header {
padding: 20px 0 20px 20px;
width: 220px;
background: #151515;
color: #ffffff;
transition: background 0.3s ease;
cursor: pointer;
font-weight: bold;
}
#cookiebanner .tab-headers .tab-header:hover {
background: #656565;
}
#cookiebanner .category {
padding: 20px 0 20px 20px;
width: 220px;
background: #151515;
transition: background 0.3s ease;
cursor: pointer;
}
#cookiebanner .category:hover {
background: #656565;
}
#cookiebanner .category-content {
padding: 15px 20px;
}
#cookiebanner .expendable {
display: none;
margin-bottom: 10px;
}
#cookiebanner.expended .expendable {
display: block;
}
#cookiebanner.expended .show-more-button .hide {
display: inline-block;
}
#cookiebanner.expended .show-more-button .show {
display: none;
}
#cookiebanner .tab-content {
display: none;
height: 300px;
background: #1f1f1f;
}
#cookiebanner .tab-content:nth-child(2) {
padding: 15px 20px;
}
#cookiebanner .tab-content.tab-content__displayed {
display: flex;
}
#cookiebanner .category-contents {
width: calc(100% - 220px);
}
#cookiebanner .checkbox {
cursor: pointer;
}
#cookiebanner .category-contents .category-content {
display: none;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
#cookiebanner .category-contents .category-content.category-content__displayed {
display: block;
}
#cookiebanner .category-contents .category-content table {
margin-top: 10px;
width: 100%;
}
#cookiebanner .category-contents .category-content thead th,
#cookiebanner .category-contents .category-content tbody td {
border: none;
padding: 12px 16px;
color: #ffffff !important;
vertical-align: top;
}
#cookiebanner .category-contents .category-content thead th {
background-color: #262626 !important;
font-weight: 500;
color: #ffffff !important;
text-align: left;
font-size: 0.75rem;
}
#cookiebanner .category-contents .category-content tbody td {
color: #798185 !important;
background-color: #323232 !important;
font-size: 0.75rem;
}
#cookiebanner .category-contents .category-content tbody td a {
color: #798185 !important;
}
#cookiebanner .selector-category {
display: none;
}
#cookiebanner .selector-category #select-category {
background: #798185;
border: none;
width: calc(100% - 20px);
padding: 10px 12px;
margin: 10px 15px;
box-sizing: border-box;
}
#cookiebanner .selectors {
margin: 15px 0;
}
#cookiebanner .c-cookie-banner__content a {
color: inherit;
text-decoration: underline;
}
#cookiebanner .c-cookie-banner__content a:hover,
#cookiebanner .c-cookie-banner__content a:focus {
text-decoration: underline;
}
#cookiebanner .c-cookie-banner-selectors {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0;
}
#cookiebanner .c-cookie-banner-icon {
display: none;
}
@media only screen and (max-width: 1400px) {
#cookiebanner .banner {
padding: 0 40px;
}
}
@media only screen and (max-width: 768px) {
#cookiebanner .top {
flex-direction: column;
align-items: normal;
}
#cookiebanner .banner-text {
margin-right: 0;
}
#cookiebanner .tab-content-category {
flex-direction: column;
}
#cookiebanner .list-categories {
display: none;
}
#cookiebanner .selector-category {
display: block;
}
#cookiebanner .category-contents {
width: 100%;
}
#cookiebanner .tab-content {
height: 360px;
overflow: auto;
}
}