/* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .errorPage___YRxy6 { display: flex; align-items: center; flex-direction: column; width: 100%; } .errorPage--dark___UdFBB { color: var(--color_darkmode-textcolor-primary); } .errorPage__title___Irq6o { color: var(--color_error-text); font-size: 3.9rem; font-weight: var(--fontWeight_semiBold); text-align: center; } @media screen and (min-width: 700px) { .errorPage__title___Irq6o { font-size: 3.8rem } } [data-device-type="tv"] .errorPage__title___Irq6o { font-size: 4.7rem; } .errorPage__text___a2qqU { max-width: 80rem; } [data-device-type="tv"] .errorPage__text___a2qqU { font-size: 3.1rem; } .errorPage__button___zvBHG { background: var(--color_secondary); } [data-theme~='telecomitalia'] .errorPage__button___zvBHG { color: var(--color_button-fg); } .errorPage__button__tvDevice___BuN0K { background-color: var(--color_button-tv); } .errorPage__button___zvBHG:hover { background-color: var(--color_button-bg-hover); } [data-device-type="tv"] .errorPage__button___zvBHG { display: flex; align-items: center; font-size: 2.6rem; border-radius: 0.8rem; height: 7.2rem; } .errorPage .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .GDPRConsent___gFmVk { align-items: center; display: flex; flex-direction: column; justify-content: center; } .GDPRConsent__buttonsContainer___Ildnm { align-self: flex-start; margin: 1.6rem 0 0 0; } .GDPRConsent__button___nhkuQ { background-color: var(--color_GDPR-button-bg); border-radius: var(--border-radius-extraLarge); color: var(--color_GDPR-button-fg); font-size: 3.6rem; line-height: 4rem; margin-top: 1.6rem; margin-right: 1.6rem; transition: none; width: 48rem; } .GDPRConsent__button--fullWidth___ryPt2 { display: flex; align-items: center; justify-content: space-between; width: 100%; } .GDPRConsent__button--learnMore___TNQZ8 { font-size: 3rem; line-height: 3.5rem; margin: 4rem 0 3rem; padding: 1.6rem 2rem 0.9rem; } .GDPRConsent__button--icon___GqC5P { fill: var(--color_GDPR-icon-fg); height: 5rem; width: 5rem; } .GDPRConsent__title___GbHBm { font-family: var(--font_canal-bold-italique); font-size: 4.8rem; text-transform: uppercase; line-height: 5.2rem; font-weight: var(--fontWeight_semiBold); margin-bottom: 4.4rem; margin-top: 7rem; align-self: flex-start; } .GDPRConsent__text___sqJll { color: var(--color_GDPR-text-fg); font-size: 3.1rem; line-height: 3.6rem; margin: 0rem 0rem 3.2rem 0rem; align-self: flex-start; } .GDPRConsent__choice___bL3AG { align-self: flex-start; margin-top: 1.6rem; margin-right: 1.6rem; background-color: var(--color_GDPR-button-bg); border-radius: var(--border-radius-extraLarge); padding: 1.2rem 4.2rem 0.9rem; } .GDPRConsent__choice--title___TWBM5 { font-size: 2.9rem; line-height: 3.3rem; font-weight: var(--fontWeight_semiBold); color: var(--color_GDPR-button-fg); } .GDPRConsent__choice--focus___DC58_ { list-style: none; } /* TV focus style */ .GDPRConsent .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .GDPRConsent .tv__focus { transform: scale(1.04); } .GDPRConsent .tv__focus { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5); } .GDPRConsent .tv__focus { border-radius: 8.7px; } .GDPRConsent .notClickableItem { display: flex; } .GDPRConsent .notClickableItem .tv__focus { --color_notClickableItem-tv-bg-focus: var(--color_mine-shaft); } .GDPRConsent .notClickableItem .tv__focus { background-color: var(--color_notClickableItem-tv-bg-focus); border-radius: 0.8rem; box-shadow: 0 8px 10px 0 var(--color_black-50); } .GDPRConsentSetting___VQ1tD { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; } .GDPRConsentSetting__ads___IFJjy { padding-bottom: 5.5rem; } .GDPRConsentSetting__list___CZYPy { list-style: disc; padding-left: 4rem; } .GDPRConsentSetting__title___E4HBS { font-family: var(--font_canal-bold-italique); font-size: 4.8rem; text-transform: uppercase; font-weight: var(--fontWeight_semiBold); margin-top: 0; } .GDPRConsentSetting__button___cKsnx { font-size: 3.2rem; } .GDPRConsentSetting___VQ1tD h1 + p { margin-bottom: 2.4rem; } /* TV focus style */ .GDPRConsentSetting .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .GDPRConsentSetting .tv__focus { transform: scale(1.04); } .GDPRConsentSetting .tv__focus { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5); } .GDPRConsentSetting .tv__focus { border-radius: 8.7px; } .GDPRConsentSetting .tv__focus .ChoiceButtonIcon { fill: var(--color_focus-fg); } .GDPRConsentSetting .tv__focus.readonly { color: var(--color_white-80); border: 0.2rem solid var(--color_white-30); background-color: var(--color_GDPR-button-readonly-bg); transform: none; transform: initial; box-shadow: none; box-shadow: initial; } .GDPRConsentSetting .tv__focus.readonly .ChoiceButtonIcon { fill: var(--color_GDPR-icon-fg); } .PrivacyManagerTemplate___Ymj1G { flex-direction: column; justify-content: center; } [data-device-type="tv"] .PrivacyManagerTemplate___Ymj1G { width: var(--size_settings_tv_width); margin: auto; } .PrivacyManagerTemplate__buttonsContainer___WmXwX { margin-top: 3.6rem; width: 100%; } .PrivacyManagerTemplate__consentButtonsContainer___QxZVk { margin-top: 3rem; } .PrivacyManagerTemplate__consentButton___R_RhR { background-color: var(--color_GDPR-button-bg); border-radius: var(--border-radius-extraLarge); color: var(--color_GDPR-button-fg); font-size: 3.6rem; line-height: 4rem; margin-top: 1.6rem; margin-right: 1.6rem; transition: none; } .PrivacyManagerTemplate__consentButton--fullWidth___Knf9u { width: 100%; } .PrivacyManagerTemplate__text___Zx7n1 { color: var(--color_GDPR-text-fg); font-size: 3.1rem; line-height: 3.6rem; margin: 0.8rem 0rem; white-space: pre-line; } .PrivacyManagerTemplate__title___WOFi4 { font-family: var(--font_canal-bold-italique); font-size: 4.8rem; text-transform: uppercase; line-height: 5.2rem; font-weight: var(--fontWeight_semiBold); margin-bottom: 4.4rem; margin-top: 7rem; } .PrivacyManagerTemplate--focus___kQuPS { list-style: none; } /* Override dialogModal button style using wrapperClassName */ [data-device-type="tv"] .PrivacyManagerTemplate__dialogModal___MUcpo button { font-family: var(--font_canal-bold-italique); text-transform: uppercase; } /* TV focus style */ .PrivacyManagerTemplate .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .PrivacyManagerTemplate .tv__focus { transform: scale(1.04); } .PrivacyManagerTemplate .tv__focus { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5); } .PrivacyManagerTemplate .tv__focus { border-radius: 8.7px; } .PrivacyManagerTemplate .tv__focus span { color: var(--color_focus-fg); } .PrivacyManagerTemplate .tv__focus svg { fill: var(--color_focus-fg); } .TextBrutTemplate___xezZo { align-items: center; display: flex; flex-direction: column; font-size: 30px; justify-content: center; padding: 10vh 0 25vh; } .TextBrutTemplate___xezZo h1 { font-size: 4.7rem; } .TextBrutTemplate___xezZo h2 { font-size: 4rem; } .TextBrutTemplate___xezZo h3 { font-size: 3.6rem; } .TextBrutTemplate___xezZo ul { list-style: disc; padding-left: 4rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .detailV5___x5p_B { --color_detail-cover-background: linear-gradient(to bottom, rgba(24, 24, 24, 0), #181818); --color_detail-cover-from-tablet-background: linear-gradient( 0deg, rgba(33, 36, 41, 1) 0%, rgba(27, 28, 29, 1) 20%, rgba(24, 24, 24, 0) 100% ); --color_detail-tabsWrapper-bg: var(--color_black); } [data-theme~='telecomitalia'] .detailV5___x5p_B { --color_detail-cover-background: linear-gradient( 0deg, var(--color_gold-dark-primary) 0%, rgba(24, 24, 24, 0) 30%, rgba(24, 24, 24, 0) 100% ); --color_detail-cover-from-tablet-background: linear-gradient( 180deg, rgba(24, 24, 24, 0) 0%, var(--color_gold-dark-primary) 95% ); --color_detail-tabsWrapper-bg: var(--color_gold-kumera); } .detailV5___x5p_B header { position: relative; background: var(--color_detail-content); overflow: hidden; } .detailV5___x5p_B main { position: relative; } .detailV5--focus___ntNFW { list-style: none; } .detailV5__coverWrapper___Bf3JM { position: relative; } /* Create linear Gradient for cover */ .detailV5__coverWrapper___Bf3JM::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 40%; background: var(--color_detail-cover-background); z-index: var(--z-index-shadow); } @media screen and (min-width: 700px) { .detailV5__coverWrapper___Bf3JM::after { height: 90%; background: var(--color_detail-cover-from-tablet-background) } } .detailV5__title___gL_pC { width: 100%; max-width: 100rem; z-index: var(--z-index-title); font-family: var(--font_CanalBoldItalique); font-size: 3.2rem; color: var(--color_white); margin: 0 0 3rem; text-align: center; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 34.8rem; text-overflow: ellipsis; overflow: hidden; } @media screen and (min-width: 700px) { .detailV5__title___gL_pC { text-align: inherit; transform: inherit; font-size: 4.8rem } [data-device-type="tv"] .detailV5__title___gL_pC { font-size: 7.4rem; line-height: 8.6rem; } [data-device-type="tv"] .detailV5__title--big___TGPrG { font-size: 6.2rem; line-height: 7.2rem; } } .detailV5__title__image___Oj8cT { width: auto; border: none; -o-object-fit: cover; object-fit: cover; margin-bottom: 3rem; } @media screen and (min-width: 700px) { .detailV5__title__image___Oj8cT { width: 62rem } } .detailV5__contentWrapper___cAgT5 { position: relative; padding: 3.3rem 2.5rem 2.5rem 2.5rem; z-index: var(--z-index-content); } @media screen and (min-width: 700px) { .detailV5__contentWrapper___cAgT5 { padding: 0 5.5rem; position: absolute; bottom: 3rem; left: 0; right: 0 } [data-device-type="tv"] .detailV5__contentWrapper___cAgT5 { padding: 0 9rem; margin-top: -25%; } } .detailV5__titleWrapper___NTWGF { display: flex; align-items: flex-end; } .detailV5__editorialWrapper___qTSGQ { display: flex; align-items: stretch; color: var(--color_detail-metas); margin-bottom: 1.5rem; } .detailV5__editorialWrapper___qTSGQ svg { fill: var(--color_detail-metas); height: 1.3rem; margin: 0 0.5rem; } [data-device-type="tv"] .detailV5__editorialWrapper___qTSGQ svg { height: 2.2rem; margin-right: 2rem; } .detailV5__metas___Yyan9 { display: flex; align-items: center; color: var(--color_detail-metas); min-height: 4.9rem; margin-bottom: 1.5rem; } .detailV5__metas___Yyan9 svg { fill: var(--color_detail-metas); height: 1.3rem; margin: 0 0.5rem; } [data-device-type="tv"] .detailV5__metas___Yyan9 svg { height: 2.2rem; margin-right: 2rem; } [data-device-type="tv"] .detailV5__metas___Yyan9 { position: relative; } .detailV5__URLLogo___W1_pC { margin-left: auto; } .detailV5__URLLogo___W1_pC img { min-width: 6rem; } @media screen and (min-width: 700px) { .detailV5__URLLogo___W1_pC img { min-width: 9.2rem; margin-top: -2rem } [data-device-type="tv"] .detailV5__URLLogo___W1_pC img { min-width: 16rem; } } .detailV5__actionsInfosWrapper___Y_9Cd { position: relative; padding-bottom: 3rem; } @media screen and (min-width: 700px) { .detailV5__informations___MwbPy { padding-left: 3rem } } [data-device-type="tv"] .detailV5__informations___MwbPy { padding-left: 4.7rem; } .detailV5__otherInformationsWrapper___PKMXe { margin-bottom: 2rem; } @media screen and (min-width: 700px) { .detailV5__otherInformationsWrapper___PKMXe { display: flex; max-width: 94rem } } [data-device-type="tv"] .detailV5__otherInformationsWrapper___PKMXe { max-width: calc(100% - 32rem); /* Minus max-width of "More Info" button */ min-height: 10rem; margin-bottom: 0; margin-bottom: initial; } .detailV5__tabsWrapper___E4_NW { position: relative; padding: 2.6rem 0 0; background-color: var(--color_detail-tabsWrapper-bg); min-height: 100vh; } .detailV5__actionLayout___ePmq5 { margin-bottom: 3.2rem; } [data-device-type="tv"] .detailV5__actionLayout___ePmq5 { margin-bottom: 0; margin-bottom: initial; } @media screen and (min-width: 700px) { .detailV5__actionsInfosWrapper___Y_9Cd { display: flex; padding-bottom: 0; } .detailV5__actionLayout___ePmq5 { flex: 1 1 33.3%; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 0; margin-bottom: 1.4rem; } .detailV5__informations___MwbPy { flex: 1 1 66.66%; padding-right: 0; } [data-device-type="tv"] .detailV5__informations___MwbPy { align-self: flex-end; } } /* TV focus style */ .actionLayout .tv__focus.tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .actionLayout .tv__focus.tv__focus { transform: scale(1.04); } .actionLayout .tv__focus.tv__focus { background-color: var(--color_secondary); } .actionLayout .tv__focus.tv__focus svg { fill: var(--color_focus-fg); } .badge .tv__focus { fill: var(--color_focus-fg) !important; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .moreInfosButton___OXLju { background-color: var(--color_detail-moreInfosButton-bg); color: var(--color_detail-moreInfosButton-fg); border-radius: 0.4rem; width: 100%; min-width: 10.5rem; } @media screen and (min-width: 700px) { .moreInfosButton___OXLju { width: auto; height: 3.2rem } [data-device-type="tv"] .moreInfosButton___OXLju { padding: 2.2rem 4rem; border-radius: 0.8rem; max-width: 32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; height: 100%; } } .moreInfosButton___OXLju:hover { opacity: .7; background-color: var(--color_detail-moreInfosButton-hover-bg); transition-timing-function: ease-out; } .moreInfosButton__wrapper___Jr6OE { --color_detail-moreInfosButton-bg: var(--color_mine-shaft); --color_detail-moreInfosButton-hover-bg: var(--color_grey-500); --color_detail-moreInfosButton-fg: var(--color_white); } [data-theme~='telecomitalia'] .moreInfosButton__wrapper___Jr6OE { --color_detail-moreInfosButton-bg: var(--color_gold-dark-secondary); --color_detail-moreInfosButton-hover-bg: var(--color_gold-dark-tertiary); --color_detail-moreInfosButton-fg: var(--color_white); } .moreInfosButton__wrapper___Jr6OE { position: absolute; bottom: 0; left: 0rem; right: 0rem; } @media screen and (min-width: 700px) { .moreInfosButton__wrapper___Jr6OE { display: flex; justify-content: center; align-items: flex-end; left: auto; left: initial; right: 0 } } .moreInfosButton__text___yQVu1 { margin: auto 1.5rem; font-size: 1.6rem; line-height: 3.4rem; height: 3.4rem; font-weight: var(--fontWeight_semiBold); } [data-device-type="tv"] .moreInfosButton__text___yQVu1 { margin: 0 auto; font-family: var(--font_hind); font-weight: var(--fontWeight_regular); font-size: 2.7rem; line-height: 3.2rem; height: 7.8rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .primaryActions___DcuWz { --color_button-play-bg: var(--color_amaranth); --color_button-play-hover-bg: var(--color_darkmode-tertiary); --color_button-transactional-bg: var(--color_amaranth); --color_button-play-fg: var(--color_white); --color_unavailable-button-bg: transparent; --color_unavailable-button-border: #363636; --width_button: 100%; --size_button-play-svg: 1.6rem; --size_button-play-startover-svg: 2.3rem; } [data-theme~='telecomitalia'] .primaryActions___DcuWz { --color_button-play-bg: var(--color_white); --color_button-play-hover-bg: var(--color_white-70); --color_button-play-fg: var(--color_dark); } [data-device-type="tv"] .primaryActions___DcuWz { --color_button-play-bg: var(--color_mine-shaft); --color_button-transactional-bg: var(--color_mine-shaft); --width_button: 62rem; --size_button-play-svg: 3rem; --size_button-play-startover-svg: 4rem; } .primaryActions___DcuWz { display: flex; flex-direction: column; } .primaryActions__multipleActions___BGjeV { display: grid; grid-gap: 0.8rem; gap: 0.8rem; } [data-device-type="tv"] .primaryActions__multipleActions___BGjeV { gap: 1.6rem; } .primaryActions__button___IpPGt { height: 5rem; width: var(--width_button); display: flex; justify-content: center; align-items: center; flex-direction: row; } .primaryActions__button___IpPGt > span { display: flex; } .primaryActions__button--play___bsD2j { vertical-align: middle; background: var(--color_button-play-bg); } .primaryActions__button--play___bsD2j:hover { background: var(--color_button-play-hover-bg); } .primaryActions__button--play___bsD2j svg { width: var(--size_button-play-svg); height: var(--size_button-play-svg); fill: var(--color_button-play-fg); } .primaryActions__button--play-startOver___jzEVG svg { width: var(--size_button-play-startover-svg); height: var(--size_button-play-startover-svg); } .primaryActions__button--transactional___iXEBL { border: solid 2px var(--color_mine-shaft); background: var(--color_button-transactional-bg); } .primaryActions__button--transactional___iXEBL svg { width: 2rem; height: 2rem; fill: var(--color_button-play-fg); } [data-device-type="tv"] .primaryActions__button--transactional___iXEBL svg { width: 3rem; height: 3rem; } .primaryActions__button--transactional-disabled___FjcjM { background-color: var(--color_mine-shaft); pointer-events: none; color: var(--color_detail-metas); } .primaryActions__button--transactional-disabled___FjcjM svg { fill: var(--color_detail-metas); } .primaryActions__button--unavailable___LYb6Z { border: solid 2px var(--color_unavailable-button-border); cursor: default; text-transform: inherit; font-family: var(--font_hind); font-weight: var(--fontWeight_semiBold); background-color: var(--color_unavailable-button-bg); pointer-events: none; line-height: 2rem; } [data-device-type="tv"] .primaryActions__button--unavailable___LYb6Z { border-color: var(--color_unavailable-button-border); background-color: var(--color_unavailable-button-bg); } .primaryActions__button--internalAnchor___Bu5GT svg { width: 2.6rem; height: 3rem; fill: var(--color_button-play-fg); } .primaryActions__description___K3ZkT { color: var(--color_detail-metas); font-size: 1.2rem; line-height: 1.6rem; text-align: center; display: block; } [data-device-type="tv"] .primaryActions__description___K3ZkT { font-size: 2.7rem; line-height: 3.3rem; margin-bottom: 2rem; } .primaryActions__remainingTimes___KvA3X { display: flex; align-items: center; margin-top: 0.8rem; } .primaryActions__remainingTimeLabel___ycylr { font-size: 1.2rem; text-align: right; color: var(--color_detail-metas); width: 30%; } [data-device-type="tv"] .primaryActions__remainingTimeLabel___ycylr { width: auto; margin-left: 1.2rem; font-size: 2.7rem; line-height: 3.3rem; } .primaryActions__liveContainer___Hdx1q { display: flex; justify-content: center; justify-items: center; gap: 1rem; font-size: 2.4rem; font-weight: 600; margin-left: 1rem; } .primaryActions__liveText___aEciZ { opacity: 0.5; letter-spacing: 1px; text-transform: uppercase; } .primaryActions__liveCircle___jxVrj { background-color: var(--color_maroon-flush); height: 1rem; width: 1rem; border-radius: 50%; margin: auto 0; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .mood___FvTSB { height: 100%; width: 100%; box-sizing: border-box; padding: 1rem 0; } .mood__title___htC6Y { color: var(--color_white); display: block; font-size: 1.8rem; font-weight: var(--fontWeight_semiBold); text-align: center; width: 100%; max-width: 46rem; margin: auto; padding: 0 3rem; } @media screen and (min-width: 700px) { .mood__title___htC6Y { font-size: 2.6rem; padding: 1rem 2.5rem } } .mood__items___LfwNr { display: flex; margin-top: 4rem; } [data-device-type="tv"] .mood__items___LfwNr { justify-content: center; } .mood__item___ZgptU { height: auto; width: 10rem; cursor: pointer; flex: 1; font-size: 1.6rem; text-align: center; } @media screen and (min-width: 700px) { .mood__item___ZgptU { height: auto; width: 13rem; margin-right: 3rem } } .mood__item___ZgptU:last-child { margin-right: 0; } .mood__item___ZgptU:hover svg, .mood__item--active___dilvg svg { opacity: 1; } .mood__item__title___Idx0T { display: block; opacity: 0.5; width: 100%; } [data-device-type="tv"] .mood__item__title___Idx0T { font-size: 2.7rem; } .mood__item--active___dilvg.mood__item--neutral___KYSqk svg { fill: var(--color_mood-neutral); } .mood__item--active___dilvg.mood__item--like___cweUW svg { fill: var(--color_mood-like); } .mood__item--active___dilvg.mood__item--dislike___iCgcj svg { fill: var(--color_mood-dislike); } [data-device-type="tv"] .mood__item___ZgptU { max-width: 24rem; height: 24rem; margin: 0 1.6rem; } .mood__icon___fjRMM { height: 6rem; width: 6rem; display: inline-block; fill: var(--color_grey-200); margin-bottom: 0.8rem; opacity: 0.85; transition: opacity 300ms ease-in-out; } @media screen and (min-width: 700px) { .mood__icon___fjRMM { height: 7rem; width: 7rem } } [data-device-type="tv"] .mood__icon___fjRMM { height: 10rem; width: 10rem; fill: var(--color_grey-200); } .mood__button___ZF7VH { height: 100%; width: 100%; color: var(--color_white); } /* TV style */ .globalMoodButton.tv__focus { position: relative; border-radius: var(--border-radius-big-outline); border: 3px solid var(--color_focus-outline); background-color: #242424; } .globalMoodButton.tv__focus svg, .globalMoodButton.tv__focus span { opacity: 1; transition: none; } .badge___YOZwA { height: 4rem; width: 5.5rem; align-items: center; border-radius: var(--border-radius-small); color: var(--color_white); display: flex; justify-content: center; transition: background 300ms ease-in-out; } .badge___YOZwA svg { transition: fill 300ms ease-in-out; } .badge--button___GGfwn { background-color: var(--color_badge-button-bg); } .badge--button___GGfwn.badge--hasHover___tz64v:hover { opacity: .7; color: var(--color_badge-button-hover-bg); } [data-theme~='telecomitalia'] .badge--button___GGfwn.badge--hasHover___tz64v:hover { background-color: var(--color_badge-button-hover-bg); opacity: 1; } .badge--button___GGfwn svg { fill: var(--color_badge-button-svg-fill); height: 2.7rem; } [data-device-type="tv"] .badge--button___GGfwn svg { fill: var(--color_white); } .badge--button___GGfwn.badge--disabled___FusC2 { background-color: var(--color_badge-button-disabled-bg); } .badge--button___GGfwn.badge--disabled___FusC2:hover { background-color: var(--color_badge-button-disabled-hover-bg); opacity: 1; } .badge--button___GGfwn.badge--disabled___FusC2 svg { fill: var(--color_badge-button-disabled-svg-fill); } [data-device-type="tv"] .badge--button___GGfwn.badge--disabled___FusC2 svg { fill: var(--color_white); } .badge--facebook____SiZ5 svg, .badge--twitter___JZWFc svg { fill: var(--color_white); height: 2.2rem; } .badge--facebook____SiZ5.badge--disabled___FusC2 svg, .badge--twitter___JZWFc.badge--disabled___FusC2 svg { fill: hsl(0, 0%, 50%); /* #808080 */ } .badge--facebook____SiZ5 { background-color: var(--color_facebook); } .badge--facebook____SiZ5:hover { opacity: .7; background-color: var(--color_facebook); } .badge--facebook____SiZ5.badge--disabled___FusC2 { background-color: hsl(221, 44%, 27%); } /* #263962 */ .badge--facebook____SiZ5.badge--disabled___FusC2:hover { background-color: hsl(221, 44%, 27%); /* #263962 */ opacity: 1; } .badge--twitter___JZWFc { background-color: var(--color_twitter); } .badge--twitter___JZWFc:hover { opacity: .7; background-color: var(--color_twitter); } .badge--twitter___JZWFc.badge--disabled___FusC2 { background-color: hsl(196, 100%, 30%); } /* #007099 */ .badge--twitter___JZWFc.badge--disabled___FusC2:hover { background-color: hsl(196, 100%, 30%); /* #007099 */ opacity: 1; } .badge--rounded___ZvB12 { border-radius: 50%; } .badge--small___uwEwB { height: 3rem; width: 3rem; } .badge--small___uwEwB.badge--button___GGfwn { width: 4.5rem; } .badge--small___uwEwB span { height: 100%; } .badge--small___uwEwB span svg { height: 2.2rem; } .badge--medium___liazz { height: 3.7rem; width: 3.7rem; } .badge--large___lQMHn { height: 5.7rem; width: 5.7rem; } .badge--large___lQMHn svg { height: 2.9rem; } .badge--disabled___FusC2 { cursor: not-allowed; } .badge___YOZwA.badge--active___lqi7R svg { fill: var(--color_white); } /** overrides height set previously */ .badge--twitter___JZWFc svg { height: 2rem; } .badge--download___MRQly span { height: 2.5rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ :root { --moodButtons: (like: var(--color_mood-like), dislike: var(--color_mood-dislike)); } .moodButton___LNrWF { width: 100%; } .moodButton__text___YvxFF { font-size: 2.7rem; margin-left: 1.9rem; } .moodModal___dlb1m { width: 90%; } @media screen and (min-width: 700px) { .moodModal___dlb1m { width: 45rem } } [data-device-type="tv"] .moodModal___dlb1m { width: 96rem; } .moodButton--like___QQR0F svg { fill: var(--color_mood-like); } [data-device-type="tv"] .moodButton--like___QQR0F svg { /* Overrides Badge.css TV style */ fill: var(--color_mood-like); } .moodButton--like___QQR0F:hover svg { fill: var(--color_white); } .moodButton--dislike___GAmCO svg { fill: var(--color_mood-dislike); } [data-device-type="tv"] .moodButton--dislike___GAmCO svg { /* Overrides Badge.css TV style */ fill: var(--color_mood-dislike); } .moodButton--dislike___GAmCO:hover svg { fill: var(--color_white); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .secondaryActions___UVjE8 { --color_secondaryActions-fg: var(--color_black-50); } [data-theme~='dark'] .secondaryActions___UVjE8 { --color_secondaryActions-fg: var(--color_white-50); } [data-theme~='telecomitalia'] .secondaryActions___UVjE8 { --color_secondaryActions-fg: var(--color_white); } .secondaryActions___UVjE8 { display: flex; justify-content: space-evenly; margin-top: 1.6rem; } .secondaryActions__playlistBtn___jE1NV, .secondaryActions__moodBtn___HtFPy, .secondaryActions__sharingBtn___XvbUQ, .secondaryActions__D2GBtn___caZtg { position: relative; width: 2.8rem; height: 2.8rem; border-radius: 2.8rem; } .secondaryActions__playlistBtn___jE1NV svg, .secondaryActions__moodBtn___HtFPy svg, .secondaryActions__sharingBtn___XvbUQ svg, .secondaryActions__D2GBtn___caZtg svg { height: 1.6rem; } .secondaryActions__playlistBtn___jE1NV span, .secondaryActions__moodBtn___HtFPy span, .secondaryActions__sharingBtn___XvbUQ span, .secondaryActions__D2GBtn___caZtg span { display: block; position: absolute; bottom: -2rem; width: -moz-max-content; width: max-content; margin: 0; color: var(--color_secondaryActions-fg); font-size: 1.2rem; } .secondaryActions__playlistBtnTv___Eio2k, .secondaryActions__moodBtnTv___Xcg6s { height: 7.8rem; width: 30rem; padding: 1.3rem 0; border-radius: var(--border-radius-extraLarge); background-color: var(--color_mine-shaft); color: var(--color_white-70); } .secondaryActions__playlistBtnTv___Eio2k { margin-right: 1rem; } .secondaryActions__moodBtnTv___Xcg6s { margin-left: 1rem; } .downloadBtn___hPNle { width: 100%; } .downloadBtn__text___uURAu { font-size: 2.8rem; margin-left: 1.9rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .downloadToGoModal___dMzn0 { counter-reset: step; margin: 0 auto; text-align: center; } .downloadToGoModal__title___TAoSF { font-size: 2.6rem; font-weight: var(--fontWeight_regular); margin: 0; } .downloadToGoModal__button___EdOVi { font-size: 1.8rem; font-weight: var(--fontWeight_semiBold); padding: 1.2rem 3.2rem; margin: 0 3.2rem; } .downloadToGoModal__button--information___QSOxY { margin: 0; } .downloadToGoModal__buttonWrapper___zQCiy { flex: 1; max-width: 8.4rem; margin: 0 1.5rem; } .downloadToGoModal__items___BWf_7 { align-items: center; display: flex; flex-direction: column; justify-content: center; margin-top: 3rem; } @media screen and (min-width: 700px) { .downloadToGoModal__items___BWf_7 { align-items: flex-start; flex-direction: row } } .downloadToGoModal__item___x9PEX { align-items: stretch; display: flex; flex: 1; flex-basis: auto; flex-direction: column; justify-content: center; padding-bottom: 4rem; } @media screen and (min-width: 700px) { .downloadToGoModal__item___x9PEX { flex-basis: 17rem; padding-bottom: 0; padding-right: 2rem } } .downloadToGoModal__item___x9PEX:last-child { padding: 0; } .downloadToGoModal__spinner___B5IeN { min-height: 11rem; } .downloadToGoModal__label___HdAel { margin: 0; } .downloadToGoModal__label--availability___TRbDc { color: var(--color_link-hover); } .downloadToGoModal__step___oXls4 { counter-increment: step; flex: 0 0 auto; position: relative; } .downloadToGoModal__stepNumber___gyWh0 { margin: 0 auto 1.5rem; max-width: 17rem; position: relative; color: var(--color_darkmode-secondary); } .downloadToGoModal__stepNumber___gyWh0::after { height: 4rem; width: 4rem; position: absolute; left: 50%; transform: translateX(-50%); background: hsl(0, 0%, 94%); /* #f0f0f0 */ border-radius: 50%; bottom: -1.5rem; content: counter(step); display: block; font-size: 2rem; line-height: 4rem; text-align: center; } .downloadToGoModal__stepNumber___gyWh0 img { display: none; } @media screen and (min-width: 700px) { .downloadToGoModal__stepNumber___gyWh0 img { display: block; max-width: 17rem } } .downloadToGoModal__stepTitle___s40IB { align-items: center; display: flex; justify-content: center; } @media screen and (min-width: 700px) { .downloadToGoModal__stepTitle___s40IB { flex-basis: 9rem } } .downloadToGoModal__stepTitleLabel___oyTHB { font-size: 2rem; font-weight: var(--fontWeight_regular); margin: 1rem 0; } @media screen and (min-width: 700px) { .downloadToGoModal__stepTitleLabel___oyTHB { margin: 2rem 0 } } .downloadToGoModal__option___Be8OU { font-size: 1.5rem; font-style: italic; margin-top: 4rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .D2GUnavailableModal___orCuE { height: 100%; width: 100%; box-sizing: border-box; padding-bottom: 1rem; text-align: center; color: var(--color_white); } .D2GUnavailableModal__title___wbm7L { display: block; font-size: 1.8rem; font-weight: var(--fontWeight_semiBold); text-align: center; width: 100%; max-width: 46rem; margin: auto; padding: 0 3rem; } @media screen and (min-width: 700px) { .D2GUnavailableModal__title___wbm7L { font-size: 2.6rem; padding: 0 2.5rem 1rem } } .D2GUnavailableModal__infos___jBhgq { font-size: 1.6rem; margin: 1rem 0 3rem; line-height: 2.4rem; } .D2GUnavailableModal__button___wXSAv { width: 32.4rem; height: 5.8rem; font-size: 2rem; font-weight: var(--fontWeight_semiBold); padding: 1.5rem 2rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .tooltip___ZlUUk { position: relative; z-index: 2; } .tooltip__content___NJ4RM { position: absolute; left: 50%; transform: translateX(-50%); background-color: var(--color_white); border-radius: 0.3rem; bottom: calc(100% + 1rem); box-shadow: 0 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.25); color: var(--color_primary); padding: 1rem; text-align: center; transform: translate3d(-50%, -1rem, 0); width: 26.5rem; z-index: 1; } .tooltip__content___NJ4RM::after { position: absolute; left: 50%; transform: translateX(-50%); border-color: var(--color_white) transparent transparent; border-style: solid; border-width: 0.5rem; content: ''; top: 100%; } .tooltip__content--hasNotArrow___l1lGd::after { content: none; } .tooltip__content--cvv___a5tJC { height: 12.9rem; width: 21.4rem; } .tooltip__content--cvv___a5tJC .tooltip__label___GbjOU { font-size: 1.4rem; } .tooltip__content--cvv___a5tJC p { font-size: 1.3rem; margin-top: 0; } @media screen and (min-width: 700px) { .tooltip__content--cvv___a5tJC p { font-size: 1.4rem } } /* when showOnHover mod is enabled, the tooltip content will show up only if tooltip is hovered otherwise the visible is only controlled by --hidden modifier. */ .tooltip--showOnHover___HGyiX .tooltip__content___NJ4RM { opacity: 0; transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out; visibility: hidden; } .tooltip--showOnHover___HGyiX:hover { cursor: pointer; } .tooltip--showOnHover___HGyiX:hover .tooltip__content___NJ4RM { opacity: 1; transform: translate3d(-50%, 0, 0); visibility: visible; } .tooltip--right___zHDoA .tooltip__content___NJ4RM, .tooltip--left___gDuZ4 .tooltip__content___NJ4RM { transform: translate3d(0, -1rem, 0); } .tooltip--right___zHDoA:hover .tooltip__content___NJ4RM, .tooltip--left___gDuZ4:hover .tooltip__content___NJ4RM { transform: translate3d(0, 0, 0); } .tooltip--right___zHDoA .tooltip__content___NJ4RM { left: inherit; right: 0; } .tooltip--right___zHDoA .tooltip__content___NJ4RM::after { left: inherit; right: 5%; } .tooltip--left___gDuZ4 .tooltip__content___NJ4RM { left: 0; } .tooltip--left___gDuZ4 .tooltip__content___NJ4RM::after { left: 5%; transform: translateX(50%); } .tooltip--hidden____7uN8 .tooltip__content___NJ4RM { display: none; } .tooltip--hidden____7uN8:hover .tooltip__content___NJ4RM { display: none; } .tooltip__label___GbjOU { display: inline-block; font-size: 1.5rem; } .tooltip__content--secondary___zVQk6 .tooltip__label___GbjOU { color: var(--color_white); } .tooltip__content--secondary___zVQk6 { background-color: var(--color_toolTip-content-secondary-bg); } .tooltip__content--secondary___zVQk6::after { border-color: var(--color_toolTip-content-secondary-bg) transparent transparent; } .transitionToolTipContent___oLr5x { opacity: 0; transform: translate3d(0, -1rem, 0); transition: opacity .25s ease, transform .25s ease; } .transitionToolTipContent--entering___dwSMk, .transitionToolTipContent--exited___Fjnuw { opacity: 0; transform: translate3d(0, -1rem, 0); } .transitionToolTipContent--entered___mSfSd, .transitionToolTipContent--exiting____l5ZF { opacity: 1; transform: translate3d(0, 0, 0); } .PlayListButton___UOAW6 { width: 100%; } .PlayListButton__text___kjApr { font-size: 2.7rem; margin-left: 1.9rem; } .sharing__title___gaZkd { margin: 0; font-size: 1.7rem; } .sharing__items___H8N1I { display: flex; margin-top: 2rem; justify-content: center; } .sharing__item___J9nsd { cursor: pointer; text-align: center; color: var(--color_grey-300); } .sharing__item___J9nsd:not(:last-child) { margin-right: 5.6rem; } .sharing__item___J9nsd:hover { color: var(--color_white); } .sharing__icon___yDjvD { height: 5.2rem; width: 5.2rem; transition: opacity 300ms ease-in-out; } .sharing__label___bmKYN { font-size: 1.3rem; margin-top: 0.9rem; } .sharingButton___RTFNp { width: 100%; } .sharingButton__text___c5GBi { font-size: 2.8rem; margin-left: 1.9rem; } .sharingModal___lNWEM { height: auto; width: 52rem; background-color: var(--color_darkmode-primary); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .cover___h8VLL { height: 75vw; } @media screen and (min-width: 700px) { .cover___h8VLL { height: calc(100vh - 7rem) } [data-device-type="tv"] .cover___h8VLL { height: calc(100vh - 11rem); } [data-device-type="tv"] .cover___h8VLL img { -o-object-fit: cover; object-fit: cover; } } .cover--169___hY46e { position: relative; box-sizing: border-box; } .cover--169___hY46e > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .cover--169___hY46e:before { position: relative; display: block; content: ""; padding-top: calc(56.25% - 1px); box-sizing: border-box; } .cover--43___NMztV { height: 100vw; position: relative; box-sizing: border-box; } .cover--43___NMztV > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .cover--43___NMztV:before { position: relative; display: block; content: ""; padding-top: calc(75% - 1px); box-sizing: border-box; } .editorialTitle_text___MNmRW { font-size: 1.3rem; line-height: 1.3rem; white-space: pre-wrap; } [data-device-type="tv"] .editorialTitle_text___MNmRW { font-size: 2.7rem; line-height: 2.7rem; margin: 0rem 2rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .personalities___i5UhR { --color_personalities-fg: var(--color_white-50); } [data-theme~='telecomitalia'] .personalities___i5UhR { --color_personalities-fg: var(--color_white-70); } .personalities___i5UhR { color: var(--color_detail-personalities-fg); font-size: 1.4rem; line-height: 1.8rem; } @media screen and (min-width: 700px) { [data-device-type="tv"] .personalities___i5UhR { font-size: 2.7rem; line-height: 3rem; } } .personalities__links___jGfF1 a { font-size: 1.4rem; line-height: 1.8rem; color: var(--color_personalities-fg); transition: color 300ms ease-in; } @media screen and (min-width: 700px) { [data-device-type="tv"] .personalities__links___jGfF1 a { font-size: 2.7rem; line-height: 3rem; } } .personalities__links___jGfF1 a:hover { opacity: .7; color: var(--color_white); transition-timing-function: ease-out; } .personalities__prefix___DfWRo { color: var(--color_white); display: inline-block; margin-right: 0.5rem; } [data-device-type="tv"] .personalities__prefix___DfWRo { color: var(--color_personalities-fg); } .personalities__list___JasgV { padding-right: 1.43rem; } .rating___EMwsZ { display: flex; } .rating__stars___noQTs { display: block; } .rating__stars___noQTs svg { display: block; width: 1.1rem; height: 1.15789rem; } [data-device-type="tv"] .rating__stars___noQTs svg { width: 2.2rem; height: 2.31579rem; } .rating__telerama___gvH7C { display: block; } .rating__telerama___gvH7C svg { display: block; width: 0.95rem; height: 1.05263rem; } [data-device-type="tv"] .rating__telerama___gvH7C svg { width: 2.2rem; height: 2.31579rem; } .pressReview__score___o8lD3 { color: var(--color_rating); } .reviews___LK9LS { --color_reviews-fg: var(--color_white-50); } [data-theme~='telecomitalia'] .reviews___LK9LS { --color_reviews-fg: var(--color_white-70); } .reviews___LK9LS { display: flex; margin-top: 0rem; padding: 1rem 0 0; } .reviews___LK9LS svg { pointer-events: none; } .reviews__item___q1gNk { display: flex; margin-right: 2rem; } [data-device-type="tv"] .reviews__item___q1gNk { line-height: 3rem; } .reviews__name___zPpJq { font-size: 1.2rem; padding-right: 0.3rem; color: var(--color_reviews-fg); } [data-device-type="tv"] .reviews__name___zPpJq { font-size: 2.7rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .summary___HMOQ7 { --color_summary-fg: var(--color_black-80); } [data-theme~='telecomitalia'] .summary___HMOQ7 { --color_summary-fg: var(--color_white-80); } .summary___HMOQ7 { width: 100%; color: var(--color_summary-fg); font-size: 1.6rem; line-height: 2rem; margin: 2.6rem 0 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 5.699999999999999rem; text-overflow: ellipsis; overflow: hidden; } @media screen and (min-width: 700px) { .summary___HMOQ7 { font-size: 1.7rem; line-height: 2.2rem; margin-top: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 6.6000000000000005rem; text-overflow: ellipsis; overflow: hidden } } [data-device-type="tv"] .summary___HMOQ7 { font-size: 3.1rem; line-height: 3.6rem; max-height: 10.8rem; max-width: 106rem; margin-bottom: 2.5rem; } .summary___HMOQ7 span { color: var(--color_white); font-weight: var(--fontWeight_semiBold); } .tabs__anchor___JN5d3 { top: -3rem; position: absolute; } .tab___T6Duw:hover, .tab--active___OFLK3 { color: var(--color_white); } .tab___T6Duw a { text-transform: uppercase; } [data-device-type="tv"] .tab___T6Duw a { display: inline-block; padding: 1.8rem 2.8rem 1rem; border-radius: 0.8rem; font-size: 3.4rem; line-height: 4.2rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .tabsList___l7fFT { --color_tabsList-fg: var(--color_white-30); } [data-theme~='telecomitalia'] .tabsList___l7fFT { --color_tabsList-fg: var(--color_white-70); } .tabsList___l7fFT { padding: 0 1.5rem; font-size: 2rem; font-family: var(--font_CanalBoldItalique); color: var(--color_tabsList-fg); line-height: 1.25; display: flex; font-weight: var(--fontWeight_semiBold); } @media screen and (min-width: 700px) { .tabsList___l7fFT { padding: 0 3rem } } @media screen and (min-width: 1285px) { .tabsList___l7fFT { padding: 0 4rem } } [data-device-type="tv"] .tabsList___l7fFT { padding: 0 5rem; } .tabsList___l7fFT > * { margin-right: 3rem; cursor: pointer; } [data-device-type="tv"] .tabsList___l7fFT > * { margin-right: 0; } /* TV focus style */ .tabsListFocus .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .DownloadToGo___k6Ccx { margin: 0; } .VideoPlayer___nB5Y4 { height: 100vh; width: 100vw; display: block; opacity: 1; position: fixed; top: 0; z-index: 1000; } .VideoPlayerHidden___s2Dui { display: none; opacity: 0; transition: opacity 500ms ease-in; } .linkPointer___P3fWO { cursor: pointer; } .downloadToGoPlayerWrapper___gu5J5 { height: 100%; width: 100%; position: relative; } .downloadToGoPlayer___OURLK { height: 100%; width: 100%; background-color: var(--color_black); display: block; margin: 0 auto; position: relative; z-index: 1000; } .player___gf984 { height: 100%; width: 100%; } .noContent____J6Ay { font-size: 2rem; } .sizeConsumption___riTyl { margin: 0 auto 2.5rem; padding: 0 1.5rem; } .downloadToGoSizeConsumption___MPOD6 { font-size: 2rem; text-align: center; } .player___lFA8t { height: 100%; width: 100%; } .gabaritListNav____0t0h { /* empty but needed to be loaded */ } .gabaritListNav.tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .gabaritListNav.tv__focus { border-radius: var(--border-radius-big-outline); } .errorMessage__inputError___TBljd { --color_inputError-bg: var(--color_mine-shaft); } [data-theme~='telecomitalia'] .errorMessage__inputError___TBljd { --color_inputError-bg: var(--color_gold-dark-primary); } .errorMessage__inputError___TBljd { display: flex; align-items: center; background-color: var(--color_inputError-bg); border-radius: var(--border-radius-big); } [data-device-type="tv"] .errorMessage__inputError___TBljd { padding: 2rem 3.2rem; } .errorMessage__icon____1V7o { height: 4rem; width: 4rem; margin-right: 2.4rem; } .errorMessage__text___pCrfj { color: var(--color_text-primary); font-size: 1.6rem; } [data-device-type="tv"] .errorMessage__text___pCrfj { font-size: 2.7rem; margin: 0; } .errorMessage__accent___CtD8L { color: var(--color_secondary); margin: 0; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .startOverButton__button___w__PE { height: 3.5rem; width: 3.5rem; margin-left: 1rem; padding: 0; } .startOverButton__button___w__PE:hover svg { fill: var(--color_secondary); } .startOverButton__button___w__PE:hover path { fill: var(--color_live-tv-start-over-icon-arrow-hover); } @media screen and (min-width: 700px) { .startOverButton__button___w__PE { height: 3.8rem; width: 3.8rem } } .startOverButton__icon___VEtK5 { height: 2.8rem; width: 2.8rem; fill: var(--color_live-tv-start-over-icon); transition: fill 300ms ease; } .startOverButton__icon___VEtK5 path { fill: var(--color_live-tv-start-over-icon-arrow); } .prospectLoginMessage___ZVEh9 { font-size: 2rem; text-align: center; } .prospectLoginMessage__button___L3LOD { font-weight: var(--fontWeight_semiBold); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .liveTvContent__grid___fMsov { display: flex; flex-wrap: wrap; } .liveTvContent__gridItem___dj_24 { --margin-for-tv: 1rem 2.6rem; --margin-for-large-desktop: 1rem; --margin-for-tablet: 0.5rem; --margin-for-small: 0.25rem; } .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 50%; } @media screen and (min-width: 700px) { .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1285px) { .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 20%; } } @media screen and (min-width: 1600px) { .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 14.285714285714285%; } } [data-device-type="tv"] .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24[data-ratio~="169"] { width: 25%; } } .liveTvContent__gridItem___dj_24 > :first-child { margin: var(--margin-for-small); } @media screen and (min-width: 700px) { .liveTvContent__gridItem___dj_24 > :first-child { margin: var(--margin-for-tablet); } @media screen and (min-width: 1600px) { .liveTvContent__gridItem___dj_24 > :first-child { margin: var(--margin-for-large-desktop); } } } .liveTvContent__gridItem___dj_24 > :first-child { display: block; } [data-device-type="tv"] .liveTvContent__gridItem___dj_24 > :first-child { margin: var(--margin-for-small); } @media screen and (min-width: 700px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24 > :first-child { margin: var(--margin-for-tablet); } @media screen and (min-width: 1600px) { [data-device-type="tv"] .liveTvContent__gridItem___dj_24 > :first-child { margin: var(--margin-for-tv); } } } .liveTvContent--focus____4K49 { list-style: none; } .liveTvContent__prospectMessageWrap___tKtQK { margin: 0 auto 2.5rem; padding: 0 1.5rem; } /* TV focus style */ .liveTvContent .tv__focus { border: 0.4rem solid var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } .liveTvContent .tv__focus { margin: -0.5rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .LiveTvTemplate___lFCtj { --padding-for-large-desktop: 0 5rem; --padding-for-desktop: 0 5.5rem; --padding-for-tablet: 0 2.5rem; --padding-for-small: 0 1.25rem; --padding-for-tv: 0 6.4rem; margin-top: 1rem; padding: var(--padding-for-small); } @media screen and (min-width: 700px) { .LiveTvTemplate___lFCtj { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { .LiveTvTemplate___lFCtj { padding: var(--padding-for-desktop); } } @media screen and (min-width: 1600px) { .LiveTvTemplate___lFCtj { padding: var(--padding-for-large-desktop); } } } @media screen and (min-width: 700px) { [data-device-type="tv"] .LiveTvTemplate___lFCtj { padding: var(--padding-for-tv); } @media screen and (min-width: 1285px) { [data-device-type="tv"] .LiveTvTemplate___lFCtj { padding: var(--padding-for-tv); } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .LiveTvTemplate___lFCtj { padding: var(--padding-for-tv); } } } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .Stub___QKBCm { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 10vh 2rem; } @media screen and (min-width: 700px) { .Stub___QKBCm { width: 48rem; margin-left: auto; margin-right: auto } } [data-device-type="tv"] .Stub___QKBCm { width: 110rem; } .Stub__title___pn613 { font-size: 2.4rem; margin-top: 2rem; margin-bottom: 1.5rem; } [data-device-type="tv"] .Stub__title___pn613 { font-size: 4.7rem; margin-top: 2.5rem; margin-bottom: 2rem; } .Stub__text___OtDQn { font-size: 1.6rem; margin-bottom: 0; } [data-device-type="tv"] .Stub__text___OtDQn { font-size: 3.1rem; } .Stub__button___haUIz.Stub__button___haUIz { display: inline-block; font-size: 1.8rem; margin-top: 3rem; padding: 0.9rem 2rem 1rem; width: 32rem; max-width: 100%; } [data-device-type="tv"] .Stub__button___haUIz.Stub__button___haUIz { font-size: 3.6rem; margin-top: 5rem; width: 48rem; } .Stub__button__tvDevice___FZssH { background-color: var(--color_button-tv); } .Stub .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .gabaritListTemplate___zHRAE { --color_overflow: var(--color-white); --EM-menu-item-fg-active: var(--color_gabaritList-accent); --EM-menu-item-fg-hover: var(--color_gabaritList-accent); --EM-activeItem-border-bottom-height: 0.2rem; --EM-horizontal-overflow-color: var(--color_overflow-light); --EM-horizontal-overflow-color-transparent: var(--color_white-0); --EM-menu-item-fg: var(--color_gabaritList-item-light-fg); --EM-dropdown-bg: var(--color_gabaritList-dropdown-light-bg); --EM-dropdown-item-bg-hover: var(--color_gabaritList-dropdown-light-bg-hover); --EM-dropdown-item-fg-hover: var(--color_gabaritList-dropdown-light-fg-hover); } [data-theme~='dark'] .gabaritListTemplate___zHRAE { --color_overflow: var(--color-dark); --EM-horizontal-overflow-color: var(--color_overflow-dark); --EM-horizontal-overflow-color-transparent: var(--color_darkmode-primary-0); --EM-menu-item-fg: var(--color_gabaritList-item-dark-fg); --EM-dropdown-bg: var(--color_gabaritList-dropdown-dark-bg); --EM-dropdown-item-bg-hover: var(--color_gabaritList-dropdown-dark-bg-hover); --EM-dropdown-item-fg-hover: var(--color_gabaritList-dropdown-dark-fg-hover); } .gabaritListTemplate___zHRAE { position: relative; z-index: 6; } /* Navigation dropdown must be above the cards (and close button for perso cards) */ .gabaritListTemplate__header___yjUf0 { --padding-for-tv: 0 9rem; --padding-for-large-desktop: 0 6rem; --padding-for-desktop: 0 6rem; --padding-for-tablet: 0 3rem; --padding-for-small: 0 1.5rem; padding: var(--padding-for-small); } @media screen and (min-width: 700px) { .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-desktop); } } @media screen and (min-width: 1600px) { .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-large-desktop); } } } [data-device-type="tv"] .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-small); } @media screen and (min-width: 700px) { [data-device-type="tv"] .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { [data-device-type="tv"] .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-desktop); } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .gabaritListTemplate__header___yjUf0 { padding: var(--padding-for-tv); } } } .gabaritListTemplate__header___yjUf0 { align-items: baseline; display: flex; flex-direction: column; justify-content: space-between; margin: 3rem 0 2rem; } @media screen and (min-width: 700px) { .gabaritListTemplate__header___yjUf0 { flex-direction: row } } .gabaritListTemplate__header--action___qWy1x { margin: 3rem -0.2rem 2rem; padding: 0; } @media screen and (min-width: 960px) { .gabaritListTemplate__header--action___qWy1x { margin-bottom: 1rem } } .gabaritListTemplate__header--multiline___jptZV { display: block; position: relative; } .gabaritListTemplate__header--multiline___jptZV img { max-width: 10rem; } .expandableMenuTheme___tRerO { --horizontal-offset: 1.5rem; margin-left: calc(0rem - var(--horizontal-offset)); /* Correct vertical alignment with sibling elements */ width: calc(100% + var(--horizontal-offset)*2); font-size: 1.8rem; } [data-device-type="tv"] .expandableMenuTheme___tRerO { margin-left: 0; --EM-menu-item-fg-active: var(--color_white); --EM-menu-item-fg: var(--color_base); } .liveTvPlayer__playerWrapper___kBd_i { height: 100%; width: 100%; position: relative; } .liveTvPlayer__player___GOjiw { height: 100%; width: 100%; background-color: var(--color_black); display: block; margin: 0 auto; position: relative; z-index: 1000; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .liveTvContainer____aKXz { position: relative; } .liveTvContainer__playerContainer___XIKXs { height: 100vh; width: 100vw; display: block; opacity: 1; position: fixed; top: 0; z-index: 1000; } .liveTvContainer__playerContainer--hidden___nIXiu { display: none; opacity: 0; transition: opacity 500ms ease-in; } .liveTvContainer__wrapper___DLyOd { --padding-for-large-desktop: 0 5rem; --padding-for-desktop: 0 5.5rem; --padding-for-tablet: 0 2.5rem; --padding-for-small: 0 1.25rem; --padding-for-tv: 0 6.4rem; margin-top: 1rem; padding: var(--padding-for-small); } @media screen and (min-width: 700px) { .liveTvContainer__wrapper___DLyOd { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { .liveTvContainer__wrapper___DLyOd { padding: var(--padding-for-desktop); } } @media screen and (min-width: 1600px) { .liveTvContainer__wrapper___DLyOd { padding: var(--padding-for-large-desktop); } } } @media screen and (min-width: 700px) { [data-device-type="tv"] .liveTvContainer__wrapper___DLyOd { padding: var(--padding-for-tv); } @media screen and (min-width: 1285px) { [data-device-type="tv"] .liveTvContainer__wrapper___DLyOd { padding: var(--padding-for-tv); } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .liveTvContainer__wrapper___DLyOd { padding: var(--padding-for-tv); } } } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .mosaic___GmNgy { --padding-for-large-desktop: 0 6rem; --padding-for-tablet: 0 2.5rem; --padding-for-small: 0 1.25rem; --margin-for-large-desktop: 1rem; --margin-for-tablet: 0.5rem; --margin-for-small: 0.25rem; --MT-ratioHandler-bg: transparent; --MT-color-ratioHandler-border: var(--color_showcase-border); } [data-theme~='telecomitalia'] .mosaic___GmNgy { --MT-ratioHandler-bg: var(--color_gold-dark-secondary); --MT-color-ratioHandler-border: var(--color_gold-dark-secondary); } .mosaic___GmNgy { padding: var(--padding-for-small); } @media screen and (min-width: 700px) { .mosaic___GmNgy { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { .mosaic___GmNgy { padding: var(--padding-for-large-desktop); } } @media screen and (min-width: 1600px) { .mosaic___GmNgy { padding: var(--padding-for-large-desktop); } } } .mosaic__grid___xMnIH { margin: 0; padding: 0; position: relative; text-align: left; text-align: initial; } .mosaic__smallMargin___bedMO { margin: 2rem 1.3rem; padding: 0; } @media screen and (min-width: 960px) { .mosaic__smallMargin___bedMO { width: 96rem; margin: 0 1.3rem 2rem } } .mosaic__smallMargin__showcase___TL7B3 { margin: 2rem 0.8rem; padding: 0; } @media screen and (min-width: 700px) { .mosaic__smallMargin__showcase___TL7B3 { margin: 0 2.4rem 2rem } } @media screen and (min-width: 1285px) { .mosaic__smallMargin__showcase___TL7B3 { margin: 0 5rem 2rem } } .mosaic__gridItem___OUijy[data-ratio~="43"] { width: 50%; } @media screen and (min-width: 700px) { .mosaic__gridItem___OUijy[data-ratio~="43"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .mosaic__gridItem___OUijy[data-ratio~="43"] { width: 25%; } } @media screen and (min-width: 1285px) { .mosaic__gridItem___OUijy[data-ratio~="43"] { width: 20%; } } @media screen and (min-width: 1600px) { .mosaic__gridItem___OUijy[data-ratio~="43"] { width: 20%; } } @media screen and (min-width: 1920px) { .mosaic__gridItem___OUijy[data-ratio~="43"] { width: 16.666666666666664%; } } .mosaic__gridItem__showcase___NGoei[data-ratio~="34"] { width: 33.33333333333333%; } @media screen and (min-width: 700px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="34"] { width: 20%; } } @media screen and (min-width: 960px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="34"] { width: 16.666666666666664%; } } @media screen and (min-width: 1285px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="34"] { width: 16.666666666666664%; } } @media screen and (min-width: 1600px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="34"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="34"] { width: 16.666666666666664%; } } .mosaic__gridItem__showcase___NGoei[data-ratio~="43"] { width: 25%; } @media screen and (min-width: 700px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="43"] { width: 12.5%; } } @media screen and (min-width: 960px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="43"] { width: 12.5%; } } @media screen and (min-width: 1285px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="43"] { width: 12.5%; } } @media screen and (min-width: 1600px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="43"] { width: 12.5%; } } @media screen and (min-width: 1920px) { .mosaic__gridItem__showcase___NGoei[data-ratio~="43"] { width: 12.5%; } } .mosaic__gridItem__showcase___NGoei { max-width: 15.4rem; } [data-device-type="tv"] .mosaic__gridItem__showcase___NGoei { max-width: 25rem; } .mosaic__smallGridItem___ZrOB4[data-ratio~="43"] { width: 20%; } @media screen and (min-width: 700px) { .mosaic__smallGridItem___ZrOB4[data-ratio~="43"] { width: 12.5%; } } @media screen and (min-width: 960px) { .mosaic__smallGridItem___ZrOB4[data-ratio~="43"] { width: 10%; } } @media screen and (min-width: 1285px) { .mosaic__smallGridItem___ZrOB4[data-ratio~="43"] { width: 10%; } } @media screen and (min-width: 1600px) { .mosaic__smallGridItem___ZrOB4[data-ratio~="43"] { width: 10%; } } @media screen and (min-width: 1920px) { .mosaic__smallGridItem___ZrOB4[data-ratio~="43"] { width: 10%; } } .mosaic__gridItem___OUijy, .mosaic__smallGridItem___ZrOB4, .mosaic__gridItem__showcase___NGoei { display: inline-block; vertical-align: top; } @media screen and (min-width: 960px) { .mosaic__gridItem__isHoverable___ooMqM .mosaic__channel___GOnuI:hover, .mosaic__smallGridItem__isHoverable___q__Ty .mosaic__channel___GOnuI:hover, .mosaic__gridItem__showcase__isHoverable___r_Elv .mosaic__channel___GOnuI:hover { box-shadow: 0 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.25); transition: 0.5s ease } } .mosaic__ratioHandler___yu6FD { margin: var(--margin-for-small); } @media screen and (min-width: 700px) { .mosaic__ratioHandler___yu6FD { margin: var(--margin-for-tablet); } @media screen and (min-width: 1600px) { .mosaic__ratioHandler___yu6FD { margin: var(--margin-for-large-desktop); } } } .mosaic__ratioHandler___yu6FD { border: solid 1px var(--MT-color-ratioHandler-border); border-radius: var(--border-radius-big); display: block; background-color: var(--MT-ratioHandler-bg); } [data-device-type="tv"] .mosaic__ratioHandler___yu6FD { border: none; background-color: var(--color_detail-content); } .mosaic__showcase___qaVVg { --MT-layout-padding-horizontal: var(--showcase-side-padding-mobile); --MT-title-font-size: 2.2rem; --MT-title-margin-bottom: 1.2rem; --MT-subtitle-font-size: 1.4rem; --MT-subtitle-margin-bottom: 2rem; --MT-subtitle-width: 100%; } @media screen and (min-width: 700px) { .mosaic__showcase___qaVVg { --MT-layout-padding-horizontal: var(--showcase-side-padding-tablet); --MT-title-font-size: 3rem; --MT-title-margin-bottom: 0.5rem; --MT-subtitle-margin-bottom: 0.9rem } } @media screen and (min-width: 960px) { .mosaic__showcase___qaVVg { --MT-title-font-size: 2.2rem; --MT-title-margin-bottom: 1.2rem; --MT-subtitle-font-size: 1.6rem; --MT-subtitle-margin-bottom: 2rem; --MT-subtitle-width: 64rem } } @media screen and (min-width: 1285px) { .mosaic__showcase___qaVVg { --MT-layout-padding-horizontal: var(--showcase-side-padding-desktop); --MT-title-font-size: 3rem; --MT-title-margin-bottom: 1.6rem; --MT-subtitle-font-size: 1.6rem } } .mosaic__showcase___qaVVg .mosaic__textWrapper___zHbme { padding: 0 var(--MT-layout-padding-horizontal); } .mosaic__showcase___qaVVg .mosaic__title___d17Rn { font-family: var(--font_canal-bold-italique); font-size: var(--MT-title-font-size); margin-bottom: var(--MT-title-margin-bottom); text-transform: uppercase; } .mosaic__showcase___qaVVg .mosaic__subtitle___obztY { font-size: var(--MT-subtitle-font-size); width: var(--MT-subtitle-width); margin: 0; margin-bottom: var(--MT-subtitle-margin-bottom); color: var(--color_showcase-description-fg); } .mosaic__channel___GOnuI.mosaic__channel___GOnuI { position: absolute; } @media screen and (min-width: 960px) { .mosaic__channel___GOnuI.mosaic__channel___GOnuI { transition: 0.5s ease } } /* TV focus style */ .mosaicFocus .tv__focus.tv__focus { border: 0.4rem solid var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } .mosaicFocus .tv__focus.tv__focus { margin: -0.4rem; } .buttonModalAccountIdp__button___INleP { color: var(--color_secondary); padding: 0; } [data-theme~='telecomitalia'] .buttonModalAccountIdp__button___INleP { text-decoration: underline; } [data-device-type="tv"] .buttonModalAccountIdp__button___INleP { font-size: 4.16rem; color: var(--color_my-account-idp-value); } .itemButton___q4MAN { --color_light-bg: var(--background-page); --color_dark-bg: var(--color_primary-card-shadow); --color_border: var(--color_darkmode-tertiary); border: solid 0.1rem var(--color_grey-350); } [data-theme~='telecomitalia'] .itemButton___q4MAN { --color_light-bg: var(--color_gold-dark-secondary); --color_dark-bg: var(--color_gold-dark-secondary); --color_border: var(--color_gold-dark-tertiary); border: none; } [data-theme~='telecomitalia'] .itemButton___q4MAN:not(:last-child) { border-bottom: 0.1rem solid var(--color_border); } .itemButton___q4MAN { background-color: var(--color_light-bg); display: flex; height: 4.8rem; justify-content: space-between; padding: 1.3rem 1.5rem; } .itemButton___q4MAN p { margin: 0; } .itemButton__button___zvIWe { color: var(--color_secondary); padding: 0; } .itemButton__footerText___RGM67 { --color_footerText-dark-fg: var(--color_white-30); } [data-theme~='telecomitalia'] .itemButton__footerText___RGM67 { --color_footerText-dark-fg: var(--color_white-50); } .itemButton__footerText___RGM67 { font-size: 1.4rem; color: var(--color_my-account-idp-text); margin: 0.5rem 1.5rem 0; } .itemButton__footerText--dark___LbYzN { color: var(--color_footerText-dark-fg); } [data-device-type="tv"] .itemButton__footerText___RGM67 { margin: 1.6rem 0 3.1rem 0; font-size: 3.1rem; line-height: 3.6rem; color: var(--color_white-50); padding-left: 2rem; } .itemButton--margin___gnGwO { margin: 1rem 0 0; } .itemButton--dark___dVBqB { border: none; background-color: var(--color_dark-bg); } .itemButton--dark___dVBqB:not(:last-child) { border-bottom: 0.1rem solid var(--color_border); } [data-device-type="tv"] .itemButton___q4MAN { align-items: center; height: 6.6rem; margin: 0 auto; width: calc(100% - 4rem); border-radius: var(--border-radius-extraLarge); padding: 1.5rem 2rem 0.9rem; } [data-device-type="tv"] .itemButton___q4MAN p { font-size: 4rem; line-height: 4.2rem; color: var(--color_white-70); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .itemTitleLabel___jhgEz { --color_light-bg: var(--background-page); --color_dark-bg: var(--color_primary-card-shadow); --color_border: var(--color_darkmode-tertiary); border: solid 0.1rem var(--color_grey-350); } [data-theme~='telecomitalia'] .itemTitleLabel___jhgEz { --color_light-bg: var(--color_gold-dark-secondary); --color_dark-bg: var(--color_gold-dark-secondary); --color_border: var(--color_gold-dark-tertiary); border: none; } [data-theme~='telecomitalia'] .itemTitleLabel___jhgEz:not(:last-child) { border-bottom: 0.1rem solid var(--color_border); } .itemTitleLabel___jhgEz { background-color: var(--color_light-bg); display: flex; height: 4.8rem; justify-content: space-between; align-items: center; padding: 2rem; } .itemTitleLabel__value___kPAuq { color: var(--color_my-account-idp-text); font-size: 1.6rem; text-align: right; } .itemTitleLabel__title___HzHX_ { margin-right: 2rem; } .itemTitleLabel--dark___FqRAH { border: none; background-color: var(--color_dark-bg); } .itemTitleLabel--dark___FqRAH:not(:last-child) { border-bottom: 0.1rem solid var(--color_border); } .itemTitleLabel--dark___FqRAH .itemTitleLabel__value___kPAuq { color: var(--color_my-account-idp-value); } [data-device-type="tv"] .itemTitleLabel___jhgEz { align-items: center; margin: 0 auto; width: calc(100% - 4rem); height: 100%; border-radius: var(--border-radius-extraLarge); padding: 1.5rem 2rem 0.9rem; } [data-device-type="tv"] .itemTitleLabel__title___HzHX_ { color: var(--color_white-70); } [data-device-type="tv"] .itemTitleLabel__value___kPAuq, [data-device-type="tv"] .itemTitleLabel__title___HzHX_ { font-size: 4rem; line-height: 4.2rem; } .item__iconProfile___r2Hh9 { height: 3.5rem; width: 3.5rem; display: flex; align-items: center; margin-right: 1.5rem; } .item__iconArrow___mYtMd { fill: var(--color_white-50); height: 1.3rem; width: 0.8rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .itemSectionList___i6tbF { font-size: 1.4rem; } @media screen and (min-width: 700px) { .itemSectionList___i6tbF { font-size: 1.6rem } } .itemSectionList___i6tbF li:last-child { border-bottom-right-radius: 0.4rem; border-bottom-left-radius: 0.4rem; } .itemSectionList___i6tbF li:first-child { border-top-right-radius: 0.4rem; border-top-left-radius: 0.4rem; } .itemSectionList__value___OFJ0M { color: var(--color_my-account-idp-text); font-size: 1.6rem; } [data-device-type="tv"] .itemSectionList___i6tbF li { margin-bottom: 1.6rem; border: none; } .ItemSection .tv__focus.tv_focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .ItemSection .tv__focus.tv_focus { width: 100%; } .ItemSection .tv__focus.tv_focus p { color: var(--color_white); } .ItemSection .tv__focus.tv_focus p:last-child { color: var(--color_white-70); } .ItemSection .tv__focus.tv_focus a, .ItemSection .tv__focus.tv_focus button { color: var(--color_white-70); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .myAccountIdp___dlCCG { --color_button-light-bg: hsl(240, 5%, 96%); /* #f5f5f6 */ --color_button-light-fg: var(--color_font-grey); --color_button-light-hover-bg: hsl(240, 5%, 96%); /* #f5f5f6 */ --color_button-light-hover-fg: var(--color_primary-card); --color_button-dark-bg: var(--color_darkmode-secondary); --color_button-dark-fg: var(--color_darkmode-textcolor-primary); --color_button-dark-hover-bg: var(--color_darkmode-secondary); --color_button-dark-hover-fg: var(--color_secondary); } [data-theme~='telecomitalia'] .myAccountIdp___dlCCG { --color_button-light-bg: var(--color_gold-dark-secondary); --color_button-light-fg: var(--color_white); --color_button-light-hover-bg: var(--color_gold-dark-tertiary); --color_button-light-hover-fg: var(--color_white); --color_button-dark-bg: var(--color_gold-dark-secondary); --color_button-dark-fg: var(--color_white); --color_button-dark-hover-bg: var(--color_gold-dark-tertiary); --color_button-dark-hover-fg: var(--color_white); } .myAccountIdp___dlCCG { margin: 0 auto; max-width: 52rem; width: 90.625%; } .myAccountIdp___dlCCG h2 { font-weight: var(--fontWeight_semiBold); font-size: 2rem; } @media screen and (min-width: 700px) { .myAccountIdp___dlCCG h2 { font-size: 3.2rem } } [data-device-type="tv"] .myAccountIdp___dlCCG { max-width: 101.2rem; } [data-device-type="tv"] .myAccountIdp___dlCCG h2 { line-height: 4rem; margin: 3.1rem 0 1.5rem 0; color: var(--color_white-30); font-size: 3.6rem; font-weight: 500; padding-left: 2rem; } .myAccountIdp__title___tpmra { text-align: center; margin-top: 3rem; font-size: 2.6rem; } @media screen and (min-width: 700px) { .myAccountIdp__title___tpmra { font-size: 3.2rem } } [data-device-type="tv"] .myAccountIdp__title___tpmra { font-size: 4.7rem; line-height: 1.23; padding-bottom: 4rem; } .myAccountIdp__button___EWIRs { background-color: var(--color_button-light-bg); border-radius: var(--border-radius-medium); color: var(--color_button-light-fg); display: block; font-size: 1.8rem; font-weight: var(--fontWeight_semiBold); margin: 2rem auto; max-width: 32rem; text-align: center; padding: 1.1rem 0 1.3rem; width: 100%; } [data-device-type="tv"] .myAccountIdp__button___EWIRs { margin-top: 3.2rem; font-size: 3rem; max-width: 38rem; height: 100%; padding: 0.4rem 0; } .myAccountIdp__button___EWIRs:hover { background-color: var(--color_button-light-hover-bg); color: var(--color_button-light-hover-fg); } .myAccountIdp--dark___y3Cp_ .myAccountIdp__button___EWIRs { background-color: var(--color_button-dark-bg); color: var(--color_button-dark-fg); border: none; } .myAccountIdp--dark___y3Cp_ .myAccountIdp__button___EWIRs:hover { background-color: var(--color_button-dark-hover-bg); color: var(--color_button-dark-hover-fg); } [data-device-type="tv"] .myAccountIdp--dark___y3Cp_ .myAccountIdp__button___EWIRs { color: var(--color_white-70); } .myAccountIdp--dark___y3Cp_ .myAccountIdp___dlCCG li:last-of-type { border-bottom: none; } .SearchStandaloneInput__wrapper___zTp0q { display: flex; justify-content: center; height: 7.5rem; margin-top: 3rem; } .SearchStandaloneInput__input___YWtb0 { --color_input-bg: var(--color_primary-card); --color_input-fg: var(--color_white); } [data-theme~='telecomitalia'] .SearchStandaloneInput__input___YWtb0 { --color_input-bg: var(--color_white); --color_input-fg: var(--color_cod-grey); } .SearchStandaloneInput__input___YWtb0 { box-sizing: border-box; height: 100%; width: 100%; max-width: 90rem; max-height: 7.5rem; padding: 0 3rem; font-size: 3.6rem; line-height: 7.5rem; background-color: var(--color_input-bg); color: var(--color_input-fg); caret-color: var(--color_input-fg); border-radius: var(--border-radius-extraLarge); border-width: 0rem; } /* Hide native clear-input button */ .SearchStandaloneInput__input___YWtb0[type='search']::-webkit-search-decoration, .SearchStandaloneInput__input___YWtb0[type='search']::-webkit-search-cancel-button, .SearchStandaloneInput__input___YWtb0[type='search']::-webkit-search-results-button, .SearchStandaloneInput__input___YWtb0[type='search']::-webkit-search-results-decoration { display: none; } .SearchStandaloneKeyboard__wrapper___z8u3m { display: flex; justify-content: center; margin-top: 3rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .banner__cover___PUFAZ { --margin-for-desktop: 1rem 6rem; --margin-for-tablet: 1rem 3rem; --margin-for-small: 1rem 1.5rem; --margin-for-tv: 0 7.8rem 0rem; --max-width-banner-showcase: 96rem; --showcase-margin: 1rem auto; margin: var(--margin-for-small); } .banner__cover--showcase___pdwgg { margin: var(--showcase-margin); width: 100%; max-width: var(--max-width-banner-showcase); position: relative; box-sizing: border-box; } .banner__cover--showcase___pdwgg > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .banner__cover--showcase___pdwgg:before { position: relative; display: block; content: ""; padding-top: calc(56.12245% - 1px); box-sizing: border-box; } .banner__cover___PUFAZ { position: relative; box-sizing: border-box; } .banner__cover___PUFAZ > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .banner__cover___PUFAZ:before { position: relative; display: block; content: ""; padding-top: calc(56.32184% - 1px); box-sizing: border-box; } /* postcss-aspect-ratio is not interpretated if the medias queries is called inside the css property. So, we need to get out the css code here */ @media screen and (min-width: 700px) { .banner__cover___PUFAZ { margin: var(--margin-for-tablet); } [data-device-type="tv"] .banner__cover___PUFAZ { margin: var(--margin-for-tv); } .banner__cover___PUFAZ { position: relative; box-sizing: border-box; } .banner__cover___PUFAZ > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .banner__cover___PUFAZ:before { position: relative; display: block; content: ""; padding-top: calc(25.78125% - 1px); box-sizing: border-box; } /* Don't know why, if showcase is inside banner__cover with &__cover--showcase, not working for tablet... */ .banner__cover--showcase___pdwgg { margin: var(--showcase-margin); position: relative; box-sizing: border-box; } .banner__cover--showcase___pdwgg > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .banner__cover--showcase___pdwgg:before { position: relative; display: block; content: ""; padding-top: calc(14.58333% - 1px); box-sizing: border-box; } } @media screen and (min-width: 1285px) { .banner__cover___PUFAZ { margin: var(--margin-for-desktop); } .banner__cover--showcase___pdwgg { margin: var(--showcase-margin); position: relative; box-sizing: border-box; } .banner__cover--showcase___pdwgg > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .banner__cover--showcase___pdwgg:before { position: relative; display: block; content: ""; padding-top: calc(14.58333% - 1px); box-sizing: border-box; } } /* TV focus style */ .banner .tv__focus::before { position: absolute; content: ''; width: calc(100% + 1rem); height: calc(100% + 1rem); top: -0.5rem; left: -0.5rem; background-color: var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } .plainTextHtml__header___DGFPw { align-items: baseline; display: flex; justify-content: space-between; margin: 3rem 0 1rem; padding: 0 5rem; } .plainTextHtml__title___yYmzM { font-size: 2.6rem; font-weight: var(--fontWeight_semiBold); margin: 0; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .buttonInline___V6mrh { margin-top: 2rem; font-size: 1.4rem; color: var(--color_white); text-align: center; cursor: pointer; } .buttonInline_link___NdzdT { font-size: 1.5rem; font-weight: var(--fontWeight_semiBold); text-align: right; color: var(--color_secondary); } @media screen and (min-width: 700px) { .buttonInline___V6mrh { margin-top: 4rem } } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .subscribeCTA___SfMyf { text-align: center; margin: 0 1.3rem; font-size: 1.7rem; } .subscribeCTA__button___mHaGp { font-weight: var(--fontWeight_semiBold); width: 28.1rem; padding: 1.3rem 2rem 1.4rem; } .subscribeCTA__button_primary___aPFr6 { background-color: var(--color_showcase-button-primary-bg); } .subscribeCTA__button_primary___aPFr6:hover { background-color: var(--color_showcase-button-primary-hover-bg); } .subscribeCTA__button_secondary___hylXK { background-color: var(--color_showcase-button-secondary); } .subscribeCTA__button_secondary___hylXK:hover { background-color: var(--color_showcase-button-secondary-hover); } .subscribeCTA__button_default___N8_Q8 { background-color: currentColor; } .subscribeCTA__description___egllF { margin: 1rem auto 1.5rem; font-size: 1.4rem; max-width: var(--max-width-text-mobile); color: var(--color_grey-300); line-height: 1.57; } @media screen and (min-width: 700px) { .subscribeCTA__button___mHaGp { width: 32rem; } .subscribeCTA__description___egllF { font-size: 1.6rem; margin: 2rem auto 3rem; max-width: var(--max-width-text); } } .separator___efftC { height: 5rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .tabs__container____3xUe { max-width: 97rem; margin: 0 auto; display: block; } .tabs__poster___ieH7M { --number-tabs-from-laptop: 6; --number-tabs-only-tablet: 5; --number-tabs-row: 3; --margin-tabs: 1.2rem; display: inline-block; width: calc((100% - 0.5rem*(var(--number-tabs-row) - 1))/var(--number-tabs-row)); margin-right: 0.5rem; margin-bottom: 1.4rem; border-radius: var(--border-radius-small); } .tabs__poster___ieH7M:nth-child(3n) { margin-right: 0; } .tabs__poster___ieH7M:nth-child(6) { margin-right: 0; } .tabs__poster___ieH7M:nth-child(n + 7) { display: none; } @media screen and (min-width: 700px) { .tabs__poster___ieH7M { width: calc((100% - 1.2rem*(var(--number-tabs-only-tablet) - 1))/var(--number-tabs-only-tablet)); margin-right: var(--margin-tabs) } .tabs__poster___ieH7M:nth-child(3n) { margin-right: var(--margin-tabs); } .tabs__poster___ieH7M:nth-child(5) { margin-right: 0; } .tabs__poster___ieH7M:nth-child(n + 6) { display: none; } } @media screen and (min-width: 960px) { .tabs__poster___ieH7M { width: calc((100% - var(--margin-tabs)*(var(--number-tabs-from-laptop) - 1))/var(--number-tabs-from-laptop)) } .tabs__poster___ieH7M:nth-child(3n) { margin-right: var(--margin-tabs); } .tabs__poster___ieH7M:nth-child(5) { margin-right: var(--margin-tabs); } .tabs__poster___ieH7M:nth-child(6) { display: inline-block; margin-right: 0; } } .tabs__poster___ieH7M img { width: 100%; } .tabs__activeContainer___zXxvj { display: flex; text-align: left; flex-wrap: wrap; } .tabs__inactiveContainer___X_OHe { display: none; } .tabs__description___TEGUX { opacity: 0.7; text-align: center; margin: 0 auto; font-size: 1.4rem; max-width: var(--max-width-text-mobile); } @media screen and (min-width: 700px) { .tabs__description___TEGUX { font-size: 1.7rem; text-align: center; margin: 1.4rem auto 1.2rem; max-width: var(--max-width-text); } } @media screen and (min-width: 1024px) { .tabs___Z5tn7 { margin: 0 } } @media screen and (min-width: 1600px) { .tabs__container____3xUe { max-width: 98rem; } } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .catchPhrase___zWGV8 { display: flex; justify-content: center; margin: 0 1.3rem; } .catchPhrase__text___hDs54 { color: var(--color_white); font-family: var(--font_hind); font-weight: var(--fontWeight_semiBold); font-size: 2.6rem; line-height: 1.25; text-align: center; max-width: var(--max-width-text); margin: 1.2rem 0 1rem 0; } @media screen and (min-width: 700px) { .catchPhrase__text___hDs54 { font-size: 3.2rem } } @media screen and (min-width: 375px) { .catchPhrase__text___hDs54 { margin-bottom: 1.2rem } } .catchPhrase__logo___N346V { width: 18rem; vertical-align: baseline; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .showcaseText__subtitle___WjYPu { color: var(--color_white); font-size: 1.4rem; margin: 1.5rem 1.3rem 1rem; opacity: 0.7; } .showcaseText__paragraph___wKtsP { color: var(--color_showcase-paragraph-text); font-size: 1.2rem; margin: 0 1.3rem; text-align: justify; } .showcaseText__title2___B_c0W { color: var(--color_white); font-size: 1.7rem; font-weight: var(--fontWeight_semiBold); margin: 0 auto; } @media screen and (min-width: 700px) { .showcaseText__paragraph___wKtsP { margin: 2rem 3rem; } .showcaseText__subtitle___WjYPu { margin: 0.8rem 3rem 2.3rem; font-size: 1.6rem; } } @media screen and (min-width: 1285px) { .showcaseText__paragraph___wKtsP { margin: 2rem 6rem; } .showcaseText__subtitle___WjYPu { margin: 0.8rem 6rem 2.3rem; font-size: 1.6rem; } } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .showcase___yWLRR { color: var(--color_showcase-fg); display: flex; flex-direction: column; min-height: 100vh; align-items: center; background-color: var(--color_showcase-background); } .showcase--hasOfferHighlight___eXvdE { margin-top: calc(var(--size_mobileHeader_height)*-1); } @media screen and (min-width: 960px) { .showcase--hasOfferHighlight___eXvdE { margin-top: calc(var(--size_header_height)*-1) } } .showcase__splashscreenTV___zP4In { background-color: var(--color_darkmode-background-page); z-index: 60; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; } .showcase__splashscreenTV--hide___Vwkdx { opacity: 0; width: 0; height: 0; } .showcase__strates___Fr8zg { position: relative; z-index: 3; width: 100%; } .showcase__focusStyle___PDaLG { text-decoration: none; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .actorPlaceholder___CfYoi { background: var(--color_form-input); } .actorPlaceholder___CfYoi svg { opacity: 0.5; } .contentGridTemplateItem__informationButton___jYN8X { height: 5rem; width: 5rem; padding: 0; background-color: var(--color_white); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .contentGridTemplateItem__informationButton___jYN8X svg { position: relative; top: 0.4rem; width: 6.3rem; } @media screen and (min-width: 700px) { .contentGridTemplateItem__informationButton___jYN8X { height: 3.8rem; width: 3.8rem } } .contentGridTemplateItem__informationButtonIcon___yVJ6X svg { height: 2.8rem; width: 2.8rem; fill: var(--color_live-tv-start-over-icon); } .contentGridTemplateItem__onClick .tv__focus { outline: 3px solid hsl(0, 100%, 50%) !important; } /* TV focus style */ .contentGridItems .tv__focus::before, .contentGrid--trailer .tv__focus > div::before { position: absolute; content: ''; width: calc(100% + 1rem); height: calc(100% + 1rem); top: -0.5rem; left: -0.5rem; background-color: var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } .contentGridChannels .tv__focus::before { position: absolute; content: ''; width: calc(100% + 1rem); height: calc(100% + 1rem); top: -0.5rem; left: -0.5rem; background-color: var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .contentGrid___l53fo { --padding-for-large-desktop: 0 5rem; --padding-for-desktop: 0 5.5rem; --padding-for-tablet: 0 2.5rem; --padding-for-small: 0 1.25rem; --padding-for-tv: 0 6.4rem; --margin-for-large-desktop: 0.5rem; --margin-for-tablet: 0.5rem; --margin-for-small: 0.25rem; --margin-for-tv: 2rem 2.6rem; } /* to keep align title & grid */ .contentGrid__header___viSej { margin: 2rem var(--margin-for-small); } @media screen and (min-width: 960px) { .contentGrid__header___viSej { margin: 2rem var(--margin-for-tablet) } } @media screen and (min-width: 1600px) { .contentGrid__header___viSej { margin: 2rem var(--margin-for-large-desktop) } } [data-device-type="tv"] .contentGrid__header___viSej { color: var(--color_white-80) !important; } [data-device-type="tv"] .contentGrid__header___viSej { margin: 0 2.6rem; } .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 100%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 50%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 50%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 33.33333333333333%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 25%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 25%; } } .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 100%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 50%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 50%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 33.33333333333333%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 25%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 25%; } } .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 50%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 25%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 20%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 14.285714285714285%; } } .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 100%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 50%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 33.33333333333333%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 33.33333333333333%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 33.33333333333333%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 25%; } } .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 33.33333333333333%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 20%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 14.285714285714285%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 12.5%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 11.11111111111111%; } } .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 50%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 25%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 20%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 14.285714285714285%; } } .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 33.33333333333333%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 20%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 14.285714285714285%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 11.11111111111111%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 9.090909090909092%; } } .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 50%; } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 25%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 20%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 14.285714285714285%; } } .contentGrid__gridItem___TGKUe { display: inline-block; margin-bottom: 1.5rem; position: relative; vertical-align: top; } [data-device-type="tv"] .contentGrid__gridItem___TGKUe { position: relative; } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 100%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 50%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 50%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 33.33333333333333%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 25%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166normal"] { width: 25%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 100%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 50%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 50%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 25%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 25%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="166large"] { width: 25%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 50%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 25%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 25%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 25%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169normal"] { width: 25%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 100%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 50%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 33.33333333333333%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 25%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 25%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="169large"] { width: 25%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 33.33333333333333%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 20%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 14.285714285714285%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 12.5%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34normal"] { width: 16.666666666666664%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 50%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 25%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 20%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="34large"] { width: 14.285714285714285%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 33.33333333333333%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 20%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43normal"] { width: 16.666666666666664%; } } [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 50%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 25%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 20%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe[data-ratio~="43large"] { width: 14.285714285714285%; } } .contentGrid__gridItem--logoTyped___ClRCd[data-ratio~="169normal"] { width: 100%; } @media screen and (min-width: 700px) { .contentGrid__gridItem--logoTyped___ClRCd[data-ratio~="169normal"] { width: 50%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem--logoTyped___ClRCd[data-ratio~="169normal"] { width: 50%; } } @media screen and (min-width: 1285px) { .contentGrid__gridItem--logoTyped___ClRCd[data-ratio~="169normal"] { width: 33.33333333333333%; } } @media screen and (min-width: 1600px) { .contentGrid__gridItem--logoTyped___ClRCd[data-ratio~="169normal"] { width: 33.33333333333333%; } } @media screen and (min-width: 1920px) { .contentGrid__gridItem--logoTyped___ClRCd[data-ratio~="169normal"] { width: 25%; } } @media screen and (min-width: 960px) { .contentGrid__gridItem___TGKUe { margin-bottom: 0 } } .contentGrid__gridItem___TGKUe > :first-child { margin: var(--margin-for-small); } @media screen and (min-width: 700px) { .contentGrid__gridItem___TGKUe > :first-child { margin: var(--margin-for-tablet); } @media screen and (min-width: 1600px) { .contentGrid__gridItem___TGKUe > :first-child { margin: var(--margin-for-large-desktop); } } } .contentGrid__gridItem___TGKUe > :first-child { display: block; } [data-device-type="tv"] .contentGrid__gridItem___TGKUe > :first-child { margin: var(--margin-for-tv); } @media screen and (min-width: 700px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe > :first-child { margin: var(--margin-for-tv); } @media screen and (min-width: 1600px) { [data-device-type="tv"] .contentGrid__gridItem___TGKUe > :first-child { margin: var(--margin-for-tv); } } } .spinner__content___l5Yr_ { position: relative; height: 160px; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .search___r2qQJ { --padding-for-large-desktop: 0 5rem; --padding-for-desktop: 0 5.5rem; --padding-for-tablet: 0 2.5rem; --padding-for-small: 0 1.25rem; --padding-for-tv: 0 6.4rem; --margin-for-large-desktop: 0.5rem; --margin-for-tablet: 0.5rem; --margin-for-small: 0.25rem; --margin-for-tv: 2rem 2.6rem; --color_bg: var(--color_white); padding: var(--padding-for-small); } @media screen and (min-width: 700px) { .search___r2qQJ { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { .search___r2qQJ { padding: var(--padding-for-desktop); } } @media screen and (min-width: 1600px) { .search___r2qQJ { padding: var(--padding-for-large-desktop); } } } [data-device-type="tv"] .search___r2qQJ { padding: var(--padding-for-tv); } @media screen and (min-width: 700px) { [data-device-type="tv"] .search___r2qQJ { padding: var(--padding-for-tv); } @media screen and (min-width: 1285px) { [data-device-type="tv"] .search___r2qQJ { padding: var(--padding-for-tv); } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .search___r2qQJ { padding: var(--padding-for-tv); } } } [data-theme~='dark'] .search___r2qQJ { --color_bg: var(--color_darkmode-primary); } [data-theme~='telecomitalia'] .search___r2qQJ { --color_bg: var(--color_gold-kumera); } .search___r2qQJ { display: flex; flex-grow: 1; flex-direction: column; justify-content: flex-start; align-items: stretch; background: var(--color_bg); opacity: 1; overflow-y: auto; transition: opacity 200ms ease-in-out; visibility: visible; z-index: 6; } /* WARNING : This z-index must be higher than in 'cardRemoveButton.css' otherwise it causes trouble if you do a search after a click on My playlist (in user menu) => case of remove button wrongly displayed */ .search__hidden___gR9Nj { opacity: 0; visibility: hidden; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .seasons___weaZW { --color_season-bg: var(--color_tuna); --season-border: solid 1px var(--color_black); } [data-theme~='telecomitalia'] .seasons___weaZW { --color_season-bg: var(--color_gold-dark-secondary); --season-border: none; } .seasons___weaZW { padding: 0 5rem; } .seasons___weaZW .seasonsList___qRqjY { overflow: auto; display: flex; margin-bottom: 2.2rem; padding-top: 2.8rem; } /* we use a padding instead of margin to have a space when we scroll on season list (on TV) */ .seasons___weaZW .seasonsList__season___xNr7t { margin-right: 0.5rem; min-height: 3.9rem; background-color: var(--color_season-bg); border: var(--season-border); border-radius: 0.4rem; } [data-device-type="tv"] .seasons___weaZW .seasonsList__season___xNr7t { background-color: transparent; border-radius: 0.8rem; border-width: 0; color: var(--color_white); } .seasons___weaZW .seasonsList__season--active___ZvFVX, .seasons___weaZW .seasonsList__season___xNr7t:hover { background-color: var(--color_white); color: var(--color_black); font-weight: bold; } [data-device-type="tv"] .seasons___weaZW .seasonsList__season--active___ZvFVX, [data-device-type="tv"] .seasons___weaZW .seasonsList__season___xNr7t:hover { background-color: var(--color_tuna); color: var(--color_white); } .seasons___weaZW .seasonsList___qRqjY a { display: block; text-align: center; height: 100%; width: 100%; min-width: 6rem; padding: 0.9rem 1.4rem 0.6rem; white-space: nowrap; } [data-device-type="tv"] .seasons___weaZW .seasonsList___qRqjY a { font-size: 3.3rem; padding: 2rem 4rem; } .seasons___weaZW .seasonsList__seasonDescription___kXaYF { color: var(--color_white-50); } [data-device-type="tv"] .seasons___weaZW .seasonsList__seasonDescription___kXaYF { font-size: 2.4rem; } /* TV focus style */ .tv__focus.globalDetailSeasonButton { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .tv__focus.globalDetailSeasonButton { border-radius: 0.8rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .MoreInfosTemplate__title___RKOia { margin: 4rem 0 2rem 0; } [data-device-type="tv"] .MoreInfosTemplate__title___RKOia { margin-top: 7rem; } .MoreInfosTemplate__title___RKOia { text-align: center; font-size: 4.7rem; line-height: 5.8rem; font-family: CanalBoldItalique, sans-serif; text-transform: uppercase; } .descriptionText___xN9HQ { --color_descriptionText-fg: var(--color_white); --color_descriptionText-tv-fg: var(--color_white-80); --color_availabilityText-fg: var(--color_black-50); } [data-theme~='dark'] .descriptionText___xN9HQ { --color_availabilityText-fg: var(--color_white-50); } [data-theme~='telecomitalia'] .descriptionText___xN9HQ { --color_availabilityText-fg: var(--color_white-70); } .descriptionText___xN9HQ { --fontSize: 1.7rem; --fontSize-TV: 3.16rem; --lineHeight-TV: 3.67rem; --availability-fontSize: 1.5rem; --availability-fontSize-TV: 2.7rem; color: var(--color_descriptionText-fg); font-size: var(--fontSize); margin-bottom: 2rem; } .descriptionText__availabilityText___CUnRc { font-size: var(--availability-fontSize); color: var(--color_availabilityText-fg); } [data-device-type="tv"] .descriptionText___xN9HQ { font-size: var(--fontSize-TV); line-height: var(--lineHeight-TV); color: var(--color_descriptionText-tv-fg); } [data-device-type="tv"] .descriptionText__text___U5dA_ { margin: 0 0 1.02rem 0; } [data-device-type="tv"] .descriptionText__availabilityText___CUnRc { font-size: var(--availability-fontSize-TV); color: var(--color_descriptionText-tv-fg); } [data-device-type="tv"] .descriptionText--focus___cJGA9 { padding: 2rem 3rem; } .DetailedInformation__title___bjJ0E { font-size: 2.6rem; color: var(--color_white); margin-bottom: 0.5rem; font-weight: var(--fontWeight_semiBold); } [data-device-type="tv"] .DetailedInformation__title___bjJ0E { font-size: 4.7rem; line-height: 5.8rem; padding-left: 3rem; margin-bottom: 0; } [data-device-type="tv"] .DetailedInformation__contents___dxLuY { padding: 2rem 3rem; } .DetailedInformation__item___b05Jq { color: var(--color_white-60); font-size: 1.7rem; line-height: 2.2rem; display: flex; } [data-device-type="tv"] .DetailedInformation__item___b05Jq { font-size: 2.5rem; line-height: 2.9rem; } .DetailedInformation__item__label___F8HxV { margin-right: 0.3rem; } .DetailedInformation__item__values___Lo_YO { display: flex; align-items: center; } .DetailedInformation__item__values___Lo_YO svg { fill: var(--color_white-60); height: 1.5rem; margin: 0 0.5rem; } .Labels___ivBZR { --color-labels-content-bg: var(--color_darkmode-secondary); --color-labels-content-hover-bg: var(--color_darkmode-secondary); --color_labels-subtitle-fg: var(--color_white-30); } [data-theme~='telecomitalia'] .Labels___ivBZR { --color-labels-content-bg: var(--color_gold-dark-secondary); --color-labels-content-hover-bg: var(--color_gold-dark-tertiary); --color_labels-subtitle-fg: var(--color_white-70); } .Labels___ivBZR { margin-bottom: 2rem; } .Labels__title___Ss0zH { font-size: 2.6rem; color: var(--color_white); margin-bottom: 0.5rem; font-weight: var(--fontWeight_semiBold); } [data-device-type="tv"] .Labels__title___Ss0zH { font-size: 4.7rem; line-height: 5.8rem; margin-bottom: 2rem; padding-left: 3.1rem; } .Labels__subtitle___xIoYw { font-size: 1.3rem; color: var(--color_labels-subtitle-fg); line-height: 1.7rem; } [data-device-type="tv"] .Labels__subtitle___xIoYw { font-size: 2.5rem; line-height: 2.9rem; color: var(--color_white-50); margin-bottom: 1rem; } .Labels__contents___NdTr4 { margin-bottom: 1rem; color: var(--color_white); } [data-device-type="tv"] .Labels__contents___NdTr4 { padding: 0 3rem; } .Labels__contentLabel___llt96 { display: flex; flex-wrap: wrap; } .Labels__labelContent___rMfhi { background-color: var(--color-labels-content-bg); border-radius: 0.4rem; margin-right: 0.5rem; margin-bottom: 0.5rem; } [data-device-type="tv"] .Labels__labelContent___rMfhi { margin-right: 2rem; margin-bottom: 2rem; padding: 2.1rem 4rem; } .Labels__labelContent___rMfhi:hover { opacity: .7; background-color: var(--color-labels-content-hover-bg); transition-timing-function: ease-out; } [data-theme~='telecomitalia'] .Labels__labelContent___rMfhi:hover { opacity: 1; background-color: var(--color-labels-content-hover-bg); } .Labels__labelContent__text___tpCDB { margin: auto 15px; font-size: 1.7rem; line-height: 3.5rem; height: 3.4rem; vertical-align: center; } [data-device-type="tv"] .Labels__labelContent__text___tpCDB { font-size: 3.1rem; } .Labels__labelContent.tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .ReviewList___fxA0N { --color_reviewList-item-review-fg: var(--color_white-60); } [data-theme~='telecomitalia'] .ReviewList___fxA0N { --color_reviewList-item-review-fg: var(--color_white-70); } .ReviewList___fxA0N { margin-bottom: 2rem; } .ReviewList__title___t46vg { font-size: 2.6rem; color: var(--color_white); margin-bottom: 0.5rem; font-weight: var(--fontWeight_semiBold); } [data-device-type="tv"] .ReviewList__title___t46vg { font-size: 4.7rem; line-height: 5.8rem; padding-left: 3.1rem; margin-bottom: 0; margin-top: 2.3rem; } [data-device-type="tv"] .ReviewList__contentWrapper___T_B_J { padding: 2rem 3rem; } .ReviewList__item__review___jyCgz { font-size: 1.7rem; color: var(--color_reviewList-item-review-fg); margin-bottom: 1rem; } [data-device-type="tv"] .ReviewList__item__review___jyCgz { font-size: 2.7rem; line-height: 3.2rem; } .ReviewList__rating___GwuED { display: flex; } [data-device-type="tv"] .ReviewList__rating___GwuED { line-height: 3.2rem; margin: 0 0 1.2rem 0; } .ReviewList__rating__title___bUbrh { font-size: 1.9rem; color: var(--color_white); margin-bottom: 1rem; } [data-device-type="tv"] .ReviewList__rating__title___bUbrh { font-size: 3.1rem; font-weight: bold; } .ReviewList__rating__stars___Vn4U7 { margin-left: 1rem; margin-bottom: 1rem; margin-top: 0.3rem; } [data-device-type="tv"] .ReviewList__rating__stars___Vn4U7 { margin-left: 2rem; } .ReviewList__rating__stars--size___NXMq4 { width: 1.52rem; height: 1.68421rem; bottom: 0; } /* Get star ratio width/height 19/20° for svg star size in MoreInfo case */ .ReviewList__rating__stars___Vn4U7 svg { width: 1.52rem; height: 1.68421rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .MoreInfosContentTemplate__wrapper___R8Z6y { padding: 0 5rem; margin: 2rem 0 0 0; } [data-device-type="tv"] .MoreInfosContentTemplate__wrapper___R8Z6y { margin: 0; } .MoreInfosContentTemplate__wrapper__keysBinder___K8jzc { display: flex; flex-direction: column; align-items: center; justify-content: var(--funnelWrapper-justifyContent); width: 100%; min-height: calc(100vh - var(--funnelWrapper-paddingTop) - var(--funnelWrapper-paddingBottom)); } .MoreInfosContentTemplate__items___INeem { margin-bottom: 4rem; } [data-device-type="tv"] .MoreInfosContentTemplate__items___INeem { margin-bottom: 6rem; } .MoreInfosContentTemplate__copyright____Jx9w { color: var(--color_white-60); font-size: 1.5rem; line-height: 1.8rem; } [data-device-type="tv"] .MoreInfosContentTemplate__copyright____Jx9w { font-size: 2.5rem; line-height: 2.9rem; padding-left: 3rem; margin-bottom: 12rem; } .moreInfosItemFocus .tv__focus { --color_notClickableItem-tv-bg-focus: var(--color_mine-shaft); } .moreInfosItemFocus .tv__focus { background-color: var(--color_notClickableItem-tv-bg-focus); border-radius: 0.8rem; box-shadow: 0 8px 10px 0 var(--color_black-50); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .landing__error___Rvcid { margin: 0 1.5rem; } @media screen and (min-width: 700px) { .landing__error___Rvcid { margin: 0 3rem } } @media screen and (min-width: 1285px) { .landing__error___Rvcid { margin: 0 5rem } } .landing__strates___ZUIiR { position: relative; } [data-device-type="tv"] .landing__strates___ZUIiR { padding-bottom: 8rem; } .landing__heading___kYOHA { margin: 3rem 0 1rem; padding: 0 1.5rem; } @media screen and (min-width: 700px) { .landing__heading___kYOHA { padding: 0 3rem; display: flex; justify-content: space-between } } @media screen and (min-width: 1285px) { .landing__heading___kYOHA { padding: 0 6rem } } @media screen and (min-width: 1600px) { .landing__heading___kYOHA { padding: 0 5.5rem } } [data-device-type="tv"] .landing__heading___kYOHA { justify-content: center; } .strate___NRwx_ { position: relative; margin-top: 2rem; padding-bottom: 2rem; } @media (--mq-from-tablet) { .strate___NRwx_ { margin-top: 2.5rem } } @media (--mq-from-desktop) { .strate___NRwx_ { margin-top: 3rem } } [data-device-type="tv"] .strate___NRwx_ { padding-bottom: 5rem; } .strate--noPadding___H4YKm { margin: 0; padding: 0; } .strate___NRwx_ + .strate___NRwx_ { margin-top: 2rem; } @media (--mq-from-tablet) { .strate___NRwx_ + .strate___NRwx_ { margin-top: 2rem } } /* Note: if needed later, we could use semantic colors (https://ether.thescenery.co/color/) */ :root { /* mono */ --color_white: hsl(0, 0%, 100%); /* #ffffff */ --color_white-0: hsla(0, 0%, 100%, 0); /* #ffffff */ --color_white-10: hsla(0, 0%, 100%, 0.1); /* #ffffff */ --color_white-20: hsla(0, 0%, 100%, 0.2); /* #ffffff */ --color_white-30: hsla(0, 0%, 100%, 0.3); /* #ffffff */ --color_white-50: hsla(0, 0%, 100%, 0.5); /* #ffffff */ --color_white-70: hsla(0, 0%, 100%, 0.7); /* #ffffff */ --color_white-80: hsla(0, 0%, 100%, 0.8); /* #ffffff */ --color_base: hsl(0, 0%, 60%); /* #999999 */ --color_black: hsl(0, 0%, 0%); /* #000000 */ --color_black-50: hsla(0, 0%, 0%, 0.5); /* #808080 */ --color_black-80: hsl(0, 0%, 80%); /* #cccccc */ /* neutral colors */ --color_grey-100: hsl(0, 0%, 96%); /* #f5f5f5 */ --color_grey-200: hsl(220, 14%, 88%); /* #dcdfe5 */ --color_grey-300: hsl(218, 7%, 78%); /* #c3c6cb */ --color_grey-350: hsl(240, 14%, 90%); /* #e2e2e9 */ --color_grey-350-low-opacity: hsla(240, 14%, 90%, 0.2); /* #e2e2e9 opacity .2 */ --color_grey-400: hsl(215, 6%, 39%); /* #5d6269 */ --color_grey-450: hsl(217, 9%, 29%); /* #434851 */ --color_grey-500: hsl(0, 0%, 28%); /* #474747 */ --color_grey-600: hsl(213, 12%, 12%); /* #1b1e22 */ --color_grey-700: hsl(220, 12%, 10%); /* #16181d */ --color_grey-800: hsl(346, 35%, 7%); /* #180c0f */ --color_grey-850: hsl(0, 0%, 99%); /* #fcfcfc */ --color_grey-dark: hsl(215, 15%, 23%); /* #313842 */ /* V5 mono */ --color_amaranth-50: hsla(350, 83%, 57%, 0.5); /* #ec3654 opacity .5 */ --color_amaranth: hsl(350, 83%, 57%); /* #ec3654 */ --color_cod-grey: hsl(0, 0%, 9.4%); /* #181818 */ --color_cod-grey-50: hsla(0, 0%, 9.4%, 0.5); /* #181818 opacity .5 */ --color_gallery: hsl(0, 0%, 92.2%); /* #ebebeb */ --color_iron: hsl(180, 7.4%, 89.4%); /* #E2E6E6 */ --color_ivory: hsl(240, 5%, 96%); /* #f5f5f6 */ --color_maroon-flush: hsl(350.1, 67.4%, 45.7%); /* #c32640 */ --color_mine-shaft: hsl(0, 0%, 14.1%); /* #242424 */ --color_mine-shaft-light: hsl(0, 0%, 22.7%); /* #3a3a3a */ --color_tuna: hsl(233, 8%, 23%); /* #373840 */ /* theme colors */ --color_primary: hsl(0, 0%, 11%); /* #1c1c1c */ --color_secondary: var(--color_amaranth); /* button colors */ --color_button-bg-hover: hsl(350, 83%, 59%); /* #ed405d */ --color_button-disabled-bg: var(--color_amaranth-50); --color_button-disabled-fg: var(--color_white-70); --color_button-fg: var(--color_white); --color_button-tvod-bg: hsla(310, 64%, 34%, 0.8); /* #8e1f7c opacity .8 */ /* card colors */ --color_primary-card: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_secondary-card: hsla(218, 11%, 15%, 0.63); /* #22252a opacity .63 */ --color_primary-card-shadow: hsl(216, 11%, 15%); /* #22252a */ --color_cardRemoveButton-bg: var(--color_primary-card); --color_cardProgressBar-bg: var(--color_secondary); /* text colors */ --color_text-primary: var(--color_primary); --color_text-secondary: var(--color_font-grey); --color_text-disabled: var(--color_primary); /* dark mode */ --account_color_primary-card-hover: hsl(240, 5.3%, 96.3%); --color_darkmode-primary: hsl(0, 0%, 5%); /* #0E0E0E */ --color_darkmode-primary-0: hsla(220, 12%, 10%, 0); /* #16181C */ --color_darkmode-secondary: hsl(214, 7%, 19%); /* #2c2f33 */ --color_darkmode-tertiary: hsl(233, 8%, 23%); /* #373840 */ --color_darkmode-textcolor-primary: hsl(0, 0%, 100%); /* #ffffff */ --color_darkmode-textcolor-secondary: hsla(0, 0%, 100%, 0.9); --color_darkmode-button: hsl(214, 7%, 19%); /* #2c2f33 */ --color_darkmode-button-lighter: hsla(214, 7%, 19%, 0.9); /* #2c2f33 */ --color_darkmode-button-hover: hsla(240, 14%, 90%, 0.2); /* #e2e2e9 opacity .2 */ --color_darkmode-line: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --background_darkmode-cover: linear-gradient(to top, var(--color_darkmode-primary) 1%, rgba(22, 25, 28, 0) 50%); --color_darkmode-disabled-button: hsla(214, 7%, 19%, 0.9); /* #2C2F33E6 */ --color_darkmode-settings-background: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_darkmode-settings-hover: hsla(233, 8%, 23%, 0.5); /* #373840 opacity .5 */ --color_darkmode-settings-text: var(--color_white-70); --color_darkmode-background-page: var(--color_dark); --color_darkmode-guide-collapsible-bg: var(--color_darkmode-primary); --color_darkmode-guide-collapsible-hover-bg: var(--color_darkmode-secondary); --color_darkmode-guide-day-selector-item-fg: var(--color_darkmode-textcolor-primary); --color_darkmode-form-input-bg: var(--color_darkmode-secondary); --color_darkmode-form-input-active-bg: var(--color_darkmode-secondary); --color_darkmode-zoneSelector-country: var(--color_white-70); --color_darkmode-zoneSelector-country-hover: var(--color_white); /* tvod colors */ --color_tvod-primary: hsl(310, 64%, 34%); /* #8e1f7c */ --color_tvod-secondary: hsl(297, 32%, 26%); /* #552d58 */ --color_tvod-tertiary: hsl(311, 60%, 47%); /* #c030a5 */ --color_tvod-dark: hsl(215, 15%, 23%); /* #323943 */ /* link colors */ --color_link-normal: var(--color_secondary); --color_link-hover: var(--color_maroon-flush); /* brand colors */ --color_facebook: hsl(221, 44%, 41%); /* #3b5998 */ --color_twitter: hsl(196, 100%, 46%); /* #00aced */ --color_telerama: hsl(0, 86%, 43%); /* #CE0F0F */ --color_allocine: hsl(52, 100%, 50%); /* #FFDB00*/ --color_telecable: hsl(353, 100%, 44%); /* #e0001a */ /* error colors */ --color_error-msg: hsl(354, 76%, 62%); /* #e85463 */ --color_error-text: var(--color_secondary); /* action colors */ --color_action-success: hsl(128, 85%, 57%); /* #34ef4d */ /* modal colors */ --color_modal-light-inner-bg: var(--color_white); /* #ffffff */ --color_modal-light-inner-fg: var(--color_primary); /* #1c1c1c */ --color_modal-dark-inner-bg: var(--color_darkmode-secondary); /* #2c2f33 */ --color_modal-dark-inner-fg: var(--color_darkmode-textcolor-primary); /* #ffffff */ /* mood colors */ --color_mood-neutral: hsl(220, 14%, 88%); /* #dcdfe5 */ --color_mood-like: hsl(157, 79%, 42%); /* #16c07f */ --color_mood-dislike: var(--color_secondary); /* rating colors */ --color_rating: hsl(151, 91%, 43%); /* #0ad171 */ /* placeholder colors */ --color_placeholder: hsl(220, 16%, 89%); /*#dee1e7*/ /* form colors */ --color_form-input: hsl(216, 16%, 19%); /* #292f38 */ --color_form-input-bg: var(--color_white); --color_form-input-hover: hsl(218, 18%, 26%); /* #696e77 */ --color_form-placeholder: hsl(219, 6%, 44%); /* #c62f48 */ --color_form_flipSwitch: var(--color_secondary); --color_form_flipSwitch_label-fg: var(--color_secondary); --color_form-flipSwitch-off: hsla(217.5, 10.8%, 14.5%, 0.2); /* #212429 opacity .2 */ --color_form_focus_outline: hsl(208, 59%, 60%); /* #5d9dd5 */ --color_form-radio-border: hsl(210, 9%, 70%); --color_form-radio-bg: hsl(218, 18%, 26%); --color_form-radio-checked-bg: hsl(310, 68%, 25%); --color_form-radio-checked-border: var(--color_tvod-tertiary); --color_form-radio-checked-after-bg: var(--color_tvod-tertiary); --color_form-input-tvod: var(--color_form-input); --color_form-input-tvod-hover: var(--color_form-input-hover); /* checkbox colors */ --color_checkbox-border: hsl(210, 9%, 70%); /* #ACB3B9 */ --color_checkbox-bg: hsl(218, 18%, 26%); /* #3E4551 */ --color_checkbox-checked-bg: hsl(310, 68%, 25%); /* #6B145D */ --color_checkbox-checked-border: var(--color_tvod-tertiary); /* header colors */ --color_menu: hsl(218, 18%, 26%); /* #363f4f */ --color_menu-hover: var(--color_secondary); --color_abonnement: var(--color_secondary); --color_abonnement-hover: var(--color_maroon-flush); /* zone selector footer colors */ --color_zoneSelector-country: var(--color_grey-400); --color_zoneSelector-country-hover: var(--color_dark); /* font colors */ --color_font-base: var(--color_black); --color_primary-light: hsl(210, 14%, 55%); /* #7c8c9c */ --color_font-grey: hsla(217.5, 10.8%, 14.5%, 0.7); /* #212429 opacity .7 */ --color_standard_placeholder: rgb(117, 117, 117); /* #757575 */ /* generic focus colors */ --color_focus-primary: var(--color_white); --color_focus-secondary: hsl(208, 59%, 60%); /* #5d9dd5 */ /* background colors */ --background-page: initial; --background-cover: linear-gradient( to top, var(--color_white) 0%, rgba(255, 255, 255, 0.4) 15%, hsla(0, 0%, 11%, 0.1) 50% ); --background-notification-alert: var(--color_amaranth); --background-cover-dark-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 3%, rgba(0, 0, 0, 0) 97%); --background-cover-dark-bottom: linear-gradient(0deg, rgba(22, 25, 28, 1) 41%, rgba(22, 25, 28, 0) 96%); --background-label-subscribe: hsl(216.3, 91.1%, 60.2%); /* #3d86f6 */ --background-label-lastdays: hsl(350, 89%, 45%); /* #d80c2e */ --background-label-grey: hsla(217.5, 10.8%, 14.5%, 0.8); /* #212429 opacity .8 */ /* tv guide colors */ --color_guide-collapsible-closed-bg: hsla(240, 5.3%, 96.3%, 0.4); /* #f5f5f6 opacity .4 */ --color_guide-collapsible-hover-bg: hsl(240, 12%, 90%); /* #E2E2E8 */ --color_guide-collapsible-bg: hsl(240, 5.3%, 96.3%); /* #f5f5f6 */ --color_guide-slate-grey: hsl(210, 6%, 39%); /* #5e646a */ --color_guide-dark-grey: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_guide-pale-grey: hsl(240, 14%, 90%); /* #e2e2e9 */ --color_guide-day-selector-bg: var(--color_grey-350-low-opacity); --color_guide-day-selector-item-active-fg: var(--color_secondary); --color_guide-day-selector-item-fg: var(--color_primary); --color_guide-collapsible-text-hover: var(--color_white); --color_guide-column-item-border: var(--color_guide-pale-grey); --color_guide-navigationButton-bg: var(--color_grey-600); /* light mode */ --color_guide-channels-selector-light-bg: var(--color_white); --color_guide-collapsible-hover-light-bg: hsl(240, 12%, 90%); /* #E2E2E8 */ --color_guide-collapsible-hover-light-fg: var(--color_text-primary); --color_guide-collapsible-closed-light-bg: hsla(240, 5.3%, 96.3%, 0.4); /* #f5f5f6 opacity .4 */ /* dark mode */ --color_guide-channels-selector-dark-bg: var(--color_darkmode-tertiary); --color_guide-collapsible-hover-dark-bg: var(--color_darkmode-secondary); --color_guide-collapsible-hover-dark-fg: var(--color_darkmode-textcolor-primary); --color_guide-collapsible-closed-dark-bg: var(--color_darkmode-tertiary); /* live tv colors */ --color_live-tv-start-over-icon: hsla(217.5, 10.8%, 14.5%, 0.3); /* #212429 */ --color_live-tv-start-over-icon-arrow: var(--color_white); --color_live-tv-start-over-icon-arrow-hover: var(--color_white); --color_live-tv-favorites-empty-msg-bg: hsla(233, 8%, 23%, 0.1); /* #36373f */ --color_live-tv-favorites-empty-msg-icon: var(--color_white); --color-live-tv-edit-favorites-input-group: var(--color_ivory); --color-live-tv-edit-favorites-search-icon: hsla(218, 11%, 15%, 0.5); /* #22252A80 */ --color-live-tv-edit-favorites-card: var(--color_ivory); --color-live-tv-edit-favorites-card-hover: hsla(240, 14%, 90%, 0.65); --color-live-tv-edit-favorites-card-active: var(--color_grey-350); /* #e2e2e9 */ --color-live-tv-edit-favorites-card-check-icon: var(--color_amaranth); --color-live-tv-modal-header-shadow: hsla(0, 0%, 0%, 0.07); /* #000000B3 */ --color-live-tv-modal-footer-shadow: hsla(0, 0%, 0%, 0.1); /* #000000E6 */ --color-live-tv-feature-card-bg: hsl(219, 15%, 19%); /* #292e37 */ /* media-card colors */ --color_media-card-header-button: hsla(0, 0%, 100%, 0.1); /* #FFFFFF1A */ --color_media-card-body: var(--color_grey-300); --color_media-card-body-bg: var(--color_grey-600); --color_media-card-personnalities: var(--color_white); --color_media-card-seasonSwitcher-link-active: var(--color_secondary); --color_media-card-listCardSummary: var(--color_base); --color_media-card-body-meta: var(--color_base); --color_media-card-c2c-bg: var(--color_white); --color_media-card-reviews-review-fg: var(--color_grey-300); /* multi-live setup colors */ --color_multi-live-setup-card-wrap-selection: hsla(218, 11%, 15%, 0.45); /* #22252A73 */ /* showcase colors */ --color_showcase-background: var(--color_dark); --color_showcase-button-primary-bg: var(--color_amaranth); --color_showcase-button-primary-hover-bg: var(--color_maroon-flush); --color_showcase-button-secondary: hsl(214, 7%, 19%); /* #2c2f33 */ --color_showcase-button-secondary-hover: hsl(240, 5%, 23%); /*#38383e*/ --color_showcase-border: hsla(0, 0%, 100%, 0.1); --color_showcase-fg: var(--color_white); --color_showcase-description-fg: var(--color_white-70); --color_showcase-paragraph-text: hsla(0, 0%, 100%, 0.3); --color_showcase-tabs-indicator: hsl(214, 6%, 23%); --color_showcase-tag-background: hsl(233, 8%, 23%); /* #373840 */ --color_showcase-cover-background: hsl(210, 12%, 10%); /* #16191c */ /* external services */ --color_external-services-button-show-episodes: hsla(218, 11%, 15%, 0.7); --color_shadow-external-services-button-show-episodes: hsla(0, 0%, 0%, 0.5); /* register colors */ --color_register-background: var(--color_white); --color_register-background-icon: hsla(0, 0%, 0%, 0.3); /* #0000004c */ --color_register-error: hsl(354, 76%, 62%); /* #e85361 */ --color_register-border-input: var(--color_grey-200); --color_register-cgu-text: hsla(0, 0%, 100%, 0.3); --color_register-button-close-modal: hsla(217.5, 10.8%, 14.5%, 0.03); /* #212429 */ --color_register-button-update-password-text: hsla(217.5, 10.8%, 14.5%, 0.3); /* #212429 */ --color_register-right-bullet-point: hsl(157, 71%, 55%); /* #3add9e */ --color-register-button-hover: hsl(240, 5.3%, 96.3%); /* #f5f5f6 */ --color-register-button-hover-dark: hsl(233, 6.8%, 23.1%); /* #37383f */ /* profile colors */ --color_profile-dark-grey: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_profile-background: hsl(210, 12%, 10%); /* #16191c */ --color_profile-background-tv: hsl(210, 12%, 10%); /* #16191c */ --color_profile-input-tv-bg: var(--color_white-70); /* #ffffff */ --color_profileForm-name-border: var(--color_grey-300); --color_profileForm-name-light-bg: var(--color_white); --color_profileForm-name-light-fg: var(--color_black); --color_profileForm-name-dark-bg: var(--color_darkmode-secondary); --color_profileForm-name-dark-bg-focus: var(--color_black); --color_profileForm-name-dark-fg: var(--color_darkmode-textcolor-primary); --color_profileForm-name-dark-fg-focus: var(--color_darkmode-textcolor-primary); --color_profilesList-arrow: var(--color_grey-400); --color_profilesList-profile-border-light: var(--color_grey-350); --color_profilesList-profile-border-dark: var(--color_darkmode-line); --color_usermenu-profile-edit-button-bg: hsla(0, 0%, 100%, 0); /* #ffffff */ --color_usermenu-profile-edit-button-tv-bg: hsl(214.3, 7.4%, 18.6%); /* #2C2F33 */ --color_usermenu-profile-edit-button-tv-fg: var(--color_white-80); /* settings */ --color_settings-border: var(--color_grey-350); /* my account idp */ --color_my-account-idp-text: hsla(217.5, 10.8%, 14.5%, 0.3); /* #212429 opacity .3 */ --color_my-account-idp-value: hsl(216, 2.9%, 34.3%); /* #55575a */ /* tooltip colors */ --color_toolTip-content-secondary-bg: var(--color_secondary); /* V5 colors */ --color_detail-content: hsl(0, 0%, 9.8%); /* #191919 */ --color_detail-metas: hsla(0, 0%, 100%, 0.5); /* user menu colors */ --color_usermenu-profile-edit-button-fg: var(--color_secondary); --color_usermenu-bottom-button-authentication-fg: var(--color_white); /* TV colors */ --color_button-tv: hsla(214, 7%, 19%, 0.9); /* #2c2f33 */ /* TV Focus colors */ --color_focus-outline: var(--color_amaranth); --color_focus-bg: var(--color_amaranth); --color_focus-fg: var(--color_white); --color_focus-border: var(--color_amaranth); /* gabaritList colors */ --color_gabaritList-accent: var(--color_amaranth); /* light mode */ --color_gabaritList-item-light-fg: var(--color_chalkboard); --color_gabaritList-dropdown-light-bg: var(--color_white); --color_gabaritList-dropdown-light-fg-hover: var(--color_black); --color_overflow-light: var(--color-white); /* dark mode */ --color_gabaritList-item-dark-fg: var(--color_white); --color_gabaritList-dropdown-dark-bg: var(--color_chalkboard); --color_gabaritList-dropdown-dark-bg-hover: var(--color_tuna); --color_gabaritList-dropdown-dark-fg-hover: var(--color_white); --color_overflow-dark: var(--color_darkmode-primary); /* perso template colors */ --color_persoTemplate-text: var(--color_primary); /* badges colors */ --color_badge-button-bg: var(--color_grey-500); --color_badge-button-hover-bg: var(--color_grey-500); --color_badge-button-disabled-bg: hsl(0, 0%, 18%); /* #2e2e2e */ --color_badge-button-disabled-hover-bg: hsl(0, 0%, 18%); /* #2e2e2e */ --color_badge-button-disabled-svg-fill: hsl(0, 0%, 48%); /* #7b7b7b */ --color_badge-button-svg-fill: var(--color_grey-100); /* dropdown colors */ /* light mode */ --color_dropdown-light-fg: var(--color_text-primary); --color_dropdown-light-bg: var(--color_white); --color_dropdown-border-light: var(--color_grey-350); --color_dropdown-item-light-bg-hover: var(--color_grey-100); --color_dropdown-item-light-fg-hover: var(--color_text-primary); --color_dropdown-item-subtitle-light-fg: var(--color_guide-slate-grey); /* dark mode */ --color_dropdown-dark-fg: var(--color_darkmode-textcolor-primary); --color_dropdown-dark-bg: var(--color_darkmode-secondary); --color_dropdown-border-dark: var(--color_darkmode-line); --color_dropdown-item-dark-bg-hover: var(--color_darkmode-tertiary); --color_dropdown-item-dark-fg-hover: var(--color_darkmode-textcolor-primary); --color_dropdown-item-subtitle-dark-fg: var(--color_darkmode-textcolor-secondary); /* Button Settings TV colors */ --color_settings-button-bg: var(--color_darkmode-button-lighter); --color_settings-button-fg: var(--color_white-80); --color_settings-icon-fg: var(--color_white-80); /* GDPR & privacy manager colors */ --color_GDPR-text-fg: var(--color_white-80); --color_GDPR-button-bg: var(--color_darkmode-button-lighter); --color_GDPR-button-readonly-bg: hsla(0, 0%, 0%, 0.3); /* #000000 opacity .3 */ --color_GDPR-choice-fg: var(--color_white-70); --color_GDPR-button-fg: var(--color_white-80); --color_GDPR-icon-fg: var(--color_white-80); /* parental code */ --color_parental-code-input-bg: hsla(218, 11%, 15%, 0.1); --color_parental-code-input-border: hsla(0, 0%, 0%, 0.1); } /* ------------------------------------------------ OVERRIDE THEMING VALUES ------------------------------------------------*/ /* LIGHT MODE MYCANAL ---------------------------------------------------*/ :root [data-theme='light'] { --background-page: var(--color_white); } /* DARK MODE MYCANAL ---------------------------------------------------*/ :root [data-theme~='dark'] { /* background colors */ --background-page: var(--color_darkmode-primary); /* text colors */ --color_text-primary: hsl(0, 0%, 100%); /* #ffffff */ --color_text-secondary: var(--color_white-70); --color_error-text: var(--color_secondary); /* setting colors */ --color_settings-border: var(--color_darkmode-tertiary); /* media card */ --color_media-card-c2c-bg: var(--color_darkmode-primary); /* tv guide colors */ --color_guide-collapsible-hover-bg: var(--color_darkmode-secondary); --color_guide-collapsible-closed-bg: var(--color_darkmode-tertiary); --color_guide-day-selector-item-fg: var(--color_white); /* live tv colors */ --color_live-tv-start-over-icon: var(--color_darkmode-tertiary); --color_live-tv-favorites-empty-msg-bg: hsla(255, 255%, 255%, 0.1); /* #36373f */ --color-live-tv-edit-favorites-input-group: var(--color_darkmode-secondary); --color-live-tv-edit-favorites-search-icon: hsla(0, 0%, 100%, 0.5); /* #FFFFFF80 */ --color-live-tv-edit-favorites-card: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color-live-tv-edit-favorites-card-hover: hsla(233, 8%, 23%, 0.7); /* #373840B3 */ --color-live-tv-edit-favorites-card-active: hsl(233, 8%, 23%); /* #373840 */ /* parental code */ --color_parental-code-input-bg: hsl(0, 0%, 14%); --color_parental-code-input-border: var(--color_white-30); } /* TVOD MODE ---------------------------------------------------*/ /* ~= selector is used to select elements with an attribute value containing a specified word like "tvod dark" or "tvod light" */ :root [data-theme~='tvod'] { /* theme colors */ --color_secondary: hsl(311, 60%, 47%); /* #c030a5 */ /* button colors */ --color_button-disabled-bg: hsla(310, 64%, 34%, 0.5); /* #8e1f7c opacity .5 */ --color_button-bg-hover: var(--color_tvod-primary); /* link colors */ --color_link-hover: var(--color_button-bg-hover); /* form colors */ --color_form-placeholder: hsl(210, 9%, 70%); /* #acb3b9 */ --color_form_flipSwitch: hsl(310, 64%, 34%); /* #8e1f7c */ --color_form_flipSwitch_label-fg: hsl(310, 64%, 34%); /* #8e1f7c */ --color_form-flipSwitch-off: hsla(217.5, 10.8%, 14.5%, 0.2); /* #212429 opacity .2 */ /* header colors */ --color_menu-hover: var(--color_secondary); --color_abonnement: hsl(310, 64%, 34%); /* #8e1f7c */ --color_abonnement-hover: hsl(350, 83%, 59%); /* #ed405e */ /* GabaritList colors */ --color_gabaritList-accent: var(--color_tvod-tertiary); /* showcase colors */ --color_showcase-background: var(--color_dark); /* profile colors */ --color_profilesList-light-fg: hsl(0, 0%, 11%); /* #1C1C1C */ --color_profilesList-dark-fg: hsl(0, 0%, 100%); /* #ffffff */ } /* TIM MODE ---------------------------------------------------*/ /* data-theme = "telecomitalia dark" || "telecomitalia light" */ :root [data-theme~='telecomitalia'] { /* mono */ --color_secondary: var(--color_white); --color_standard_placeholder: var(--color_white-50); --color_gold-roti: hsl(46, 51.4%, 49.2%); /* #bea03d */ --color_gold-alpine: hsl(43.7, 60.3%, 45.5%); /* #ba942e */ --color_gold-kumera: hsl(37.9, 62.6%, 36.7%); /* #986d23 */ --color_gold-dark-primary: hsl(37.9, 63.1%, 32.9%); /* #89621f */ --color_gold-dark-secondary: hsl(37.7, 62.7%, 29.4%); /* #7a571c */ --color_gold-dark-tertiary: hsl(38, 63.1%, 25.5%); /* #6a4c18 */ --color_base: hsla(0, 0%, 100%, 0.7); /* #ffffff */ /* themes colors */ --color_live: hsl(350, 89.5%, 44.7%); /* #D80C2E */ /* background colors */ --background-page: var(--color_gold-kumera); /* zone selector footer colors */ --color_zoneSelector-country: var(--color_white); --color_zoneSelector-country-hover: var(--color_cod-grey); /* text colors */ --color_text-primary: var(--color_white); --color_text-secondary: var(--color_white-70); --color_text-disabled: var(--color_white-60); /* link colors */ --color_link-normal: var(--color_white); --color_link-hover: var(--color_white-70); /* error colors */ --color_error-msg: var(--color_white); /* button colors */ --color_button-bg-hover: var(--color_white-70); --color_button-fg: var(--color_cod-grey); --color_button-disabled-bg: var(--color_white-70); --color_button_primary_hover-bg: hsl(350.1, 67.4%, 45.7%); /* #C32640 */ --color_button-disabled-fg: var(--color_cod-grey); --color_button-icon: var(--color_cod-grey); /* form colors */ --color_form-input: var(--color_white); --color_form-input-bg: var(--color_gold-dark-secondary); --color_form-placeholder: var(--color_white); --color_form_flipSwitch: hsl(0, 0%, 9.4%); /* #181818 */ --color_form_flipSwitch_label-fg: var(--color_white); --color_form-flipSwitch-off: hsla(0, 0%, 0%, 0.5); --color_form-radio-border: var(--color_white); --color_form-radio-bg: transparent; --color_form-radio-checked-bg: transparent; --color_form-radio-checked-border: var(--color_white); --color_form-radio-checked-after-bg: var(--color_white); --color_form-input-tvod: var(--color_gold-dark-primary); --color_form-input-tvod-hover: var(--color_gold-dark-secondary); /* checkbox colors */ --color_checkbox-border: var(--color_white); --color_checkbox-bg: transparent; --color_checkbox-checked-bg: var(--color_gold-dark-primary); --color_checkbox-checked-border: var(--color_white); /* media-card colors */ --color_media-card-body: var(--color_white); --color_media-card-body-bg: var(--color_gold-kumera); --color_media-card-body-meta: var(--color_white); --color_media-card-personnalities: var(--color_white-50); --color_media-card-seasonSwitcher-link-active: var(--color_white); --color_media-card-listCardSummary: var(--color_white); --color_media-card-c2c-bg: var(--color_gold-dark-primary); --color_media-card-reviews-review-fg: var(--color_white-70); /* tv guide colors */ --color_guide-day-selector-bg: var(--color_gold-dark-primary); --color_guide-day-selector-item-active-fg: var(--color_white); --color_guide-day-selector-item-fg: var(--color_white-60); --color_guide-channels-selector-light-bg: var(--color_gold-kumera); --color_guide-collapsible-bg: transparent; --color_guide-collapsible-hover-bg: transparent; --color_guide-collapsible-hover-light-bg: var(--color_gold-dark-primary); --color_guide-collapsible-closed-bg: transparent; --color_guide-collapsible-closed-light-bg: var(--color_gold-dark-primary); --color_guide-collapsible-text-hover: var(--color_grey-700); --color_guide-collapsible-hover-light-fg: var(--color_white-60); --color_guide-column-item-border: hsla(0, 0%, 100%, 0.1); --color_guide-navigationButton-bg: hsla(240, 14%, 90%, 0.2); --color_guide-slate-grey: hsla(240, 14%, 90%, 0.5); /* #e2e2e9 opacity .5 */ /* modal colors */ --color_modal-light-inner-bg: var(--color_gold-alpine); --color_modal-light-inner-fg: var(--color_white); /* usermenu colors */ --color_usermenu-profile-edit-button-fg: var(--color_white); --color_usermenu-profile-edit-button-bg: hsl(0, 0%, 100%); --color_usermenu-bottom-button-authentication-fg: var(--color_black); --color_usermenu-light-border: var(--color_white); /* profiles colors */ --color_profileForm-name-border: transparent; --color_profileForm-name-light-bg: var(--color_gold-dark-primary); --color_profileForm-name-light-fg: var(--color_white); --color_profilesList-arrow: var(--color_gold-dark-tertiary); --color_profilesList-profile-border-light: var(--color_gold-dark-tertiary); /* badges colors */ --color_badge-button-bg: var(--color_gold-dark-secondary); --color_badge-button-hover-bg: var(--color_gold-dark-tertiary); --color_badge-button-disabled-bg: rgba(122, 87, 28, 0.5); /* #7a571c opacity .5 */ --color_badge-button-disabled-hover-bg: var(--color_badge-button-disabled-bg); --color_badge-button-disabled-svg-fill: var(--color_white-50); --color_badge-button-svg-fill: var(--color_white); /* gabaritList colors */ --color_gabaritList-accent: var(--color_white); --color_gabaritList-item-light-fg: var(--color_white-60); --color_gabaritList-dropdown-light-bg: var(--color_gold-kumera); --color_gabaritList-dropdown-light-bg-hover: var(--color_gold-dark-primary); --color_gabaritList-dropdown-light-fg-hover: var(--color_white); --color_overflow-light: transparent; /* dropdown colors */ --color_dropdown-item-subtitle-fg: hsla(240, 14%, 90%, 0.5); /* #e2e2e9 opacity .5 */ --color_dropdown-light-fg: var(--color_grey-350); --color_dropdown-light-bg: var(--color_gold-dark-secondary); --color_dropdown-item-light-bg-hover: var(--color_gold-dark-tertiary); --color_dropdown-item-light-fg-hover: var(--color_white); --color_dropdown-item-subtitle-light-fg: var(--color_dropdown-item-subtitle-fg); --color_dropdown-border-light: var(--color_gold-kumera); /* card colors */ --color_primary-card: var(--color_white); --color_secondary-card: var(--color_white-70); --color_cardRemoveButton-bg: var(--color_black); --color_cardProgressBar-bg: var(--color_live); /* live tv colors */ --color_live-tv-start-over-icon: var(--color_white-20); --color_live-tv-start-over-icon-arrow-hover: var(--color_cod-grey); --color-live-tv-edit-favorites-input-group: var(--color_gold-dark-secondary); --color-live-tv-edit-favorites-search-icon: hsla(0, 0%, 100%, 0.5); /* #FFFFFF80 */ /* perso template colors */ --color_persoTemplate-text: var(--color_white); /* error colors */ --color_error-text: var(--color_white); /* my account idp */ --color_my-account-idp-text: var(--color_white-50); --color_my-account-idp-value: var(--color_white-50); /* TV colors */ --color_usermenu-profile-edit-button-tv-bg: var(--color_gold-dark-secondary); --color_usermenu-profile-edit-button-tv-fg: var(--color_white); /* TV Focus colors */ --color_focus-outline: var(--color_white); --color_focus-bg: var(--color_white); --color_focus-fg: var(--color_cod-grey); --color_focus-border: var(--color_white); /* GDPR & privacy manager colors */ --color_GDPR-text-fg: var(--color_white-80); --color_GDPR-button-bg: var(--color_gold-dark-secondary); --color_GDPR-button-fg: var(--color_white); --color_GDPR-choice-fg: var(--color_dark); --color_GDPR-icon-fg: var(--color_white); /* dark colors */ --color_darkmode-background-page: var(--background-page); --color_darkmode-textcolor-primary: var(--color_white); --color_darkmode-line: var(--color_guide-column-item-border); --color_darkmode-guide-collapsible-bg: transparent; --color_darkmode-guide-day-selector-item-fg: var(--color-white-60); --color_darkmode-guide-collapsible-hover-bg: transparent; --color_darkmode-form-input-bg: var(--color_form-input-bg); --color_darkmode-form-input-active-bg: var(--color_form-input-bg); --color_darkmode-footer-text: var(--color_white-70); --color_darkmode-zoneSelector-country: var(--color_white); --color_darkmode-zoneSelector-country-hover: var(--color_black); --color_darkmode-settings-background: hsla(0, 0%, 0%, 0.5); /* tv guide colors */ --color_guide-channels-selector-dark-bg: var(--color_gold-kumera); --color_guide-collapsible-hover-dark-bg: var(--color_gold-dark-primary); --color_guide-collapsible-hover-dark-fg: var(--color_white-60); --color_guide-collapsible-closed-dark-bg: var(--color_gold-dark-primary); /* modal colors */ --color_modal-dark-inner-bg: var(--color_gold-alpine); --color_modal-dark-inner-fg: var(--color_white); /* profiles colors */ --color_profileForm-name-dark-bg: var(--color_gold-dark-primary); --color_profileForm-name-dark-fg: var(--color_white); --color_profileForm-name-dark-bg-focus: var(--color_gold-dark-primary); --color_profileForm-name-dark-fg-focus: var(--color_white); --color_profilesList-profile-border-dark: var(--color_gold-dark-tertiary); /* setting colors */ --color_settings-border: var(--color_gold-dark-tertiary); /* gabaritList colors */ --color_gabaritList-item-dark-fg: var(--color_white-60); --color_gabaritList-dropdown-dark-bg: var(--color_gold-kumera); --color_gabaritList-dropdown-dark-bg-hover: var(--color_gold-dark-primary); --color_gabaritList-dropdown-dark-fg-hover: var(--color_white); --color_overflow-dark: transparent; /* dropdown colors */ --color_dropdown-dark-fg: var(--color_grey-350); --color_dropdown-dark-bg: var(--color_gold-dark-secondary); --color_dropdown-border-dark: var(--color_gold-kumera); --color_dropdown-item-dark-bg-hover: var(--color_gold-dark-tertiary); --color_dropdown-item-dark-fg-hover: var(--color_white); --color_dropdown-item-subtitle-dark-fg: var(--color_dropdown-item-subtitle-fg); /* showcase colors */ --color_showcase-background: var(--color_gold-kumera); --color_showcase-button-primary-bg: var(--color_white); --color_showcase-button-primary-hover-bg: var(--color_button-bg-hover); --color_showcase-fg: var(--color_white); --color_showcase-description-fg: var(--color_white-80); /* tooltip colors */ --color_toolTip-content-secondary-bg: var(--color_gold-kumera); /* V5 colors */ --color_detail-content: var(--color_gold-dark-primary); --color_detail-metas: var(--color_white-70); } :root { /* fonts */ --font_hind: 'Hind', 'San Francisco', 'Roboto', 'Arial', sans-serif; --font_CanalBoldItalique: 'CanalBoldItalique', 'San Francisco', 'Roboto', 'Arial', sans-serif; --font_path: '../../../public/fonts'; --fontWeight_regular: 400; --fontWeight_semiBold: 600; --base-font-style: normal; --base-font-weight: var(--fontWeight_regular); /* sizes */ --size_header_height: 7rem; --size_header_height-tv: 15.9rem; --size_footer_height: 24.2rem; --size_mobileHeader_height: 10rem; --size_mobileHeader_height-withNav: 10rem; --size_mobileFooter_height: 17.8rem; --size_settings_tv_width: 97.2rem; /* margin */ --poster-cover-height: calc(34.63542% - 1px); /* calculated from aspect-ratio: calc('1920:665' - 1px);*/ --margin_overlapping-cover-tablet: calc(20.79rem - var(--poster-cover-height)); --margin_overlapping-cover-laptop: calc(27.7rem - var(--poster-cover-height)); --margin_overlapping-cover-desktop: calc(39rem - var(--poster-cover-height)); --margin_overlapping-cover-large-desktop: calc(48.7rem - var(--poster-cover-height)); --margin_overlapping-cover-wide: calc(59.56rem - var(--poster-cover-height)); --margin_overlapping-cover-tv: 14.5rem; --background-page: initial; /* showcase */ --max-width-text: 64rem; --max-width-text-mobile: 34.9rem; /* border radius */ --border-radius-mini: 0.1rem; --border-radius-small: 0.2rem; --border-radius-medium: 0.3rem; --border-radius-big: 0.4rem; --border-radius-large: 0.6rem; --border-radius-extraLarge: 0.8rem; --border-radius-big-outline: 0.8rem; /* z-index for detailPage */ --z-index-background: 1; --z-index-shadow: 5; --z-index-content: 10; --z-index-title: 20; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .episode___CwWT1 { display: inline-flex; width: 100%; color: hsla(0, 0%, 100%, 0.5); color: var(--color_white-50); margin-bottom: 2.6rem; } [data-device-type="tv"] .episode___CwWT1 { margin-right: 4rem; max-width: 56.6rem; vertical-align: top; } .episode___CwWT1:hover { color: hsla(0, 0%, 100%, 0.7); color: var(--color_white-70); } .episode--isDetailV5___CLycd { color: hsl(0, 0%, 100%); color: var(--color_white); } .episode--isDetailV5___CLycd:hover { color: hsl(0, 0%, 100%); color: var(--color_white); cursor: pointer; } .episode__image___hcayl { width: 39rem; max-width: 39rem; flex: 1; } [data-device-type="tv"] .episode__image___hcayl { width: 100%; max-width: 100%; height: 31.7rem; margin: 0.4rem 0 2rem; border-radius: 0.4rem; } .episode__description___LMi8C { margin-left: 2rem; flex: 1; max-width: 160rem; font-size: 1.7rem; position: relative; } [data-device-type="tv"] .episode__description___LMi8C { margin-left: 0rem; font-size: 2.7rem; } .episode__description__title___wk0cU { color: hsl(0, 0%, 100%); color: var(--color_white); margin: 0; font-size: 1.9rem; } [data-device-type="tv"] .episode__description__title___wk0cU { font-size: 3.3rem; overflow: hidden; text-overflow: ellipsis; } [data-device-type="tv"] .episode__description__editorialTitle___Fvufr, [data-device-type="tv"] .episode__description__durationLabel___xylMR { color: hsl(0, 0%, 100%); color: var(--color_white); opacity: 0.3; white-space: break-spaces; } .episode__description__text___Jti3l { max-width: 76rem; white-space: normal; } .episode__description__availabilityEndDateLabel___gH_pN { font-size: 1.3rem; } [data-device-type="tv"] .episode__description__availabilityEndDateLabel___gH_pN { font-size: 2.5rem; } .episode__description__isD2G___AOhYk { position: absolute; top: 0; right: 0; } .episode__description__label___b9HKe { display: block; margin: 1rem 0; color: hsl(0, 0%, 100%); color: var(--color_white); } .episode__description__label--highlight___Js4Ul { color: hsl(350, 83%, 57%); color: var(--color_secondary); } /* TV focus style */ .tv__focus .globalDetailEpisodeButton { box-shadow: 0 0 0 0.4rem hsl(350, 83%, 57%); box-shadow: 0 0 0 0.4rem var(--color_focus-border); } .tv__focus .globalDetailEpisodeButton .globalPlaybackButton { opacity: 1; } .episodesContainer___hmPkh { padding: 0 5rem; margin: 2rem 0 0 0; min-height: 100vh; } [data-device-type="tv"] .episodesContainer___hmPkh { padding: 0; } .episodesContainer___hmPkh .spinner__content___jZ0bc { position: relative; height: 16rem; } .episodesContainer__HorizontalList___sr61s { padding-left: 5rem; } .loadMore___JjoDA { position: relative; } .loadMore___JjoDA .trigger___WN0nA { position: absolute; /* 56.6 rem is the max width for an episode on Tv device */ right: 226.4rem; top: 0; } /* Note: if needed later, we could use semantic colors (https://ether.thescenery.co/color/) */ :root { /* mono */ --color_white: hsl(0, 0%, 100%); /* #ffffff */ --color_white-0: hsla(0, 0%, 100%, 0); /* #ffffff */ --color_white-10: hsla(0, 0%, 100%, 0.1); /* #ffffff */ --color_white-20: hsla(0, 0%, 100%, 0.2); /* #ffffff */ --color_white-30: hsla(0, 0%, 100%, 0.3); /* #ffffff */ --color_white-50: hsla(0, 0%, 100%, 0.5); /* #ffffff */ --color_white-70: hsla(0, 0%, 100%, 0.7); /* #ffffff */ --color_white-80: hsla(0, 0%, 100%, 0.8); /* #ffffff */ --color_base: hsl(0, 0%, 60%); /* #999999 */ --color_black: hsl(0, 0%, 0%); /* #000000 */ --color_black-50: hsla(0, 0%, 0%, 0.5); /* #808080 */ --color_black-80: hsl(0, 0%, 80%); /* #cccccc */ /* neutral colors */ --color_grey-100: hsl(0, 0%, 96%); /* #f5f5f5 */ --color_grey-200: hsl(220, 14%, 88%); /* #dcdfe5 */ --color_grey-300: hsl(218, 7%, 78%); /* #c3c6cb */ --color_grey-350: hsl(240, 14%, 90%); /* #e2e2e9 */ --color_grey-350-low-opacity: hsla(240, 14%, 90%, 0.2); /* #e2e2e9 opacity .2 */ --color_grey-400: hsl(215, 6%, 39%); /* #5d6269 */ --color_grey-450: hsl(217, 9%, 29%); /* #434851 */ --color_grey-500: hsl(0, 0%, 28%); /* #474747 */ --color_grey-600: hsl(213, 12%, 12%); /* #1b1e22 */ --color_grey-700: hsl(220, 12%, 10%); /* #16181d */ --color_grey-800: hsl(346, 35%, 7%); /* #180c0f */ --color_grey-850: hsl(0, 0%, 99%); /* #fcfcfc */ --color_grey-dark: hsl(215, 15%, 23%); /* #313842 */ /* V5 mono */ --color_amaranth-50: hsla(350, 83%, 57%, 0.5); /* #ec3654 opacity .5 */ --color_amaranth: hsl(350, 83%, 57%); /* #ec3654 */ --color_cod-grey: hsl(0, 0%, 9.4%); /* #181818 */ --color_cod-grey-50: hsla(0, 0%, 9.4%, 0.5); /* #181818 opacity .5 */ --color_gallery: hsl(0, 0%, 92.2%); /* #ebebeb */ --color_iron: hsl(180, 7.4%, 89.4%); /* #E2E6E6 */ --color_ivory: hsl(240, 5%, 96%); /* #f5f5f6 */ --color_maroon-flush: hsl(350.1, 67.4%, 45.7%); /* #c32640 */ --color_mine-shaft: hsl(0, 0%, 14.1%); /* #242424 */ --color_mine-shaft-light: hsl(0, 0%, 22.7%); /* #3a3a3a */ --color_tuna: hsl(233, 8%, 23%); /* #373840 */ /* theme colors */ --color_primary: hsl(0, 0%, 11%); /* #1c1c1c */ --color_secondary: var(--color_amaranth); /* button colors */ --color_button-bg-hover: hsl(350, 83%, 59%); /* #ed405d */ --color_button-disabled-bg: var(--color_amaranth-50); --color_button-disabled-fg: var(--color_white-70); --color_button-fg: var(--color_white); --color_button-tvod-bg: hsla(310, 64%, 34%, 0.8); /* #8e1f7c opacity .8 */ /* card colors */ --color_primary-card: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_secondary-card: hsla(218, 11%, 15%, 0.63); /* #22252a opacity .63 */ --color_primary-card-shadow: hsl(216, 11%, 15%); /* #22252a */ --color_cardRemoveButton-bg: var(--color_primary-card); --color_cardProgressBar-bg: var(--color_secondary); /* text colors */ --color_text-primary: var(--color_primary); --color_text-secondary: var(--color_font-grey); --color_text-disabled: var(--color_primary); /* dark mode */ --account_color_primary-card-hover: hsl(240, 5.3%, 96.3%); --color_darkmode-primary: hsl(0, 0%, 5%); /* #0E0E0E */ --color_darkmode-primary-0: hsla(220, 12%, 10%, 0); /* #16181C */ --color_darkmode-secondary: hsl(214, 7%, 19%); /* #2c2f33 */ --color_darkmode-tertiary: hsl(233, 8%, 23%); /* #373840 */ --color_darkmode-textcolor-primary: hsl(0, 0%, 100%); /* #ffffff */ --color_darkmode-textcolor-secondary: hsla(0, 0%, 100%, 0.9); --color_darkmode-button: hsl(214, 7%, 19%); /* #2c2f33 */ --color_darkmode-button-lighter: hsla(214, 7%, 19%, 0.9); /* #2c2f33 */ --color_darkmode-button-hover: hsla(240, 14%, 90%, 0.2); /* #e2e2e9 opacity .2 */ --color_darkmode-line: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --background_darkmode-cover: linear-gradient(to top, var(--color_darkmode-primary) 1%, rgba(22, 25, 28, 0) 50%); --color_darkmode-disabled-button: hsla(214, 7%, 19%, 0.9); /* #2C2F33E6 */ --color_darkmode-settings-background: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_darkmode-settings-hover: hsla(233, 8%, 23%, 0.5); /* #373840 opacity .5 */ --color_darkmode-settings-text: var(--color_white-70); --color_darkmode-background-page: var(--color_dark); --color_darkmode-guide-collapsible-bg: var(--color_darkmode-primary); --color_darkmode-guide-collapsible-hover-bg: var(--color_darkmode-secondary); --color_darkmode-guide-day-selector-item-fg: var(--color_darkmode-textcolor-primary); --color_darkmode-form-input-bg: var(--color_darkmode-secondary); --color_darkmode-form-input-active-bg: var(--color_darkmode-secondary); --color_darkmode-zoneSelector-country: var(--color_white-70); --color_darkmode-zoneSelector-country-hover: var(--color_white); /* tvod colors */ --color_tvod-primary: hsl(310, 64%, 34%); /* #8e1f7c */ --color_tvod-secondary: hsl(297, 32%, 26%); /* #552d58 */ --color_tvod-tertiary: hsl(311, 60%, 47%); /* #c030a5 */ --color_tvod-dark: hsl(215, 15%, 23%); /* #323943 */ /* link colors */ --color_link-normal: var(--color_secondary); --color_link-hover: var(--color_maroon-flush); /* brand colors */ --color_facebook: hsl(221, 44%, 41%); /* #3b5998 */ --color_twitter: hsl(196, 100%, 46%); /* #00aced */ --color_telerama: hsl(0, 86%, 43%); /* #CE0F0F */ --color_allocine: hsl(52, 100%, 50%); /* #FFDB00*/ --color_telecable: hsl(353, 100%, 44%); /* #e0001a */ /* error colors */ --color_error-msg: hsl(354, 76%, 62%); /* #e85463 */ --color_error-text: var(--color_secondary); /* action colors */ --color_action-success: hsl(128, 85%, 57%); /* #34ef4d */ /* modal colors */ --color_modal-light-inner-bg: var(--color_white); /* #ffffff */ --color_modal-light-inner-fg: var(--color_primary); /* #1c1c1c */ --color_modal-dark-inner-bg: var(--color_darkmode-secondary); /* #2c2f33 */ --color_modal-dark-inner-fg: var(--color_darkmode-textcolor-primary); /* #ffffff */ /* mood colors */ --color_mood-neutral: hsl(220, 14%, 88%); /* #dcdfe5 */ --color_mood-like: hsl(157, 79%, 42%); /* #16c07f */ --color_mood-dislike: var(--color_secondary); /* rating colors */ --color_rating: hsl(151, 91%, 43%); /* #0ad171 */ /* placeholder colors */ --color_placeholder: hsl(220, 16%, 89%); /*#dee1e7*/ /* form colors */ --color_form-input: hsl(216, 16%, 19%); /* #292f38 */ --color_form-input-bg: var(--color_white); --color_form-input-hover: hsl(218, 18%, 26%); /* #696e77 */ --color_form-placeholder: hsl(219, 6%, 44%); /* #c62f48 */ --color_form_flipSwitch: var(--color_secondary); --color_form_flipSwitch_label-fg: var(--color_secondary); --color_form-flipSwitch-off: hsla(217.5, 10.8%, 14.5%, 0.2); /* #212429 opacity .2 */ --color_form_focus_outline: hsl(208, 59%, 60%); /* #5d9dd5 */ --color_form-radio-border: hsl(210, 9%, 70%); --color_form-radio-bg: hsl(218, 18%, 26%); --color_form-radio-checked-bg: hsl(310, 68%, 25%); --color_form-radio-checked-border: var(--color_tvod-tertiary); --color_form-radio-checked-after-bg: var(--color_tvod-tertiary); --color_form-input-tvod: var(--color_form-input); --color_form-input-tvod-hover: var(--color_form-input-hover); /* checkbox colors */ --color_checkbox-border: hsl(210, 9%, 70%); /* #ACB3B9 */ --color_checkbox-bg: hsl(218, 18%, 26%); /* #3E4551 */ --color_checkbox-checked-bg: hsl(310, 68%, 25%); /* #6B145D */ --color_checkbox-checked-border: var(--color_tvod-tertiary); /* header colors */ --color_menu: hsl(218, 18%, 26%); /* #363f4f */ --color_menu-hover: var(--color_secondary); --color_abonnement: var(--color_secondary); --color_abonnement-hover: var(--color_maroon-flush); /* zone selector footer colors */ --color_zoneSelector-country: var(--color_grey-400); --color_zoneSelector-country-hover: var(--color_dark); /* font colors */ --color_font-base: var(--color_black); --color_primary-light: hsl(210, 14%, 55%); /* #7c8c9c */ --color_font-grey: hsla(217.5, 10.8%, 14.5%, 0.7); /* #212429 opacity .7 */ --color_standard_placeholder: rgb(117, 117, 117); /* #757575 */ /* generic focus colors */ --color_focus-primary: var(--color_white); --color_focus-secondary: hsl(208, 59%, 60%); /* #5d9dd5 */ /* background colors */ --background-page: initial; --background-cover: linear-gradient( to top, var(--color_white) 0%, rgba(255, 255, 255, 0.4) 15%, hsla(0, 0%, 11%, 0.1) 50% ); --background-notification-alert: var(--color_amaranth); --background-cover-dark-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 3%, rgba(0, 0, 0, 0) 97%); --background-cover-dark-bottom: linear-gradient(0deg, rgba(22, 25, 28, 1) 41%, rgba(22, 25, 28, 0) 96%); --background-label-subscribe: hsl(216.3, 91.1%, 60.2%); /* #3d86f6 */ --background-label-lastdays: hsl(350, 89%, 45%); /* #d80c2e */ --background-label-grey: hsla(217.5, 10.8%, 14.5%, 0.8); /* #212429 opacity .8 */ /* tv guide colors */ --color_guide-collapsible-closed-bg: hsla(240, 5.3%, 96.3%, 0.4); /* #f5f5f6 opacity .4 */ --color_guide-collapsible-hover-bg: hsl(240, 12%, 90%); /* #E2E2E8 */ --color_guide-collapsible-bg: hsl(240, 5.3%, 96.3%); /* #f5f5f6 */ --color_guide-slate-grey: hsl(210, 6%, 39%); /* #5e646a */ --color_guide-dark-grey: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_guide-pale-grey: hsl(240, 14%, 90%); /* #e2e2e9 */ --color_guide-day-selector-bg: var(--color_grey-350-low-opacity); --color_guide-day-selector-item-active-fg: var(--color_secondary); --color_guide-day-selector-item-fg: var(--color_primary); --color_guide-collapsible-text-hover: var(--color_white); --color_guide-column-item-border: var(--color_guide-pale-grey); --color_guide-navigationButton-bg: var(--color_grey-600); /* light mode */ --color_guide-channels-selector-light-bg: var(--color_white); --color_guide-collapsible-hover-light-bg: hsl(240, 12%, 90%); /* #E2E2E8 */ --color_guide-collapsible-hover-light-fg: var(--color_text-primary); --color_guide-collapsible-closed-light-bg: hsla(240, 5.3%, 96.3%, 0.4); /* #f5f5f6 opacity .4 */ /* dark mode */ --color_guide-channels-selector-dark-bg: var(--color_darkmode-tertiary); --color_guide-collapsible-hover-dark-bg: var(--color_darkmode-secondary); --color_guide-collapsible-hover-dark-fg: var(--color_darkmode-textcolor-primary); --color_guide-collapsible-closed-dark-bg: var(--color_darkmode-tertiary); /* live tv colors */ --color_live-tv-start-over-icon: hsla(217.5, 10.8%, 14.5%, 0.3); /* #212429 */ --color_live-tv-start-over-icon-arrow: var(--color_white); --color_live-tv-start-over-icon-arrow-hover: var(--color_white); --color_live-tv-favorites-empty-msg-bg: hsla(233, 8%, 23%, 0.1); /* #36373f */ --color_live-tv-favorites-empty-msg-icon: var(--color_white); --color-live-tv-edit-favorites-input-group: var(--color_ivory); --color-live-tv-edit-favorites-search-icon: hsla(218, 11%, 15%, 0.5); /* #22252A80 */ --color-live-tv-edit-favorites-card: var(--color_ivory); --color-live-tv-edit-favorites-card-hover: hsla(240, 14%, 90%, 0.65); --color-live-tv-edit-favorites-card-active: var(--color_grey-350); /* #e2e2e9 */ --color-live-tv-edit-favorites-card-check-icon: var(--color_amaranth); --color-live-tv-modal-header-shadow: hsla(0, 0%, 0%, 0.07); /* #000000B3 */ --color-live-tv-modal-footer-shadow: hsla(0, 0%, 0%, 0.1); /* #000000E6 */ --color-live-tv-feature-card-bg: hsl(219, 15%, 19%); /* #292e37 */ /* media-card colors */ --color_media-card-header-button: hsla(0, 0%, 100%, 0.1); /* #FFFFFF1A */ --color_media-card-body: var(--color_grey-300); --color_media-card-body-bg: var(--color_grey-600); --color_media-card-personnalities: var(--color_white); --color_media-card-seasonSwitcher-link-active: var(--color_secondary); --color_media-card-listCardSummary: var(--color_base); --color_media-card-body-meta: var(--color_base); --color_media-card-c2c-bg: var(--color_white); --color_media-card-reviews-review-fg: var(--color_grey-300); /* multi-live setup colors */ --color_multi-live-setup-card-wrap-selection: hsla(218, 11%, 15%, 0.45); /* #22252A73 */ /* showcase colors */ --color_showcase-background: var(--color_dark); --color_showcase-button-primary-bg: var(--color_amaranth); --color_showcase-button-primary-hover-bg: var(--color_maroon-flush); --color_showcase-button-secondary: hsl(214, 7%, 19%); /* #2c2f33 */ --color_showcase-button-secondary-hover: hsl(240, 5%, 23%); /*#38383e*/ --color_showcase-border: hsla(0, 0%, 100%, 0.1); --color_showcase-fg: var(--color_white); --color_showcase-description-fg: var(--color_white-70); --color_showcase-paragraph-text: hsla(0, 0%, 100%, 0.3); --color_showcase-tabs-indicator: hsl(214, 6%, 23%); --color_showcase-tag-background: hsl(233, 8%, 23%); /* #373840 */ --color_showcase-cover-background: hsl(210, 12%, 10%); /* #16191c */ /* external services */ --color_external-services-button-show-episodes: hsla(218, 11%, 15%, 0.7); --color_shadow-external-services-button-show-episodes: hsla(0, 0%, 0%, 0.5); /* register colors */ --color_register-background: var(--color_white); --color_register-background-icon: hsla(0, 0%, 0%, 0.3); /* #0000004c */ --color_register-error: hsl(354, 76%, 62%); /* #e85361 */ --color_register-border-input: var(--color_grey-200); --color_register-cgu-text: hsla(0, 0%, 100%, 0.3); --color_register-button-close-modal: hsla(217.5, 10.8%, 14.5%, 0.03); /* #212429 */ --color_register-button-update-password-text: hsla(217.5, 10.8%, 14.5%, 0.3); /* #212429 */ --color_register-right-bullet-point: hsl(157, 71%, 55%); /* #3add9e */ --color-register-button-hover: hsl(240, 5.3%, 96.3%); /* #f5f5f6 */ --color-register-button-hover-dark: hsl(233, 6.8%, 23.1%); /* #37383f */ /* profile colors */ --color_profile-dark-grey: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color_profile-background: hsl(210, 12%, 10%); /* #16191c */ --color_profile-background-tv: hsl(210, 12%, 10%); /* #16191c */ --color_profile-input-tv-bg: var(--color_white-70); /* #ffffff */ --color_profileForm-name-border: var(--color_grey-300); --color_profileForm-name-light-bg: var(--color_white); --color_profileForm-name-light-fg: var(--color_black); --color_profileForm-name-dark-bg: var(--color_darkmode-secondary); --color_profileForm-name-dark-bg-focus: var(--color_black); --color_profileForm-name-dark-fg: var(--color_darkmode-textcolor-primary); --color_profileForm-name-dark-fg-focus: var(--color_darkmode-textcolor-primary); --color_profilesList-arrow: var(--color_grey-400); --color_profilesList-profile-border-light: var(--color_grey-350); --color_profilesList-profile-border-dark: var(--color_darkmode-line); --color_usermenu-profile-edit-button-bg: hsla(0, 0%, 100%, 0); /* #ffffff */ --color_usermenu-profile-edit-button-tv-bg: hsl(214.3, 7.4%, 18.6%); /* #2C2F33 */ --color_usermenu-profile-edit-button-tv-fg: var(--color_white-80); /* settings */ --color_settings-border: var(--color_grey-350); /* my account idp */ --color_my-account-idp-text: hsla(217.5, 10.8%, 14.5%, 0.3); /* #212429 opacity .3 */ --color_my-account-idp-value: hsl(216, 2.9%, 34.3%); /* #55575a */ /* tooltip colors */ --color_toolTip-content-secondary-bg: var(--color_secondary); /* V5 colors */ --color_detail-content: hsl(0, 0%, 9.8%); /* #191919 */ --color_detail-metas: hsla(0, 0%, 100%, 0.5); /* user menu colors */ --color_usermenu-profile-edit-button-fg: var(--color_secondary); --color_usermenu-bottom-button-authentication-fg: var(--color_white); /* TV colors */ --color_button-tv: hsla(214, 7%, 19%, 0.9); /* #2c2f33 */ /* TV Focus colors */ --color_focus-outline: var(--color_amaranth); --color_focus-bg: var(--color_amaranth); --color_focus-fg: var(--color_white); --color_focus-border: var(--color_amaranth); /* gabaritList colors */ --color_gabaritList-accent: var(--color_amaranth); /* light mode */ --color_gabaritList-item-light-fg: var(--color_chalkboard); --color_gabaritList-dropdown-light-bg: var(--color_white); --color_gabaritList-dropdown-light-fg-hover: var(--color_black); --color_overflow-light: var(--color-white); /* dark mode */ --color_gabaritList-item-dark-fg: var(--color_white); --color_gabaritList-dropdown-dark-bg: var(--color_chalkboard); --color_gabaritList-dropdown-dark-bg-hover: var(--color_tuna); --color_gabaritList-dropdown-dark-fg-hover: var(--color_white); --color_overflow-dark: var(--color_darkmode-primary); /* perso template colors */ --color_persoTemplate-text: var(--color_primary); /* badges colors */ --color_badge-button-bg: var(--color_grey-500); --color_badge-button-hover-bg: var(--color_grey-500); --color_badge-button-disabled-bg: hsl(0, 0%, 18%); /* #2e2e2e */ --color_badge-button-disabled-hover-bg: hsl(0, 0%, 18%); /* #2e2e2e */ --color_badge-button-disabled-svg-fill: hsl(0, 0%, 48%); /* #7b7b7b */ --color_badge-button-svg-fill: var(--color_grey-100); /* dropdown colors */ /* light mode */ --color_dropdown-light-fg: var(--color_text-primary); --color_dropdown-light-bg: var(--color_white); --color_dropdown-border-light: var(--color_grey-350); --color_dropdown-item-light-bg-hover: var(--color_grey-100); --color_dropdown-item-light-fg-hover: var(--color_text-primary); --color_dropdown-item-subtitle-light-fg: var(--color_guide-slate-grey); /* dark mode */ --color_dropdown-dark-fg: var(--color_darkmode-textcolor-primary); --color_dropdown-dark-bg: var(--color_darkmode-secondary); --color_dropdown-border-dark: var(--color_darkmode-line); --color_dropdown-item-dark-bg-hover: var(--color_darkmode-tertiary); --color_dropdown-item-dark-fg-hover: var(--color_darkmode-textcolor-primary); --color_dropdown-item-subtitle-dark-fg: var(--color_darkmode-textcolor-secondary); /* Button Settings TV colors */ --color_settings-button-bg: var(--color_darkmode-button-lighter); --color_settings-button-fg: var(--color_white-80); --color_settings-icon-fg: var(--color_white-80); /* GDPR & privacy manager colors */ --color_GDPR-text-fg: var(--color_white-80); --color_GDPR-button-bg: var(--color_darkmode-button-lighter); --color_GDPR-button-readonly-bg: hsla(0, 0%, 0%, 0.3); /* #000000 opacity .3 */ --color_GDPR-choice-fg: var(--color_white-70); --color_GDPR-button-fg: var(--color_white-80); --color_GDPR-icon-fg: var(--color_white-80); /* parental code */ --color_parental-code-input-bg: hsla(218, 11%, 15%, 0.1); --color_parental-code-input-border: hsla(0, 0%, 0%, 0.1); } /* ------------------------------------------------ OVERRIDE THEMING VALUES ------------------------------------------------*/ /* LIGHT MODE MYCANAL ---------------------------------------------------*/ :root [data-theme='light'] { --background-page: var(--color_white); } /* DARK MODE MYCANAL ---------------------------------------------------*/ :root [data-theme~='dark'] { /* background colors */ --background-page: var(--color_darkmode-primary); /* text colors */ --color_text-primary: hsl(0, 0%, 100%); /* #ffffff */ --color_text-secondary: var(--color_white-70); --color_error-text: var(--color_secondary); /* setting colors */ --color_settings-border: var(--color_darkmode-tertiary); /* media card */ --color_media-card-c2c-bg: var(--color_darkmode-primary); /* tv guide colors */ --color_guide-collapsible-hover-bg: var(--color_darkmode-secondary); --color_guide-collapsible-closed-bg: var(--color_darkmode-tertiary); --color_guide-day-selector-item-fg: var(--color_white); /* live tv colors */ --color_live-tv-start-over-icon: var(--color_darkmode-tertiary); --color_live-tv-favorites-empty-msg-bg: hsla(255, 255%, 255%, 0.1); /* #36373f */ --color-live-tv-edit-favorites-input-group: var(--color_darkmode-secondary); --color-live-tv-edit-favorites-search-icon: hsla(0, 0%, 100%, 0.5); /* #FFFFFF80 */ --color-live-tv-edit-favorites-card: hsl(217.5, 10.8%, 14.5%); /* #212429 */ --color-live-tv-edit-favorites-card-hover: hsla(233, 8%, 23%, 0.7); /* #373840B3 */ --color-live-tv-edit-favorites-card-active: hsl(233, 8%, 23%); /* #373840 */ /* parental code */ --color_parental-code-input-bg: hsl(0, 0%, 14%); --color_parental-code-input-border: var(--color_white-30); } /* TVOD MODE ---------------------------------------------------*/ /* ~= selector is used to select elements with an attribute value containing a specified word like "tvod dark" or "tvod light" */ :root [data-theme~='tvod'] { /* theme colors */ --color_secondary: hsl(311, 60%, 47%); /* #c030a5 */ /* button colors */ --color_button-disabled-bg: hsla(310, 64%, 34%, 0.5); /* #8e1f7c opacity .5 */ --color_button-bg-hover: var(--color_tvod-primary); /* link colors */ --color_link-hover: var(--color_button-bg-hover); /* form colors */ --color_form-placeholder: hsl(210, 9%, 70%); /* #acb3b9 */ --color_form_flipSwitch: hsl(310, 64%, 34%); /* #8e1f7c */ --color_form_flipSwitch_label-fg: hsl(310, 64%, 34%); /* #8e1f7c */ --color_form-flipSwitch-off: hsla(217.5, 10.8%, 14.5%, 0.2); /* #212429 opacity .2 */ /* header colors */ --color_menu-hover: var(--color_secondary); --color_abonnement: hsl(310, 64%, 34%); /* #8e1f7c */ --color_abonnement-hover: hsl(350, 83%, 59%); /* #ed405e */ /* GabaritList colors */ --color_gabaritList-accent: var(--color_tvod-tertiary); /* showcase colors */ --color_showcase-background: var(--color_dark); /* profile colors */ --color_profilesList-light-fg: hsl(0, 0%, 11%); /* #1C1C1C */ --color_profilesList-dark-fg: hsl(0, 0%, 100%); /* #ffffff */ } /* TIM MODE ---------------------------------------------------*/ /* data-theme = "telecomitalia dark" || "telecomitalia light" */ :root [data-theme~='telecomitalia'] { /* mono */ --color_secondary: var(--color_white); --color_standard_placeholder: var(--color_white-50); --color_gold-roti: hsl(46, 51.4%, 49.2%); /* #bea03d */ --color_gold-alpine: hsl(43.7, 60.3%, 45.5%); /* #ba942e */ --color_gold-kumera: hsl(37.9, 62.6%, 36.7%); /* #986d23 */ --color_gold-dark-primary: hsl(37.9, 63.1%, 32.9%); /* #89621f */ --color_gold-dark-secondary: hsl(37.7, 62.7%, 29.4%); /* #7a571c */ --color_gold-dark-tertiary: hsl(38, 63.1%, 25.5%); /* #6a4c18 */ --color_base: hsla(0, 0%, 100%, 0.7); /* #ffffff */ /* themes colors */ --color_live: hsl(350, 89.5%, 44.7%); /* #D80C2E */ /* background colors */ --background-page: var(--color_gold-kumera); /* zone selector footer colors */ --color_zoneSelector-country: var(--color_white); --color_zoneSelector-country-hover: var(--color_cod-grey); /* text colors */ --color_text-primary: var(--color_white); --color_text-secondary: var(--color_white-70); --color_text-disabled: var(--color_white-60); /* link colors */ --color_link-normal: var(--color_white); --color_link-hover: var(--color_white-70); /* error colors */ --color_error-msg: var(--color_white); /* button colors */ --color_button-bg-hover: var(--color_white-70); --color_button-fg: var(--color_cod-grey); --color_button-disabled-bg: var(--color_white-70); --color_button_primary_hover-bg: hsl(350.1, 67.4%, 45.7%); /* #C32640 */ --color_button-disabled-fg: var(--color_cod-grey); --color_button-icon: var(--color_cod-grey); /* form colors */ --color_form-input: var(--color_white); --color_form-input-bg: var(--color_gold-dark-secondary); --color_form-placeholder: var(--color_white); --color_form_flipSwitch: hsl(0, 0%, 9.4%); /* #181818 */ --color_form_flipSwitch_label-fg: var(--color_white); --color_form-flipSwitch-off: hsla(0, 0%, 0%, 0.5); --color_form-radio-border: var(--color_white); --color_form-radio-bg: transparent; --color_form-radio-checked-bg: transparent; --color_form-radio-checked-border: var(--color_white); --color_form-radio-checked-after-bg: var(--color_white); --color_form-input-tvod: var(--color_gold-dark-primary); --color_form-input-tvod-hover: var(--color_gold-dark-secondary); /* checkbox colors */ --color_checkbox-border: var(--color_white); --color_checkbox-bg: transparent; --color_checkbox-checked-bg: var(--color_gold-dark-primary); --color_checkbox-checked-border: var(--color_white); /* media-card colors */ --color_media-card-body: var(--color_white); --color_media-card-body-bg: var(--color_gold-kumera); --color_media-card-body-meta: var(--color_white); --color_media-card-personnalities: var(--color_white-50); --color_media-card-seasonSwitcher-link-active: var(--color_white); --color_media-card-listCardSummary: var(--color_white); --color_media-card-c2c-bg: var(--color_gold-dark-primary); --color_media-card-reviews-review-fg: var(--color_white-70); /* tv guide colors */ --color_guide-day-selector-bg: var(--color_gold-dark-primary); --color_guide-day-selector-item-active-fg: var(--color_white); --color_guide-day-selector-item-fg: var(--color_white-60); --color_guide-channels-selector-light-bg: var(--color_gold-kumera); --color_guide-collapsible-bg: transparent; --color_guide-collapsible-hover-bg: transparent; --color_guide-collapsible-hover-light-bg: var(--color_gold-dark-primary); --color_guide-collapsible-closed-bg: transparent; --color_guide-collapsible-closed-light-bg: var(--color_gold-dark-primary); --color_guide-collapsible-text-hover: var(--color_grey-700); --color_guide-collapsible-hover-light-fg: var(--color_white-60); --color_guide-column-item-border: hsla(0, 0%, 100%, 0.1); --color_guide-navigationButton-bg: hsla(240, 14%, 90%, 0.2); --color_guide-slate-grey: hsla(240, 14%, 90%, 0.5); /* #e2e2e9 opacity .5 */ /* modal colors */ --color_modal-light-inner-bg: var(--color_gold-alpine); --color_modal-light-inner-fg: var(--color_white); /* usermenu colors */ --color_usermenu-profile-edit-button-fg: var(--color_white); --color_usermenu-profile-edit-button-bg: hsl(0, 0%, 100%); --color_usermenu-bottom-button-authentication-fg: var(--color_black); --color_usermenu-light-border: var(--color_white); /* profiles colors */ --color_profileForm-name-border: transparent; --color_profileForm-name-light-bg: var(--color_gold-dark-primary); --color_profileForm-name-light-fg: var(--color_white); --color_profilesList-arrow: var(--color_gold-dark-tertiary); --color_profilesList-profile-border-light: var(--color_gold-dark-tertiary); /* badges colors */ --color_badge-button-bg: var(--color_gold-dark-secondary); --color_badge-button-hover-bg: var(--color_gold-dark-tertiary); --color_badge-button-disabled-bg: rgba(122, 87, 28, 0.5); /* #7a571c opacity .5 */ --color_badge-button-disabled-hover-bg: var(--color_badge-button-disabled-bg); --color_badge-button-disabled-svg-fill: var(--color_white-50); --color_badge-button-svg-fill: var(--color_white); /* gabaritList colors */ --color_gabaritList-accent: var(--color_white); --color_gabaritList-item-light-fg: var(--color_white-60); --color_gabaritList-dropdown-light-bg: var(--color_gold-kumera); --color_gabaritList-dropdown-light-bg-hover: var(--color_gold-dark-primary); --color_gabaritList-dropdown-light-fg-hover: var(--color_white); --color_overflow-light: transparent; /* dropdown colors */ --color_dropdown-item-subtitle-fg: hsla(240, 14%, 90%, 0.5); /* #e2e2e9 opacity .5 */ --color_dropdown-light-fg: var(--color_grey-350); --color_dropdown-light-bg: var(--color_gold-dark-secondary); --color_dropdown-item-light-bg-hover: var(--color_gold-dark-tertiary); --color_dropdown-item-light-fg-hover: var(--color_white); --color_dropdown-item-subtitle-light-fg: var(--color_dropdown-item-subtitle-fg); --color_dropdown-border-light: var(--color_gold-kumera); /* card colors */ --color_primary-card: var(--color_white); --color_secondary-card: var(--color_white-70); --color_cardRemoveButton-bg: var(--color_black); --color_cardProgressBar-bg: var(--color_live); /* live tv colors */ --color_live-tv-start-over-icon: var(--color_white-20); --color_live-tv-start-over-icon-arrow-hover: var(--color_cod-grey); --color-live-tv-edit-favorites-input-group: var(--color_gold-dark-secondary); --color-live-tv-edit-favorites-search-icon: hsla(0, 0%, 100%, 0.5); /* #FFFFFF80 */ /* perso template colors */ --color_persoTemplate-text: var(--color_white); /* error colors */ --color_error-text: var(--color_white); /* my account idp */ --color_my-account-idp-text: var(--color_white-50); --color_my-account-idp-value: var(--color_white-50); /* TV colors */ --color_usermenu-profile-edit-button-tv-bg: var(--color_gold-dark-secondary); --color_usermenu-profile-edit-button-tv-fg: var(--color_white); /* TV Focus colors */ --color_focus-outline: var(--color_white); --color_focus-bg: var(--color_white); --color_focus-fg: var(--color_cod-grey); --color_focus-border: var(--color_white); /* GDPR & privacy manager colors */ --color_GDPR-text-fg: var(--color_white-80); --color_GDPR-button-bg: var(--color_gold-dark-secondary); --color_GDPR-button-fg: var(--color_white); --color_GDPR-choice-fg: var(--color_dark); --color_GDPR-icon-fg: var(--color_white); /* dark colors */ --color_darkmode-background-page: var(--background-page); --color_darkmode-textcolor-primary: var(--color_white); --color_darkmode-line: var(--color_guide-column-item-border); --color_darkmode-guide-collapsible-bg: transparent; --color_darkmode-guide-day-selector-item-fg: var(--color-white-60); --color_darkmode-guide-collapsible-hover-bg: transparent; --color_darkmode-form-input-bg: var(--color_form-input-bg); --color_darkmode-form-input-active-bg: var(--color_form-input-bg); --color_darkmode-footer-text: var(--color_white-70); --color_darkmode-zoneSelector-country: var(--color_white); --color_darkmode-zoneSelector-country-hover: var(--color_black); --color_darkmode-settings-background: hsla(0, 0%, 0%, 0.5); /* tv guide colors */ --color_guide-channels-selector-dark-bg: var(--color_gold-kumera); --color_guide-collapsible-hover-dark-bg: var(--color_gold-dark-primary); --color_guide-collapsible-hover-dark-fg: var(--color_white-60); --color_guide-collapsible-closed-dark-bg: var(--color_gold-dark-primary); /* modal colors */ --color_modal-dark-inner-bg: var(--color_gold-alpine); --color_modal-dark-inner-fg: var(--color_white); /* profiles colors */ --color_profileForm-name-dark-bg: var(--color_gold-dark-primary); --color_profileForm-name-dark-fg: var(--color_white); --color_profileForm-name-dark-bg-focus: var(--color_gold-dark-primary); --color_profileForm-name-dark-fg-focus: var(--color_white); --color_profilesList-profile-border-dark: var(--color_gold-dark-tertiary); /* setting colors */ --color_settings-border: var(--color_gold-dark-tertiary); /* gabaritList colors */ --color_gabaritList-item-dark-fg: var(--color_white-60); --color_gabaritList-dropdown-dark-bg: var(--color_gold-kumera); --color_gabaritList-dropdown-dark-bg-hover: var(--color_gold-dark-primary); --color_gabaritList-dropdown-dark-fg-hover: var(--color_white); --color_overflow-dark: transparent; /* dropdown colors */ --color_dropdown-dark-fg: var(--color_grey-350); --color_dropdown-dark-bg: var(--color_gold-dark-secondary); --color_dropdown-border-dark: var(--color_gold-kumera); --color_dropdown-item-dark-bg-hover: var(--color_gold-dark-tertiary); --color_dropdown-item-dark-fg-hover: var(--color_white); --color_dropdown-item-subtitle-dark-fg: var(--color_dropdown-item-subtitle-fg); /* showcase colors */ --color_showcase-background: var(--color_gold-kumera); --color_showcase-button-primary-bg: var(--color_white); --color_showcase-button-primary-hover-bg: var(--color_button-bg-hover); --color_showcase-fg: var(--color_white); --color_showcase-description-fg: var(--color_white-80); /* tooltip colors */ --color_toolTip-content-secondary-bg: var(--color_gold-kumera); /* V5 colors */ --color_detail-content: var(--color_gold-dark-primary); --color_detail-metas: var(--color_white-70); } :root { /* fonts */ --font_hind: 'Hind', 'San Francisco', 'Roboto', 'Arial', sans-serif; --font_CanalBoldItalique: 'CanalBoldItalique', 'San Francisco', 'Roboto', 'Arial', sans-serif; --font_path: '../../../public/fonts'; --fontWeight_regular: 400; --fontWeight_semiBold: 600; --base-font-style: normal; --base-font-weight: var(--fontWeight_regular); /* sizes */ --size_header_height: 7rem; --size_header_height-tv: 15.9rem; --size_footer_height: 24.2rem; --size_mobileHeader_height: 10rem; --size_mobileHeader_height-withNav: 10rem; --size_mobileFooter_height: 17.8rem; --size_settings_tv_width: 97.2rem; /* margin */ --poster-cover-height: calc(34.63542% - 1px); /* calculated from aspect-ratio: calc('1920:665' - 1px);*/ --margin_overlapping-cover-tablet: calc(20.79rem - var(--poster-cover-height)); --margin_overlapping-cover-laptop: calc(27.7rem - var(--poster-cover-height)); --margin_overlapping-cover-desktop: calc(39rem - var(--poster-cover-height)); --margin_overlapping-cover-large-desktop: calc(48.7rem - var(--poster-cover-height)); --margin_overlapping-cover-wide: calc(59.56rem - var(--poster-cover-height)); --margin_overlapping-cover-tv: 14.5rem; --background-page: initial; /* showcase */ --max-width-text: 64rem; --max-width-text-mobile: 34.9rem; /* border radius */ --border-radius-mini: 0.1rem; --border-radius-small: 0.2rem; --border-radius-medium: 0.3rem; --border-radius-big: 0.4rem; --border-radius-large: 0.6rem; --border-radius-extraLarge: 0.8rem; --border-radius-big-outline: 0.8rem; /* z-index for detailPage */ --z-index-background: 1; --z-index-shadow: 5; --z-index-content: 10; --z-index-title: 20; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .episodesList__list___T_gAz { padding: 0 5rem; margin: 2rem 0 0 0; } .liveGridEditFavoritesButton___DY0wQ { width: 100%; max-width: 32rem; font-weight: var(--fontWeight_semiBold); } [data-device-type="tv"] .liveGridEditFavoritesButton___DY0wQ { font-size: 3.6rem; max-width: 48rem; padding: 1.25rem 4rem; } .liveGrid--focus___pFyI2 { list-style: none; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .LiveGridPerso__favoritesWrap___YrVFL { max-width: 48rem; margin: 9.8rem auto; text-align: center; } @media screen and (min-width: 1285px) { .LiveGridPerso__favoritesWrap___YrVFL { margin-top: 19.6rem } } [data-device-type="tv"] .LiveGridPerso__favoritesWrap___YrVFL { margin-top: 8rem; max-width: none; } [data-device-type="tv"] .LiveGridPerso__favoritesWrap___YrVFL svg { width: 28rem; } .LiveGridPerso__favoritesIconWrap___rZylI { width: 14rem; margin: 0 auto 2rem; padding: 2.5rem 4rem; background-color: var(--color_live-tv-favorites-empty-msg-bg); fill: var(--color_live-tv-favorites-empty-msg-icon); border-radius: var(--border-radius-big); } .LiveGridPerso__favoritesHeading___jtoCJ { font-size: 2.2rem; margin: 0 0 1.6rem; } @media screen and (min-width: 700px) { .LiveGridPerso__favoritesHeading___jtoCJ { font-size: 2.4rem } } [data-device-type="tv"] .LiveGridPerso__favoritesHeading___jtoCJ { font-size: 4.7rem; margin-top: 5rem; } [data-theme~='dark'] .LiveGridPerso__text___bIikJ { color: var(--color_white-50); } [data-device-type="tv"] .LiveGridPerso__text___bIikJ { font-size: 3.1rem; margin: 2rem auto 5rem; } .LiveGridPerso__editButtonWrap___HlWbc { margin: 3rem 0; text-align: center; } @media screen and (min-width: 700px) { .LiveGridPerso__editButtonWrap___HlWbc { margin-bottom: 6rem } } /* TV focus style */ .LiveGridPerso .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } .LiveGridPerso .tv__focus { transform: scale(1.04); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .LiveGridContainer___QNflq { --padding-for-large-desktop: 0 5rem; --padding-for-desktop: 0 5.5rem; --padding-for-tablet: 0 2.5rem; --padding-for-small: 0 1.25rem; --padding-for-tv: 0 6.4rem; margin-top: 1rem; padding: var(--padding-for-small); } @media screen and (min-width: 700px) { .LiveGridContainer___QNflq { padding: var(--padding-for-tablet); } @media screen and (min-width: 1285px) { .LiveGridContainer___QNflq { padding: var(--padding-for-desktop); } } @media screen and (min-width: 1600px) { .LiveGridContainer___QNflq { padding: var(--padding-for-large-desktop); } } } @media screen and (min-width: 700px) { [data-device-type="tv"] .LiveGridContainer___QNflq { padding: var(--padding-for-tv); } @media screen and (min-width: 1285px) { [data-device-type="tv"] .LiveGridContainer___QNflq { padding: var(--padding-for-tv); } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .LiveGridContainer___QNflq { padding: var(--padding-for-tv); } } } @keyframes placeHolderFade___xu8ah { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } @keyframes rotate___sOzeN { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes slideUp___E_qxG { 0% { transform: translate3d(0, 10%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes landDown___S37ez { 0% { transform: translate3d(0, -25%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes opacity___pBcpQ { 0% { opacity: 0; } 100% { opacity: 1; } } .LiveGridFeatureCard___gXSbY { background-image: url(/assets/0f35e8b2f3875a2832ba.jpg); background-size: cover; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--color_white); fill: var(--color_white); border-radius: var(--border-radius-small); } .LiveGridFeatureCard__icon___hJL2v { width: 25%; z-index: 2; } .LiveGridFeatureCard__title____EuHO { margin-left: 5%; z-index: 2; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .LiveGridTemplate__grid___lw5Qm { display: flex; flex-wrap: wrap; } .LiveGridTemplate__gridItem___bTIhB { --margin-for-tv: 1rem 2.6rem; --margin-for-large-desktop: 1rem; --margin-for-tablet: 0.5rem; --margin-for-small: 0.25rem; } .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 50%; } @media screen and (min-width: 700px) { .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1285px) { .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 20%; } } @media screen and (min-width: 1600px) { .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 14.285714285714285%; } } [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB[data-ratio~="169"] { width: 25%; } } .LiveGridTemplate__gridItem___bTIhB > :first-child { margin: var(--margin-for-small); } @media screen and (min-width: 700px) { .LiveGridTemplate__gridItem___bTIhB > :first-child { margin: var(--margin-for-tablet); } @media screen and (min-width: 1600px) { .LiveGridTemplate__gridItem___bTIhB > :first-child { margin: var(--margin-for-large-desktop); } } } .LiveGridTemplate__gridItem___bTIhB > :first-child { display: block; } [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB > :first-child { margin: var(--margin-for-small); } @media screen and (min-width: 700px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB > :first-child { margin: var(--margin-for-tablet); } @media screen and (min-width: 1600px) { [data-device-type="tv"] .LiveGridTemplate__gridItem___bTIhB > :first-child { margin: var(--margin-for-tv); } } } .LiveGridTemplate__prospectLoginMessageWrap___PE1MB { margin: 0 auto 2.5rem; padding: 0 1.5rem; } .liveGrid--focus___ghqeZ { list-style: none; } /* TV focus style */ .liveGrid .tv__focus { border: 0.4rem solid var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } .liveGrid .tv__focus { margin: -0.5rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .LiveGridEditFavoritesHeader___GkAIp { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } /* HEADING */ .LiveGridEditFavoritesHeader__headingWrap___e0xot { text-align: center; padding-left: 4rem; /* to avoid touching the close icon button */ padding-right: 4rem; } .LiveGridEditFavoritesHeader__heading___lsOg3 { margin: 0; font-size: 1.8rem; line-height: 1.15; } [data-device-type="tv"] .LiveGridEditFavoritesHeader__heading___lsOg3 { font-size: 4.7rem; line-height: 5.8rem; } .LiveGridEditFavoritesHeader__activateSearchButton___dlXDa { width: 1.7rem; margin-left: 1.1rem; fill: var(--color_text-primary); } .LiveGridEditFavoritesHeader__activateSearchButton___dlXDa:hover { fill: var(--color_secondary); } /* SEARCH */ .LiveGridEditFavoritesHeader__searchWrap___c0hwk { position: absolute; display: flex; align-items: center; height: 100%; width: 100%; transform: translate3d(0, -125%, 0); transition: transform 300ms ease; padding: 0 1.5rem; background-color: var(--background-page); z-index: 100; z-index: var(--z-index-2, 100); } @media screen and (min-width: 960px) { .LiveGridEditFavoritesHeader__searchWrap___c0hwk { max-width: 60rem } } .LiveGridEditFavoritesHeader__searchWrap--visible___lB42n { transform: translate3d(0, 0, 0); } .LiveGridEditFavoritesHeader__inputGroup___wmYD2 { background-color: var(--color-live-tv-edit-favorites-input-group); display: flex; align-items: center; flex: 1; height: 3.8rem; padding-left: 1rem; border-radius: var(--border-radius-small); } .LiveGridEditFavoritesHeader__searchIcon___r3yV1 { display: flex; fill: var(--color-live-tv-edit-favorites-search-icon); width: 2rem; } .LiveGridEditFavoritesHeader__searchInput___eRP7Y { flex: 1; height: 100%; margin-left: 0.6rem; font-size: 1.7rem; background-color: transparent; border: none; color: var(--color_text-primary); } .LiveGridEditFavoritesHeader__closeSearchButton___R7qFC { display: flex; margin-left: 0.6rem; fill: var(--color_text-primary); height: 3rem; width: 3rem; } .LiveGridEditFavoritesHeader__closeSearchButton___R7qFC:hover { fill: var(--color_secondary); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .LiveGridEditFavoritesList___d1U65 { display: flex; flex-wrap: wrap; } [data-device-type="tv"] .LiveGridEditFavoritesList___d1U65 { padding: 0 6.6rem; } .LiveGridEditFavoritesList__channelWrap___gBPlO { padding: 0.2rem; } .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 33.33333333333333%; } @media screen and (min-width: 700px) { .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 25%; } } @media screen and (min-width: 960px) { .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 20%; } } @media screen and (min-width: 1285px) { .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } } @media screen and (min-width: 1600px) { .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 12.5%; } } @media screen and (min-width: 1920px) { .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 12.5%; } } [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } @media screen and (min-width: 700px) { [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } } @media screen and (min-width: 960px) { [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } } @media screen and (min-width: 1285px) { [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } } @media screen and (min-width: 1600px) { [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } } @media screen and (min-width: 1920px) { [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO[data-ratio~="43"] { width: 16.666666666666664%; } } @media screen and (min-width: 500px) { .LiveGridEditFavoritesList__channelWrap___gBPlO { padding: 0.4rem } } @media screen and (min-width: 960px) { .LiveGridEditFavoritesList__channelWrap___gBPlO { padding: 0.8rem } } [data-device-type="tv"] .LiveGridEditFavoritesList__channelWrap___gBPlO { padding: 0; margin: 2rem 2.4rem; } .LiveGridEditFavoritesList__channel___ZObav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 10%; display: flex; align-items: center; background-color: var(--color-live-tv-edit-favorites-card); border-radius: var(--border-radius-big); } .LiveGridEditFavoritesList__channel___ZObav:hover { background-color: var(--color-live-tv-edit-favorites-card-hover); } .LiveGridEditFavoritesList__channel--active___qMcmf, .LiveGridEditFavoritesList__channel--active___qMcmf:hover { background-color: var(--color-live-tv-edit-favorites-card-active); } .LiveGridEditFavoritesList__channel___ZObav img { max-width: 100%; } [data-device-type="tv"] .LiveGridEditFavoritesList__channel___ZObav { border-radius: var(--border-radius-big-outline); } .LiveGridEditFavoritesList__favoriteIcon___vlkpX { position: absolute; top: 0.4rem; right: 0.4rem; width: 1.6rem; fill: var(--color-live-tv-edit-favorites-card-check-icon); } @media screen and (min-width: 700px) { .LiveGridEditFavoritesList__favoriteIcon___vlkpX { top: 0.6rem; right: 0.6rem; width: 2.4rem } } [data-device-type="tv"] .LiveGridEditFavoritesList__favoriteIcon___vlkpX { top: 1.2rem; right: 1.2rem; width: 3.5rem; } /* TV focus style */ .LiveGridEditFavoritesList .tv__focus { border: 0.4rem solid var(--color_focus-outline); border-radius: var(--border-radius-big-outline); } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ @keyframes peekInFromTop___OKloe { 0%, 100% { transform: translate3d(0, -125%, 0); } 5%, 95% { transform: translate3d(0, 0, 0); } } .LiveGridEditFavoritesSaveErrorMessage___mCbZR { position: absolute; top: 0; left: 0; width: 100%; text-align: center; transform: translate3d(0, -125%, 0); animation: peekInFromTop___OKloe 10s ease; } .LiveGridEditFavoritesSaveErrorMessage__text___na9DX { display: inline-block; max-width: 90%; padding: 1rem; background: var(--color_error-msg); font-weight: var(--fontWeight_semiBold); color: var(--color_white); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3); border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); } [data-device-type="tv"] .LiveGridEditFavoritesSaveErrorMessage__text___na9DX { font-size: 3rem; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ @keyframes placeHolderFade___i27lM { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } @keyframes rotate___FfR_y { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes slideUp____LgBY { 0% { transform: translate3d(0, 10%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes landDown___DKj0O { 0% { transform: translate3d(0, -25%, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes opacity___hVOVx { 0% { opacity: 0; } 100% { opacity: 1; } } .LiveGridModalContent___W4B2m { display: flex; flex-direction: column; flex: 1; } .LiveGridModalContent__header___Td7Kh { box-shadow: 0 2px 4px 0 var(--color-live-tv-modal-header-shadow); padding: 1rem 0; min-height: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } [data-device-type="tv"] .LiveGridModalContent__header___Td7Kh { min-height: auto; padding: 4rem 0 1rem; } .LiveGridModalContent__content-wrapper___D9qdq { position: relative; flex: 1; overflow: hidden; overflow-y: scroll; } [data-device-type="tv"] .LiveGridModalContent__content-wrapper___D9qdq { overflow: visible; overflow: initial; } .LiveGridModalContent__content___orxlj { display: flex; flex-direction: column; flex: 1; height: 100%; overflow: auto; padding: 0.2rem 1.3rem 0; } @media screen and (min-width: 700px) { .LiveGridModalContent__content___orxlj { padding: 0 0.7rem 0 } } .LiveGridModalContent__content__error___Niscr { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 1rem; text-align: center; transform: translate3d(0, 0, 0); opacity: 1; animation: landDown___DKj0O 200ms ease; } [data-device-type="tv"] .LiveGridModalContent__content__error___Niscr { font-size: 3.1rem; } .LiveGridModalContent__content__error__button___cVozz { max-width: 32rem; margin: 0 auto; } [data-device-type="tv"] .LiveGridModalContent__content__error__button___cVozz { font-size: 3.6rem; } .LiveGridModalContent__footer___HC135 { box-shadow: 0 -1px 2px 0 var(--color-live-tv-modal-footer-shadow); padding: 1.6rem 2.8rem; text-align: center; margin-bottom: 5rem; } @media screen and (min-width: 700px) { .LiveGridModalContent__footer___HC135 { padding: 2.35rem 2.8rem; margin-bottom: 0 } } .LiveGridModalContent__footer___HC135 > button { width: 100%; max-width: 32.5rem; pointer-events: auto; font-weight: var(--fontWeight_semiBold); } .LiveGridModalContent .tv__focus { background-color: var(--color_focus-bg); color: var(--color_focus-fg); } @keyframes fadeInWithDelay___othfs { 0%, 50% { opacity: 0; } 100% { opacity: 1; } } .LiveGridFavoritesTemplate__spinner___MbMDt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; background-color: rgba(0, 0, 0, 0.25); } .LiveGridFavoritesTemplate__spinner--save___hNjkS { animation: fadeInWithDelay___othfs 500ms ease; } .LiveGridFavoritesTemplate__saveSpinner___o1A_O { animation: fadeInWithDelay___othfs 500ms ease; } /* OFFICIAL DESIGN SYSTEM BREAKPOINTS MIN MAX NAME ---- ------ ------------- 0 699 mobile 700 959 tablet 960 1284 laptop 1285 1599 desktop 1600 1919 large_desktop 1920 ∞ wide */ :root { --breakpoint_tablet: 700px; --breakpoint_laptop: 960px; --breakpoint_desktop: 1285px; --breakpoint_large_desktop: 1600px; --breakpoint_wide: 1920px; /* New DIVE breakpoints */ --breakpoint_xsmall_375: 375px; --breakpoint_xsmall_420: 420px; } /* Mobile-first media queries */ /* Browser-specific media queries */ .MultiLiveSetupCard___AsFNH { --color_multi-live-setup-border: var(--color_grey-350); } .MultiLiveSetupCard___AsFNH [data-theme='dark'] { --color_multi-live-setup-border: transparent; } .MultiLiveSetupCard___AsFNH[data-ratio~="169"] { width: 100%; } @media screen and (min-width: 700px) { .MultiLiveSetupCard___AsFNH[data-ratio~="169"] { width: 33.33333333333333%; } } @media screen and (min-width: 960px) { .MultiLiveSetupCard___AsFNH[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1285px) { .MultiLiveSetupCard___AsFNH[data-ratio~="169"] { width: 25%; } } @media screen and (min-width: 1600px) { .MultiLiveSetupCard___AsFNH[data-ratio~="169"] { width: 20%; } } @media screen and (min-width: 1920px) { .MultiLiveSetupCard___AsFNH[data-ratio~="169"] { width: 16.666666666666664%; } } .MultiLiveSetupCard___AsFNH { opacity: 1; overflow: hidden; transition: opacity 200ms linear; } .MultiLiveSetupCard___AsFNH:first-of-type { border-radius: var(--border-radius-big) 0 0 0; } .MultiLiveSetupCard___AsFNH:first-of-type .MultiLiveSetupCard__textWrap___qYLeU { border-radius: 0 var(--border-radius-big) 0 0; } .MultiLiveSetupCard___AsFNH:last-of-type { border-radius: 0 0 var(--border-radius-big) var(--border-radius-big); } .MultiLiveSetupCard___AsFNH:last-of-type .MultiLiveSetupCard__textWrap___qYLeU { border-radius: 0 0 var(--border-radius-big) 0; border-bottom: 0.5px solid var(--color_multi-live-setup-border); } @media screen and (min-width: 700px) { .MultiLiveSetupCard___AsFNH:last-of-type .MultiLiveSetupCard__textWrap___qYLeU { border: none } } @media screen and (min-width: 700px) { .MultiLiveSetupCard___AsFNH { padding: 0.8rem } } .MultiLiveSetupCard--isDisabled___rPMSK { opacity: 0.5; } .MultiLiveSetupCard__contentWrap____8bY2 { width: 100%; display: flex; flex-direction: row; align-items: stretch; } @media screen and (min-width: 700px) { .MultiLiveSetupCard__contentWrap____8bY2 { flex-direction: column } } .MultiLiveSetupCard__contentWrap____8bY2:disabled { cursor: default; } .MultiLiveSetupCard__posterWrap___H2uFM { width: 150px; } @media screen and (min-width: 700px) { .MultiLiveSetupCard__posterWrap___H2uFM { width: 100% } } .MultiLiveSetupCard__posterOverrideBorderRadius___asf0n { border-radius: 0; } @media screen and (min-width: 700px) { .MultiLiveSetupCard__posterOverrideBorderRadius___asf0n { border-radius: var(--border-radius-small) } } .MultiLiveSetupCard__progressBarWrap___wT5g2 { position: absolute; bottom: 0; width: 100%; padding: 0.4rem; z-index: 3; } .MultiLiveSetupCard__selectionNumberWrap___D0Qsu { height: 100%; width: 100%; background-color: var(--color_multi-live-setup-card-wrap-selection); z-index: 2; } .MultiLiveSetupCard__selectionNumber___TQ8U6 { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); display: flex; align-items: center; justify-content: center; } .MultiLiveSetupCard__selectionNumber___TQ8U6 svg { height: 2.6rem; width: 2.6rem; } @media screen and (min-width: 700px) { .MultiLiveSetupCard__selectionNumber___TQ8U6 svg { height: 2.9rem; width: 2.9rem } } .MultiLiveSetupCard__textWrap___qYLeU { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 1rem; text-align: left; border-top: 0.5px solid var(--color_multi-live-setup-border); border-right: 0.5px solid var(--color_multi-live-setup-border); } @media screen and (min-width: 700px) { .MultiLiveSetupCard__textWrap___qYLeU { padding: 0; border: none } } .MultiLiveSetupCard__textWrap___qYLeU h4 { margin: 0; font-size: 1.4rem; font-weight: normal; color: var(--color_text-primary); } .MultiLiveSetupCard__textWrap___qYLeU h5 { margin: 0; font-size: 1.3rem; font-weight: normal; color: var(--color_text-secondary); } .MultiLiveSetupTemplate__header___wDM_I { padding-left: 4rem; /* to avoid touching the close icon button */ padding-right: 4rem; } .MultiLiveSetupTemplate__header__title___QDG11 { display: flex; align-items: center; margin: 0; font-size: 1.8rem; justify-content: center; } .MultiLiveSetupTemplate__header__subtitle___iRM4_ { margin: 0; font-size: 1.2rem; color: var(--color_text-secondary); } .MultiLiveSetupTemplate__channels___rHRdM { display: flex; flex-wrap: wrap; } /*# sourceMappingURL=components.cf455b55682168093b36.css.map*/