/*doc --- categories: Variables title: Locale Variables name: 00_localevarsintro --- Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic. ## Example Here are a couple examples of how you can use the locale variables in your code. ### Basic Usage ```sass_example .i18n-ja_JP { background-color: #f00; } ``` ```css_example .i18n-jp { background-color: #f00; } ``` ### Parent selector usage ```sass_example .someclass { color: red; .i18n-ja_JP & { color: purple; } } ``` ```css_example .someclass { color: red; } .i18n-jp .someclass { color: purple; } ``` ## Let's talk about CSS specificity As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package. **YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things. When writing Sass, keep asking yourself this question: > What will this selector look like when it is rendered in plain CSS? If you start seeing a lot of nesting ask yourself: > Can this become less specfiic without messing up styles downstream? If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables. */ /*doc --- categories: Variables title: All available locale variables name: 02_localevarexample parent: 00_localevarsintro --- Here are all the variables that are currently available ```sass_example // Super regions $region-na: superregion-north-america; $region-eu: superregion-europe; $region-apac: superregion-apac; $region-me: superregion-middle-east; // North America $locale-canada_english: i18n-en_CA; // en_CA $locale-canada_french: i18n-fr_CA; // fr_CA $locale-mexico_spanish: i18n-es_MX; // es_MX $locale_us: i18n-en; // US // Europe $locale-belgium_french: i18n-fr_BE; // fr_BE $locale-belgium_dutch: i18n-nl_BE; // nl_BE $locale-denmark: i18n-da; // da_DK $locale-germany: i18n-de; // de_DE $locale-france: i18n-fr; // fr_FR $locale-great_britain: i18n-en_GB; // en_GB $locale-italy: i18n-it; // it_IT $locale-ireland: i18n-en_IE; // en_IE $locale-netherlands: i18n-nl; // nl_NL $locale-norway: i18n-no; // no_NO $locale-austria: i18n-de_AT; // de_AT $locale-switzerland_german: i18n-de_CH; // de_CH $locale-switzerland_french: i18n-fr_CH; // fr_CH $locale-switzerland_italian: i18n-it_CH; // it_CH $locale-sweden: i18n-sv_SE; // sv_SE $locale-other_europe: i18n-en_EU; // en_EU $locale-finland: i18n-fi_FI; // fi_FI $locale-luxembourg_french: i18n-fr_LU; // fr_LU $locale-luxembourg_german: i18n-de_LU; // de_LU $locale-portugal: i18n-pt_PT; // pt_PT $locale-spain: i18n-es_ES; // es_ES // Asia-Pacific $locale-australia: i18n-en_AU; // en_AU $locale-china: i18n-zh_CN; // zh_CN $locale-hongkong: i18n-en_HK; // en_HK $locale-hongkong_chinese: i18n-zh_HK; // zh_HK $locale-macau: i18n-en_MO; // en_MO $locale-macau_chinese: i18n-zh_MO; // zh_MO $locale-japan: i18n-ja_JP; // Japan $locale-new_zealand: i18n-en_NZ; // en_NZ $locale-taiwan: i18n-zh_TW; // zh_TW $locale-south_korea: i18n-ko_KR; // ko_KR // Middle-East $locale-jordan_english: i18n-en_JO; // en_JO $locale-jordan_arabic: i18n-ar_JO; // ar_JO $locale-uae_english: i18n-en_AE; // en_AE $locale-uae_arabic: i18n-ar_AE; // ar_AE // Africa $locale-south_africa: i18n-en_ZA; // not in Drupal language list default ``` */ /*doc --- title: Introduction category: Colors name: 00_colors --- The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature. An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work. */ /*doc --- title: Primary Colors category: Colors name: 01_colors ---
$tesla-primary
$tesla-active
$tesla-transactional
*/ /*doc --- title: Grey Scale Colors category: Colors name: 02_colors ---
$black
$grey-1
$grey-2
$grey-3
$grey-4
$grey-6
$grey-8
$grey-9
$grey-a
$grey-b
$grey-c
$grey-d
$grey-e
$white
*/ /*doc --- title: Background Colors category: Colors name: 03_colors ---
$grey-background-color
$grey-background-color-light
$grey-background-color-lightest
$grey-background-color-even-lighterest
*/ /*doc --- title: Extra Colors category: Colors name: 04_colors ---
$border-footer
$form-label-color
$border-content
*/ /*doc --- title: Base "T-shirt" Sizes category: Variables for Sizing name: 00_intro --- These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added. ```sass_example $tsla-size--xsmall: 10px !default; $tsla-size--small: 20px !default; $tsla-size--medium: 30px !default; $tsla-size--large: 40px !default; $tsla-size--xlarge: 50px !default; $tsla-size--xxlarge: 60px !default; $tsla-size--jumbo: 70px !default; ``` */ /*doc --- title: Media Queries name: 00_mediaqueries category: Layout --- When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens. Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system. */ /*doc --- title: Available Media Queries category: Layout name: 01_mediaqueries --- We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.
Variable Name Value Sample Devices Type
Note: All of tesla.com is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
$mobile-only 0-639px
  • HTC One, Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
Legacy
$small-desktop-only 640px-940px
  • Small screens only (640px - 960px)
Legacy
$small-desktop 640px+
  • Small devices (640px+)
Legacy
$large-desktop 960px+
  • Large desktop screens (960px+)
Legacy
$mobile-phone-only 0-736px
  • HTC One (639px)
  • Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
  • iPhone 6 (667px)
  • iPhone 6+ (736px)
New
$tablet-only 601-1280px
  • iPad (768px - 1024px)
  • Galaxy (800px - 1280px)
  • Nexus (601px - 906px)
  • Kindle (800px - 1280px)
New
$large-devices 1200px+
  • gigantic screens?
New
*/ /*doc --- title: Transitions name: Transitions category: Animations --- When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users. Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition: 1. `.{custom}-enter` 2. `.{custom}-enter-active` 3. `.{custom}-leave` 4. `.{custom}-leave-active` - [ReactJS Animation](https://facebook.github.io/react/docs/animation.html) - [AngularJS Animation](https://docs.angularjs.org/guide/animations) ## Default Animations The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations: 1. Animated element starts off with opacity: 0.01, 2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function, 3. when leaving the DOM the element starts with opacity: 1, 4. and transitions to opacity: 0.01 in its leave-active state with 300ms transition on all properties with no transition timing function. ```sass_example @include enter-leave-animation-default(ng) ``` The above sass @include example produces the following css: ```sass_example .ng-enter { opacity: 0.01; } .ng-enter.ng-enter-active { opacity: 1; -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } .ng-leave { opacity: 1; } .ng-leave.ng-leave-active { opacity: 0.01; -webkit-transition: opacity 300ms ease-in; -moz-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } ``` The included mixin in use: ```sass_example @mixin enter-leave-animation-default($classname: general) { @include enter-animation($classname) @include enter-active-animation($classname, opacity, 500ms, ease-in) @include leave-animation($classname) @include leave-active-animation($classname, opacity, 300ms, ease-in) } ``` ## Custom Variations We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one: ```sass_example @include enter-animation(ng) @include enter-active-animation(ng, opacity, 500ms, ease-in) @include leave-animation(ng) @include leave-active-animation(ng, opacity, 300ms, ease-in) ``` The parameters passed are: 1. `$classname` - Optional. Defaults to "general" 2. `$property` - Optional. Defaults to "all" 3. `$duration` - Optional. Defaults to "500ms" 4. `$function` - Optional. Defaults to "false" Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows: ```sass_example @include enter-animation(general) { width: 100%; } @include enter-active-animation(general, width, 2s, ease-in) { width: 50%; } ``` The above mixin will produce the following css: ```sass_example .general-enter { width: 100%; } .general-enter.general-enter-active { width: 50%; -webkit-transition: width 2s ease-in; -moz-transition: width 2s ease-in; -o-transition: width 2s ease-in; transition: width 2s ease-in; } ``` */ .btn-navigate { background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); } #system_messages { background-color: #fafafa; } #system_messages ul.tabs:before, #system_messages ul.tabs:after { content: ""; display: table; } #system_messages ul.tabs:after { clear: both; } #system_messages ul.tabs li { float: left; margin-right: 20px; padding: 10px 0; display: inline-block; } #system_messages ul.tabs a { color: #333; } #system_messages .panel-pane { font-size: 14px; font-size: 0.875rem; } #second-nav { display: inline-block; vertical-align: top; font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-weight: 400; } #second-nav .nav-block { margin-top: 3px; } #second-nav .nav-block:before, #second-nav .nav-block:after { content: ""; display: table; } #second-nav .nav-block:after { clear: both; } #second-nav .nav-block li { list-style-image: none; list-style-type: none; float: left; margin-right: 15px; } #second-nav .nav-block li a { font-size: 13px; line-height: 20px; font-size: 0.8125rem; line-height: 1.25rem; color: #333; } #second-nav .nav-block li a:hover { color: #c00; } #second-nav .nav-block li.nav-selected .nav-link { opacity: .5; } #second-nav .nav-block li:last-child, #second-nav .nav-block li.last { margin-right: 0; } .section-sub-nav { position: relative; } .section-sub-nav:before, .section-sub-nav:after { content: ""; display: table; } .section-sub-nav:after { clear: both; } .section-sub-nav .container { position: relative; } .page-models-preowned .section-sub-nav .container .sub-nav { margin-right: 20px; margin-right: 1.25rem; } .tsla-header-transparent .section-sub-nav, .tsla-header-semitransparent .section-sub-nav { margin-top: 96px; margin-top: 6rem; } .section-sub-nav .section-title { font-family: Gotham Light, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 30px; font-size: 1.875rem; margin-bottom: 35px; margin-bottom: 2.1875rem; padding-bottom: 25px; padding-bottom: 1.5625rem; padding-top: 0; position: relative; top: 0; border-bottom: 1px solid #ccc; color: #000; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav .section-title { font-size: 24px; font-size: 1.5rem; border-bottom: 0; } } .section-sub-nav .section-title a { color: #000; } .section-sub-nav .sub-nav { top: 9px; top: 0.5625rem; right: 20px; right: 1.25rem; position: absolute; clear: both; } .section-sub-nav .sub-nav .nav-item { display: block; float: left; margin: 0 0 0 20px; margin: 0 0 0 1.25rem; } .section-sub-nav .sub-nav .nav-item:first-child { margin-left: 0; } .section-sub-nav .sub-nav .nav-selected .nav-link { opacity: .5; } .section-sub-nav .sub-nav .nav-selected .nav-item { display: block; float: left; margin: 0 0 0 20px; margin: 0 0 0 1.25rem; } .section-sub-nav .sub-nav .nav-selected .nav-item:first-child { margin-left: 0; } .section-sub-nav .sub-nav .nav-link { font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 13px; font-size: 0.8125rem; color: #333; } .section-sub-nav .sub-nav .btn-order { color: #fff; font-size: 8px; font-size: 0.5rem; } .i18n-zh_CN .section-sub-nav .sub-nav .btn-order { font-size: 13px; font-size: 0.8125rem; position: relative; top: -2px; padding: 6px 12px 5px; padding: 0.375rem 0.75rem 0.3125rem; } .section-sub-nav .separator-before { padding-left: 20px; padding-left: 1.25rem; border-left: 1px solid rgba(51, 51, 51, 0.5); } .section-sub-nav .separator-after { padding-right: 20px; padding-right: 1.25rem; border-right: 1px solid rgba(51, 51, 51, 0.5); } .alternative .section-sub-nav .section-title, .section-sub-nav.alternative .section-title { border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: #fff; } .alternative .section-sub-nav .section-title a, .section-sub-nav.alternative .section-title a { color: #fff; } .alternative .section-sub-nav .nav-link, .section-sub-nav.alternative .nav-link { color: #fff; transition: color 0.1s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .alternative .section-sub-nav .nav-link:hover, .section-sub-nav.alternative .nav-link:hover { color: #ccc; transition: color 0.1s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .alternative .section-sub-nav .sub-nav a, .section-sub-nav.alternative .sub-nav a { color: #fff; } .alternative .section-sub-nav .separator-before, .section-sub-nav.alternative .separator-before { border-left-color: rgba(255, 255, 255, 0.5); } .alternative .section-sub-nav .separator-after, .section-sub-nav.alternative .separator-after { border-right-color: rgba(255, 255, 255, 0.5); } .no-keyline .section-sub-nav .section-title, .section-sub-nav.no-keyline .section-title { border-bottom: none; margin-bottom: 0; } .nav-left { float: left; } .nav-right { float: right; } .nav-centered { text-align: center; overflow: hidden; display: block; margin: auto; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav .sub-nav { display: none; } } @media (min-width: 640px) { .nav_search { width: 65.85366%; float: right; margin-right: 0; text-align: right; margin-top: 5px; margin-bottom: 17px; } .expanded-search .nav_search { float: right; text-align: right; width: auto; } } main .nav_search { display: none; } @media (min-width: 640px) { main .nav_search { display: inline; } main .nav_search .nav-left { float: left; } main .nav_search .nav-right { float: right; } } .nav-sticky { width: 100%; max-width: 1440px; position: absolute; top: -1px; } .nav-sticky.nav-animate { transition: top 0.5s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .nav-sticky.nav-animate.is-stuck, .nav-sticky.nav-animate.nav-animate-away { transition: top 0.5s linear; -webkit-transform: translateZ(0); transform: translateZ(0); } .nav-sticky.is-stuck, .nav-sticky.nav-animate-away { width: 100%; max-width: 1440px; position: fixed; z-index: 10; } .nav-sticky.nav-animate-away { top: -100px; } .section-sub-nav .nav-sticky .sub-nav { top: 21px; top: 1.3125rem; } .nav-pill { text-align: center; } .nav-pill .nav-block { border-radius: 100px; border: 1px solid #ddd; overflow: hidden; display: inline-block; margin-bottom: 16px; margin-bottom: 1rem; } .lt-ie9 .nav-pill .nav-block { border: 1px solid #ddd; } .nav-pill .nav-link { width: 175px; width: 10.9375rem; padding: 16px 0; padding: 1rem 0; font-size: 18px; font-size: 1.125rem; font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-weight: 100; display: block; color: #000; cursor: pointer; } .nav-pill .nav-selected { background-color: #f2f2f2; color: #000; } .nav-pill .nav-item { margin: 0; border-left: 1px solid #ccc; } .nav-pill .nav-item:first-child { border-left: 0; } @media (min-width: 0) and (max-width: 639px) { .section-sub-nav { margin-top: 33px; margin-top: 2.0625rem; } .section-sub-nav .sub-nav { display: none; } .section-sub-nav .section-title { margin-bottom: 27px; margin-bottom: 1.6875rem; } .page-about .section-sub-nav .section-title { padding-bottom: 18px; padding-bottom: 1.125rem; } .page-about-legal .section-sub-nav .section-title { padding-bottom: 22px; padding-bottom: 1.375rem; } .page-careers .section-sub-nav .section-title { margin-bottom: 31px; margin-bottom: 1.9375rem; } .header-transparent .section-sub-nav, .header-semitransparent .section-sub-nav { margin-top: 83px; margin-top: 5.1875rem; } } @media (min-width: 640px) { .nav_search { float: right; margin-top: 5px; margin-top: 0.3125rem; margin-bottom: 17px; margin-bottom: 1.0625rem; float: right; text-align: right; } main .nav_search { display: inline; } } /*doc --- categories: Variables title: Locale Variables name: 00_localevarsintro --- Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic. ## Example Here are a couple examples of how you can use the locale variables in your code. ### Basic Usage ```sass_example .i18n-ja_JP { background-color: #f00; } ``` ```css_example .i18n-jp { background-color: #f00; } ``` ### Parent selector usage ```sass_example .someclass { color: red; .i18n-ja_JP & { color: purple; } } ``` ```css_example .someclass { color: red; } .i18n-jp .someclass { color: purple; } ``` ## Let's talk about CSS specificity As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package. **YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things. When writing Sass, keep asking yourself this question: > What will this selector look like when it is rendered in plain CSS? If you start seeing a lot of nesting ask yourself: > Can this become less specfiic without messing up styles downstream? If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables. */ /*doc --- categories: Variables title: All available locale variables name: 02_localevarexample parent: 00_localevarsintro --- Here are all the variables that are currently available ```sass_example // Super regions $region-na: superregion-north-america; $region-eu: superregion-europe; $region-apac: superregion-apac; $region-me: superregion-middle-east; // North America $locale-canada_english: i18n-en_CA; // en_CA $locale-canada_french: i18n-fr_CA; // fr_CA $locale-mexico_spanish: i18n-es_MX; // es_MX $locale_us: i18n-en; // US // Europe $locale-belgium_french: i18n-fr_BE; // fr_BE $locale-belgium_dutch: i18n-nl_BE; // nl_BE $locale-denmark: i18n-da; // da_DK $locale-germany: i18n-de; // de_DE $locale-france: i18n-fr; // fr_FR $locale-great_britain: i18n-en_GB; // en_GB $locale-italy: i18n-it; // it_IT $locale-ireland: i18n-en_IE; // en_IE $locale-netherlands: i18n-nl; // nl_NL $locale-norway: i18n-no; // no_NO $locale-austria: i18n-de_AT; // de_AT $locale-switzerland_german: i18n-de_CH; // de_CH $locale-switzerland_french: i18n-fr_CH; // fr_CH $locale-switzerland_italian: i18n-it_CH; // it_CH $locale-sweden: i18n-sv_SE; // sv_SE $locale-other_europe: i18n-en_EU; // en_EU $locale-finland: i18n-fi_FI; // fi_FI $locale-luxembourg_french: i18n-fr_LU; // fr_LU $locale-luxembourg_german: i18n-de_LU; // de_LU $locale-portugal: i18n-pt_PT; // pt_PT $locale-spain: i18n-es_ES; // es_ES // Asia-Pacific $locale-australia: i18n-en_AU; // en_AU $locale-china: i18n-zh_CN; // zh_CN $locale-hongkong: i18n-en_HK; // en_HK $locale-hongkong_chinese: i18n-zh_HK; // zh_HK $locale-macau: i18n-en_MO; // en_MO $locale-macau_chinese: i18n-zh_MO; // zh_MO $locale-japan: i18n-ja_JP; // Japan $locale-new_zealand: i18n-en_NZ; // en_NZ $locale-taiwan: i18n-zh_TW; // zh_TW $locale-south_korea: i18n-ko_KR; // ko_KR // Middle-East $locale-jordan_english: i18n-en_JO; // en_JO $locale-jordan_arabic: i18n-ar_JO; // ar_JO $locale-uae_english: i18n-en_AE; // en_AE $locale-uae_arabic: i18n-ar_AE; // ar_AE // Africa $locale-south_africa: i18n-en_ZA; // not in Drupal language list default ``` */ /*doc --- title: Introduction category: Colors name: 00_colors --- The colors represented below are considered approved for usage throughout the website. All of these variables can be overridden on a situational basis because they all have `!default` appended to it. This means that you can continue to use the color variables by name as listed here, but update their value to whatever you'd like for your feature. An example of this would be the [/energy](https://www.tesla.com/energy) section of tesla.com. They are using a different color blue than the `$tesla-transactional` as listed below. The team is able use the correct color for blue but still use the correct variable. This makes it easy to update the colors across the system easily and simply without a lot of extra work. */ /*doc --- title: Primary Colors category: Colors name: 01_colors ---
$tesla-primary
$tesla-active
$tesla-transactional
*/ /*doc --- title: Grey Scale Colors category: Colors name: 02_colors ---
$black
$grey-1
$grey-2
$grey-3
$grey-4
$grey-6
$grey-8
$grey-9
$grey-a
$grey-b
$grey-c
$grey-d
$grey-e
$white
*/ /*doc --- title: Background Colors category: Colors name: 03_colors ---
$grey-background-color
$grey-background-color-light
$grey-background-color-lightest
$grey-background-color-even-lighterest
*/ /*doc --- title: Extra Colors category: Colors name: 04_colors ---
$border-footer
$form-label-color
$border-content
*/ /*doc --- title: Base "T-shirt" Sizes category: Variables for Sizing name: 00_intro --- These variables are set up to give you a basic guideline from which to build your website. They are all override-able given the `!default` key being added. ```sass_example $tsla-size--xsmall: 10px !default; $tsla-size--small: 20px !default; $tsla-size--medium: 30px !default; $tsla-size--large: 40px !default; $tsla-size--xlarge: 50px !default; $tsla-size--xxlarge: 60px !default; $tsla-size--jumbo: 70px !default; ``` */ /*doc --- title: Media Queries name: 00_mediaqueries category: Layout --- When possible, we should aim to follow "Mobile first design" approach, i.e., desiging for smaller screens first, then tweak design / features / content for larger screens. Below you'll see 2 sets of variables: Legacy and Next-gen. Currently [tesla.com](https://www.tesla.com) is based in the Legacy media queries and will likely remain so for the foreseeable future. We use the following media queries to create the key breakpoints in our grid system. */ /*doc --- title: Available Media Queries category: Layout name: 01_mediaqueries --- We have several media query variables that were developed a long time back and are starting to ... show their age. These are still relevant, but allowing for more flexibility to developers means having a few additional media queries available.
Variable Name Value Sample Devices Type
Note: All of tesla.com is built on these so-called "legacy" media queries, and therefore has been the defacto standard when it comes to building pages using breakpoints.
$mobile-only 0-639px
  • HTC One, Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
Legacy
$small-desktop-only 640px-940px
  • Small screens only (640px - 960px)
Legacy
$small-desktop 640px+
  • Small devices (640px+)
Legacy
$large-desktop 960px+
  • Large desktop screens (960px+)
Legacy
$mobile-phone-only 0-736px
  • HTC One (639px)
  • Galaxy S3/S4/S5 (639px)
  • iPhone 5/5S (568px)
  • iPhone 4 (480px)
  • iPhone 6 (667px)
  • iPhone 6+ (736px)
New
$tablet-only 601-1280px
  • iPad (768px - 1024px)
  • Galaxy (800px - 1280px)
  • Nexus (601px - 906px)
  • Kindle (800px - 1280px)
New
$large-devices 1200px+
  • gigantic screens?
New
*/ /*doc --- title: Transitions name: Transitions category: Animations --- When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users. Most popular javascript frameworks and third party packages add the following classes to indicate stages of transition: 1. `.{custom}-enter` 2. `.{custom}-enter-active` 3. `.{custom}-leave` 4. `.{custom}-leave-active` - [ReactJS Animation](https://facebook.github.io/react/docs/animation.html) - [AngularJS Animation](https://docs.angularjs.org/guide/animations) ## Default Animations The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations: 1. Animated element starts off with opacity: 0.01, 2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function, 3. when leaving the DOM the element starts with opacity: 1, 4. and transitions to opacity: 0.01 in its leave-active state with 300ms transition on all properties with no transition timing function. ```sass_example @include enter-leave-animation-default(ng) ``` The above sass @include example produces the following css: ```sass_example .ng-enter { opacity: 0.01; } .ng-enter.ng-enter-active { opacity: 1; -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } .ng-leave { opacity: 1; } .ng-leave.ng-leave-active { opacity: 0.01; -webkit-transition: opacity 300ms ease-in; -moz-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } ``` The included mixin in use: ```sass_example @mixin enter-leave-animation-default($classname: general) { @include enter-animation($classname) @include enter-active-animation($classname, opacity, 500ms, ease-in) @include leave-animation($classname) @include leave-active-animation($classname, opacity, 300ms, ease-in) } ``` ## Custom Variations We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one: ```sass_example @include enter-animation(ng) @include enter-active-animation(ng, opacity, 500ms, ease-in) @include leave-animation(ng) @include leave-active-animation(ng, opacity, 300ms, ease-in) ``` The parameters passed are: 1. `$classname` - Optional. Defaults to "general" 2. `$property` - Optional. Defaults to "all" 3. `$duration` - Optional. Defaults to "500ms" 4. `$function` - Optional. Defaults to "false" Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows: ```sass_example @include enter-animation(general) { width: 100%; } @include enter-active-animation(general, width, 2s, ease-in) { width: 50%; } ``` The above mixin will produce the following css: ```sass_example .general-enter { width: 100%; } .general-enter.general-enter-active { width: 50%; -webkit-transition: width 2s ease-in; -moz-transition: width 2s ease-in; -o-transition: width 2s ease-in; transition: width 2s ease-in; } ``` */ .btn-navigate { background-image: url("/tesla_theme/assets/img/icon-navigate.svg"); } .content-constrain { max-width: 100%; } .section-image { max-height: 100%; max-width: 100%; } @media (min-width: 640px) { .section-wrap { padding: 70px 0; padding: 4.375rem 0; } } @media (min-width: 0) and (max-width: 639px) { .section-wrap { padding: 35px 0; padding: 2.1875rem 0; } } @media (min-width: 640px) { .section-wrap .section-wrap { padding: 35px 0; padding: 2.1875rem 0; } } @media (min-width: 640px) { .section-container-grid { clear: both; overflow: hidden; } .section-container-grid .section-image { width: 48.78049%; float: left; margin-right: 2.43902%; } .section-container-grid .section-content { width: 40.2439%; float: left; margin-right: 2.43902%; margin-left: 8.53659%; } .section-container-grid .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; } } @media (min-width: 640px) and (min-width: 640px) { .section-container-grid .section-alternating { margin-left: 8.53659%; margin-left: 8.53659%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media (min-width: 640px) { .section-container [class*="section-"] { width: 48.78049%; float: left; margin-right: 2.43902%; margin-left: 25.60976%; margin-right: 25.60976%; } } .section-hero { display: block; margin: auto; } @media (min-width: 0) and (max-width: 639px) { .section-hero { max-width: 70%; } } .section-release_notes { overflow: hidden; background-color: #f7f7f7; } @media (min-width: 640px) { .section-release_notes { padding-bottom: 200px; padding-bottom: 12.5rem; } } .section-release_notes .section-title--hed { font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 18px; line-height: 20px; font-size: 1.125rem; line-height: 1.25rem; padding-top: 0; color: #000; } @media (min-width: 640px) { .section-release_notes .section-title--hed { color: #666; text-align: left; width: 31.70732%; float: left; margin-right: 2.43902%; } } .section-release_notes .section-title--dek { margin-top: 10px; margin-top: 0.625rem; } @media (min-width: 0) and (max-width: 639px) { .section-release_notes .section-title--dek { text-align: center; } .i18n-zh_HK .section-release_notes .section-title--dek, .i18n-ja_JP .section-release_notes .section-title--dek, .i18n-zh_CN .section-release_notes .section-title--dek, .i18n-zh_MO .section-release_notes .section-title--dek { text-align: left; } } .section-release_notes .section-title--lede { color: #333; font-weight: bold; margin-bottom: 10px; margin-bottom: 0.625rem; } @media (min-width: 0) and (max-width: 639px) { .section-release_notes .section-title--lede { text-align: left; } } .section-release_notes .list-item { margin-bottom: 10px; margin-bottom: 0.625rem; } .release-notes--categories:before, .release-notes--categories:after { content: ""; display: table; } .release-notes--categories:after { clear: both; } @media (min-width: 0) and (max-width: 639px) { .release-notes--categories { margin-top: 22px; margin-top: 1.375rem; } } @media (min-width: 640px) { .release-notes--categories .column:nth-child(odd) { width: 31.70732%; float: left; margin-right: 2.43902%; } .release-notes--categories .column:nth-child(even) { width: 31.70732%; float: right; margin-right: 0; } } .release-notes--categories:nth-last-child(n+2) { padding-bottom: 70px; padding-bottom: 4.375rem; } @media (min-width: 640px) { .release-notes--categories:nth-last-child(n+2) { padding-bottom: 90px; padding-bottom: 5.625rem; } } @media (min-width: 640px) { .release-notes--category:first-child .section-title--lede { margin-top: 0; } } .section-autopilot .section-title--hed, .section-software--testimonial .section-title--hed { padding-top: 40px; padding-top: 2.5rem; } @media (min-width: 0) and (max-width: 639px) { .section-title--hed { padding-top: 40px; padding-top: 2.5rem; text-align: center; } } .section-title--hed + .section-title--lede { padding-top: 10px; padding-top: 0.625rem; margin-top: 10px; margin-top: 0.625rem; } .section-title--lede + .section-title--lede { margin-top: 0; } .section-title--lede:last-child { margin-bottom: 0; padding-bottom: 0; } @media (min-width: 0) and (max-width: 639px) { .section-title--lede { text-align: center; } .i18n-zh_CN .section-title--lede, .i18n-ja_JP .section-title--lede, .i18n-zh_TW .section-title--lede, .i18n-ko_KR .section-title--lede, .i18n-zh_MO .section-title--lede, .i18n-zh_HK .section-title--lede { text-align: left; } } .section-list--dek { padding-left: 20px; padding-left: 1.25rem; list-style-type: none; } .section-list--dek .list-item { margin-bottom: 10px; margin-bottom: 0.625rem; } .section-list--dek .list-item:before { left: -20px; left: -1.25rem; top: -2px; top: -0.125rem; font-size: 9px; font-size: 0.5625rem; display: block; position: relative; max-width: 0; max-height: 0; color: #ccc; content: '\25A0'; } .section-list--dek .list-item:last-child { margin-bottom: 0; } .container-icons { overflow: hidden; clear: both; } .container-icons [class*="section-title--"] { font-size: 13px; font-size: 0.8125rem; line-height: 1.25; max-width: 210px; max-width: 13.125rem; text-align: center; width: 100%; } .i18n-zh_HK .container-icons [class*="section-title--"], .i18n-ja_JP .container-icons [class*="section-title--"], .i18n-zh_CN .container-icons [class*="section-title--"], .i18n-zh_MO .container-icons [class*="section-title--"] { text-align: left; } .container-icons .section-title--lede { font-family: 'Gotham Medium'; color: #333; } .container-icons .section-title--dek { margin-top: 5px; margin-top: 0.3125rem; margin-bottom: 0; } .container-icons .column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 0) and (max-width: 639px) { .container-icons .column:not(:last-child) { padding-bottom: 40px; padding-bottom: 2.5rem; } } .container-icons .icon-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 64px; width: 4rem; height: 64px; height: 4rem; margin: 30px auto 30px; margin: 1.875rem auto 1.875rem; overflow: hidden; text-align: center; } @media (min-width: 640px) { .container-icons .section-image { max-height: 100%; text-align: center; display: block; margin: auto; } .container-icons.four-up .column { width: 23.17073%; float: left; margin-right: 2.43902%; } .container-icons.four-up .column:last-child { float: right; margin-right: 0; } .container-icons.three-up .column { width: 31.70732%; float: left; margin-right: 2.43902%; } .container-icons.three-up .column:last-child { float: right; margin-right: 0; } .container-icons.two-up .column { width: 48.78049%; float: left; margin-right: 2.43902%; } .container-icons.two-up .column:last-child { float: right; margin-right: 0; } } .main-title { font-size: 34px; } @media (min-width: 0) and (max-width: 639px) { .main-title { font-size: 28px; } } .smaller-title { font-size: 30px; } @media (min-width: 0) and (max-width: 639px) { .smaller-title { font-size: 26px; } } .section-title { font-size: 34px; } @media (min-width: 0) and (max-width: 639px) { .section-title { font-size: 28px; } } .btn-transparent { background-color: rgba(0, 0, 0, 0.3); } .section-sub-nav { margin-top: 44px; } .section-sub-nav .section-title { border-bottom: 1px solid #000; } .section-sub-nav .selected .nav-link { font-family: Gotham Bold, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } .flex-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 0) and (max-width: 639px) { .flex-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .flex-wrapper.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .section-image { line-height: 0; } .section-wrap { padding-top: 70px; padding-bottom: 70px; } @media (min-width: 0) and (max-width: 639px) { .section-wrap { padding-top: 35px; padding-bottom: 35px; } } .column { float: none !important; } @media (min-width: 640px) { .four-up .column { width: 23.17073%; float: left; margin-right: 2.43902%; } .four-up .column:last-child { float: right; margin-right: 0; } .three-up .column { width: 31.70732%; float: left; margin-right: 2.43902%; } .three-up .column:last-child { float: right; margin-right: 0; } .two-up .column { width: 48.78049%; float: left; margin-right: 2.43902%; } .two-up .column:last-child { float: right; margin-right: 0; } .one-up .column { width: 100%; clear: both; float: none; display: block; margin-right: auto; margin-left: auto; } .one-up .column:last-child { float: right; margin-right: 0; } } .multi-column-container, .multi-column-item { list-style: none; margin: 0; padding: 0; } .multi-column-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .multi-column-container .multi-column-item { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .multi-column-container .multi-column-item .multi-column-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .multi-column-container .multi-column-item .multi-column-content.image-content { display: block; } .multi-column-container .multi-column-item .multi-column-content .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .multi-column-container .multi-column-item .multi-column-content .container:not(.solar-roof-marketing-blurb-right):not(.solar-roof-marketing-blurb-left) { margin-left: 25%; padding-left: 0; padding-right: 50px; } .multi-column-container .multi-column-item .multi-column-content .container .section-title { margin-top: 22px; } @media (min-width: 0) and (max-width: 639px) { .multi-column-container .multi-column-item .multi-column-content .container { margin: 0 auto; padding: 20px; text-align: center; } } .multi-column-container .multi-column-item .multi-column-content .split-50-50:first-child { width: 48.78049%; float: left; margin-right: 2.43902%; } .multi-column-container .multi-column-item .multi-column-content .split-50-50:last-child { width: 48.78049%; float: right; margin-right: 0; } @media all and (min-width: 40em) { .multi-column-container .multi-column-item { width: 50%; } .multi-column-container .multi-column-item.no-split { width: 100%; } .multi-column-container .multi-column-item.split-33-66:first-child { width: 33.33%; } .multi-column-container .multi-column-item.split-33-66:last-child { width: 66.66%; } .multi-column-container .multi-column-item.split-40-60:first-child { width: 40%; } .multi-column-container .multi-column-item.split-40-60:last-child { width: 60%; } .multi-column-container .multi-column-item.split-60-40:first-child { width: 60%; } .multi-column-container .multi-column-item.split-60-40:last-child { width: 40%; } .multi-column-container .multi-column-item.split-66-33:first-child { width: 65.85366%; float: left; margin-right: 2.43902%; } .multi-column-container .multi-column-item.split-66-33:last-child { width: 31.70732%; float: right; margin-right: 0; } .multi-column-container .multi-column-item.split-75-25:first-child { width: 74.39024%; float: left; margin-right: 2.43902%; } .multi-column-container .multi-column-item.split-75-25:last-child { width: 23.17073%; float: right; margin-right: 0; } } .darker-background { background: #F2F2F2; } .container-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 0) and (max-width: 639px) { .container-icons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .container-icons .section-image { height: 70px; max-height: none; width: 100%; } .container-icons .column { float: none; } .container-icons .column.last-child { float: none; } .container-icons [class*="section-title--"] { max-width: 70%; } @media (min-width: 0) and (max-width: 639px) { .container-icons [class*="section-title--"] { max-width: 100%; } } .icon-wrapper { padding: 20px; } .section-divider { background: #999; height: 1px; margin: 70px 0; width: 100%; } .section-inquire_form { background-color: #F2F2F2; text-align: center; } .section-inquire_form .section-title { padding-bottom: 80px; } .section-inquire_form .stationary-storage-details { text-align: left; } .section-inquire_form .stationary-storage-details .form-item-firstname, .section-inquire_form .stationary-storage-details .form-item-email, .section-inquire_form .stationary-storage-details .form-item-country, .section-inquire_form .stationary-storage-details .form-item-company { width: 47.5%; float: left; margin-right: 5%; } .section-inquire_form .stationary-storage-details .form-item-lastname, .section-inquire_form .stationary-storage-details .form-item-phone, .section-inquire_form .stationary-storage-details .form-item-postalcode, .section-inquire_form .stationary-storage-details .form-item-role { width: 47.5%; float: right; margin-right: 0; clear: none; } @media (min-width: 0) and (max-width: 639px) { .section-inquire_form .stationary-storage-details .form-item { width: 100%; } } .section-inquire_form .stationary-storage-details .form-item-businessType { clear: both; } .section-inquire_form .stationary-storage-details .form-item-additional-info { clear: both; } .section-inquire_form .stationary-storage-details .form-item-opt-in { clear: both; } .section-inquire_form .stationary-storage-details .additional-information-type .form-item .parsley-error { color: #999; } @media (min-width: 0) and (max-width: 639px) { .section-inquire_form .stationary-storage-details .additional-information-type .form-item { width: 100%; } } @media (min-width: 640px) { .section-inquire_form .stationary-storage-details .additional-information-type .form-item { width: 30%; float: left; margin-right: 5%; margin-left: 10px; margin-right: 10px; } .section-inquire_form .stationary-storage-details .additional-information-type .form-item:first-child { margin-left: 0; } .section-inquire_form .stationary-storage-details .additional-information-type .form-item:last-child { width: 30%; float: right; margin-right: 0; clear: none; margin-left: 0; } } .section-inquire_form .terms-and-conditions { margin: 22px auto; width: 75%; } @media (min-width: 0) and (max-width: 639px) { .section-inquire_form .terms-and-conditions { width: 100%; } } @media (min-width: 640px) { .section-cta .btn, .section-cta .btn-large, .section-cta .btn-transactional { min-width: 200px; } .section-cta a:first-child { margin-right: 10px; } } .section-cta.top { border-bottom: 1px solid rgba(0, 0, 0, 0.4); text-align: center; } @media (min-width: 0) and (max-width: 639px) { .section-cta.top { padding-left: 20px; padding-right: 20px; } } .section-cta.top.btn-group { margin: 0; padding-top: 15px; padding-bottom: 15px; } .container-buttons { text-align: center; } @media (min-width: 640px) { .pane-skinny-footer { margin-top: 0; padding-top: 20px; } } .styles__estimationContainer___29JGU { max-width: 66.25rem; display: block; margin: 120px auto 0; background-color: #f3f3f3; color: #2f2f31; padding: 40px 0; box-sizing: border-box; transition: all .3s ease; overflow: visible; } @media (max-width: 640px) { .styles__estimationContainer___29JGU { padding: 20px 0; margin: 140px auto 0; } } .styles__estimationContainer___29JGU.styles__shrinkMargin___YIUCg { margin: 20px auto 0; } .styles__disclaimer___2ubzM { display: block; max-width: 480px; margin: 0 auto; color: #8c8c8c; text-align: center; font-size: 12px; line-height: 17px; padding: 0 15px; } .styles__disclaimer___2ubzM.styles__desktop___1WmHV { margin-top: 15px; } @media (max-width: 640px) { .styles__disclaimer___2ubzM.styles__desktop___1WmHV { display: none; } } .styles__disclaimer___2ubzM.styles__mobile___2WctE { display: none; } @media (max-width: 640px) { .styles__disclaimer___2ubzM.styles__mobile___2WctE { display: block; } } .styles__estimationArrangement___3CH8h { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } @media (max-width: 640px) { .styles__estimationArrangement___3CH8h { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } } .styles__breakdownContainer___2nx_p { background-color: #fff; width: 390px; border-radius: 2px; border: 1px solid #e8e8ea; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; margin: 0 auto; box-sizing: border-box; transition: height .3s ease; padding: 30px 20px 24px; position: relative; } @media (max-width: 640px) { .styles__breakdownContainer___2nx_p { width: 95%; padding: 35px 10px; } } .styles__breakdownRow___35tPV { display: -ms-flexbox; display: -webkit-box; display: flex; transition: all .3s ease; padding-left: 35px; -ms-flex-align: baseline; -webkit-box-align: baseline; align-items: baseline; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; margin: 12px 0; text-align: left; } @media (max-width: 640px) { .styles__breakdownRow___35tPV { margin: 5px 0; padding-left: 15px; } } .styles__editField___ODvN- { position: relative; opacity: 0; height: 0; margin: 0; pointer-events: none; transition: all .3s ease; padding-left: 0; -ms-flex-positive: 0; -webkit-box-flex: 0; flex-grow: 0; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .styles__editUnit___My2-Z { font-size: 12px; margin: 5px 0; } .styles__breakdownContainer___2nx_p.styles__showEnergy___2t-K4 .styles__editField___ODvN- { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; height: 30px; margin: 5px 0; pointer-events: all; -webkit-animation: styles__inputAppears___5rc8j .5s ease forwards; animation: styles__inputAppears___5rc8j .5s ease forwards; -webkit-animation-delay: .1s; animation-delay: .1s; } .styles__costBreakdownRow___2ltCe { position: relative; top: -6px; transition: top .3s ease; } .styles__breakdownContainer___2nx_p.styles__showEnergy___2t-K4 .styles__costBreakdownRow___2ltCe { top: 0; } .styles__breakdownContainer___2nx_p.styles__showEnergy___2t-K4 .styles__advancedOptionsDivider___2ix0O { opacity: 1; margin: 10px 0 15px; } .styles__breakdownValue___3E488 { font-size: 15px; font-weight: 500; min-width: 80px; text-align: right; margin: 0 15px 0 0; } @media (max-width: 640px) { .styles__breakdownValue___3E488 { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; } } .styles__breakdownLabel___1msKG { margin: 0; font-size: 15px; } @media (max-width: 640px) { .styles__breakdownLabel___1msKG { font-size: 14px; width: 60%; } } .styles__breakdownLifetimeValue___2N66K { color: #0181ff; font-size: 18px; } .styles__divider___3cpvS { width: 100%; height: 1px; background-color: #f3f3f3; margin: 12px 0; } .styles__advancedOptionsDivider___2ix0O { opacity: 0; -ms-flex-positive: 0; -webkit-box-flex: 0; flex-grow: 0; margin: 0; } .styles__inputFieldContainer___2e3B- { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; margin-right: 15px; min-width: 115px; } @media (max-width: 640px) { .styles__inputFieldContainer___2e3B- { min-width: 130px; } } .styles__inputField___13TeR { width: 66px; height: 30px; background-color: #f3f3f3; border: 1px solid #e8e8ea; box-sizing: border-box; outline: none; padding: 0 5px; font-size: 16px; font-weight: 400; text-align: right; margin-left: 5px; } @media (max-width: 640px) { .styles__inputField___13TeR { width: 78px; height: 38px; } } .styles__editLink___5Obw7 { margin-top: 20px; display: inline-block; cursor: pointer; color: #0181ff; font-size: 13px; } @-webkit-keyframes styles__inputAppears___5rc8j { 0% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes styles__inputAppears___5rc8j { 0% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } .styles__seeBelowLink___2jEPL { color: #0181ff; text-decoration: none; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; margin-top: 10px; font-size: 13px; padding: 10px; } .styles__seeBelowLink___2jEPL:focus, .styles__seeBelowLink___2jEPL:hover { color: #0181ff; } .styles__breakdownEditLabel___1FLBS { text-align: left; } .styles__breakdownEditLabel___1FLBS.styles__showUseAvgCostOption___1NVn- { pointer-events: all; opacity: 1; } .styles__breakdownLabel___36h6T { margin: 0; font-size: 15px; } @media (max-width: 640px) { .styles__breakdownLabel___36h6T { font-size: 14px; } } .styles__breakdownUseAverage___1BwwK.styles__showUseAvgCostOption___1NVn- { pointer-events: all; opacity: 1; } .styles__breakdownUseAverage___1BwwK:focus, .styles__breakdownUseAverage___1BwwK:hover { color: #1e63a9; } .styles__breakdownUseAverage___1BwwK { font-size: 11px; color: #0181ff; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; opacity: 0; pointer-events: none; transition: all .3s ease; position: relative; line-height: 30px; top: -10px; } .styles__breakdownInteractiveContainer___6Fqyg { position: relative; transition: all .2s ease; top: 13px; } .styles__breakdownInteractiveContainer___6Fqyg.styles__containerMoveUp___3wc5P { top: 8px; } .styles__tooltipContainer___knhEI { position: absolute; pointer-events: none; opacity: 0; transition: all .2s ease; background-color: #666668; color: #fff; padding: 20px; text-align: center; -webkit-transform: translateY(10px); transform: translateY(10px); } .styles__tooltipContainer___knhEI:before { content: ""; display: inline-block; position: absolute; height: 25px; width: 25px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #666668; top: calc(100% - 12px); left: calc(100% - 50px); } .styles__tooltipBelow___3VKWX.styles__tooltipContainer___knhEI:before { top: -12px; } .styles__tooltipContainer___knhEI.styles__showTooltip___13SRo { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: all; } .styles__numberSwitcherContainer___4ZYNr { display: -ms-flexbox; display: -webkit-box; display: flex; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr { margin: 0 auto; } } .styles__numberSwitcherContainer___4ZYNr.styles__vertical___2c8UU { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .styles__numberSwitcherContainer___4ZYNr.styles__horizontal___1bYje { position: relative; -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; left: -10px; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__horizontal___1bYje { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; left: 0; } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n { position: relative; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberBorder___2eO2o { border: 1px solid #e8e8ea; width: 180px; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberBorder___2eO2o { height: 46px; } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrow___3saw1 { background: none; left: 160px; z-index: 10; display: inline-block; position: absolute; width: 16px; height: 16px; cursor: pointer; overflow: hidden; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrow___3saw1 { width: 22px; height: 22px; left: calc(50% + 90px - 8px - 20px); } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrow___3saw1:after { display: inline-block; position: absolute; content: ""; border: solid #0181ff; border-width: 0 1px 1px 0; padding: 4px; top: 50%; left: calc(50% - 4px); -webkit-transform: rotate(45deg) translateX(-50%) translateY(-50%); transform: rotate(45deg) translateX(-50%) translateY(-50%); } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrow___3saw1.styles__arrowUp___12-nN:after { border-width: 1px 0 0 1px; padding: 4px; top: calc(50% + 4px); left: calc(50% - 4px); -webkit-transform: rotate(45deg) translateX(-50%) translateY(-50%); transform: rotate(45deg) translateX(-50%) translateY(-50%); } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrow___3saw1:active:after { padding: 4.8px; left: calc(50% - 4.8px); } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrowUp___12-nN { top: 3px; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrowUp___12-nN { top: 1px; } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrowDown___1Uz5z { border-top: 1px solid #e8e8ea; bottom: 3px; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__arrowDown___1Uz5z { bottom: 2px; } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberSwitcherLabel___g6CPs, .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberSwitcherNumber___3Tskn { line-height: 31px; text-align: left; margin: 0 14px; position: absolute; transition: all .2s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; } @media (max-width: 640px) { .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberSwitcherLabel___g6CPs, .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberSwitcherNumber___3Tskn { line-height: 44px; } } .styles__numberSwitcherContainer___4ZYNr.styles__label___2pj5n .styles__numberSwitcherLabel___g6CPs { left: 20px; } .styles__numberBorder___2eO2o { height: 35px; width: 35px; border: 1px solid #0181ff; position: relative; overflow: hidden; background-color: #fff; } .styles__numberSwitcherNumber___3Tskn { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; line-height: 31px; margin: 0; position: absolute; text-align: center; transition: all .2s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .styles__arrow___3saw1 { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOCA5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOCA5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3QwX0Fycm93e2ZpbGw6I0VFRUVFRTt9Cgkuc3QxX0Fycm93e2ZpbGw6I0RFREVERTt9Cjwvc3R5bGU+CjxnIGlkPSJSb2JvdFRocmVlUGFjayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU5My4wMDAwMDAsIC0xMjcuMDAwMDAwKSI+Cgk8ZyBpZD0iU2VsZWN0UG93ZXJ3YWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODUuMDAwMDAwLCAwLjAwMDAwMCkiPgoJCTxnIGlkPSJQb3dlcldhbGxDb3VudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk5LjAwMDAwMCwgMTI3LjAwMDAwMCkiPgoJCQk8ZyBpZD0iQXJyb3dzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjAwMDAwMCwgMC4wMDAwMDApIj4KCQkJCTxnIGlkPSJDb21iaW5lZC1TaGFwZSI+CgkJCQkJPHBhdGggaWQ9InBhdGgtMSIgY2xhc3M9InN0MF9BcnJvdyIgZD0iTTE3LjQsOC43TDguNywwTDAsOC43SDE3LjR6Ii8+CgkJCQkJPHBhdGggY2xhc3M9InN0MV9BcnJvdyIgZD0iTTE3LjQsOC43SDBMOC43LDBMMTcuNCw4Ljd6IE0yLjQsNy43SDE1TDguNywxLjRMMi40LDcuN3oiLz4KCQkJCTwvZz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K); background-size: 60%; background-repeat: no-repeat; background-position: 50%; height: 35px; width: 35px; cursor: pointer; transition: background-size .3s ease; } @media (max-width: 640px) { .styles__arrow___3saw1 { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE4cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDE4IDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4xICgzOTAxMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibW9kdWxlL2Zvcm0tcG93ZXJ3YWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzE2LjAwMDAwMCwgLTM4Ny4wMDAwMDApIiBmaWxsPSIjQzRDNEM0Ij4KICAgICAgICAgICAgPHBhdGggZD0iTTMzNC4wMzg1ODIsMzk2LjAzODU4MiBMMzI1LjM0NjE5NCwzODcuMzQ2MTk0IEwzMTYuNjUzODA2LDM5Ni4wMzg1ODIgTDMzNC4wMzg1ODIsMzk2LjAzODU4MiBaIiBpZD0iQ29tYmluZWQtU2hhcGUtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI1LjM0NjE5NCwgMzkxLjY5MjM4OCkgcm90YXRlKC0zNjAuMDAwMDAwKSB0cmFuc2xhdGUoLTMyNS4zNDYxOTQsIC0zOTEuNjkyMzg4KSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==); } } .styles__arrow___3saw1:active { background-size: 70%; } .styles__horizontal___1bYje .styles__arrowUp___12-nN { -webkit-transform: rotate(90deg); transform: rotate(90deg); -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .styles__horizontal___1bYje .styles__arrowDown___1Uz5z { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .styles__horizontal___1bYje .styles__decreaseNumbersEnter___20PsW { left: -25px; } .styles__horizontal___1bYje .styles__decreaseNumbersEnter___20PsW.styles__decreaseNumbersEnterActive___3dSG0, .styles__horizontal___1bYje .styles__decreaseNumbersLeave___2ivXa { left: 0; } .styles__horizontal___1bYje .styles__decreaseNumbersLeave___2ivXa.styles__decreaseNumbersLeaveActive___vVe7H, .styles__horizontal___1bYje .styles__increaseNumbersEnter___2gmfV { left: 25px; } .styles__horizontal___1bYje .styles__increaseNumbersEnter___2gmfV.styles__increaseNumbersEnterActive___1eM9b, .styles__horizontal___1bYje .styles__increaseNumbersLeave___1LWIA { left: 0; } .styles__horizontal___1bYje .styles__increaseNumbersLeave___1LWIA.styles__increaseNumbersLeaveActive___vbFjY { left: -25px; } .styles__vertical___2c8UU .styles__decreaseNumbersEnter___20PsW { top: -25px; } .styles__vertical___2c8UU .styles__decreaseNumbersEnter___20PsW.styles__decreaseNumbersEnterActive___3dSG0, .styles__vertical___2c8UU .styles__decreaseNumbersLeave___2ivXa { top: 0; } .styles__vertical___2c8UU .styles__decreaseNumbersLeave___2ivXa.styles__decreaseNumbersLeaveActive___vVe7H, .styles__vertical___2c8UU .styles__increaseNumbersEnter___2gmfV { top: 25px; } .styles__vertical___2c8UU .styles__increaseNumbersEnter___2gmfV.styles__increaseNumbersEnterActive___1eM9b, .styles__vertical___2c8UU .styles__increaseNumbersLeave___1LWIA { top: 0; } .styles__vertical___2c8UU .styles__increaseNumbersLeave___1LWIA.styles__increaseNumbersLeaveActive___vbFjY { top: -25px; } .styles__shake___2gOiq .styles__numberSwitcherNumber___3Tskn { -webkit-animation: styles__shake___2gOiq .3s forwards linear; animation: styles__shake___2gOiq .3s forwards linear; } @-webkit-keyframes styles__shake___2gOiq { 0% { left: 0; } 20% { left: 5px; } 40% { left: -5px; } 60% { left: 5px; } 80% { left: -5px; } to { left: 0; } } @keyframes styles__shake___2gOiq { 0% { left: 0; } 20% { left: 5px; } 40% { left: -5px; } 60% { left: 5px; } 80% { left: -5px; } to { left: 0; } } .styles__customizeContainer___25ECQ { padding-left: 40px; } @media (max-width: 640px) { .styles__customizeContainer___25ECQ { padding: 30px 10px 0; } } .styles__sliderBar___BfDki { width: 350px; height: 3px; background-color: #a7a7a9; position: relative; margin: 0 20px; } @media (max-width: 640px) { .styles__sliderBar___BfDki { width: 200px; } } @media (max-width: 350px) { .styles__sliderBar___BfDki { width: 150px; margin: 0 10px; } } .styles__sliderBarBlue___1Jm7m { background-color: #0181ff; position: absolute; left: 0; height: 3px; transition: background-color .3s ease; } .styles__sliderBarBlue___1Jm7m.styles__sliderBarRed___PpISu { background-color: #c00; } .styles__sliderContainer___3DDY1 { margin: 0 auto 60px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: left; -webkit-box-pack: left; justify-content: left; -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-align: center; -webkit-box-align: center; align-items: center; min-width: 560px; } @media (max-width: 640px) { .styles__sliderContainer___3DDY1 { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; min-width: 0; } } .styles__sliderContainerLabels___buyZ9 { text-align: right; vertical-align: text-top; color: #8c8c8c; margin: 0; } @media (max-width: 640px) { .styles__sliderContainerLabels___buyZ9 { text-align: center; width: 50px; } } .styles__sliderRightLabel___1IhW- { position: relative; cursor: pointer; } .styles__sliderRightLabel___1IhW- .styles__sliderContainerLabels___buyZ9 { text-align: left; } @media (max-width: 640px) { .styles__sliderRightLabel___1IhW- .styles__sliderContainerLabels___buyZ9 { text-align: center; } } @media (max-width: 640px) { .styles__sliderRightLabel___1IhW- { top: 20px; } } .styles__sliderContainerLabels___buyZ9.styles__slideLabelWhy___1OrR7 { color: #0181ff; } .styles__slider___2EqHe { height: 25px; width: 25px; top: -10px; position: absolute; border-radius: 50%; background-color: #fff; -webkit-transform: translateX(-10px) scale(1); transform: translateX(-10px) scale(1); transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; box-shadow: -1px 3px 19px 0 #adadad; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: 100px; flex-basis: 100px; } .styles__slider___2EqHe:active { -webkit-transform: translateX(-10px) scale(1.3); transform: translateX(-10px) scale(1.3); } .styles__percentageLabel___3N6Jc { position: absolute; pointer-events: none; top: 25px; margin: 0 0 0 -10px; } @media (max-width: 640px) { .styles__percentageLabel___3N6Jc { top: -45px; } } .styles__sliderHeader___16uQ1 { text-align: left; margin: 0; font-size: 22px; font-weight: 400; } @media (max-width: 640px) { .styles__sliderHeader___16uQ1 { text-align: center; font-size: 20px; margin: 0; } } .styles__sliderParagraph___1Is-U { text-align: left; margin: 15px 0; color: #222224; min-height: 50px; font-size: 15px; max-width: 500px; } @media (max-width: 640px) { .styles__sliderParagraph___1Is-U { text-align: center; min-height: 70px; max-width: none; } } .styles__sliderParagraph___1Is-U .styles__boldContent___Z5CQE { font-weight: 600; } .styles__recommend___2CtIo { color: #2f2f31; font-weight: 600; } .styles__powerwallPicker___2Co5r { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .styles__powerwallPickerText___ZkncC { -ms-flex-preferred-size: 240px; flex-basis: 240px; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; } @media (max-width: 640px) { .styles__imgContainer___3ISPH { width: 100%; padding-top: 30px; } } .styles__powerwallImg___2n2_n { height: 234px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 640px) { .styles__powerwallImg___2n2_n { display: block; margin: 0 auto; } } .styles__calculatorTitle___3KIqp { text-align: center; font-weight: 400; margin: 20px 0 50px; font-size: 24px; } .styles__calculatorTitleAmount___1kySF { color: #0181ff; font-size: 36px; margin: 0; display: inline; position: relative; top: 5px; } @media (max-width: 640px) { .styles__calculatorTitleAmount___1kySF { font-size: 40px; display: block; line-height: 50px; top: 0; } } .styles__learnMore___32Jy5 { color: #0181ff; text-decoration: underline; text-align: center; cursor: pointer; margin-bottom: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @-webkit-keyframes styles__fade-in___3M0TL { 0% { opacity: 0; } to { opacity: 1; } } @keyframes styles__fade-in___3M0TL { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes styles__background-transparent___zPX21 { 0% { background-color: inherit; } to { background-color: #787974; } } @keyframes styles__background-transparent___zPX21 { 0% { background-color: inherit; } to { background-color: #787974; } } .styles__loader___1LWbG { position: relative; margin: 0 auto; -webkit-animation: styles__background-transparent___zPX21 .5s alternate infinite; animation: styles__background-transparent___zPX21 .5s alternate infinite; -webkit-animation-delay: .2s; animation-delay: .2s; } .styles__loader___1LWbG:before { left: -25px; -webkit-animation: styles__fade-in___3M0TL .5s alternate infinite; animation: styles__fade-in___3M0TL .5s alternate infinite; -webkit-animation-delay: 0; animation-delay: 0; } .styles__loader___1LWbG:after { left: 25px; -webkit-animation: styles__fade-in___3M0TL .5s alternate infinite; animation: styles__fade-in___3M0TL .5s alternate infinite; -webkit-animation-delay: .4s; animation-delay: .4s; } .styles__loader___1LWbG:after, .styles__loader___1LWbG:before { position: absolute; content: ""; display: inline-block; } .styles__loader___1LWbG, .styles__loader___1LWbG:after, .styles__loader___1LWbG:before { height: 10px; width: 10px; border-radius: 50%; background-color: #787974; } .styles__roofTileContainer___XZYIx { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; } .styles__roofTileHeader___2IjXy { text-align: left; margin: 20px 0; } @media (max-width: 640px) { .styles__roofTileHeader___2IjXy { text-align: center; font-size: 22px; margin: 40px 0; } } .styles__roofTileRow___1UD_x { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } @media (max-width: 640px) { .styles__roofTileRow___1UD_x { margin-bottom: 40px; } } .styles__roofTileRowInternetExplorer___3TJe5 { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 100%; } @media (max-width: 640px) { .styles__roofTileRowInternetExplorer___3TJe5 { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; margin-bottom: 40px; } } .styles__noAddress___2OiJ6 { max-width: 522px; } .styles__tileLabels___Z08PG { text-align: center; color: #4a90e2; cursor: pointer; font-size: 12px; } .styles__roofTileFormItem___1NVof { margin: 0 0 25px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; position: relative; } @media (max-width: 350px) { .styles__roofTileFormItem___1NVof { margin: 0 5px 5px 0; -ms-flex-preferred-size: calc(50% - 40px); flex-basis: calc(50% - 40px); } } .styles__formItemNoAddress___9CUfD { position: static; } .styles__roofTileFormLabel___1ev3L { width: 246px; overflow: hidden; cursor: pointer; display: block; position: relative; box-sizing: border-box; box-shadow: 0 1px 2px 0 #cacaca; } @media (max-width: 640px) { .styles__roofTileFormLabel___1ev3L { width: 145px; } } .styles__roofTileFormLabel___1ev3L:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; z-index: 1; box-sizing: border-box; border: 1px solid #fff; transition: all .3s ease; pointer-events: none; } .styles__roofTileRadio___1Hfwm:checked + .styles__roofTileFormLabel___1ev3L:before { border: 1px solid #0181ff; box-shadow: inset 0 0 0 1px #0181ff; } .styles__roofTileImage___1F5WX { height: 99px; width: auto; min-width: 100%; display: block; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 500px) { .styles__roofTileImage___1F5WX { height: 100px; min-width: 249px; } } .styles__roofTileImage___1F5WX.styles__isComingSoon___G31PD { height: 80px; } @media (max-width: 500px) { .styles__roofTileImage___1F5WX.styles__isComingSoon___G31PD { height: 100px; } } .styles__roofTileName___2BnY2 { color: #454545; letter-spacing: 2px; font-weight: 700; margin: 0; line-height: 35px; text-transform: uppercase; } .styles__roofTileComingSoon___1IqY8, .styles__roofTileName___2BnY2 { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; font-size: 11px; text-align: center; } .styles__roofTileComingSoon___1IqY8 { color: #666; margin: -5px 0 5px; } .styles__comingSoonNoAddress___1Hc-c { position: absolute; bottom: -25px; margin: 0; width: 100%; text-align: center; } .styles__roofTileRadio___1Hfwm { position: absolute; left: -99999px; } .styles__loader___IKoev { position: absolute; width: 100%; z-index: 999; opacity: 1; transition: all .3s ease; } .styles__loader___IKoev.styles__hideLoader___TFnAO { opacity: 0; pointer-events: none; } .styles__loaderContainer___XGfFV { display: -ms-flexbox; display: -webkit-box; display: flex; margin: 0 auto; transition: all .3s ease; height: 25px; width: 200px; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .styles__loaderText____o_DW { text-align: center; margin: 10px 0; } .styles__dot___3aFWG { position: relative; height: 20px; width: 20px; transition: all .5s ease; opacity: 0; } .styles__dot___3aFWG, .styles__dot___3aFWG:before { border-radius: 50%; -webkit-backface-visibility: hidden; -webkit-transform: scale(1); } .styles__dot___3aFWG:before { content: ""; display: block; position: absolute; height: 16px; width: 16px; -webkit-transform: scale(0); transform: scale(0); background-color: #0181ff; } .styles__dot___3aFWG:first-child { left: 40px; } .styles__dot___3aFWG:nth-child(2) { left: 20px; } .styles__dot___3aFWG:nth-child(3) { background-color: #0181ff; left: 10px; -webkit-animation: styles__pulse___3Sn3j 1.5s ease-in-out alternate infinite; animation: styles__pulse___3Sn3j 1.5s ease-in-out alternate infinite; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .styles__dot___3aFWG:nth-child(4) { background-color: #0181ff; left: -10px; -webkit-animation: styles__pulse___3Sn3j 1.5s ease-in-out alternate infinite; animation: styles__pulse___3Sn3j 1.5s ease-in-out alternate infinite; } .styles__dot___3aFWG:nth-child(5) { left: -20px; } .styles__dot___3aFWG:nth-child(6) { left: -40px; } .styles__determinate___3c_Ll .styles__dot___3aFWG { left: 0; opacity: 1; background-color: #fff; border: 2px solid #a0a0a0; -webkit-animation: styles__removeBorder___1EcCK .5s ease forwards; animation: styles__removeBorder___1EcCK .5s ease forwards; } .styles__determinate___3c_Ll .styles__dot___3aFWG:before { -webkit-animation: styles__fillIn___15TGi .5s ease forwards; animation: styles__fillIn___15TGi .5s ease forwards; } .styles__determinate___3c_Ll .styles__dot___3aFWG:first-child, .styles__determinate___3c_Ll .styles__dot___3aFWG:first-child::before { -webkit-animation-delay: .3s; animation-delay: .3s; } .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(2), .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(2):before { -webkit-animation-delay: .7s; animation-delay: .7s; } .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(3), .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(3):before { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(4), .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(4):before { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(5), .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(5):before { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(6), .styles__determinate___3c_Ll .styles__dot___3aFWG:nth-child(6):before { -webkit-animation-delay: 2s; animation-delay: 2s; } .styles__loaderEnter___JJDDe { opacity: 0; } .styles__loaderEnter___JJDDe.styles__loaderEnterActive___3cI_y, .styles__loaderLeave___1T02W { opacity: 1; } .styles__loaderLeave___1T02W.styles__loaderLeaveActive___29NEQ { opacity: 0; } @-webkit-keyframes styles__pulse___3Sn3j { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(2); transform: scale(2); opacity: .2; } } @keyframes styles__pulse___3Sn3j { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(2); transform: scale(2); opacity: .2; } } @-webkit-keyframes styles__fillIn___15TGi { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes styles__fillIn___15TGi { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes styles__removeBorder___1EcCK { 0% { border: 2px solid #a0a0a0; } to { border: 2px solid transparent; } } @keyframes styles__removeBorder___1EcCK { 0% { border: 2px solid #a0a0a0; } to { border: 2px solid transparent; } } .styles__powerwallHeader___1En6J { text-align: left; margin: 20px 0; } @media (max-width: 640px) { .styles__powerwallHeader___1En6J { text-align: center; font-size: 22px; margin: 0; } } .styles__powerwallPickerContainer___2Ldt1 { text-align: left; } @media (max-width: 640px) { .styles__powerwallPickerContainer___2Ldt1 { text-align: cetner; width: 100%; padding: 40px 40px 30px; box-sizing: border-box; } } .styles__powerwallPicker___1_W26 { display: -ms-flexbox; display: -webkit-box; display: flex; } @media (max-width: 640px) { .styles__powerwallPicker___1_W26 { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } } .styles__powerwallInformation___2cv6D { max-width: 200px; } @media (max-width: 640px) { .styles__powerwallInformation___2cv6D { max-width: none; text-align: center; } } .styles__powerwall___1SbcT { height: 328px; margin-top: -11px; } @media (max-width: 640px) { .styles__powerwall___1SbcT { display: none; } } .styles__powerwallMobile___d32Yi { display: none; margin: 10px auto 0; width: 170px; } @media (max-width: 640px) { .styles__powerwallMobile___d32Yi { display: block; } } .styles__recommended___2v5D8 { opacity: 0; transition: opacity .3s ease; text-align: left; font-weight: 500; } @media (max-width: 640px) { .styles__recommended___2v5D8 { text-align: center; } } .styles__recommendedText___1vv7P { color: #454545; margin: 10px 0; font-size: 15px; line-height: 17px; } .styles__recommended___2v5D8.styles__showRecommended___2AiEs { opacity: 1; } .styles__numberPickerItem___3yc_D:not(:last-child) { margin-right: 10px; } @media (max-width: 640px) { .styles__numberPickerItem___3yc_D:not(:last-child) { margin-right: 15px; } } .styles__numberPickerContainer___2JQnp { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } .styles__numberPickerFormLabel___wedel { width: 90px; height: 40px; border: 1px solid #e8e8ea; cursor: pointer; display: block; box-shadow: inset 0 0 0 0 #0181ff; transition: all .3s ease; box-sizing: border-box; } @media (max-width: 640px) { .styles__numberPickerFormLabel___wedel { width: 50px; height: 50px; } } .styles__numberPickerNumber___1sJ5S { color: #a7a7a9; line-height: 40px; text-align: center; margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 640px) { .styles__numberPickerNumber___1sJ5S { line-height: 50px; } } .styles__numberPickerRadio___2Ujer:checked + .styles__numberPickerFormLabel___wedel { color: #0181ff; border: 1px solid #0181ff; box-shadow: inset 0 0 0 1px #0181ff; } .styles__numberPickerRadio___2Ujer:checked + .styles__numberPickerFormLabel___wedel .styles__numberPickerNumber___1sJ5S { color: #0181ff; } .styles__numberPickerRadio___2Ujer { position: absolute; left: -99999px; } .styles__container___1o7za { text-align: center; margin-bottom: 0; max-height: 0; overflow: hidden; transition: all .3s ease; } .styles__container___1o7za.styles__open___KJi-- { margin-bottom: 50px; max-height: 3000px; } .styles__loaderContainer___1Bs7C { height: 0; overflow: visible; } .styles__calculator___1y4iB { background-color: #f4f4f4; text-align: center; } .styles__pickTileAndBattery___JbDJC { max-width: 1060px; max-width: 66.25rem; display: -ms-flexbox; display: -webkit-box; display: flex; margin: 0 auto; padding: 60px 20px 0; } @media (max-width: 640px) { .styles__pickTileAndBattery___JbDJC { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding: 0; } } .styles__extraQuestionsContainer___36p16 { width: 60%; margin: 0 auto; padding: 0 20px; } .styles__extraQuestionsLabel___22WWj { text-align: center; font-size: 15px; } @media (max-width: 640px) { .styles__extraQuestionsLabel___22WWj { max-width: 215px; margin: 20px auto; } } .styles__extraQuestionsForm___2GEgZ { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; margin: 0 auto; } .styles__extraQuestionsForm___2GEgZ > div:first-child { margin-right: 100px; } @media (max-width: 640px) { .styles__extraQuestionsForm___2GEgZ { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .styles__extraQuestionsForm___2GEgZ > div:first-child { margin-right: 0; } } .styles__finishedSquareFootage___3zCsz { display: inline-block; width: 200px; } .hero { position: relative; } .hero .container { left: 0; position: absolute; right: 0; text-align: left; width: 100%; z-index: 1; } .section-mobile-title { padding-top: 35px; text-align: center; } .power-your-home-solar { background-color: #fff; text-align: center; } .power-your-home-solar .container-buttons { padding-top: 30px; } .section-order { text-align: center; background-color: #fff; } .i18n-en_JO .section-order, .i18n-zh_CN .section-order { display: none; } @media (min-width: 0) and (max-width: 639px) { .section-order { padding-top: 10px; } } .section-order .top-container { max-width: 945px; width: 85%; } .section-order .section-title--break { display: none; height: 15px; } @media (min-width: 0) and (max-width: 639px) { .section-order .section-title--break { display: block; } } .section-order .container-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-bottom: 40px; max-width: 675px; padding-top: 40px; width: 60%; } .section-order .container-buttons .search-input { padding: 15px; } .section-order .container-buttons .get-started-button { margin: 0; padding-top: 17px; } @media (min-width: 0) and (max-width: 639px) { .section-order .container-buttons .get-started-button { margin-top: 20px; } } @media (min-width: 0) and (max-width: 639px) { .section-order .container-buttons { display: block; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 10px; padding-top: 20px; width: 100%; } } .section-order .container-buttons .search-field { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .section-order .container-buttons .search-button { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -2px; } @media (min-width: 0) and (max-width: 639px) { .section-order .container-buttons .search-button { margin: 0; padding-top: 20px; } } .section-generate_calculator { text-align: center; } .section-solar_roof_layers { text-align: center; } .solar-roof-marketing-blurb-left, .solar-roof-marketing-blurb-right { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; max-width: 520px; text-align: left; } .solar-roof-marketing-blurb-left { margin-right: 7%; } .solar-roof-marketing-blurb-right { margin-left: 10%; } .section-glass-guarantee { background: #fff; padding-bottom: 100px; padding-top: 70px; text-align: center; } .section-glass-guarantee .section-title--dek { margin: 22px auto 50px auto; max-width: 760px; text-align: center; } .section-glass-guarantee .video-title { font-family: Gotham Bold, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #b6b6b6; letter-spacing: 2px; margin: 12px; text-transform: uppercase; } .section-glass-guarantee .video-title.tesla-tile { color: #0181FF; } @media (min-width: 0) and (max-width: 639px) { .section-glass-guarantee .video-title { margin-top: 25px; margin-bottom: 10px; } } .section-glass-guarantee .ball-drop-video { width: 100%; } .section-glass-guarantee .video-desc { color: #999; font-size: 13px; margin-top: -5px; padding: 15px 20px; } @media (min-width: 0) and (max-width: 639px) { .section-glass-guarantee { min-height: 400px; } } .section-powerwall_integration { padding-top: 100px; } @media (min-width: 640px) { .section-powerwall_integration .section-image.powerwall { max-width: 350px; } } .section-styles { text-align: center; } .section-styles .hero-style { transition: opacity 0.15s linear; } .section-styles .header-gradient { position: absolute; top: 0; width: 100%; } .section-styles .container-roof-styles .column { margin: 0 !important; width: 25% !important; } .section-styles .container-roof-styles .section-title--lede { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 11px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: 2px; padding: 12px 0; text-align: center; text-transform: uppercase; } @media (min-width: 0) and (max-width: 639px) { .section-styles .container-roof-styles .section-title--lede { font-family: Gotham Book, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 10px; } } .section-styles .desktop-style-selector .icon-wrapper { padding: 0; position: relative; width: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-styles .desktop-style-selector .icon-wrapper { /* IE10+ CSS styles go here */ height: 100%; } } .section-styles .desktop-style-selector .icon-wrapper:hover .hover-overlay, .section-styles .desktop-style-selector .icon-wrapper.current-carousel-item .hover-overlay { background: #0181FF; opacity: 0.6; transition: opacity 0.15s linear; } .section-styles .desktop-style-selector .icon-wrapper:hover .section-action, .section-styles .desktop-style-selector .icon-wrapper.current-carousel-item .section-action { background: none; opacity: 1; transition: opacity 0.15s linear; transition: background 0.15s linear; } .section-styles .desktop-style-selector .icon-wrapper:hover .section-action.text-hover, .section-styles .desktop-style-selector .icon-wrapper.current-carousel-item .section-action.text-hover { background: #0181FF; opacity: 0.9; transition: background 0.15s linear; } .section-styles .desktop-style-selector .icon-wrapper .section-image { height: 100%; width: 100%; } .section-styles .desktop-style-selector .icon-wrapper .hover-overlay { background: none; height: 100%; opacity: 0; position: absolute; top: 0; width: 100%; } .section-styles .desktop-style-selector .icon-wrapper .section-action { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; position: absolute; top: 0; transition: opacity 0.15s linear; width: 100%; } .section-styles .desktop-style-selector .icon-wrapper .section-action .order-action { font-family: Gotham Bold, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #fff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 8px; } .section-styles .desktop-style-selector .icon-wrapper .section-action .order-action:hover .hover-overlay { opacity: 1; transition: opacity 0.15s linear; } .section-styles .mobile-style-selector { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .section-styles .mobile-style-selector .roof-style { transition: width 0.15s linear; width: calc((100% * .666) / 3); } .section-styles .mobile-style-selector .roof-style.selected { transition: width 0.15s linear; width: 33.3%; } .section-styles .mobile-style-selector .roof-style.selected .icon-text, .section-styles .mobile-style-selector .roof-style.selected .icon-wrapper, .section-styles .mobile-style-selector .roof-style.selected .section-action { opacity: 1; transition: opacity 0.15s linear; } .section-styles .mobile-style-selector .roof-style.selected .section-action { display: block; } .section-styles .mobile-style-selector .icon-text { font-family: Gotham Bold, "M Hei PRC W45", "M Hei HK W42", "M Hei HK W40", "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 10px; height: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: normal; opacity: 0.7; transition: opacity 0.15s linear; } .section-styles .mobile-style-selector .icon-text .section-title--lede { padding-bottom: 4px; } .section-styles .mobile-style-selector .icon-wrapper { opacity: 0.7; padding: 0; position: relative; transition: opacity 0.15s linear; width: 100%; } .section-styles .mobile-style-selector .mobile-image { height: 155px; } .section-styles .mobile-style-selector .mobile-image img { height: 100%; -o-object-fit: cover; object-fit: cover; } .section-styles .mobile-style-selector .section-action { bottom: 15px; display: none; opacity: 0; padding: 0 15px; position: absolute; transition: opacity 0.15s linear; width: 100%; } .section-styles .mobile-style-selector .section-action .order-button { min-width: initial; overflow: hidden; padding-left: 4px; padding-right: 4px; text-overflow: ellipsis; } [id="styles"] { padding-bottom: 0; } [id="tech-specs"] { text-align: center; } [id="tech-specs"] .container:first-child { margin-bottom: 10px; } [id="tech-specs"] .solar-roof-dimension-images { padding: 100px 100px 50px 100px; } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .solar-roof-dimension-images { padding: 40px; } } [id="tech-specs"] .solar-roof-dimension-images .section-image { margin: 0 auto; max-width: 350px; } [id="tech-specs"] .warranty-container { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 0; } @media (min-width: 640px) { [id="tech-specs"] .warranty-container { padding: 120px 0 0 0; } } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .warranty-container { padding: 0 20px; } } @media (min-width: 640px) { [id="tech-specs"] .warranty-container .split-warranty { width: 40%; } } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .warranty-container .split-warranty { padding-right: 10px; width: 50%; } } @media (min-width: 640px) { [id="tech-specs"] .warranty-container .split-specs { padding-left: 20px; width: 60%; } } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .warranty-container .split-specs { padding-left: 10px; width: 50%; } } [id="tech-specs"] .warranty-container .list-items { text-align: left; } [id="tech-specs"] .warranty-container .list-items .list-item { font-family: "Gotham Book"; margin-bottom: 30px; } @media (min-width: 640px) { [id="tech-specs"] .warranty-container .list-items .list-item { padding-right: 20px; } } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .warranty-container .list-items .list-item { font-size: 13px; } } [id="tech-specs"] .warranty-container .list-items .list-item .section-title--lede { color: #333; display: block; text-align: left; } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .warranty-container .list-items .list-item .section-title--lede { padding-bottom: 8px; } } [id="tech-specs"] .warranty-container .list-items .list-item .section-title--dek { display: block; } [id="tech-specs"] .warranty-disclaimer { color: #999; font-family: "Gotham Book"; font-size: 11px; line-height: 13px; text-align: left; width: 100%; } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .warranty-disclaimer { text-align: center; } } [id="tech-specs"] .container-buttons { padding-top: 50px; } @media (min-width: 0) and (max-width: 639px) { [id="tech-specs"] .container-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; } [id="tech-specs"] .container-buttons a:first-child { margin-right: 4px; width: 50%; } [id="tech-specs"] .container-buttons a:last-child { margin-left: 4px; width: 50%; } } [id="tech-specs"] .container-buttons p.section-title--dek { font-size: 12px; text-align: left; } .section-glossary [id="glossary"] .container { max-width: 700px; } .section-glossary .glossary-item { margin-bottom: 40px; text-align: left; } @media (min-width: 0) and (max-width: 639px) { .section-glossary .glossary-item .section-title--lede { font-size: 13px; padding-bottom: 4px; } } .section-glossary .glossary-item .section-title--dek { color: #999; margin: 8px 0 0; } @media (min-width: 0) and (max-width: 639px) { .section-glossary .glossary-item .section-title--dek { font-size: 13px; } } .section-glossary .container-buttons { padding-top: 30px; } @media (min-width: 0) and (max-width: 639px) { .section-glossary .container-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; } .section-glossary .container-buttons a:first-child { margin-right: 4px; width: 50%; } .section-glossary .container-buttons a:last-child { margin-left: 4px; width: 50%; } } .section-glossary .faq { color: #000; font-family: "Gotham Book"; margin-top: 22px; text-align: center; } @media (min-width: 0) and (max-width: 639px) { .section-glossary .faq { font-size: 13px; } } .card-info-container { margin: 0; padding: 30px; padding: 1.875rem; width: 100%; border: 1px solid #ddd; } .card-info-container.cc-credits span { color: #333; font-family: "Gotham Medium"; font-size: 15px; } .card-info-container.cc-credits span:first-child { font-family: "Gotham Book"; color: #666; } .card-info-container .card-title { font-family: "Gotham Medium"; color: #333; font-size: 12px; } .card-info-container .card-number { font-family: "Gotham Book"; color: #666; } .card-info-container > div { float: left; margin-right: 30px; font-size: 15px; color: #ccc; } .card-info-container > div span { color: #444; display: block; margin-bottom: 5px; max-width: 130px; } .card-info-container > div.no-card { display: none; margin: 10px 0 0 10px; } .card-info-container.card-text .last { float: right; margin-right: 0; } .card-info-container .sc-logo { border: 2px solid #eee; display: inline-block; height: 30px; width: 50px; background: url("/tesla_theme/assets/img/own/cc_logos_mytesla.png?20150720") #fff no-repeat; background-size: cover; margin-top: 6px; } .i18n-zh_CN .card-info-container .sc-logo { background: url("/tesla_theme/assets/img/own/cc_logos_unionpay.png?20161121") #fff no-repeat; background-size: cover; } .card-info-container.CARD_MASTERCARD .sc-logo { background-position: -97px 0; } .card-info-container.CARD_VISA .sc-logo { background-position: -5px 0; margin-bottom: 0; } .card-info-container.CARD_AMEX .sc-logo { background-position: -51px 0; } .card-info-container.CARD_NOCARD > div { display: none; } .card-info-container.CARD_NOCARD .no-card, .card-info-container.CARD_NOCARD .last, .card-info-container.CARD_NOCARD .first { display: block; } .card-info-container.CARD_NOCARD .sc-logo { background: url("/tesla_theme/assets/img/own/nocard_icon.svg?20150720") no-repeat scroll 10px 0/contain; margin-top: 5px; } .card-info-container.CARD_PAYMENTDUE > div { display: none; } .card-info-container.CARD_PAYMENTDUE .payment-due, .card-info-container.CARD_PAYMENTDUE .last { display: block; } .card-info-container.CARD_PAYMENTDUE .payment-due { color: #666; margin-top: 10px; margin-top: 0.625rem; } .card-info-container.CARD_PAYMENTDUE .payment-due span { display: inline; } .card-info-container .sc-logo-text { top: -30px; display: inline-block; position: relative; } .card-info-container:after { display: block; content: " "; clear: both; } [id="payment-form"] { display: none; } [id="drupal-payment-solarroof"] { display: none; } [id="drupal-payment-solarroof"].intl-locale { display: block; } [id="drupal-payment-solarroof"] .modal-link { background: none; border: none; } @media (min-width: 640px) { [id="drupal-payment-solarroof"] .modal-link { margin-left: 10px; padding-left: 20px; } } [id="drupal-payment-solarroof"] .modal-link.locale::before { left: 0; } [id="drupal-payment-solarroof"] .modal-link.locale::after { content: ""; } [id="drupal-payment-solarroof"] h2 { margin-bottom: 16px; text-align: left; } [id="solarroof-order-form"] > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } [id="solarroof-order-form"] .installation-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 50%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 0) and (max-width: 639px) { [id="solarroof-order-form"] .installation-container { width: 100%; margin-bottom: 0; } } [id="solarroof-order-form"] .installation-container .form-item-firstname, [id="solarroof-order-form"] .installation-container .form-item-usermail, [id="solarroof-order-form"] .installation-container .form-item-lastname, [id="solarroof-order-form"] .installation-container .form-item-phonenumber { width: calc(50% - 6px); } [id="solarroof-order-form"] .payment-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 48%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 0) and (max-width: 639px) { [id="solarroof-order-form"] .payment-container { margin-bottom: 0; width: 100%; } } [id="solarroof-order-form"] .payment-container .credit-card-container { width: 100%; } [id="solarroof-order-form"] .payment-container .form-item-cc-expirationMonth, [id="solarroof-order-form"] .payment-container .form-item-cc-expirationYear, [id="solarroof-order-form"] .payment-container .form-item-cc-cvvNumber { width: 30%; } [id="solarroof-order-form"] .payment-container.hidden { display: none; } [id="solarroof-order-form"] .cc-info .card-info-container { padding: 17px; } [id="solarroof-order-form"] .cc-info .change-cc-container { float: right; margin: 0; } [id="solarroof-order-form"] .pay-with-profile-submit-area { clear: both; } [id="solarroof-order-form"] .password-container { width: 100%; } @media (min-width: 0) and (max-width: 639px) { [id="solarroof-order-form"] .password-container { margin-bottom: 0; } } [id="solarroof-order-form"] .password-container .fieldset-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } [id="solarroof-order-form"] .password-container .form-label { text-align: left; } [id="solarroof-order-form"] .password-container .form-item-password-input { width: 50%; } [id="solarroof-order-form"] .password-container .form-item-confirm-password { width: 48%; } [id="solarroof-order-form"] .solarroof-terms-and-conditions, [id="solarroof-order-form"] .solarroof-terms-and-conditions-cc { font-family: "Gotham Book"; font-size: 13px; } @media (min-width: 0) and (max-width: 639px) { [id="solarroof-order-form"] .solarroof-terms-and-conditions, [id="solarroof-order-form"] .solarroof-terms-and-conditions-cc { margin: 10px 0; } } @media (min-width: 640px) { [id="solarroof-order-form"] .solarroof-terms-and-conditions, [id="solarroof-order-form"] .solarroof-terms-and-conditions-cc { width: 47.5%; float: left; margin-right: 5%; } } [id="solarroof-order-form"] .submit-container { clear: none; } @media (min-width: 640px) { [id="solarroof-order-form"] .submit-container { width: 47.5%; float: right; margin-right: 0; } } [id="solarroof-order-form"] .submit-container .form-submit { margin: 0; } [id="autocomplete-field"].js-invalid { border-color: #f00; } @media (min-width: 0) and (max-width: 639px) { .solarroof-order-form-container { clear: both; margin-bottom: 40px; } } .solarroof-order-form-container .credit-card-container { position: relative; } @media (min-width: 0) and (max-width: 639px) { .solarroof-order-form-container .credit-card-container { clear: both; } } .solarroof-order-form-container .credit-card-container span { background-size: 60px; height: 30px; position: absolute; right: 5px; top: 5px; width: 50px; z-index: 1; } .solarroof-order-form-container .credit-card-container .MASTERCARD, .solarroof-order-form-container .credit-card-container .VISA, .solarroof-order-form-container .credit-card-container .AMEX { background: url("/tesla_theme/assets/img/own/own-paymethod-icons-amex-1.png?20150720") transparent no-repeat; border: 2px solid #ccc; } .solarroof-order-form-container .credit-card-container .MASTERCARD { background-position: -7px -44px; } .solarroof-order-form-container .credit-card-container .VISA { background-position: -7px 5px; } .solarroof-order-form-container .credit-card-container .AMEX { background-position: -7px -19px; } .submit-and-disclaimer { overflow: auto; margin-bottom: 60px; } @media (min-width: 0) and (max-width: 639px) { .submit-and-disclaimer { margin-bottom: 40px; } } [id="payment-form-modal"] .modal-content { height: 300px; padding-top: 50px; width: 500px; } .modal-content .modal-body { color: #333; } [id=payment-form-modal] .modal-content .modal-body { text-align: center; } .modal-content img { margin-bottom: 50px; }