:root { --logo-height__mobile: 17px; --logo-height: 22px; --logo-height-footer: 28px; --font-family1: "Suisse"; --opacityLogo: 1; --logo-img: transparent; --bold: 500; --bold-btn: 600; --font-family2: "M7 Sans" } .canalplusat, .cz_canalplus, .sk_canalplus, .nl_canalplus, .be_canalplus, .de_arthaus { --logo-height__mobile: 33px; --logo-height: 38px; --font-family1: "Hind", sans-serif; --font-family2: "CanalBoldItalique", sans-serif; --font-button: "CanalBoldItalique", sans-serif } .online { --font-family1: "Open Sans", sans-serif; --font-button: "Open Sans", sans-serif; --bold: 600; --bold-btn: 700 } .de_arthaus { --logo-height__mobile: 23px; --logo-height: 28px; --font-family1: "Open Sans", sans-serif; --font-button: "Open Sans", sans-serif } .header__old { --font-button: "Heading", sans-serif } .canaldigitaal .dark-mode, .canaldigitaal.dark-mode { --opacityLogo: 0; --logo-img: url("https://dev.m7cdn.io/canaldigitaal/img/logo-inverted.png") } .tvvlaanderen .dark-mode, .tvvlaanderen.dark-mode { --opacityLogo: 0; --logo-img: url("https://m7cdn.io/tvvlaanderen/img/logo-inverted.png") } .telesat .dark-mode, .telesat.dark-mode { --opacityLogo: 0; --logo-img: url("https://m7cdn.io/telesat/img/logo-inverted.png") } .directone .dark-mode, .directone.dark-mode { --opacityLogo: 0; --logo-img: url("https://m7cdn.io/directone/img/logo-inverted.png") } .focussat .dark-mode, .focussat.dark-mode { --opacityLogo: 0; --logo-img: url("https://m7cdn.io/focussat/img/logo-inverted.png") } .hdaustria .dark-mode, .hdaustria.dark-mode { --opacityLogo: 0; --logo-img: url("https://dev.m7cdn.io/hdaustria/img/logo-inverted.png") } .freesatcz, .freesatsk { --logo-height__mobile: 33px; --logo-height: 38px; --logo-height-footer: 48px; --font-family1: "Suisse"; --font-family2: "Suisse" } :root, .light-version { --white: #FFFFFF; --black: #000000; --grey1: #323232; --grey2: #C8C8C8; --grey3: #fafafa; --grey4: #eee; --blue1: #140087; --green1: #44bf2f; --btnLogoutLogin: #fe8606; --grey1_rgb: 50, 50, 50; --alpha: 0.7; --alpha_2: 0.1; --transparent: transparent; --borderColor: #C8C8C8; --searchColor: #323232; --icon-bg: #eee; --btn-color-text: #FFFFFF; --border-color-input: #eee; --tvcp-banner-text-color: #FFFFFF; --tvcp-page-background: #111 } .theme-dark, .canalplusat, .dark-mode, .nl_canalplus, .cz_canalplus, .sk_canalplus, .be_canalplus, .de_arthaus { --white: #16191C; --black: #FFFFFF; --grey1: #fafafa; --grey2: #eee; --grey3: #0d0d0d; --grey4: #16191C; --blue1: #ec3655; --green1: #ec3655; --grey1_rgb: 250, 250, 250; --alpha: 0.7; --borderColor: #323232; --transparent: #fff !important; --searchColor: #323232; --borderColor: #323232; --icon-bg: #0d0d0d; --btn-color-text: #FFFFFF; --border-color-input: #181818 } .de_arthaus, .de_arthaus .light-version { --blue1: #ffdc00; --green1: #ffdc00; --btn-color-text: #000000; --border-color-input: #eee } body:not(.canalplusat):not(.nl_canalplus):not(.hdaustria):not(.cz_canalplus):not(.nl_canalplus):not(.sk_canalplus):not(.be_canalplus):not(.de_arthaus):not(.canaldigitaal).dark-mode { --blue1: #C80000 !important; --green1: #C80000 !important } .online { --blue1: #7250ba; --green1: #ffa200; --btnLogoutLogin: #ffa200 } .freesatcz, .freesatsk { --blue1: #0AD; --green1: #0AD; --btnLogoutLogin: #0AD } ::selection { color: var(--btn-color-text) !important; background: var(--blue1) !important } .c-footer__top { border-top: 1px solid var(--grey4); background: var(--grey3) } .c-footer__top p { color: var(--grey1) !important; margin-bottom: 0; font-weight: 600 } .c-footer__middle { background: var(--white); border-top: 1px solid var(--grey4) } .c-footer__middle a:not(.btn) { font-size: 14px; font-size: .875rem; line-height: 1.4; margin-bottom: 15px } .c-footer__middle a:not(.btn) span { font-size: 14px; font-size: .875rem } .c-footer__middle p { line-height: 2.4 } .c-footer__middle p { line-height: 1.5; margin-bottom: 0 } .c-footer__middle p:not(:last-of-type) { margin-bottom: 15px; margin-bottom: 0.9375rem } .c-footer__middle ul li a:not(.btn) { color: rgba(var(--grey1_rgb), var(--alpha)) !important; font-weight: 400; display: inline-flex; align-self: center } .c-footer__middle ul li a svg { display: inline-flex; align-self: center; margin-right: 4px; margin-right: .25rem } .c-footer__middle ul li span.icon { display: inline-flex } .c-footer__middle ul li a:not(.btn) span.icon svg { display: inline-flex; align-self: center; width: 21px } .c-footer__middle ul li a:not(.btn) span.icon svg path, .c-footer__middle ul li a:not(.btn) span.icon svg rect, .c-footer__middle ul li a:not(.btn) span.icon svg circle { stroke: rgba(var(--grey1_rgb), var(--alpha)) !important } .c-footer__middle .btn { margin-bottom: 10px; margin-bottom: 0.625rem; display: inline-flex; align-items: center } .c-footer__middle .btn svg { display: inline-flex; align-self: center; margin-right: 4px; margin-right: 0.25rem } .c-footer__middle .btn svg path, .c-footer__middle .btn svg circle { stroke: #fff } .c-footer__middle--logo img { opacity: var(--opacityLogo); height: var(--logo-height-footer) } .c-footer__middle--logo { background: var(--logo-img); background-position: right center; background-repeat: no-repeat; background-size: contain; display: inline-block } .c-footer__bottom { background: var(--grey3); border-top: 1px solid var(--grey4) } .c-footer__bottom p, .c-footer__bottom a { text-decoration: underline !important; display: inline-flex; align-items: center; color: var(--grey1) !important } .c-footer__bottom p, .c-footer__bottom a { font-size: 12px; font-size: .75rem } .c-footer__bottom a .icon svg, .c-footer__bottom a .icon { display: inline-flex; align-self: center } .c-footer__bottom a:not(.c-footer__bottom-social) .icon svg { margin-right: 6px } .c-footer__bottom-social { height: 32px; height: 2rem; width: 32px; width: 2rem; margin-left: 10px; margin-left: 0.625rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--grey4); border-radius: 50%; border-color: rgba(var(--grey1_rgb), var(--alpha_2)) !important } .c-footer__bottom-social svg path:last-of-type, .c-footer__bottom-social svg circle, .c-footer__bottom-social svg line { fill: var(--grey1) !important } .c-footer__title { margin-bottom: 0; font-weight: bold; color: rgba(var(--grey1_rgb), var(--alpha_2)) !important } .c-footer__disclaimer p, .c-footer__disclaimer span, .c-footer__disclaimer em { font-size: 12px; font-size: .75rem } .c-footer .bold * { font-weight: var(--bold-btn) !important } .canaldigitaal { .adyen-checkout__payment-method__header { padding-left: 0 !important; .adyen-checkout__payment-method__header__title { color: white !important; } } }