@charset "UTF-8"; /**** Screen Junkies Variables */ /**** Assign Variables Here */ /**** Screen Junkies Mixins */ /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p {@include fontSize(12px);} * */ /**** Screen Junkies Function */ /* * Thanks to http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris * "Web friend jakob-e implemented this algorithm in SASS" ... * * Usage example: * .class { * background-image: dfy-svg-url('.....'); * } */ /**** Screen Junkies Placeholders */ /* ****** Compass */ .LoginModal .Button-register { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; /* Reset `button` and button-style `input` default styles */ background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } .LoginModal .Button-register::-moz-focus-inner { border: 0; padding: 0; } .LoginModal .Button-register:focus { outline: none; } @font-face { font-family: "Signika"; src: url(/Content/Platform/screen-junkies/fonts/Signika-Light.eot); src: url(/Content/Platform/screen-junkies/fonts/Signika-Light.eot?#iefix) format('embedded-opentype'), url(/Content/Platform/screen-junkies/fonts/Signika-Light.woff) format('woff'), url(/Content/Platform/screen-junkies/fonts/Signika-Light.ttf) format('truetype'), url(/Content/Platform/screen-junkies/fonts/Signika-Light.svg) format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: "Signika"; src: url(/Content/Platform/screen-junkies/fonts/Signika-Regular.eot); src: url(/Content/Platform/screen-junkies/fonts/Signika-Regular.eot?#iefix) format('embedded-opentype'), url(/Content/Platform/screen-junkies/fonts/Signika-Regular.woff) format('woff'), url(/Content/Platform/screen-junkies/fonts/Signika-Regular.ttf) format('truetype'), url(/Content/Platform/screen-junkies/fonts/Signika-Regular.svg) format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: "Signika"; src: url(/Content/Platform/screen-junkies/fonts/Signika-Semibold.eot); src: url(/Content/Platform/screen-junkies/fonts/Signika-Semibold.eot?#iefix) format('embedded-opentype'), url(/Content/Platform/screen-junkies/fonts/Signika-Semibold.woff) format('woff'), url(/Content/Platform/screen-junkies/fonts/Signika-Semibold.ttf) format('truetype'), url(/Content/Platform/screen-junkies/fonts/Signika-Semibold.svg) format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: "Signika"; src: url(/Content/Platform/screen-junkies/fonts/Signika-Bold.eot); src: url(/Content/Platform/screen-junkies/fonts/Signika-Bold.eot?#iefix) format('embedded-opentype'), url(/Content/Platform/screen-junkies/fonts/Signika-Bold.woff) format('woff'), url(/Content/Platform/screen-junkies/fonts/Signika-Bold.ttf) format('truetype'), url(/Content/Platform/screen-junkies/fonts/Signika-Bold.svg) format('svg'); font-weight: 700; font-style: normal; } .LatestEpisode-times, .EpisodeList-meta, .EpisodeList .SelectMenu--transparent select { font-family: "Signika", sans-serif; font-weight: 300; } body, .ArticleItem, .Article, .LatestEpisode, .EpisodeList-description, .Product-index, .Product-timespan, .Product-note, .Subscriptions-subtitle, .Subscriptions-or, .Payment-subtext, .LegalSection-content address, .LegalSection-OrderedList > li p, .LegalSection-UnorderedList > li, .SelectMenu.SelectMenu--invalid .SelectMenu-invalidMessage, .FormText-text, .FormText-textArea, .FormText--invalid .FormText-invalidMessage, .Navigation, .NavCarousel-itemDesc { font-family: "Signika", sans-serif; font-weight: 400; } .Button, .Hero .Button--primary, .FBLoginButton, .NavCarousel-itemFooter { font-family: "Signika", sans-serif; font-weight: 600; } h3, h4, h5, blockquote::before, blockquote::after, .ArticleItem-title, .ArticleItem-timestamp, .VideoItem-title, .VideoExtras-item, .HeroContent, .LatestEpisode-title, .Poll, .Registration-login, .AccountSettings-label, .Payment-plan, .Payment-dividerCopy, .CheckBox-label, .RadioButton-label, .SelectMenu select, .FormText-label, .NavCarousel-itemHeading, .UpgradeOffer-button, .LoginModal .Button-register { font-family: "Signika", sans-serif; font-weight: 700; } @font-face { font-family: "Officina Serif Black"; src: url(/Content/Platform/screen-junkies/fonts/OfficinaSerITCStd-Black.eot); src: url(/Content/Platform/screen-junkies/fonts/OfficinaSerITCStd-Black.eot?#iefix) format('embedded-opentype'), url(/Content/Platform/screen-junkies/fonts/OfficinaSerITCStd-Black.woff) format('woff'), url(/Content/Platform/screen-junkies/fonts/OfficinaSerITCStd-Black.ttf) format('truetype'), url(/Content/Platform/screen-junkies/fonts/OfficinaSerITCStd-Black.svg) format('svg'); font-weight: 400; font-style: normal; } h1, h2, .EpisodeList-number, .AccountSettings-title, .AccountSettings-legend, .Product-price, .Product-priceInline, .LegalSection-OrderedList > li, .LegalSection-UnorderedList > li h2, .LegalSection-UnorderedList > li h3 { font-family: "Officina Serif Black", serif; font-weight: 400; } /* ****** Compass */ .ArticleItem-avatar, .Article-avatarImg, .NextContent-avatar { -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .Navigation:before, .PrimaryNav-item-content:before, .AppsNav-Buttons:before, .UpgradeOffer:before, .Navigation:after, .PrimaryNav-item-content:after, .AppsNav-Buttons:after, .UpgradeOffer:after { content: '\0020'; display: block; height: 0; overflow: hidden; } .Navigation:after, .PrimaryNav-item-content:after, .AppsNav-Buttons:after, .UpgradeOffer:after { clear: both; } /**** Base Files For Screen Junkies */ /* ****** Functions */ /* https://css-tricks.com/snippets/sass/px-to-em-functions/ EXAMPLES: h1 { font-size: em(32); } // is the same as: h1 { font-size: em(32px); } */ /* ****** Variables */ /* Base for Screen Junkies Site */ html { font-size: 16px; } body { background: #f4f0ed; color: #333333; font-size: 16px; line-height: 1.5; padding-top: 70px; } h1 { font-size: 3.75em; line-height: 1; } h2 { font-size: 2.8125em; line-height: 1.1; } h3 { font-size: 1.875em; line-height: 1.1; } h4 { font-size: 1.5em; line-height: 1.08; } h5 { font-size: 1.125em; line-height: 1.11; } a, a:hover { color: #6fc3de; } blockquote { color: #6fc3de; font-size: 1.25em; line-height: 1.2; } blockquote::before, blockquote::after { color: #f8e58f; font-size: 1.8em; vertical-align: middle; line-height: .65; } blockquote::before { content: "\275D"; } blockquote::after { content: "\275e"; } /**** Layout Overrides for Screen Junkies */ .SingleColumn { background: transparent; } /**** Module Overrides for Screen Junkies */ /* ****** Partials */ /* ===[ This is the styles for the Article Thumbnail on ContentStream ]=== */ /* ****** Article Variables */ .ArticleItem { border-radius: 4px; overflow: hidden; font-size: 1rem; background-color: white; } .ArticleItem-title { font-size: 1.5625em; } .ArticleItem-timestamp { color: #aaaaaa; } .ArticleItem-description { color: #6e6e6e; padding-top: 10px; } .ArticleItem:hover .ArticleItem-description { color: #6e6e6e; } .ArticleItem:hover .ArticleItem-title { color: #6fc3de; } .VideoItem { border-radius: 4px; overflow: hidden; } .VideoItem-title { text-transform: capitalize; } .VideoItem-thumbnail { height: auto; } .VideoItem-icon::after { background: #f46430; } /* ****** placeholders */ .VideoExtras-extraTxt, .NextContent-nextVideo, .NextContent-nextPlug, .NextContent-nextArticle { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* ****** Functions */ /* https://css-tricks.com/snippets/sass/px-to-em-functions/ EXAMPLES: h1 { font-size: em(32); } // is the same as: h1 { font-size: em(32px); } */ /* ****** Variables */ .VideoExtras { background-color: #6bc4dc; border-radius: 0 0 4px 4px; } .VideoExtras-list { width: 80%; } .VideoExtras-item { background: #3baccb; } .VideoExtras-item:hover { background-color: #118fb2; } .VideoExtras-extraTxt { margin: 0 1.9375em 0 0; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1432.5 305.9' enable-background='new 0 0 1432.5 305.9' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23F5E68E' d='M142.5,299.1c-4.4,0.5-9.4,1-15,1.3c-5.6,0.3-11.9,0.6-19,0.7c-7,0.1-14.9,0.2-23.7,0.2 c-7.2,0-13.4-0.1-18.6-0.4c-5.2-0.3-10.1-0.6-14.8-1.1c-5.6-0.7-11.3-2.1-16.9-4.3c-5.7-2.2-10.8-5-15.4-8.2 -4.6-3.3-8.3-6.9-11.2-11c-2.8-4.1-4.3-8.4-4.3-12.9c0-6.4,0.1-13.7,0.2-21.9c0.1-8.2,0.3-16.7,0.4-25.7c0.2-9,0.4-18.2,0.6-27.5 c0.2-9.3,0.4-18.4,0.7-27.2c0.5-20.6,1.1-41.8,1.8-63.8c-1.5-3.6-2.7-7-3.7-10.1c-1-3.1-1.7-6.2-2.3-9.3c-0.5-3.1-0.9-6.2-1.1-9.4 S0,61.8,0,58.1c0-5.7,0.9-10.7,2.7-14.9c1.8-4.3,5-7.8,9.7-10.6c4.6-2.8,11-4.9,19-6.3c8-1.4,18.1-2.1,30.4-2.1 c4.7,0,10.5,0,17.5,0.1c7,0,14.5,0.1,22.5,0.1c8,0,16.2,0.1,24.5,0.2c8.4,0.1,16.3,0.2,23.8,0.3c7.5,0.1,14.2,0.3,20.1,0.4 c5.9,0.2,10.4,0.3,13.5,0.5c1.5,1.3,2.8,3.1,4,5.4c1.1,2.3,2,4.9,2.7,7.7c0.7,2.8,1.2,5.6,1.5,8.4c0.3,2.8,0.5,5.4,0.5,7.8 c0,7.3-0.8,13.5-2.4,18.6s-3.9,9.4-7,12.7c-3.1,3.3-7,5.8-11.6,7.5c-4.6,1.7-10,2.8-16,3.3c-2.8,0.3-6.8,0.5-11.7,0.8 c-5,0.3-10.5,0.5-16.6,0.6c-6.1,0.2-12.4,0.3-19,0.4c-6.6,0.1-12.9,0.2-19,0.2L87.5,147c3.7-0.3,7.9-0.6,12.8-0.8 c4.9-0.2,9.9-0.4,15.1-0.6c5.2-0.2,10.5-0.3,15.7-0.4c5.2-0.1,10-0.1,14.4-0.2c4.4,0,8.2-0.1,11.4-0.1h6.6c1.8,2.3,3.2,5.2,4.2,8.5 c1,3.3,1.4,6.8,1.4,10.4c0,6.4-0.6,12.1-1.9,17.1c-1.3,4.9-3.1,9.1-5.5,12.6c-2.4,3.5-5.3,6.2-8.6,8c-3.3,1.9-7.1,3-11.2,3.5 c-1.8,0.3-4.4,0.5-8,0.7c-3.6,0.2-7.8,0.4-12.6,0.5c-4.9,0.1-10.3,0.3-16.2,0.4c-5.9,0.1-12.2,0.3-18.7,0.4L85.9,236l89.5,0.5 c2.1,2.8,3.6,5.7,4.4,8.7c0.8,2.9,1.3,6.2,1.3,9.8c0,6.4-0.6,12.1-1.9,17c-1.3,4.9-3.1,9.1-5.5,12.6c-2.3,3.5-5.1,6.3-8.4,8.3 c-3.3,2.1-6.9,3.5-10.9,4.3C150.9,297.9,146.9,298.5,142.5,299.1z'/%3E %3Cpath fill='%23F5E68E' d='M209.8,80.5c-3.3-5.9-5-12.1-5-18.3c0-7.5,1.8-14,5.3-19.3c3.6-5.4,8.4-9.7,14.4-13.1 c6.1-3.4,13.1-5.9,21.2-7.4c8.1-1.5,16.7-2.3,25.8-2.3c4.7,0,8.7,0.3,11.9,0.8c3.3,0.5,6.1,1.4,8.4,2.4c2.3,1.1,4.3,2.5,5.8,4.1 c1.5,1.7,2.8,3.7,3.8,6c0.3,0.8,0.9,2.5,1.8,5c0.9,2.5,1.9,5.5,3.2,9c1.3,3.5,2.6,7.4,4.1,11.7c1.5,4.3,3,8.5,4.5,12.8 c3.5,10.1,7.4,21.3,11.7,33.5l24.6-76.1c3.1-2.6,7-4.6,11.8-6c4.8-1.4,9.7-2.1,14.9-2.1c13.7,0,24.2,3.1,31.4,9.2 c7.2,6.2,10.8,15,10.8,26.7c0,5.2-0.7,10.2-2,15.1c-1.3,4.9-3.6,10.1-6.8,15.8l-43.2,79.7l41.2,85.4c1.8,3.8,3.4,7.9,4.7,12.1 s1.9,8.2,1.9,12.1c0,8.4-4.9,14.7-14.6,18.9c-9.7,4.2-24.6,6.3-44.5,6.3c-3.4,0-6.5-0.3-9.2-0.9c-2.7-0.6-5.1-1.6-7.2-3 c-2.1-1.4-4-3.2-5.7-5.4c-1.7-2.2-3.2-4.9-4.6-8.1l-30.8-68.4l-19.6,78.2c-2.8,2.6-6.7,4.6-11.4,6c-4.8,1.4-9.9,2.1-15.3,2.1 c-6.8,0-12.9-0.8-18.3-2.4c-5.4-1.6-10-3.9-13.7-6.9c-3.8-3-6.7-6.8-8.7-11.2c-2-4.5-3-9.6-3-15.4c0-2.8,0.2-5.5,0.6-8 c0.4-2.5,0.9-5,1.6-7.5c0.7-2.5,1.5-4.9,2.6-7.4c1-2.5,2.2-5.1,3.5-8l37-79.2l-29.2-59.6C218.3,92,213.2,86.4,209.8,80.5z'/%3E %3Cpath fill='%23F5E68E' d='M612.8,31.6c1,2.1,1.9,4.4,2.6,6.9c0.7,2.5,1.3,5,1.7,7.6c0.4,2.6,0.6,5.1,0.6,7.4c0,10.6-1,19.4-3.1,26.4 c-2.1,6.9-5.1,12.5-9.2,16.6c-4.1,4.1-9.2,7.1-15.4,9s-13.4,3-21.6,3.5c-0.1,4.3-0.2,9.8-0.4,16.6c-0.2,6.8-0.4,14.4-0.7,22.7 c-0.3,8.3-0.6,17-0.9,26.2c-0.3,9.2-0.7,18.2-1,27.2c-0.8,21-1.7,43.4-2.6,67.3c-0.3,6.3-1.9,11.6-4.7,16c-2.8,4.4-6.5,8-11.2,10.7 c-4.6,2.7-10.1,4.7-16.4,5.9c-6.3,1.2-13.2,1.8-20.7,1.8c-5.6,0-10.4-0.3-14.3-0.8s-7.2-1.5-9.7-3c-2.5-1.5-4.5-3.5-5.9-6 c-1.4-2.6-2.5-5.9-3.1-9.9c-0.7-4.1-1.1-8.9-1.2-14.6c-0.1-5.7-0.2-12.4-0.2-20.1c0-6.4,0-13.3,0.1-20.7c0.1-7.3,0.2-14.8,0.3-22.4 c0.1-7.6,0.3-15.2,0.4-22.8c0.1-7.6,0.3-14.8,0.4-21.8c0.3-16.2,0.8-32.6,1.3-49.1c-10,0-18.2-0.3-24.4-0.9 c-6.2-0.6-11.1-1.7-14.6-3.3c-3.5-1.5-5.8-3.6-7-6.2c-1.2-2.6-1.8-5.8-1.8-9.7c0-9.9,0.9-18.8,2.6-26.7c1.8-8,4.1-14.8,7-20.5 c2.9-5.7,6.3-10.2,10-13.4c3.8-3.3,7.7-5.1,11.7-5.6c3.6-0.3,7.3-0.5,11.1-0.8c3.8-0.3,8.2-0.5,13.2-0.7c5-0.2,11-0.3,17.8-0.4 c6.9-0.1,15.1-0.2,24.7-0.2c10,0,19,0.1,26.9,0.2c7.9,0.1,15.1,0.3,21.5,0.5c6.4,0.2,12.3,0.5,17.6,0.8c5.3,0.3,10.4,0.7,15.1,1.1 C610.7,27.7,611.8,29.4,612.8,31.6z'/%3E %3Cpath fill='%23F5E68E' d='M797.4,213.5c2.8,3.3,5.4,6.2,7.7,8.5c2.3,2.3,4.5,4.1,6.5,5.5c2,1.4,4.1,2.4,6.2,3.2 c2.1,0.8,4.4,1.3,6.9,1.7c2.5,0.4,5.3,0.7,8.6,0.9c1.5,2.3,2.6,5,3.2,8.1c0.6,3.1,0.9,6,0.9,8.9c0,7.6-1.2,14.8-3.6,21.5 c-2.4,6.7-5.9,12.5-10.5,17.5c-4.6,5-10.2,8.9-16.8,11.8c-6.6,2.9-14.1,4.3-22.5,4.3c-5.8,0-10.6-0.5-14.6-1.4 c-3.9-1-7.4-2.6-10.3-4.8c-2.9-2.3-5.6-5.2-8-8.8c-2.4-3.6-5-8-7.8-13.3c-3.3-6.2-6.4-11.6-9.2-16.2c-2.8-4.6-5.4-8.6-7.8-11.9 c-2.4-3.3-4.8-6.2-7-8.4c-2.3-2.3-4.6-4.1-6.9-5.5l-2.5,33.4c-0.7,6.9-1.8,12.6-3.5,17.1c-1.6,4.4-4,7.9-7.2,10.5 c-3.2,2.6-7.3,4.4-12.3,5.3c-5,1-11.3,1.4-18.7,1.4c-5.6,0-10.4-0.3-14.4-0.8c-4-0.5-7.3-1.5-10-3c-2.6-1.5-4.7-3.5-6.3-6 c-1.5-2.6-2.7-5.9-3.5-9.9c-0.8-4.1-1.3-8.9-1.5-14.6c-0.2-5.7-0.3-12.4-0.3-20.1c0-6.4,0.1-13.5,0.2-21.3c0.1-7.7,0.3-15.8,0.4-24 s0.4-16.6,0.6-25c0.2-8.4,0.4-16.5,0.7-24.4c0.5-18.4,1.1-37.2,1.8-56.4c-1.3-5.4-2.2-10.7-2.8-15.8c-0.6-5.1-0.9-10.1-0.9-15.1 c0-5,0.9-9.5,2.6-13.4c1.8-3.9,4.9-7.3,9.4-10.2c4.5-2.9,10.7-5.3,18.6-7.2c7.9-1.9,17.9-3.2,30.1-4.1c5.2-2.1,10.2-3.9,15.1-5.5 c4.9-1.5,9.8-2.8,14.8-3.9c5-1,10.2-1.8,15.6-2.3c5.4-0.5,11.2-0.8,17.3-0.8c13.8,0,25.6,1.9,35.3,5.8c9.7,3.9,17.7,9.4,23.9,16.4 c6.2,7,10.7,15.4,13.6,25.1c2.9,9.7,4.3,20.3,4.3,31.9c0,10.6-0.9,20.3-2.6,29.1c-1.7,8.8-4.4,17.2-8.1,25.2 c-3.7,8-8.4,16-14.1,23.9c-5.7,7.9-12.6,16.2-20.5,25.1C791.2,206.2,794.5,210.2,797.4,213.5z M721.6,175c2.8,0.4,5.6,0.9,8.5,1.5 c2.9,0.6,5.8,1.2,8.5,1.8c2.7,0.6,5,1.1,6.7,1.6c3.9-9.3,6.9-18.2,8.9-26.7c2-8.5,3-16.9,3-25.2c0-6.3-0.6-11.8-1.9-16.4 c-1.3-4.7-3.4-8.7-6.4-11.9c-3-3.3-7-5.9-11.9-7.8c-4.9-1.9-11-3.3-18.3-4l-4.1,86.4C716.5,174.3,718.8,174.6,721.6,175z'/%3E %3Cpath fill='%23F5E68E' d='M930.6,29.7c5.5-2,11.4-3.6,17.6-5c6.2-1.3,12.7-2.4,19.4-3.1c6.7-0.7,13.6-1.1,20.5-1.1 c8.1,0,15.2,0.8,21.2,2.4s11.1,4,15.2,7c4.1,3,7.3,6.6,9.6,10.9c2.3,4.2,3.7,8.9,4.3,14.1c1.2,8.5,2.4,17.7,3.8,27.7 c1.4,10,2.9,20.4,4.5,31.1s3.4,21.7,5.3,32.8c1.9,11.1,3.8,22.1,5.9,32.8c2,10.8,4.2,21.2,6.5,31.2c2.3,10,4.6,19.3,7,27.9 c2.8,2.1,5.3,4.1,7.3,6c2,1.9,3.7,3.9,5,5.8c1.3,2,2.2,4,2.8,6.2c0.6,2.2,0.9,4.6,0.9,7.2c0,7-2.1,13.1-6.3,18.1 c-4.2,5.1-9.7,9.2-16.6,12.5c-6.9,3.3-14.7,5.6-23.4,7.2c-8.7,1.5-17.7,2.3-26.8,2.3c-5.4,0-9.8-0.9-13.4-2.6 c-3.6-1.8-6.7-4.7-9.2-8.7c-2.5-4.1-4.7-9.4-6.5-16.1c-1.8-6.7-3.6-15-5.5-24.9c-2.9,0.3-6.4,0.5-10.4,0.6c-4,0.2-8.2,0.3-12.8,0.4 c-4.6,0.1-9.3,0.2-14.2,0.3c-4.9,0.1-9.9,0.1-14.9,0.1c-0.3,1.3-0.6,3.1-0.9,5.6c-0.4,2.5-0.8,5.2-1.3,8.3 c-0.5,3.1-0.9,6.2-1.3,9.5c-0.4,3.3-0.8,6.4-1.2,9.3c-0.4,2.9-0.7,5.5-0.9,7.8s-0.4,3.9-0.5,4.8c-1.8,1.8-4.7,3.3-8.7,4.5 c-4,1.2-8.8,1.8-14.5,1.8c-3.1,0-6.4-0.2-9.8-0.6c-3.4-0.4-6.8-1.1-10.2-2.1c-3.4-1-6.6-2.3-9.7-4c-3.1-1.6-5.8-3.7-8.2-6.1 c-2.3-2.4-4.2-5.3-5.6-8.7c-1.4-3.3-2.1-7.2-2.1-11.6c0-1.7,0.4-5,1.2-10c0.8-5,2-11.4,3.5-19c1.5-7.7,3.4-16.4,5.6-26.3 c2.2-9.9,4.7-20.5,7.5-31.8c2.8-11.3,5.9-23.2,9.3-35.6c3.4-12.4,7-24.9,10.8-37.6c3.8-12.7,7.8-25.3,12.1-38s8.6-24.8,13.1-36.5 C920.1,33.9,925.1,31.7,930.6,29.7z M955.5,114c-1.3,4.9-2.6,10.1-3.9,15.8c-1.3,5.6-2.7,11.6-4.1,17.8c-1.4,6.2-2.7,12.4-4.1,18.6 c-1.3,6.2-2.6,12.3-3.9,18.3c-1.3,6-2.4,11.7-3.4,17c1.9,0,4.5-0.1,7.7-0.2c3.2-0.1,6.6-0.3,10.2-0.4c3.6-0.2,7.1-0.4,10.5-0.6 c3.4-0.3,6.3-0.5,8.6-0.8c-0.5-3.4-1.1-7.6-1.8-12.4c-0.7-4.9-1.5-10.1-2.3-15.9c-0.8-5.7-1.7-11.7-2.6-17.9 c-0.9-6.2-1.8-12.4-2.7-18.5c-0.9-6.2-1.7-12.1-2.6-17.8c-0.8-5.7-1.6-10.9-2.3-15.6C957.9,104.9,956.7,109.1,955.5,114z'/%3E %3Cpath fill='%23F5E68E' d='M1234,24.4c10,3.3,18.4,7.6,25,12.9c6.6,5.3,11.5,11.4,14.8,18.1c3.3,6.8,4.9,13.6,4.9,20.6 c0,8.2-1.1,15.2-3.3,21.1c-2.2,5.9-5.2,10.6-9.1,14.4c-3.8,3.7-8.3,6.5-13.4,8.2c-5.1,1.8-10.5,2.6-16.3,2.6 c-3.6,0-6.8-0.3-9.5-0.8c-2.8-0.5-5.6-1.1-8.4-1.9c-1.2-4.8-2.6-8.9-4.3-12.5c-1.7-3.6-4-6.8-6.8-9.6c-2.8-2.8-6.3-5.4-10.6-7.7 c-4.3-2.3-9.5-4.5-15.8-6.7c-1.1,2.6-1.9,5.5-2.4,8.7c-0.5,3.2-0.8,6.3-0.8,9.4c0,2.3,0.2,4.3,0.5,6.1c0.3,1.8,1.2,3.6,2.4,5.5 c1.3,1.9,3.2,4,5.8,6.2c2.6,2.3,6,5,10.5,8.2c4.4,3.2,10,7,16.7,11.4c6.7,4.4,14.8,9.8,24.2,16.1c8.1,5.3,15,10.2,20.5,14.8 c5.6,4.6,10.1,9.4,13.6,14.3c3.5,4.9,6,10.3,7.5,16.1c1.5,5.8,2.3,12.5,2.3,20.1c0,10.8-2.1,21.3-6.2,31.4 c-4.1,10.1-10.3,19.1-18.6,27c-8.2,7.9-18.6,14.2-31,18.9c-12.4,4.7-26.9,7.1-43.5,7.1c-13.5,0-25.8-1.1-36.9-3.3 c-11.1-2.2-20.7-5.6-28.6-10.4c-7.9-4.8-14.1-10.9-18.5-18.5c-4.4-7.6-6.5-16.8-6.5-27.6c0-6.5,1-12.4,2.9-17.8 c1.9-5.3,4.6-9.9,8-13.6c3.4-3.8,7.5-6.7,12.1-8.7c4.6-2.1,9.6-3.1,15-3.1c1.8,0,3.8,0.1,5.8,0.4c2,0.3,4,0.7,6,1.3 c5,9.3,9.6,16.9,13.8,22.8c4.2,5.9,8.1,10.5,11.9,13.9c3.7,3.4,7.3,5.7,10.9,7c3.5,1.3,7.1,1.9,10.8,1.9c2.6,0,4.8-0.3,6.6-1 c1.8-0.7,3.3-1.5,4.5-2.6c1.2-1.1,2-2.3,2.6-3.8s0.8-2.9,0.8-4.4c0-1.1-0.3-2.3-0.8-3.5c-0.5-1.3-1.6-2.7-3.1-4.5 c-1.6-1.7-3.7-3.8-6.5-6.2c-2.8-2.4-6.5-5.3-11-8.7c-4.6-3.4-10.1-7.4-16.6-12c-6.5-4.6-14.2-10-23-16.2 c-7.2-5-13.3-10.1-18.2-15.1c-4.9-5.1-8.9-10.3-11.9-15.8c-3-5.5-5.2-11.3-6.5-17.3c-1.3-6.1-2-12.6-2-19.5c0-6,0.6-12.2,1.9-18.5 c1.3-6.3,3.1-12.3,5.6-18.1c2.5-5.8,5.7-11.2,9.5-16.3c3.8-5,8.3-9.3,13.4-12.9c3.6-5.9,7.3-11,11.1-15.2 c3.8-4.2,8.2-7.6,13.1-10.2c4.9-2.6,10.6-4.6,17.1-5.8c6.4-1.2,14.1-1.8,23-1.8C1212.1,19.5,1223.9,21.1,1234,24.4z'/%3E %3Cpath fill='%23F5E68E' d='M1401.3,189.7c-1.5,0.4-3.2,0.7-5,1.1s-3.6,0.6-5.4,0.8c-1.8,0.2-3.4,0.3-4.8,0.3c-7,0-13.6-0.5-19.6-1.6 c-6-1-11.3-2.8-15.8-5.4c-4.5-2.6-8.1-6-10.9-10.3c-2.8-4.3-4.5-9.7-5.2-16.3c-0.8-6.7-1.3-13.8-1.8-21.2c-0.4-7.4-0.7-14.8-0.9-22 c-0.2-7.2-0.3-14.1-0.3-20.6c0-6.5-0.1-12.1-0.1-16.9c-2.6-2.8-4.8-5.8-6.6-9c-1.8-3.1-2.7-7-2.7-11.6c0-3.9,0.5-8.1,1.5-12.4 c1-4.4,2.4-8.6,4.3-12.9c1.9-4.2,4.2-8.2,7-12.1c2.8-3.8,6-7.2,9.6-10.1c3.6-2.9,7.6-5.3,12.1-7c4.4-1.7,9.2-2.6,14.3-2.6 c8.2,0,16,1.1,23.4,3.3c7.4,2.2,13.9,5.3,19.5,9.2c5.6,3.9,10.1,8.5,13.4,13.7c3.3,5.3,5,10.9,5,16.9c0,3.8-0.3,7.3-0.8,10.3 c-0.5,3-1.2,6.2-2,9.4c-0.8,3.3-1.8,6.9-3,10.9c-1.1,4-2.3,8.9-3.6,14.6c-1.7,7.4-3.3,15.3-4.9,23.7c-1.6,8.4-3.2,17-4.7,25.7 c-1.5,8.7-3.1,17.5-4.5,26.1c-1.5,8.7-2.9,16.9-4.3,24.8C1404,189,1402.8,189.4,1401.3,189.7z M1412.1,277.3 c-2.3,6.4-5.4,11.7-9.4,15.9c-3.9,4.2-8.5,7.4-13.7,9.5c-5.2,2.1-10.8,3.2-16.8,3.2c-10,0-18.3-1.3-24.7-3.8 c-6.4-2.5-11.5-5.7-15.3-9.5c-3.7-3.8-6.3-7.9-7.7-12.4c-1.4-4.4-2.1-8.6-2.1-12.4c0-9.4,1.7-18.6,5.1-27.6 c3.4-9,8.9-17.1,16.4-24.4c11.3,0,21.4,0.9,30.3,2.7c8.9,1.8,16.4,4.4,22.5,7.8c6.1,3.4,10.8,7.5,14,12.3 c3.2,4.8,4.8,10.2,4.8,16.3C1415.5,263.5,1414.4,270.9,1412.1,277.3z'/%3E%3C/g%3E%3C/svg%3E"); /* "I advocate against using the shorthand, as I spend a lot of time correcting other peopleΓÇÖs code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their intention." - http://www.standardista.com/css3/css3-background-properties/ */ background-repeat: no-repeat; background-position: center; background-size: contain; width: 8.125em; height: 3.125em; } .VideoExtras-itemLink, .VideoExtras-itemLink:hover { color: white; } .VideoExtras-videoIcon, .VideoExtras-articleIcon { vertical-align: middle; margin-bottom: 2px; } .VideoExtras-videoIcon > use, .VideoExtras-articleIcon > use { fill: white; } .EnhancedVideo .VideoExtras { border-top-left-radius: 0; border-top-right-radius: 0; } .ContentStream-item { border: none; background: none; } /* ****** placeholders */ .VideoExtras-extraTxt, .NextContent-nextVideo, .NextContent-nextPlug, .NextContent-nextArticle { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* ****** Functions */ /* https://css-tricks.com/snippets/sass/px-to-em-functions/ EXAMPLES: h1 { font-size: em(32); } // is the same as: h1 { font-size: em(32px); } */ /* ****** Variables */ .VideoExtras { background-color: #6bc4dc; border-radius: 0 0 4px 4px; } .VideoExtras-list { width: 80%; } .VideoExtras-item { background: #3baccb; } .VideoExtras-item:hover { background-color: #118fb2; } .VideoExtras-extraTxt { margin: 0 1.9375em 0 0; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1432.5 305.9' enable-background='new 0 0 1432.5 305.9' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23F5E68E' d='M142.5,299.1c-4.4,0.5-9.4,1-15,1.3c-5.6,0.3-11.9,0.6-19,0.7c-7,0.1-14.9,0.2-23.7,0.2 c-7.2,0-13.4-0.1-18.6-0.4c-5.2-0.3-10.1-0.6-14.8-1.1c-5.6-0.7-11.3-2.1-16.9-4.3c-5.7-2.2-10.8-5-15.4-8.2 -4.6-3.3-8.3-6.9-11.2-11c-2.8-4.1-4.3-8.4-4.3-12.9c0-6.4,0.1-13.7,0.2-21.9c0.1-8.2,0.3-16.7,0.4-25.7c0.2-9,0.4-18.2,0.6-27.5 c0.2-9.3,0.4-18.4,0.7-27.2c0.5-20.6,1.1-41.8,1.8-63.8c-1.5-3.6-2.7-7-3.7-10.1c-1-3.1-1.7-6.2-2.3-9.3c-0.5-3.1-0.9-6.2-1.1-9.4 S0,61.8,0,58.1c0-5.7,0.9-10.7,2.7-14.9c1.8-4.3,5-7.8,9.7-10.6c4.6-2.8,11-4.9,19-6.3c8-1.4,18.1-2.1,30.4-2.1 c4.7,0,10.5,0,17.5,0.1c7,0,14.5,0.1,22.5,0.1c8,0,16.2,0.1,24.5,0.2c8.4,0.1,16.3,0.2,23.8,0.3c7.5,0.1,14.2,0.3,20.1,0.4 c5.9,0.2,10.4,0.3,13.5,0.5c1.5,1.3,2.8,3.1,4,5.4c1.1,2.3,2,4.9,2.7,7.7c0.7,2.8,1.2,5.6,1.5,8.4c0.3,2.8,0.5,5.4,0.5,7.8 c0,7.3-0.8,13.5-2.4,18.6s-3.9,9.4-7,12.7c-3.1,3.3-7,5.8-11.6,7.5c-4.6,1.7-10,2.8-16,3.3c-2.8,0.3-6.8,0.5-11.7,0.8 c-5,0.3-10.5,0.5-16.6,0.6c-6.1,0.2-12.4,0.3-19,0.4c-6.6,0.1-12.9,0.2-19,0.2L87.5,147c3.7-0.3,7.9-0.6,12.8-0.8 c4.9-0.2,9.9-0.4,15.1-0.6c5.2-0.2,10.5-0.3,15.7-0.4c5.2-0.1,10-0.1,14.4-0.2c4.4,0,8.2-0.1,11.4-0.1h6.6c1.8,2.3,3.2,5.2,4.2,8.5 c1,3.3,1.4,6.8,1.4,10.4c0,6.4-0.6,12.1-1.9,17.1c-1.3,4.9-3.1,9.1-5.5,12.6c-2.4,3.5-5.3,6.2-8.6,8c-3.3,1.9-7.1,3-11.2,3.5 c-1.8,0.3-4.4,0.5-8,0.7c-3.6,0.2-7.8,0.4-12.6,0.5c-4.9,0.1-10.3,0.3-16.2,0.4c-5.9,0.1-12.2,0.3-18.7,0.4L85.9,236l89.5,0.5 c2.1,2.8,3.6,5.7,4.4,8.7c0.8,2.9,1.3,6.2,1.3,9.8c0,6.4-0.6,12.1-1.9,17c-1.3,4.9-3.1,9.1-5.5,12.6c-2.3,3.5-5.1,6.3-8.4,8.3 c-3.3,2.1-6.9,3.5-10.9,4.3C150.9,297.9,146.9,298.5,142.5,299.1z'/%3E %3Cpath fill='%23F5E68E' d='M209.8,80.5c-3.3-5.9-5-12.1-5-18.3c0-7.5,1.8-14,5.3-19.3c3.6-5.4,8.4-9.7,14.4-13.1 c6.1-3.4,13.1-5.9,21.2-7.4c8.1-1.5,16.7-2.3,25.8-2.3c4.7,0,8.7,0.3,11.9,0.8c3.3,0.5,6.1,1.4,8.4,2.4c2.3,1.1,4.3,2.5,5.8,4.1 c1.5,1.7,2.8,3.7,3.8,6c0.3,0.8,0.9,2.5,1.8,5c0.9,2.5,1.9,5.5,3.2,9c1.3,3.5,2.6,7.4,4.1,11.7c1.5,4.3,3,8.5,4.5,12.8 c3.5,10.1,7.4,21.3,11.7,33.5l24.6-76.1c3.1-2.6,7-4.6,11.8-6c4.8-1.4,9.7-2.1,14.9-2.1c13.7,0,24.2,3.1,31.4,9.2 c7.2,6.2,10.8,15,10.8,26.7c0,5.2-0.7,10.2-2,15.1c-1.3,4.9-3.6,10.1-6.8,15.8l-43.2,79.7l41.2,85.4c1.8,3.8,3.4,7.9,4.7,12.1 s1.9,8.2,1.9,12.1c0,8.4-4.9,14.7-14.6,18.9c-9.7,4.2-24.6,6.3-44.5,6.3c-3.4,0-6.5-0.3-9.2-0.9c-2.7-0.6-5.1-1.6-7.2-3 c-2.1-1.4-4-3.2-5.7-5.4c-1.7-2.2-3.2-4.9-4.6-8.1l-30.8-68.4l-19.6,78.2c-2.8,2.6-6.7,4.6-11.4,6c-4.8,1.4-9.9,2.1-15.3,2.1 c-6.8,0-12.9-0.8-18.3-2.4c-5.4-1.6-10-3.9-13.7-6.9c-3.8-3-6.7-6.8-8.7-11.2c-2-4.5-3-9.6-3-15.4c0-2.8,0.2-5.5,0.6-8 c0.4-2.5,0.9-5,1.6-7.5c0.7-2.5,1.5-4.9,2.6-7.4c1-2.5,2.2-5.1,3.5-8l37-79.2l-29.2-59.6C218.3,92,213.2,86.4,209.8,80.5z'/%3E %3Cpath fill='%23F5E68E' d='M612.8,31.6c1,2.1,1.9,4.4,2.6,6.9c0.7,2.5,1.3,5,1.7,7.6c0.4,2.6,0.6,5.1,0.6,7.4c0,10.6-1,19.4-3.1,26.4 c-2.1,6.9-5.1,12.5-9.2,16.6c-4.1,4.1-9.2,7.1-15.4,9s-13.4,3-21.6,3.5c-0.1,4.3-0.2,9.8-0.4,16.6c-0.2,6.8-0.4,14.4-0.7,22.7 c-0.3,8.3-0.6,17-0.9,26.2c-0.3,9.2-0.7,18.2-1,27.2c-0.8,21-1.7,43.4-2.6,67.3c-0.3,6.3-1.9,11.6-4.7,16c-2.8,4.4-6.5,8-11.2,10.7 c-4.6,2.7-10.1,4.7-16.4,5.9c-6.3,1.2-13.2,1.8-20.7,1.8c-5.6,0-10.4-0.3-14.3-0.8s-7.2-1.5-9.7-3c-2.5-1.5-4.5-3.5-5.9-6 c-1.4-2.6-2.5-5.9-3.1-9.9c-0.7-4.1-1.1-8.9-1.2-14.6c-0.1-5.7-0.2-12.4-0.2-20.1c0-6.4,0-13.3,0.1-20.7c0.1-7.3,0.2-14.8,0.3-22.4 c0.1-7.6,0.3-15.2,0.4-22.8c0.1-7.6,0.3-14.8,0.4-21.8c0.3-16.2,0.8-32.6,1.3-49.1c-10,0-18.2-0.3-24.4-0.9 c-6.2-0.6-11.1-1.7-14.6-3.3c-3.5-1.5-5.8-3.6-7-6.2c-1.2-2.6-1.8-5.8-1.8-9.7c0-9.9,0.9-18.8,2.6-26.7c1.8-8,4.1-14.8,7-20.5 c2.9-5.7,6.3-10.2,10-13.4c3.8-3.3,7.7-5.1,11.7-5.6c3.6-0.3,7.3-0.5,11.1-0.8c3.8-0.3,8.2-0.5,13.2-0.7c5-0.2,11-0.3,17.8-0.4 c6.9-0.1,15.1-0.2,24.7-0.2c10,0,19,0.1,26.9,0.2c7.9,0.1,15.1,0.3,21.5,0.5c6.4,0.2,12.3,0.5,17.6,0.8c5.3,0.3,10.4,0.7,15.1,1.1 C610.7,27.7,611.8,29.4,612.8,31.6z'/%3E %3Cpath fill='%23F5E68E' d='M797.4,213.5c2.8,3.3,5.4,6.2,7.7,8.5c2.3,2.3,4.5,4.1,6.5,5.5c2,1.4,4.1,2.4,6.2,3.2 c2.1,0.8,4.4,1.3,6.9,1.7c2.5,0.4,5.3,0.7,8.6,0.9c1.5,2.3,2.6,5,3.2,8.1c0.6,3.1,0.9,6,0.9,8.9c0,7.6-1.2,14.8-3.6,21.5 c-2.4,6.7-5.9,12.5-10.5,17.5c-4.6,5-10.2,8.9-16.8,11.8c-6.6,2.9-14.1,4.3-22.5,4.3c-5.8,0-10.6-0.5-14.6-1.4 c-3.9-1-7.4-2.6-10.3-4.8c-2.9-2.3-5.6-5.2-8-8.8c-2.4-3.6-5-8-7.8-13.3c-3.3-6.2-6.4-11.6-9.2-16.2c-2.8-4.6-5.4-8.6-7.8-11.9 c-2.4-3.3-4.8-6.2-7-8.4c-2.3-2.3-4.6-4.1-6.9-5.5l-2.5,33.4c-0.7,6.9-1.8,12.6-3.5,17.1c-1.6,4.4-4,7.9-7.2,10.5 c-3.2,2.6-7.3,4.4-12.3,5.3c-5,1-11.3,1.4-18.7,1.4c-5.6,0-10.4-0.3-14.4-0.8c-4-0.5-7.3-1.5-10-3c-2.6-1.5-4.7-3.5-6.3-6 c-1.5-2.6-2.7-5.9-3.5-9.9c-0.8-4.1-1.3-8.9-1.5-14.6c-0.2-5.7-0.3-12.4-0.3-20.1c0-6.4,0.1-13.5,0.2-21.3c0.1-7.7,0.3-15.8,0.4-24 s0.4-16.6,0.6-25c0.2-8.4,0.4-16.5,0.7-24.4c0.5-18.4,1.1-37.2,1.8-56.4c-1.3-5.4-2.2-10.7-2.8-15.8c-0.6-5.1-0.9-10.1-0.9-15.1 c0-5,0.9-9.5,2.6-13.4c1.8-3.9,4.9-7.3,9.4-10.2c4.5-2.9,10.7-5.3,18.6-7.2c7.9-1.9,17.9-3.2,30.1-4.1c5.2-2.1,10.2-3.9,15.1-5.5 c4.9-1.5,9.8-2.8,14.8-3.9c5-1,10.2-1.8,15.6-2.3c5.4-0.5,11.2-0.8,17.3-0.8c13.8,0,25.6,1.9,35.3,5.8c9.7,3.9,17.7,9.4,23.9,16.4 c6.2,7,10.7,15.4,13.6,25.1c2.9,9.7,4.3,20.3,4.3,31.9c0,10.6-0.9,20.3-2.6,29.1c-1.7,8.8-4.4,17.2-8.1,25.2 c-3.7,8-8.4,16-14.1,23.9c-5.7,7.9-12.6,16.2-20.5,25.1C791.2,206.2,794.5,210.2,797.4,213.5z M721.6,175c2.8,0.4,5.6,0.9,8.5,1.5 c2.9,0.6,5.8,1.2,8.5,1.8c2.7,0.6,5,1.1,6.7,1.6c3.9-9.3,6.9-18.2,8.9-26.7c2-8.5,3-16.9,3-25.2c0-6.3-0.6-11.8-1.9-16.4 c-1.3-4.7-3.4-8.7-6.4-11.9c-3-3.3-7-5.9-11.9-7.8c-4.9-1.9-11-3.3-18.3-4l-4.1,86.4C716.5,174.3,718.8,174.6,721.6,175z'/%3E %3Cpath fill='%23F5E68E' d='M930.6,29.7c5.5-2,11.4-3.6,17.6-5c6.2-1.3,12.7-2.4,19.4-3.1c6.7-0.7,13.6-1.1,20.5-1.1 c8.1,0,15.2,0.8,21.2,2.4s11.1,4,15.2,7c4.1,3,7.3,6.6,9.6,10.9c2.3,4.2,3.7,8.9,4.3,14.1c1.2,8.5,2.4,17.7,3.8,27.7 c1.4,10,2.9,20.4,4.5,31.1s3.4,21.7,5.3,32.8c1.9,11.1,3.8,22.1,5.9,32.8c2,10.8,4.2,21.2,6.5,31.2c2.3,10,4.6,19.3,7,27.9 c2.8,2.1,5.3,4.1,7.3,6c2,1.9,3.7,3.9,5,5.8c1.3,2,2.2,4,2.8,6.2c0.6,2.2,0.9,4.6,0.9,7.2c0,7-2.1,13.1-6.3,18.1 c-4.2,5.1-9.7,9.2-16.6,12.5c-6.9,3.3-14.7,5.6-23.4,7.2c-8.7,1.5-17.7,2.3-26.8,2.3c-5.4,0-9.8-0.9-13.4-2.6 c-3.6-1.8-6.7-4.7-9.2-8.7c-2.5-4.1-4.7-9.4-6.5-16.1c-1.8-6.7-3.6-15-5.5-24.9c-2.9,0.3-6.4,0.5-10.4,0.6c-4,0.2-8.2,0.3-12.8,0.4 c-4.6,0.1-9.3,0.2-14.2,0.3c-4.9,0.1-9.9,0.1-14.9,0.1c-0.3,1.3-0.6,3.1-0.9,5.6c-0.4,2.5-0.8,5.2-1.3,8.3 c-0.5,3.1-0.9,6.2-1.3,9.5c-0.4,3.3-0.8,6.4-1.2,9.3c-0.4,2.9-0.7,5.5-0.9,7.8s-0.4,3.9-0.5,4.8c-1.8,1.8-4.7,3.3-8.7,4.5 c-4,1.2-8.8,1.8-14.5,1.8c-3.1,0-6.4-0.2-9.8-0.6c-3.4-0.4-6.8-1.1-10.2-2.1c-3.4-1-6.6-2.3-9.7-4c-3.1-1.6-5.8-3.7-8.2-6.1 c-2.3-2.4-4.2-5.3-5.6-8.7c-1.4-3.3-2.1-7.2-2.1-11.6c0-1.7,0.4-5,1.2-10c0.8-5,2-11.4,3.5-19c1.5-7.7,3.4-16.4,5.6-26.3 c2.2-9.9,4.7-20.5,7.5-31.8c2.8-11.3,5.9-23.2,9.3-35.6c3.4-12.4,7-24.9,10.8-37.6c3.8-12.7,7.8-25.3,12.1-38s8.6-24.8,13.1-36.5 C920.1,33.9,925.1,31.7,930.6,29.7z M955.5,114c-1.3,4.9-2.6,10.1-3.9,15.8c-1.3,5.6-2.7,11.6-4.1,17.8c-1.4,6.2-2.7,12.4-4.1,18.6 c-1.3,6.2-2.6,12.3-3.9,18.3c-1.3,6-2.4,11.7-3.4,17c1.9,0,4.5-0.1,7.7-0.2c3.2-0.1,6.6-0.3,10.2-0.4c3.6-0.2,7.1-0.4,10.5-0.6 c3.4-0.3,6.3-0.5,8.6-0.8c-0.5-3.4-1.1-7.6-1.8-12.4c-0.7-4.9-1.5-10.1-2.3-15.9c-0.8-5.7-1.7-11.7-2.6-17.9 c-0.9-6.2-1.8-12.4-2.7-18.5c-0.9-6.2-1.7-12.1-2.6-17.8c-0.8-5.7-1.6-10.9-2.3-15.6C957.9,104.9,956.7,109.1,955.5,114z'/%3E %3Cpath fill='%23F5E68E' d='M1234,24.4c10,3.3,18.4,7.6,25,12.9c6.6,5.3,11.5,11.4,14.8,18.1c3.3,6.8,4.9,13.6,4.9,20.6 c0,8.2-1.1,15.2-3.3,21.1c-2.2,5.9-5.2,10.6-9.1,14.4c-3.8,3.7-8.3,6.5-13.4,8.2c-5.1,1.8-10.5,2.6-16.3,2.6 c-3.6,0-6.8-0.3-9.5-0.8c-2.8-0.5-5.6-1.1-8.4-1.9c-1.2-4.8-2.6-8.9-4.3-12.5c-1.7-3.6-4-6.8-6.8-9.6c-2.8-2.8-6.3-5.4-10.6-7.7 c-4.3-2.3-9.5-4.5-15.8-6.7c-1.1,2.6-1.9,5.5-2.4,8.7c-0.5,3.2-0.8,6.3-0.8,9.4c0,2.3,0.2,4.3,0.5,6.1c0.3,1.8,1.2,3.6,2.4,5.5 c1.3,1.9,3.2,4,5.8,6.2c2.6,2.3,6,5,10.5,8.2c4.4,3.2,10,7,16.7,11.4c6.7,4.4,14.8,9.8,24.2,16.1c8.1,5.3,15,10.2,20.5,14.8 c5.6,4.6,10.1,9.4,13.6,14.3c3.5,4.9,6,10.3,7.5,16.1c1.5,5.8,2.3,12.5,2.3,20.1c0,10.8-2.1,21.3-6.2,31.4 c-4.1,10.1-10.3,19.1-18.6,27c-8.2,7.9-18.6,14.2-31,18.9c-12.4,4.7-26.9,7.1-43.5,7.1c-13.5,0-25.8-1.1-36.9-3.3 c-11.1-2.2-20.7-5.6-28.6-10.4c-7.9-4.8-14.1-10.9-18.5-18.5c-4.4-7.6-6.5-16.8-6.5-27.6c0-6.5,1-12.4,2.9-17.8 c1.9-5.3,4.6-9.9,8-13.6c3.4-3.8,7.5-6.7,12.1-8.7c4.6-2.1,9.6-3.1,15-3.1c1.8,0,3.8,0.1,5.8,0.4c2,0.3,4,0.7,6,1.3 c5,9.3,9.6,16.9,13.8,22.8c4.2,5.9,8.1,10.5,11.9,13.9c3.7,3.4,7.3,5.7,10.9,7c3.5,1.3,7.1,1.9,10.8,1.9c2.6,0,4.8-0.3,6.6-1 c1.8-0.7,3.3-1.5,4.5-2.6c1.2-1.1,2-2.3,2.6-3.8s0.8-2.9,0.8-4.4c0-1.1-0.3-2.3-0.8-3.5c-0.5-1.3-1.6-2.7-3.1-4.5 c-1.6-1.7-3.7-3.8-6.5-6.2c-2.8-2.4-6.5-5.3-11-8.7c-4.6-3.4-10.1-7.4-16.6-12c-6.5-4.6-14.2-10-23-16.2 c-7.2-5-13.3-10.1-18.2-15.1c-4.9-5.1-8.9-10.3-11.9-15.8c-3-5.5-5.2-11.3-6.5-17.3c-1.3-6.1-2-12.6-2-19.5c0-6,0.6-12.2,1.9-18.5 c1.3-6.3,3.1-12.3,5.6-18.1c2.5-5.8,5.7-11.2,9.5-16.3c3.8-5,8.3-9.3,13.4-12.9c3.6-5.9,7.3-11,11.1-15.2 c3.8-4.2,8.2-7.6,13.1-10.2c4.9-2.6,10.6-4.6,17.1-5.8c6.4-1.2,14.1-1.8,23-1.8C1212.1,19.5,1223.9,21.1,1234,24.4z'/%3E %3Cpath fill='%23F5E68E' d='M1401.3,189.7c-1.5,0.4-3.2,0.7-5,1.1s-3.6,0.6-5.4,0.8c-1.8,0.2-3.4,0.3-4.8,0.3c-7,0-13.6-0.5-19.6-1.6 c-6-1-11.3-2.8-15.8-5.4c-4.5-2.6-8.1-6-10.9-10.3c-2.8-4.3-4.5-9.7-5.2-16.3c-0.8-6.7-1.3-13.8-1.8-21.2c-0.4-7.4-0.7-14.8-0.9-22 c-0.2-7.2-0.3-14.1-0.3-20.6c0-6.5-0.1-12.1-0.1-16.9c-2.6-2.8-4.8-5.8-6.6-9c-1.8-3.1-2.7-7-2.7-11.6c0-3.9,0.5-8.1,1.5-12.4 c1-4.4,2.4-8.6,4.3-12.9c1.9-4.2,4.2-8.2,7-12.1c2.8-3.8,6-7.2,9.6-10.1c3.6-2.9,7.6-5.3,12.1-7c4.4-1.7,9.2-2.6,14.3-2.6 c8.2,0,16,1.1,23.4,3.3c7.4,2.2,13.9,5.3,19.5,9.2c5.6,3.9,10.1,8.5,13.4,13.7c3.3,5.3,5,10.9,5,16.9c0,3.8-0.3,7.3-0.8,10.3 c-0.5,3-1.2,6.2-2,9.4c-0.8,3.3-1.8,6.9-3,10.9c-1.1,4-2.3,8.9-3.6,14.6c-1.7,7.4-3.3,15.3-4.9,23.7c-1.6,8.4-3.2,17-4.7,25.7 c-1.5,8.7-3.1,17.5-4.5,26.1c-1.5,8.7-2.9,16.9-4.3,24.8C1404,189,1402.8,189.4,1401.3,189.7z M1412.1,277.3 c-2.3,6.4-5.4,11.7-9.4,15.9c-3.9,4.2-8.5,7.4-13.7,9.5c-5.2,2.1-10.8,3.2-16.8,3.2c-10,0-18.3-1.3-24.7-3.8 c-6.4-2.5-11.5-5.7-15.3-9.5c-3.7-3.8-6.3-7.9-7.7-12.4c-1.4-4.4-2.1-8.6-2.1-12.4c0-9.4,1.7-18.6,5.1-27.6 c3.4-9,8.9-17.1,16.4-24.4c11.3,0,21.4,0.9,30.3,2.7c8.9,1.8,16.4,4.4,22.5,7.8c6.1,3.4,10.8,7.5,14,12.3 c3.2,4.8,4.8,10.2,4.8,16.3C1415.5,263.5,1414.4,270.9,1412.1,277.3z'/%3E%3C/g%3E%3C/svg%3E"); /* "I advocate against using the shorthand, as I spend a lot of time correcting other peopleΓÇÖs code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their intention." - http://www.standardista.com/css3/css3-background-properties/ */ background-repeat: no-repeat; background-position: center; background-size: contain; width: 8.125em; height: 3.125em; } .VideoExtras-itemLink, .VideoExtras-itemLink:hover { color: white; } .VideoExtras-videoIcon, .VideoExtras-articleIcon { vertical-align: middle; margin-bottom: 2px; } .VideoExtras-videoIcon > use, .VideoExtras-articleIcon > use { fill: white; } .EnhancedVideo .VideoExtras { border-top-left-radius: 0; border-top-right-radius: 0; } /* ****** Compass */ .ContentCarousel { background-color: #0e1114; background-position: center top; background-repeat: repeat; background-image: url(/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png); } .ContentCarousel-control::after { content: ' '; position: absolute; top: 0; left: 0; width: 34px; height: 140px; background-image: url(/Content/Platform/screen-junkies/img/sj-arrow-carousel-control.png); background-color: rgba(170, 170, 170, 0.85); background-repeat: no-repeat; cursor: pointer; opacity: 0; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } .ContentCarousel-next::after { background-position: right top; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; } /* ****** Variables */ /**** Assign Variables Here */ .HeroContent-schedule { color: #6fc3de; } .HeroContent-streaming { width: 113px; } /* ****** functions */ /* https://css-tricks.com/snippets/sass/px-to-em-functions/ EXAMPLES: h1 { font-size: em(32); } // is the same as: h1 { font-size: em(32px); } */ .Article { background-image: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); background-repeat: repeat-x; background-position: 0px -500px; } .Article-title { font-size: 2.8125em; color: #333333; margin: 0 0 35px 0; } /* ****** placeholders */ .VideoExtras-extraTxt, .NextContent-nextVideo, .NextContent-nextPlug, .NextContent-nextArticle { text-indent: 100%; white-space: nowrap; overflow: hidden; } .NextContent { border-radius: 4px; margin-top: 85px; overflow: hidden; position: relative; } .NextContent::before { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } .NextContent-info { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); } .NextContent-nextVideo, .NextContent-nextPlug, .NextContent-nextArticle { width: 230px; height: 75px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; } .NextContent-nextVideo { background-image: url("/Content/Platform/screen-junkies/img/sj-watch-next.svg"); } .NextContent-nextArticle { background-image: url("/Content/Platform/screen-junkies/img/sj-read-next.svg"); } .NextContent-title { margin-top: 0; color: white; } /* ****** Variables */ /**** Assign Variables Here */ .SeriesInfo-meta { color: #aaaaaa; } .SeriesInfo-desc { font-size: 1.25em; } .SeriesInfo-marketing { background: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); } .SeriesInfo-marketingHeader { position: relative; z-index: 0; } .SeriesInfo-marketingHeader::after { content: url(/content/platform/screen-junkies/img/sj-curved-arrow.svg); display: block; position: absolute; top: -20px; right: 4px; width: 52px; z-index: 1; } .SeriesInfo-marketingHeaderPlus { display: none; } .SeriesInfo.SeriesInfo--noPoster .SeriesInfo-poster { background: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); } /** * Latest Episode Module SJ override */ .LatestEpisode { margin: 50px auto 20px; } .LatestEpisode-video { display: inline-block; width: 45%; vertical-align: top; margin: 0 30px 0 0; } .LatestEpisode-details { display: inline-block; width: 45%; vertical-align: top; } .LatestEpisode-info { font-size: 0.75em; text-transform: uppercase; } .LatestEpisode-info > p { margin: 0; } .LatestEpisode-title { font-size: 2.25em; margin: 20px 0 0; } .LatestEpisode-description { font-size: 1.25em; margin: 20px 0 0; } .LatestEpisode-times { font-size: 1em; color: #aaa; margin: 15px 0 0; } .LatestEpisode-durationDivider::after { content: '|'; padding: 15px; } /* ****** Partials */ .EpisodeList { background: transparent; } .EpisodeList-title { font-size: 2.25em; margin: 70px 0 0; } .EpisodeList-item { color: #333333; } .EpisodeList-item:hover { color: #333333; } .EpisodeList-number { color: #aaaaaa; font-size: 3.375em; width: 125px; } .EpisodeList-thumb { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .EpisodeList-info { background: white; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .EpisodeList-episodeTitle { font-size: 1.5em; } .EpisodeList-description { color: #555; } .EpisodeList-meta { color: #aaaaaa; } .EpisodeList-metaDivider::after { content: '|'; padding: 15px; } .EpisodeList-runLength { margin-right: 0; } /* ****** Shared Overrides */ /* !WARNING - DO NOT MAKES CHANGES TO THE CSS FILE, THIS IS A SASS GENERATED FILE */ /* =============================================================== SCREEN JUNKIES POLL MODULE "SKIN" STYLES ------------------------------------------------------------------ SECTIONS: ... NOTE: These skin styles override defaults provided by the Poll module's base styles in \Platform\shared\Poll.scss ================================================================*/ /* ===[ VARIABLES ]=== */ /**** Assign Variables Here */ .Poll { border-radius: 4px; overflow: hidden; } .Poll-container { padding: 60px 30px; } .Poll-badge { position: relative; } .Poll-badge::before { content: url(/Content/Platform/screen-junkies/img/sj-vote-badge.svg); display: block; width: 14%; height: auto; margin: 0 auto 40px; } .Poll-heading { position: relative; margin: 0 0 40px; } .Poll-postVoteMessage { text-indent: -9999em; background: url(/Content/Platform/screen-junkies/img/sj-thx-for-your-vote.svg) no-repeat center center; background-color: rgba(26, 32, 36, 0.95); background-size: 75%; opacity: 1; } .Poll.Poll--showResults .Poll-badge::before { content: url(/Content/Platform/screen-junkies/img/sj-results-badge.svg); } /* !WARNING - DO NOT MAKES CHANGES TO THE CSS FILE, THIS IS A SASS GENERATED FILE */ /* =============================================================== SCREEN JUNKIES POLL OPTION MODULE "SKIN" STYLES ------------------------------------------------------------------ SECTIONS: ... NOTE: These skin styles override defaults provided by the Poll module's base styles in \Platform\shared\PollOption.scss ================================================================*/ .PollOption { color: #FFF; } .PollOption::after { background-color: #64C3DD; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI5MHB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZmNmY2ZiIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center center, rgba(0, 0, 0, 0) 90px, rgba(111, 111, 111, 0.85)); background-image: -webkit-radial-gradient(center center, rgba(0, 0, 0, 0) 90px, rgba(111, 111, 111, 0.85)); background-image: radial-gradient(center center, rgba(0, 0, 0, 0) 90px, rgba(111, 111, 111, 0.85)); } .PollOption-sanityCheck::before { display: block; width: 30px; height: 30px; margin: 0 auto .5em; background-color: #98d4e8; box-sizing: border-box; cursor: pointer; text-align: center; line-height: 0; } .PollOption-premimText { display: block; } .PollOption:hover::after { background-color: #3ab3d4; -moz-transition-property: background-color; -o-transition-property: background-color; -webkit-transition-property: background-color; transition-property: background-color; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .PollOption--voted .PollOption-word::before { content: url(/Content/Platform/screen-junkies/img/sj-check-mark.svg); width: .75em; height: .75em; display: inline-block; } .Poll--allowHover .PollOption:hover::after { background-color: #6fc3de; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI4MHB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZmNmY2ZiIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center center, rgba(0, 0, 0, 0) 80px, rgba(111, 111, 111, 0.85)); background-image: -webkit-radial-gradient(center center, rgba(0, 0, 0, 0) 80px, rgba(111, 111, 111, 0.85)); background-image: radial-gradient(center center, rgba(0, 0, 0, 0) 80px, rgba(111, 111, 111, 0.85)); } .Poll--allowHover .PollOption-sanityCheck::before { content: url(/Content/Platform/screen-junkies/img/s-profile-icon.svg); padding: 8px; border-radius: 50%; } .Poll--premium.Poll--allowHover .PollOption-sanityCheck::before { display: none; } /* ****** Common Overrides */ /* ****** Functions */ /* * Thanks to http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris * "Web friend jakob-e implemented this algorithm in SASS" ... * * Usage example: * .class { * background-image: dfy-svg-url('.....'); * } */ /* ****** Variables */ .Registration-login { color: #6fc3de; } .Registration-login::after { display: inline-block; content: "\003e"; padding-left: 5px; } .Registration-messages { color: white; } /* ****** Modifiers */ .Registration--invalid .Registration-messages { background: #ff4a4a; display: block; } .Registration--success .Registration-messages { background: #13a535; display: block; } .AccountSettings { background: white; } .AccountSettings-legend { margin: 0 0 20px 0; font-size: 30px; font-size: 1.875rem; } .AccountSettings-fieldset { border: 0; margin: 0 0 20px 0; padding: 0; } .AccountSettings-messages { color: white; } /* ****** Modifiers */ .AccountSettings--invalid .AccountSettings-messages, .AccountSettings--error .AccountSettings-messages { background: #ff4a4a; display: block; } .AccountSettings--success .AccountSettings-messages { background: #13a535; display: block; } /* ****** Shared Overrides */ /* ****** Variables */ /**** Assign Variables Here */ /* ****** Mixins */ /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p {@include fontSize(12px);} * */ /* ****** Local Variables */ .Product { background: white; border-radius: 4px; display: inline-block; vertical-align: top; float: none; text-align: center; padding: 28px; margin: 0; width: 32.5%; position: relative; -moz-box-shadow: rgba(0, 0, 0, 0.11) 0 0 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.11) 0 0 10px; box-shadow: rgba(0, 0, 0, 0.11) 0 0 10px; } .Product:nth-child(4n) { margin: 0; } .Product-image { position: absolute; top: -28px; left: -28px; } .Product:nth-of-type(2n) .Product-image { top: 10px; left: 10px; margin-bottom: 1em; } .Product-index { margin: -28px -28px 0 -28px; padding: 8.61538px; font-size: 1.5em; color: white; background-color: #B8BABB; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } .Product-name { margin-right: 18.66667px; margin-left: 18.66667px; padding: 20px 0 25px; border-bottom: 1px solid #808080; } .Product-description { color: gray; font-size: 1.6875em; text-transform: none; } .Product-price { color: #6fc3de; white-space: nowrap; font-size: 70px; font-size: 4.375rem; } .Product-priceInline { color: #6fc3de; font-size: 54px; } .Product-timespan { font-size: 30px; font-size: 1.875rem; } .Product-note { position: absolute; width: 100%; left: 0; bottom: -65px; margin: 0; color: gray; font-size: 18px; font-size: 1.125rem; } .Product-sponsorLogo { width: 134px; height: 22px; margin-left: 1.25em; vertical-align: middle; } /* Product Modifier*/ .Product--annual .Product-price { line-height: 1.1; margin: 0 0 15px; } .Product--annual .Product-timespan { display: block; } /* ****** Elements */ /* ****** Variables */ /**** Assign Variables Here */ .ShowMosaic { min-width: 1200px; margin-top: -200px; } .ShowMosaic-img { width: 100%; display: block; } .ShowMosaic-imgTitle { width: 80%; display: block; margin: 0 auto 1em; } /* ****** Variables */ /**** Assign Variables Here */ /* ****** Mixins */ /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p {@include fontSize(12px);} * */ .VIPPoints { background: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); color: white; padding-top: 5px; padding-bottom: 200px; min-width: 1200px; } .VIPPoints-heading { text-align: center; } .VIPPoints-premiumIcon { vertical-align: middle; } .VIPPoints-points { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; justify-content: space-around; width: 1200px; margin: 20px auto; } .VIPPoints-point { -webkit-flex-basis: 30%; flex-basis: 30%; text-align: center; margin-bottom: 15px; padding: 0; } .VIPPoints-title { font-size: 28px; font-size: 1.75rem; margin-bottom: .5em; } .VIPPoints-icon { width: 50px; height: 50px; } .VIPPoints-desc { text-align: left; color: #aaaaaa; } /* ****** Subscriptions Page Overrides */ .Subscriptions { width: 1200px; margin-bottom: 50px; } .Subscriptions-title { text-align: center; } .Subscriptions-title > img:first-child { margin-right: 15px; } .Subscriptions-subtitle { font-weight: bold; } .Subscriptions-options { margin-top: 25px; padding-bottom: 60px; vertical-align: top; text-align: center; } .Subscriptions-or { font-size: 2.625em; font-weight: bold; display: inline-block; vertical-align: top; margin: 150px 60px 0; } /* ****** Variables */ .Payment-subtitle { margin: 25px 0 35px 0; } .Payment-plan { color: #6fc3de; } .Payment-pricing { color: #333333; } .Payment-subtext { color: #333333; } .Payment-cancel { color: #aaaaaa; } .Payment-device { color: #aaaaaa; } .Payment-paypal { background-color: #FAFAFA; } .Payment-dividerCopy { color: #aaaaaa; } /* !WARNING - DO NOT MAKES CHANGES TO THE CSS FILE, THIS IS A SASS GENERATED FILE */ /* =============================================================== SCREEN JUNKIES LEGALSECTION "SKIN" STYLES ------------------------------------------------------------------ NOTE: These skin styles override defaults provided by the LegalSection module's base styles in \Platform\common\LegalSection.scss ================================================================*/ /**** Local Variables */ .LegalSection { background: white; border-radius: 4px; } .LegalSection-navigationList { background: #F4F4F4 none repeat scroll 0 0; border: 1px solid #E1DAD6; } .LegalSection-navigationList a:hover { color: #f46430; } .LegalSection-navigationList a::before { border-color: transparent #f46430 transparent transparent; } .LegalSection-OrderedList > li::before { font-size: 45px; } /**** Variables */ /**** Assign Variables Here */ .Trial.Trial--noNav { margin-top: -70px; } /* ****** Elements */ /* ****** Variables */ .CheckBox-checkBox:checked + .CheckBox-label::before { border-color: #6fc3de; background-color: #6fc3de; } /* ****** Modifiers */ .CheckBox--invalid > .CheckBox-invalidMessage { background: #ff4a4a; color: white; padding: 6px 10px; } /* ****** Specific Instances */ .Registration-form .CheckBox { margin: 40px 0; } /* ****** Variables */ .RadioButton-input:checked ~ .RadioButton-label .RadioButton-icon > use { fill: #6fc3de; stroke: #6fc3de; } /* ****** Modifiers */ .RadioButton--invalid > .RadioButton-invalidMessage { background: #ff4a4a; color: white; padding: 6px 10px; } /* ****** Specific Instances */ .UpgradeOffer .RadioButton { margin-bottom: 0; } .UpgradeOffer .RadioButton > label { font-size: 26px; font-size: 1.625rem; } .UpgradeOffer .RadioButton > label > span { color: #6fc3de; } .UpgradeOffer .RadioButton-input + .RadioButton-label::before { margin-right: 9px; } .UpgradeOffer .RadioButton-input:checked + .RadioButton-label::after { background: #6fc3de; } .UpgradeOffer .RadioButton-input:checked + .RadioButton-label::before { border-color: #6fc3de; } /* ****** Variables */ .SelectMenu select:focus { border-color: #6fc3de; } .SelectMenu select:focus ~ .SelectMenu-arrow::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 18 17'%3E%3Cpath fill='%236FC3DE' d='M10.6,15.4c-0.9,1.5-2.3,1.5-3.2,0L0.9,3.2C0,1.7,0.7,0.5,2.5,0.5h13c1.8,0,2.5,1.2,1.6,2.7L10.6,15.4z'/%3E%3C/svg%3E"); } /* ****** Modifiers */ .SelectMenu.SelectMenu--invalid select { border-color: #ff4a4a; border-bottom-left-radius: 0; } .SelectMenu.SelectMenu--invalid select:hover, .SelectMenu.SelectMenu--invalid select:focus { border-color: #ff4a4a; border-bottom-left-radius: 0; } .SelectMenu.SelectMenu--invalid .SelectMenu-invalidMessage { background: #ff4a4a; border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; color: white; font-weight: normal; padding: 6px 10px; top: -2px; font-size: 14px; font-size: 0.875rem; } .EpisodeList .SelectMenu--transparent select { font-size: 1.25em; color: #aaaaaa; } /* ****** Function */ /* * Thanks to http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris * "Web friend jakob-e implemented this algorithm in SASS" ... * * Usage example: * .class { * background-image: dfy-svg-url('.....'); * } */ /* ****** Mixins */ /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p {@include fontSize(12px);} * */ /* ****** Variables */ .FormText-text:focus, .FormText-textArea:focus { border-color: #6fc3de; } /* ****** Modifiers */ .FormText--invalid > .FormText-text { border-color: #ff4a4a; border-bottom-left-radius: 0; } .FormText--invalid > .FormText-text:hover, .FormText--invalid > .FormText-text:focus { border-color: #ff4a4a; border-bottom-left-radius: 0; } .FormText--invalid .FormText-invalidMessage { background: #ff4a4a; border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; color: white; font-weight: normal; padding: 6px 10px; top: -2px; font-size: 14px; font-size: 0.875rem; } .FormText--toggle .FormText-button > svg { fill: #6fc3de; } .FormText--toggle.FormText--active > .FormText-button > svg { fill: #aaaaaa; } .FormText--toggle .FormText-invalidMessage + .FormText-button { bottom: 39px; } /* ****** Specific Instances */ .AccountSettings .FormText-text, .Registration-form .FormText-text, .LoginModal .FormText-text { width: 100%; } .LoginModal .FormText-text { color: #333; text-indent: 40px; background-position: 15px center; background-repeat: no-repeat; background-size: 26px; line-height: 1.3; } .LoginModal .FormText-text:-moz-placeholder { color: #aaa; } .LoginModal .FormText-text::-moz-placeholder { color: #aaa; } .LoginModal .FormText-text:-ms-input-placeholder { color: #aaa; } .LoginModal .FormText-text::-webkit-input-placeholder { color: #aaa; } .LoginModal .FormText-text[type="email"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='26px' height='26px' x='0px' y='0px' viewBox='0 0 32 24' enable-background='new 0 0 32 24' xml:space='preserve'%3E%3Cpath fill='%23ABABAB' d='M28,0H4C1.8,0,0,1.8,0,4v16c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M23.1,13.1l3.3,4.1 c0.3,0.4,0.2,0.6-0.2,0.3l-5.3-3c-0.5-0.3-1.2-0.2-1.6,0.2c-0.7,0.7-1.9,1.9-2.6,2.6c-0.4,0.4-1,0.4-1.4,0c-0.7-0.7-1.8-1.9-2.6-2.6 c-0.4-0.4-1.1-0.5-1.6-0.2l-5.3,3c-0.5,0.3-0.6,0.1-0.3-0.3l3.2-4.5c0.3-0.4,0.3-1.1-0.1-1.6C7.5,9.7,4.8,6.3,3.6,4.8 C3.3,4.4,3.4,4.3,3.8,4.6c2.3,1.8,9,6.9,11.4,8.8c0.4,0.3,1.1,0.3,1.6,0c2.4-1.9,9.1-7,11.4-8.8c0.4-0.3,0.5-0.2,0.2,0.2 c-1.2,1.6-4,5.2-5.2,6.8C22.8,12,22.8,12.7,23.1,13.1z'/%3E%3C/svg%3E"); } .LoginModal .FormText-text[type="password"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='26px' height='26px' x='0px' y='0px' viewBox='0 0 28 32' enable-background='new 0 0 28 32' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23ABABAB' d='M26,13h-2c-0.5,0-1-0.5-1-1V9.6C23,4.3,19.3,0,14,0C8.7,0,5,4.3,5,9.6V12c0,0.5-0.5,1-1,1H2 c-1.1,0-2,1-2,2.1V30c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2V15.1C28,14,27.1,13,26,13z M16.2,22.7c-0.4,0.4-0.7,1.1-0.6,1.6l0.4,2.7 c0.1,0.5-0.3,1-0.9,1h-2.1c-0.6,0-0.9-0.5-0.9-1l0.4-2.7c0.1-0.5-0.3-1.2-0.6-1.6c-0.5-0.5-0.7-1.2-0.7-1.9c0-1.6,1.3-2.9,2.9-2.9 s2.9,1.3,2.9,2.9C16.9,21.5,16.6,22.2,16.2,22.7z M17.2,13h-6.3c-0.4,0-0.9-0.4-0.9-0.8V8.6c0-2,1.6-3.6,4-3.6c2.4,0,4,1.6,4,3.6 v3.6C18,12.6,17.6,13,17.2,13z'/%3E%3C/g%3E%3C/svg%3E"); } .LoginModal .FormText .FormText--toggle.FormText--active > .FormText-text[type="text"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='26px' height='26px' x='0px' y='0px' viewBox='0 0 28 32' enable-background='new 0 0 28 32' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23ABABAB' d='M26,13h-2c-0.5,0-1-0.5-1-1V9.6C23,4.3,19.3,0,14,0C8.7,0,5,4.3,5,9.6V12c0,0.5-0.5,1-1,1H2 c-1.1,0-2,1-2,2.1V30c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2V15.1C28,14,27.1,13,26,13z M16.2,22.7c-0.4,0.4-0.7,1.1-0.6,1.6l0.4,2.7 c0.1,0.5-0.3,1-0.9,1h-2.1c-0.6,0-0.9-0.5-0.9-1l0.4-2.7c0.1-0.5-0.3-1.2-0.6-1.6c-0.5-0.5-0.7-1.2-0.7-1.9c0-1.6,1.3-2.9,2.9-2.9 s2.9,1.3,2.9,2.9C16.9,21.5,16.6,22.2,16.2,22.7z M17.2,13h-6.3c-0.4,0-0.9-0.4-0.9-0.8V8.6c0-2,1.6-3.6,4-3.6c2.4,0,4,1.6,4,3.6 v3.6C18,12.6,17.6,13,17.2,13z'/%3E%3C/g%3E%3C/svg%3E"); } /**** Variables */ /**** Assign Variables Here */ .Button { background-color: #f46430; } .Button:hover { background-color: #f57648; } .Button:active { background-color: #f35218; } .Button--primary { background-color: #f46330; background: #f46330 linear-gradient(0deg, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.8)); } .Button--primary:hover { background-color: #d35122; background: #d35122 linear-gradient(0deg, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.8)); -moz-transition-property: background-color; -o-transition-property: background-color; -webkit-transition-property: background-color; transition-property: background-color; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .Button--primary:active { background: linear-gradient(180deg, #d35122, #eb5a26); } .Button--secondary { border-color: #6fc3de; color: #6fc3de; background: transparent; } .Button--secondary:hover, .Button--secondary:active { border-color: #38aacf; color: #38aacf; background: transparent; } /* This should be defined in _Button.scss one level higher but */ .Button--textlink { background: none; border: 0; color: #6fc3de; } .Button--textlink:hover { color: #38aacf; background: none; } .NavCarousel .Button { display: block; text-align: center; } .Poll .Button--secondary { top: 1.75em; right: 2em; background-color: transparent; } .Poll .Button--secondary:hover { background-color: transparent; } .LegalSection .Button--textlink { padding: 0; } .Hero .Button--primary { padding: 16px 22px; font-size: 18px; } .SeriesInfo .Button--primary { margin-right: 1em; padding: 22px 38px; font-size: 1.125em; } .FBLoginButton { margin-bottom: 15px; } .BasicModalMessage--success { background: #13a535; } .BasicModalMessage--error { background: #ff4a4a; } /* ****** Functions */ /* * Thanks to http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris * "Web friend jakob-e implemented this algorithm in SASS" ... * * Usage example: * .class { * background-image: dfy-svg-url('.....'); * } */ .PremiumIcon::after { content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 957.8 501.1' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='%236FC2DD' d='M820.3 220.4l.4 42.6c0 4.6-3.7 5.4-8.1 4.4 0 1.9-3.7 12-6.2 14.2 2.9.7 6.3 1.1 10.4 1.1 11.3-.1 20.3-3.7 20.3-14.7 0-5.7-.4-47.8-.4-47.8l-16.4.2z'/%3E%3Cpath fill='%23151B1F' d='M882.3 485.2H75.5c-31.3 0-56.9-25.6-56.9-56.9V72.8c0-31.3 25.6-56.9 56.9-56.9h806.8c31.3 0 56.9 25.6 56.9 56.9v355.5c0 31.3-25.6 56.9-56.9 56.9z'/%3E%3Cpath fill='%23F5D04E' d='M904.9 35.2c9.5 0 17.6 8.1 17.6 17.6v395.4c0 9.5-8.1 17.6-17.6 17.6H52.8c-9.5 0-17.6-8.1-17.6-17.6V52.8c0-9.5 8.1-17.6 17.6-17.6h852.1m0-35.2H52.8C23.8 0 0 23.8 0 52.8v395.4C0 477.3 23.8 501 52.8 501h852.1c29.1 0 52.8-23.8 52.8-52.8V52.8C957.8 23.8 934 0 904.9 0z'/%3E%3Cg%3E%3Cg fill='%23F5D04E'%3E%3Cpath d='M474.4 100.7h80.4V308c0 7.3.1 14.7 3.5 21.6 2.7 5.5 7.3 7.9 13.2 7.9 6 0 10.7-2.3 13.5-7.9 2.3-4.6 3-9.5 3.4-14.5.2-2.6.1-5.2.1-7.8V104.2v-3.5h80.6v237.4c0 10.3-.5 20.6-2.9 30.7-4.1 17.1-13.2 25.6-30.6 28.7-13.3 2.3-26.7 2.9-40.1 3.1-15.9.1-31.8.2-47.6 0-14.2-.1-28.4-.6-42.4-3.6-9.6-2.1-18.1-6.1-23.2-15.1-3.9-6.8-5.8-14.3-6.6-21.9-.7-7.5-1.2-15-1.2-22.6-.1-77.8-.1-155.5-.1-233.3v-3.4zM187.7 400.5h-80.2V100.6h2.4c45.6 0 91.3-.1 136.9.2 9.2.1 18.4 1.6 27.6 3 10.9 1.7 17.5 8.7 21.4 18.6 3.4 8.8 5 18 5.8 27.3 2 21.9 1.5 43.9.9 65.8-.4 14.9-2.1 29.7-6.6 44-2.4 7.7-5.9 14.6-13.3 18.8-4.6 2.6-9.5 3.9-14.6 4.1-13.9.4-27.7.7-41.6.8-11.8.1-23.6 0-35.4 0h-3.3v117.3zm.1-182.7c3.7 0 7.4.1 11 0 3.2-.1 6.4-.1 9.6-.6 7.1-1.2 11.2-5.2 12.5-12.3 1.5-8 1.6-16 .1-24s-5.9-13.3-14.1-14.4c-6.3-.8-12.7-.7-19-1.1-.1 17.9-.1 35-.1 52.4zM842.1 100.6v65h-70.2v52.2h2.7c10 .3 20 .3 29.9 1.1 9.5.7 18.7 3.1 26.7 8.9 6.2 4.5 10.2 10.6 12.8 17.6 3.3 8.6 5 17.7 5.3 26.9.5 17.1 1 34.2 1 51.2-.1 14.9-1.1 29.8-5.1 44.3-1.6 5.9-3.8 11.5-7.3 16.5-6.4 9-15.4 13.8-26.1 14.6-13.9 1.1-27.9 1.5-41.8 1.6-25 .2-50 .1-75 .1h-2.3v-65.1h74.7v-52.4c-5.6 0-11.1.3-16.6-.1-7.9-.5-15.9-1-23.8-2.1-13.9-2-22.9-10.5-28.7-22.9-3.9-8.3-5.9-17.1-6.2-26.1-.7-18.5-1.1-36.9-1-55.4 0-14.6 1.4-29.2 5.6-43.4 2.9-9.7 7.2-18.5 15.8-24.7 6.3-4.5 13.5-6.4 21-6.7 18.1-.6 36.2-1 54.4-1.2 16.9-.2 33.8 0 50.8 0 1 .1 2.1.1 3.4.1zM457.3 332.2c-3.4 16.3-6.8 32.2-10.1 48-1.3 6-2.7 12-3.8 18-.3 1.9-1.1 2.3-2.9 2.3-20.7-.1-41.5 0-62.2 0h-55.4v-3.7c0-75.8 0-151.5-.1-227.3 0-14.6-.7-29.3-1.5-43.9-.4-8.3-1.7-16.5-2.7-24.9h91.8c-1.1 6.6-2.6 13-3.3 19.4-1.4 13-3.2 26-3.3 39.1-.5 57.7-.4 115.4-.6 173.1v3c18.1-1 36-2 54.1-3.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); display: inline-block; width: 2em; height: 1em; margin-left: .2em; vertical-align: text-top; } .PremiumIcon--element { height: 30px; display: block; text-align: center; z-index: 1; font-size: 3em; } .VideoExtras .PremiumIcon::after { vertical-align: top; width: 2.5em; height: 1.4em; margin-left: .5em; } .Poll .PremiumIcon--element { position: absolute; top: 0; left: 2.25%; width: 100%; height: 100%; z-index: -1; } .Poll .PremiumIcon--element::after { width: 4%; height: auto; position: absolute; top: 50%; margin-top: -0.85em; left: 55.5%; } /* Unfortunately, this particular CSS module encompasses another module that has this icon nested inside of it and this was the only way i could think of to ensure targeting only the one in the menu and not the grandchildren */ .PrimaryNav .PrimaryNav-item > .PremiumIcon:after { vertical-align: middle; width: 2em; height: 3.25em; margin-left: .5em; margin-top: 2px; } .SecondaryNav .PremiumIcon::after { width: 1.75em; height: 1.5em; margin-left: 5px; vertical-align: middle; } .PollOption .PremiumIcon::after { height: 1em; width: 1.95em; vertical-align: bottom; } .Button-register .PremiumIcon { font-size: 1.3em; vertical-align: middle; } .FeaturedVideos-item .FeaturedVideos-title.PremiumIcon:after { width: 1.5em; vertical-align: bottom; } .ContentStream-item .VideoItem-info > .PremiumIcon:after { width: 1.5em; vertical-align: text-bottom; } .Hero .PremiumIcon::after { width: 1em; vertical-align: bottom; } .NavCarousel-itemHeading.PremiumIcon { padding-right: 2.1em; } .NavCarousel-itemHeading.PremiumIcon::after { margin-left: 0; position: absolute; right: 0; } .VideoItem .PremiumIcon .VideoItem-title { width: 245px; display: inline-block; vertical-align: middle; } .EpisodeList-episodeTitle.PremiumIcon::after { width: 1.8em; margin-left: .5em; vertical-align: top; } .SeriesInfo-heading.PremiumIcon::after { width: 1.5em; vertical-align: middle; } .SeriesInfo-marketingHeaderAccent .PremiumIcon::after { width: 1.65em; height: 1.125em; vertical-align: middle; } /* ****** Screen Junkies Specific Skins */ .Navigation:before, .PrimaryNav-item-content:before, .AppsNav-Buttons:before, .UpgradeOffer:before, .Navigation:after, .PrimaryNav-item-content:after, .AppsNav-Buttons:after, .UpgradeOffer:after { content: '\0020'; display: block; height: 0; overflow: hidden; } .Navigation:after, .PrimaryNav-item-content:after, .AppsNav-Buttons:after, .UpgradeOffer:after { clear: both; } .PrimaryNav-item-content, .SecondaryNav-links { opacity: 0; overflow: hidden; max-height: 0; transition: opacity 0s linear 0s, max-height 0s linear 0s; } .PrimaryNav-item:hover .PrimaryNav-item-content, .SecondaryNav-item:hover .SecondaryNav-links { opacity: 1; max-height: 9999%; transition: opacity 0.3s linear 0.4s, max-height 0s linear 0.4s; } .Navigation { background: #151b1f; box-sizing: border-box; font-size: 1rem; position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100%; min-width: 800px; height: 70px; z-index: 100; } .Navigation > .Logo, .Navigation > .Back { display: block; float: left; margin: 12px 0 0 34px; padding: 0; width: 87px; height: 47px; } .Navigation > .Logo > svg, .Navigation > .Back > svg { width: 100%; height: 100%; } .Navigation--minimal > .Back { width: 20px; } .PrimaryNav { display: block; float: left; height: 100%; } .PrimaryNav-list { display: block; list-style-type: none; margin: 0; padding: 0; height: 100%; } .PrimaryNav-item { box-sizing: border-box; color: white; display: inline-block; font-size: 1.3em; font-weight: 600; line-height: 70px; margin: 0 0 0 25px; padding: 0 10px; height: 100%; text-align: center; } .PrimaryNav-item > button, .PrimaryNav-link { background: transparent; border: 0; color: white; margin: 0; padding: 0; outline: 0; } .PrimaryNav-item:hover > button, .PrimaryNav-item:hover .PrimaryNav-link { color: #f46430; } .PrimaryNav-item:first-child { margin: 0 0 0 40px; } .PrimaryNav-item-content { background: #333333; box-sizing: border-box; display: block; position: absolute; top: 100%; left: 0; width: 100%; } .SecondaryNav { display: block; float: right; margin: 0 14px 0 0; text-align: right; height: 100%; } .SecondaryNav-item { display: inline-block; position: relative; height: 100%; vertical-align: top; } .SecondaryNav-item:hover .SecondaryNav-links { padding: 22px 40px 35px 40px; } .SecondaryNav-btn { background: transparent; border: 0; color: white; cursor: pointer; display: block; outline: 0; margin: 0; padding: 20px; text-align: center; vertical-align: top; } .SecondaryNav-btn > svg { width: 24px; height: 24px; } .SecondaryNav-btn--user { padding: 20px 10px 20px 20px; } .SecondaryNav-btn--more { padding: 20px 20px 20px 10px; } .SecondaryNav-item--loggedin:hover { background: #0e1114; transition: 0.3s 0.4s; } .SecondaryNav-item--loggedin .SecondaryNav-btn--user { background: #0e1114; border-radius: 4px; cursor: pointer; margin-top: 14px; padding: 8px 14px 8px 8px; height: 40px; line-height: 24px; } .SecondaryNav-item--loggedin .SecondaryNav-btn--user > svg { background: #151b1f; border-radius: 2px; margin-right: 14px; padding: 5px; vertical-align: middle; } .SecondaryNav-links { background: #0e1114; border-radius: 0 0 4px 4px; display: block; list-style-type: none; margin: 0; padding: 0; position: absolute; top: 100%; right: 0; } .SecondaryNav-links--anonymous { display: none; } .SecondaryNav-link { display: block; font-size: 0.9em; font-weight: 600; margin: 18px 0 0 0; padding: 0; text-align: left; white-space: nowrap; } .SecondaryNav-link > a { color: white; text-decoration: none; } .SecondaryNav-link > a:hover { color: #f46430; } .SecondaryNav-link > button { background: transparent; border: 0; color: white; padding: 0; } .SecondaryNav-link > button:hover { color: #f46430; } .SecondaryNav-link--highlight, .SecondaryNav-link--highlight > a { color: #6fc3de; font-size: 1em; } .SecondaryNav-link--hidden { display: none; } .SecondaryNav-copyright { color: gray; display: block; font-size: 0.9em; font-weight: 600; margin-top: 30px; text-align: left; white-space: nowrap; } /**** Styles for the Premium Content flyout from main navigation. */ .PremiumNav { background: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); } .PremiumNav-callToAction { display: block; margin: 0; width: 100%; min-width: 1200px; } .PremiumNav-callToAction > img { display: block; width: 100%; } .AppsNav { background: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); padding: 32px 100px 17px 100px; text-align: center; font-size: 1rem; } .AppsNav-heading { font-size: 3.3em; margin-top: 0; padding-top: 0; } .AppsNav-Buttons { display: block; list-style-type: none; margin: 0 auto; padding: 0; } .AppsNav-Button { position: relative; display: inline-block; } .AppsNav-ButtonImage { display: inline-block; background: url(/content/platform/screen-junkies/img/apps-spr.png) no-repeat; width: 159px; height: 47px; } .AppsNav-Button--playstore .AppsNav-ButtonImage { width: 133px; background-position: 0 -52px; } /* !WARNING - DO NOT MAKES CHANGES TO THE CSS FILE, THIS IS A SASS GENERATED FILE */ /* =============================================================== SCREEN JUNKIES SHOWSNAV STYLES ================================================================ */ /* ===[ IMPORTS ]=== */ /**** Assign Variables Here */ .ShowsNav { min-height: 600px; padding: 2em 0; background: url("/Content/Platform/screen-junkies/img/sj-tiling-logo-bg-dark.png"); } .ShowsNav-heading { margin-top: 0; font-size: 45px; } .ShowsNav-headingLogo { display: inline-block; width: 195px; height: 105px; vertical-align: middle; } /* !WARNING - DO NOT MAKES CHANGES TO THE CSS FILE, THIS IS A SASS GENERATED FILE */ /* =============================================================== SCREEN JUNKIES NAVIGATION CAROUSEL STYLES ================================================================ */ /* ===[ IMPORTS ]=== */ /**** Assign Variables Here */ /* ===[ LOCAL VARIABLES ]=== */ .NavCarousel { position: relative; width: 1100px; margin: 0 auto; font-size: 1rem; } .NavCarousel-pane { position: relative; width: auto; height: 374px; margin: 0 auto; overflow: hidden; } .NavCarousel-items { position: absolute; top: 0; left: 0; } .NavCarousel-item { min-width: 275px; width: 275px; float: left; padding: 0 10px; text-align: left; line-height: 1.125em; } .NavCarousel-itemContainer { min-height: 374px; padding: 20px; background-color: #1A2024; border-radius: 4px; overflow: hidden; } .NavCarousel-itemHeader { position: relative; height: 144px; margin: -20px; margin-bottom: 4em; background-repeat: no-repeat; background-size: cover; } .NavCarousel-itemHeading { position: absolute; bottom: -3em; left: 20px; width: 215px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.375em; line-height: 1.1; } .NavCarousel-itemDesc { font-size: 0.875em; position: relative; overflow: hidden; height: 3.6em; } .NavCarousel-itemDesc::after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 50%; height: 1.2em; background: linear-gradient(to right, rgba(26, 32, 36, 0), #1a2024 50%); } @supports (-webkit-line-clamp: 3) { .NavCarousel-itemDesc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 3.6em; height: 3.6em; } .NavCarousel-itemDesc::after { display: none; } } .NavCarousel-itemFooter { margin-top: .85em; font-size: 0.8125em; } .NavCarousel-loginContainer { display: block; text-align: center; } /* !WARNING - DO NOT MAKES CHANGES TO THE CSS FILE, THIS IS A SASS GENERATED FILE */ /* =============================================================== SCREEN JUNKIES NAVIGATION CAROUSEL CONTROL STYLES ================================================================ */ /* ===[ IMPORTS ]=== */ /**** Assign Variables Here */ /* ===[ LOCAL VARIABLES ]=== */ .NavCarouselControl { display: block; width: 34px; height: 140px; margin: -70px 0 0 0; position: absolute; top: 50%; background-color: transparent; background-repeat: no-repeat; border: none; cursor: pointer; outline: 0; text-indent: -9999em; z-index: 20; } .NavCarouselControl::before { content: ' '; opacity: 1; overflow: hidden; position: absolute; top: -117px; width: 100px; height: 374px; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .NavCarouselControl::after { content: ' '; position: absolute; top: 0; left: 0; width: 34px; height: 140px; background-image: url(/Content/Platform/screen-junkies/img/sj-arrow-carousel-control.png); background-color: rgba(255, 255, 255, 0.5); background-repeat: no-repeat; cursor: pointer; opacity: 0; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .NavCarouselControl.disabled, .NavCarouselControl.disabled::before, .NavCarouselControl.disabled::after { -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; display: none; opacity: 0; visibility: hidden; } .NavCarouselControl--previous { left: -24px; } .NavCarouselControl--previous::before { background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); left: 34px; } .NavCarouselControl--previous::after { -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } .NavCarouselControl--next { right: -24px; } .NavCarouselControl--next::before { background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); right: 34px; } .NavCarouselControl--next::after { background-position: right top; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; } .NavCarousel--firstPage .NavCarouselControl--previous, .NavCarousel--lastPage .NavCarouselControl--next { opacity: 0; } .NavCarousel--firstAndOnlyPage .NavCarouselControl { opacity: 0; } .NavCarousel:hover .NavCarouselControl::before { opacity: 0; width: 0; } .NavCarousel:hover .NavCarouselControl::after { opacity: 1; z-index: 30; } .NavCarousel:hover .NavCarouselControl:disabled { opacity: 0; } .UpgradeOffer { box-sizing: border-box; width: 820px; } .UpgradeOffer-info { float: left; margin: 35px 0 15px 35px; text-align: left; width: 260px; } .UpgradeOffer-info > h2 { margin: 0 0 35px 0; } .UpgradeOffer-info > p { color: gray; width: 85%; font-size: 16px; font-size: 1rem; } .UpgradeOffer-options { background: white; float: right; margin: 35px 75px 15px 0; padding: 20px; text-align: left; width: 420px; font-size: 26px; font-size: 1.625rem; } .UpgradeOffer-description { padding-left: 30px; margin-bottom: 35px; } .UpgradeOffer-description > p, .UpgradeOffer-description > span, .UpgradeOffer-description > small { color: gray; display: block; margin: 0; font-size: 16px; font-size: 1rem; } .UpgradeOffer-description > span { margin: 6px 0 0 0; font-size: 12px; font-size: 0.75rem; } .UpgradeOffer-description > small { margin: 6px 0 0 0; font-size: 9px; font-size: 0.5625rem; } .UpgradeOffer-image { display: inline-block; float: right; margin-right: -75px; } .UpgradeOffer-button { background: #f46430; border: 0; box-sizing: border-box; color: white; outline: 0; padding: 20px 0; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; font-size: 26px; font-size: 1.625rem; } .UpgradeOffer-button[disabled] { background: #aaaaaa; } /* ****** Files that did not follow the architecture */ /* ************************************************************************************ To use, simply start with this basic markup:
The minimum javascript to show the modal is to bind a click handler to the element you want to trigger opening the modal and dialog; this function just needs to add css class "show" to the .Modal element (this element should have a class like "js-your-modal"). To close the modal and dialog, bind a click handler to the Modal-close element (which should have a class like "js-modal-close"). This handler will simply remove the "show" class. ************************************************************************************ */ .Modal { background: rgba(0, 0, 0, 0.6); display: block; position: fixed; top: 0; left: 0; opacity: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 0; z-index: 100; transition: opacity .3s 0s, height 0s .3s; } .Modal.show { height: 100%; opacity: 1; transition: opacity .3s 0s; } .Modal.show .ModalDialog { opacity: 1; margin-top: 50px; } .ModalDialog { background: #FFF; margin: 30px auto 0 auto; opacity: 0; position: relative; max-width: 600px; min-width: 300px; width: 50%; transition: opacity .3s .1s, margin .3s ease-in-out .1s; } .Modal-close { cursor: pointer; display: block; position: absolute; } /**** Bring in the basic Modal styles */ /* ************************************************************************************ To use, simply start with this basic markup:
The minimum javascript to show the modal is to bind a click handler to the element you want to trigger opening the modal and dialog; this function just needs to add css class "show" to the .Modal element (this element should have a class like "js-your-modal"). To close the modal and dialog, bind a click handler to the Modal-close element (which should have a class like "js-modal-close"). This handler will simply remove the "show" class. ************************************************************************************ */ .Modal { background: rgba(0, 0, 0, 0.6); display: block; position: fixed; top: 0; left: 0; opacity: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 0; z-index: 100; transition: opacity .3s 0s, height 0s .3s; } .Modal.show { height: 100%; opacity: 1; transition: opacity .3s 0s; } .Modal.show .ModalDialog { opacity: 1; margin-top: 50px; } .ModalDialog { background: #FFF; margin: 30px auto 0 auto; opacity: 0; position: relative; max-width: 600px; min-width: 300px; width: 50%; transition: opacity .3s .1s, margin .3s ease-in-out .1s; } .Modal-close { cursor: pointer; display: block; position: absolute; } /**** Import individual Modal basic styles */ /* ====[ Registration Confirmation Modal styles ]==== */ /**** local variables */ /**** modal styles */ .RegisterConfirm { text-align: left; } .RegisterConfirm-result--error { color: red; text-transform: capitalize; } .RegisterConfirm-result--success { color: green; text-transform: capitalize; } .LoginModal { background: rgba(0, 0, 0, 0.6); display: block; position: fixed; top: 0; left: 0; opacity: 0; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 0; z-index: 100; transition: opacity .3s 0s, height 0s .3s; } .LoginModal-dialog { background: #FFF; display: none; margin: 30px auto 0 auto; opacity: 0; position: relative; max-width: 600px; min-width: 300px; width: 50%; transition: opacity .3s .1s; } .LoginModal-dialog .LoginModal-panel--hidden { display: none; } .LoginModal-label { display: block; margin: 20px 0 6px 0; } .LoginModal-input { display: block; padding: 6px; } .LoginModal-title { margin: 0; padding: 0; } .LoginModal-submit, .LoginModal-cancel { margin-top: 20px; } .LoginModal-messages { display: none; margin-top: 15px; border-radius: 4px; color: white; box-sizing: border-box; margin: 8px 0 15px 0; padding: 10px; text-align: center; width: 100%; } .LoginModal-messages--success { background: #13a535; display: block; } .LoginModal-messages--error { background: #ff4a4a; display: block; } .LoginModal--show { height: 100%; opacity: 1; transition: opacity .3s 0s; } .LoginModal--show .LoginModal-dialog { display: block; opacity: 1; margin-top: 50px; } /* ====[ Screen Junkies skin variables for Modals ]==== */ /**** General Screen Junkies skin overrides for Modals */ .Modal-close { right: 20px; top: 20px; } .Modal-close > svg { height: 16px; width: 16px; } .ModalDialog { background: #F4F0ED; border-radius: 4px; font-size: 1rem; width: 480px; /*&-input { border-radius: $SJ_BORDER_RADIUS; // Turn off default form input border; border-width: 0; font-size: 1.2em; margin-bottom: 15px; padding: $MODAL_SPACING/2 15px $MODAL_SPACING/2 50px; // So we can position any pseudo elements (i.e. icons). position: relative; width: 100%; } // Inputs with icons. input[type="email"], input[type="password"] { // Using bg image b/c can't use pseudo elements on form inputs. // http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field#answer-4660434 background-image: dfy-svg-url(''); // 15 px from left edge per design mock. background-position: 15px center; background-repeat: no-repeat; // Scale the svg image to fit the space. background-size: 26px; } // Slight overrides for the lock icon. input[type="password"] { background-image: dfy-svg-url(''); background-size: 26px; }*/ } /**** Login overrides */ .LoginModal { /* .Button-fblogin { @extend %BUTTON; background: linear-gradient(90deg, #3B55A0, #354D90); display: block; margin-bottom: 20px; // Position so we can position pseudo elements. position: relative; width: 100%; &::before { background-image: dfy-svg-url(''); background-repeat: no-repeat; content: ""; display: inline-block; // Size to match design mock. height: 17px; width: 17px; // Use positioning to line up this pseudo element with the button text. position: relative; top: 3px; left: -3px; } }*/ } .LoginModal-title { background: white; border-radius: 4px 4px 0 0; font-size: 1.55em; padding: 15px 20px; } .LoginModal-contents { color: #AAA; padding: 20px 15px; } .LoginModal-instructions { color: #0e1114; font-size: 1.05em; margin: 0; } .LoginModal-label { font-size: 1.16em; } .LoginModal .Button-textlink { background: none; border: 0; color: #6fc3de; margin-right: 10px; } .LoginModal .Button-textlink:hover { color: #38AACF; } .LoginModal-buttons { padding-top: 10px; text-align: right; } .LoginModal-backButton { float: left; margin-top: 10px; } .LoginModal .Button-register { -webkit-appearance: none; font-size: 1.0625em; border-radius: 0 0 4px 4px; display: block; text-align: center; color: white; padding: 18px 15px; background: linear-gradient(90deg, #f46430, #dc5a2b); background-color: #DC5A2B; } .LoginModal .Button-register:hover { background: linear-gradient(90deg, #ea5a26, #d35122); background-color: #D35122; } .LoginModal-emaillogin { font-size: .8em; display: block; margin: 0 0 15px; }