- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
$(function(){
// ******************************************************
// WS-1967 - CHOOSE EXPERIENCE B OR C
// ******************************************************
var experience = 'b';
// ******************************************************
// MOBILE PRODUCTS
// ******************************************************
// insert mobile product test markup
(function(){
// put in mobile subscription products
var mobile_products_subscription = '<style> /********************************* UTILITIES **********************************/ .zerofont{ font-size: 0px; } .hide_for_test{ display: none; } .show_for_test{ display: block; } /********************************* STRUCTURE **********************************/ .oct_2016_container{ font-family: gothambook, sans-serif; background-color: #F7F6F0; color: #333; padding: 40px 10px; text-align: center; font-size: 20px; } .oct_2016_col{ box-sizing: border-box; vertical-align: top; /*font-size: 16px;*/ font-size: 14px; display: inline-block; /*width: 50%;*/ margin: auto; max-width: 540px; text-align: left; padding: 20px; /*border: 1px dotted red;*/ } .oct_2016_section_header{ font-size: 24px; max-width: 650px; margin: 0px auto 20px; /*border: 1px dotted orange;*/ } .mar_2017_product_image_mobile{ width: 100%; height: 0px; margin-bottom: 15px; background-repeat: no-repeat; background-position: center top; background-size: contain; } .mar_2017_subscription_image_mobile{ padding-top: 58%; /* to control aspect ratio */ background-image: url(\'/assets/catalog_mar_2017/online-lockup.png\'); } .mar_2017_cddl_image_mobile{ padding-top: 56%; /* to control aspect ratio */ background-image: url(\'/assets/catalog_mar_2017/oct_2016_cddl.png\'); } .oct_2016_subscription_image{ background-image: url(\'/assets/catalog_mar_2017/online-lockup.png\'); background-repeat: no-repeat; background-position: center 18px; background-size: 90%; ; margin-top: 40px; } .oct_2016_cddl_image{ background-image: url(\'/assets/catalog_mar_2017/oct_2016_cddl.png\'); background-repeat: no-repeat; background-position: center 18px; background-size: 95%; padding-bottom: 340px; } .oct_2016_subscription_image, .oct_2016_cddl_image{ display: none; } @media(min-width:750px){ .oct_2016_col{ width: 50%; } } /********************************* REVIEW STARS **********************************/ .oct_2016_review_star_container{ margin: 10px 0px 15px; } .hollow_stars{ position: relative; display: inline-block; vertical-align: middle; font-size: 16px; } .filled_stars{ position: absolute; left: 0px; top: 0px; overflow: hidden; white-space: nowrap; width: 91.5%; } .oct_2016_review_star_text{ font-size: 14px; display: inline-block; vertical-align: bottom; } /********************************* BLUE THEME **********************************/ .oct_2016_blue_bg{ background-color: #4788BE; color: #fff; } .oct_2016_blue_bg .oct_2016_language_header{ /*color: #EFDC00;*/ } .oct_2016_blue_bg .oct_2016_product_intro{ font-family: gothamlight; } .oct_2016_blue_bg .oct_2016_ul li{ /*font-family: gothambook;*/ font-family: gothamlight; } .oct_2016_blue_bg b{ font-family: gothambold; } .oct_2016_blue_bg .oct_2016_ul li:before{ border-color: #FABF2C; } .oct_2016_blue_bg .oct_2016_guarantee_line1{ color: #FABF2C; } .oct_2016_blue_bg .hollow_stars{ color: #FABF2C; } /********************************* GOLD THEME **********************************/ .oct_2016_gold_bg{ background-color: #FABF2C; color: #392E0B; } .oct_2016_gold_bg .oct_2016_language_header{ /*color: #27a;*/ } .oct_2016_gold_bg .oct_2016_ul li:before{ border-color: #4788BE; } .oct_2016_gold_bg .oct_2016_product_square{ /*background-color: #0098db; background-image: radial-gradient(#0088cb 83%,#0098db);*/ } .oct_2016_gold_bg .hollow_stars{ color: #4788BE; } /********************************* PRODUCT INFO **********************************/ .oct_2016_language_header, .oct_2016_language_subhead{ /*font-size: 30px;*/ font-size: 22px; } .oct_2016_language_header{ font-family: gothambold; } .oct_2016_language_subhead{ font-family: gothamlight; text-transform: uppercase; } .oct_2016_language_subhead span{ text-transform: none; } .oct_2016_product_info_square{ text-align: left; } .oct_2016_product_intro{ line-height: 1.3; } .oct_2016_ul{ margin: 25px 0px 0px; padding: 0px 0px 0px 30px; list-style-type: none; } .oct_2016_ul li{ position: relative; margin-bottom: 20px; /*font-size: 15px; font-family: gothambold;*/ } .oct_2016_ul li:before{ content: \'\'; position: absolute; left: -29px; top: 2px; display: inline-block; border: 2px solid #0098db; border-top: none; border-right: none; height: 8px; width: 18px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .rs_classic{ background-color: #392E0B; color: #fff; font-size: 20px; padding: 20px; font-family: gothamlight; text-align: center; text-transform: uppercase; position: relative; } .rs_classic span{ font-family: gothambold; } .rs_classic:after{ content: \'\'; border-top: 20px solid #392E0B; border-left: 26px solid transparent; border-right: 26px solid transparent; position: absolute; bottom: -20px; left: calc(50% - 26px); } @media(min-width:600px){ .rs_classic{ font-size: 24px; } } /********************************* PRODUCT OPTIONS - SQUARE **********************************/ .oct_2016_product_square{ border-radius: 8px; /* border: 1px solid #EBEAE6; background-color: #D6BD31; background-image: radial-gradient(#ca2 83%,#db3); */ background-color: #fff; margin: 9px; display: inline-block; color: #333; width: 245px; vertical-align: baseline; overflow: hidden; } .oct_2016_product_square:last-of-type{ /*margin-bottom: 0px;*/ } .oct_2016_product_square_content{ display: block; /*background-color: #fff; border-top-left-radius: 110px 30px;*/ padding: 0px; } .oct_2016_product_square_header{ text-transform: uppercase; font-family: gothambold; font-size: 16px; border-bottom: 1px solid #d7d7d7; padding: 10px; background-color: #f1f1f1; } .oct_2016_product_square_subhead{ text-transform: uppercase; font-family: gothamlight; font-size: 14px; } /********************************* PRICES - SQUARE **********************************/ .oct_2016_price_container_square{ vertical-align: middle; margin: 6px 0px 2px; } .oct_2016_price_container_square_cddl{ /*margin-bottom: 0px;*/ } .oct_2016_big_price_square{ font-size: 60px; vertical-align: baseline; /*color: #0078bb;*/ font-family: gothamlight; } .oct_2016_big_price_square:before{ content: \'$\'; vertical-align: top; /*font-size: 50%;*/ /*position: relative;*/ /*top: 5px;*/ } .oct_2016_big_price_square:after{ content: \' / Month\'; font-size: 14px; vertical-align: baseline; position: relative; top: -2px; font-family: gothambook; color: #333; } .oct_2016_big_price_square.no_month:after{ display: none; } /********************************* GIFTING - SQUARE **********************************/ .oct_2016_gifting_square, .oct_2016_gifting_square *{ vertical-align: middle; } .oct_2016_gifting_square{ font-size: 15px; margin-right: 3px; display: inline-block; /*background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\'); background-repeat: no-repeat; background-position: left 50%; background-size: 17px; padding-left: 21px; margin: 16px auto; } /********************************* CART - SQUARE **********************************/ .oct_2016_addtocart_square{ vertical-align: middle; /*background: #0098db;*/ background-color: #34A4D9; color: #fff; border-radius: 3px; padding: 16px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-family: gothambold; display: block; margin: 0px 24px; } .oct_2016_addtocart_square:hover{ background-color: #ecc200; color: #363636; text-decoration: none; } /********************************* MULTIPAY and MSRP - SQUARE **********************************/ .oct_2016_product_square_multipay{ font-size: 12px; margin: 0px -20px; } .oct_2016_multipay_strikeprice_square{ color: #d00; position: relative; } .oct_2016_multipay_strikeprice_square:after{ content: \'\'; position: absolute; width: 110%; left: -5%; top: 50%; border-top: 1px solid #d00; } .oct_2016_msrp_square{ font-size: 14px; margin-bottom: 10px; } /********************************* BEST VALUE **********************************/ .oct_2016_best_value{ font-size: 15px; text-transform: uppercase; font-family: gothambold; background-color: #efc344; color: #392E07; padding: 10px 0px; /*display: inline-block;*/ /*margin-bottom: 5px;*/ position: relative; line-height: 17px; } /* .oct_2016_best_value:before, .oct_2016_best_value:after{ content: \'\'; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border: 12px solid transparent; border-right: 0px; border-left: 7px solid #fff; } .oct_2016_best_value:after{ left: auto; right: 0px; border-left: 0px; border-right: 7px solid #fff; } */ /********************************* GUARANTEE **********************************/ .oct_2016_guarantee_vertical{ /*background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\'); background-repeat: no-repeat; background-position: center top; padding-top: 130px; margin-top: 20px; } .oct_2016_blue_bg .oct_2016_guarantee_vertical { margin-right: 75px; } @media (max-width: 1087px) { .oct_2016_blue_bg .oct_2016_guarantee_vertical { margin-bottom: 20px; display: block; margin-right: 0; } } .oct_2016_guarantee_line1{ font-size: 16px; text-transform: uppercase; color: #4788BE; font-family: gothambold; } .oct_2016_guarantee_line2{ font-size: 14px; } .meclabs_guarantee_proof { display: inline-block; vertical-align: bottom; margin: 0px 20px; border: 1px solid #fff; padding: 20px 30px; } /* @media screen and (max-width: 1112px) { .meclabs_guarantee_proof { margin-top: 30px; } .oct_2016_guarantee_vertical { margin-right: 0; } } */ .meclabs_trusted { font-size: 16px; line-height: 1; margin-bottom: 14px; font-family: gothamlight; } .meclabs_trusted span { font-family: gothambold; text-transform: uppercase; color: #FABF2C; display: block; padding-bottom: 3px; } .meclabs_guarantee_proof img { vertical-align: middle; padding: 0px 10px; width: 20%; } /********************************* CD / DOWNLOAD BUTTONS **********************************/ .oct_2016_cd_download_container{ margin-bottom: 30px; } .oct_2016_cd_download_buttons{ display: inline-block; border: 2px solid #392E07; border-radius: 4px; } .oct_2016_cd_download_container label{ font-size: 16px; display: inline-block; padding: 16px 0px; text-transform: uppercase; cursor: pointer; font-family: gothambold; width: 100%; } .oct_2016_cd_download{ /*display: none;*/ position: absolute; left: -1000px; } .oct_2016_cd_download:checked + label{ background: #392E07; color: #fff; } @media(min-width: 560px){ .mobile_products_container{display:none !important;} .oct_2016_cd_download_buttons{ width: 460px; } .oct_2016_cd_download_container label{ width: 50%; } } .accessibility_legend{ display: none; } .comparison_chart_link { text-align: center; font-size: 20px; } .comparison_chart_link span { cursor: pointer; text-decoration: underline; } .oct_2016_blue_bg .comparison_chart_link { color: #EFDC00; padding-top: 52%; text-align: center; width: 100%; font-family: gothammedium; } .oct_2016_gold_bg .comparison_chart_link { color: #4788BE; padding: 0 0 50px 0; margin-top: 0px; font-family: gothammedium; } .meclabs_cd_title .comparison_chart_link { padding-top: 0px; margin-bottom: 20px; } @media(max-width: 743px) { .comparison_chart_link { display: none !important; } } .expand_box_svg { width: 25px; height: 25px; vertical-align: middle; cursor: pointer; margin-left: 5px; } .expand_box_svg * { stroke: #fff; stroke-width: 4; stroke-linejoin: round; fill: none; } .oct_2016_gold_bg .expand_box_svg * { stroke: #4788BE; } .comparison_chart_link .js_open_comparison_chart { padding-bottom: 0px } .comparison_chart_container { z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; overflow: scroll; display: none; } @media(max-width: 743px) { .comparison_chart_container { display: none !important; } } .comparison_chart_bg_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(33, 33, 33, 0.8); } .comparison_chart { z-index: 1001; display: inline-block; margin-top: 40px; /*width: 800px; max-width: 100%;*/ width: 100%; max-width: 1000px; } .comparison_table_container { font-family: gothambook; color: #333; padding: 60px 30px 20px 30px; background: #f9f9f9; border-radius: 8px; } .comparison_chart table { width: 100%; text-align: center; border-collapse: collapse; } .comparison_chart td, .comparison_chart th { width: 15%; text-align: center; border-bottom: 1px solid #999; border-right: 1px solid #999; } .comparison_chart td:first-of-type, .comparison_chart th:first-of-type { width: 40%; padding-left: 45px; } .td_subtitle { color: #aaa; } .comparison_chart td:first-of-type { background-repeat: no-repeat; background-position: 5px center; } .comparison_chart td.comparison_best { background-image: url(\'/assets/stone-icon.svg\'); background-position: 10px center; } .comparison_truaccent { background-image: url(\'/assets/truaccent-icon.svg\'); } .comparison_adaptive { background-image: url(\'/assets/adaptive-recall-icon.svg\'); } .comparison_offline { background-image: url(\'/assets/offline-access-icon.svg\'); } .comparison_instant { background-image: url(\'/assets/instant-access-icon.svg\'); } .comparison_award { background-image: url(\'/assets/award-winning-icon.svg\'); } .comparison_anydevice { background-image: url(\'/assets/any-device-icon.svg\'); } .comparison_updates { background-image: url(\'/assets/updates-icon.svg\'); } .comparison_tutoring { background-image: url(\'/assets/tutors-icon.svg\'); } .comparison_phrasebook { background-image: url(\'/assets/phrasebook-icon.svg\'); } .comparison_chart th { font-size: 14px; text-transform: uppercase; font-family: gothambold; font-weight: normal; padding-bottom: 10px; vertical-align: bottom; } .comparison_chart td { font-size: 14px; height: 2.2em; padding: 0.5em; } .comparison_chart td:first-of-type { text-align: left; } .comparison_chart th:last-of-type, .comparison_chart td:last-of-type { border-right: none; } .th_subscription_img { max-width: 110px; } .th_download_img { max-width: 80px; } .th_cd_img { max-width: 90px; display: inline-block; margin-bottom: 5px; } .comparison_chart td.asterisk_td { text-align: right; border: none; color: #888; font-family: gothamlight; font-size: 13px; padding-top: 15px; background-image: none; } .comparison_asterisk_img { /*display: block;*/ position: relative; display: inline-block; } .comparison_asterisk_img:after { content: \'*\'; position: absolute; top: 2px; right: -10px; } .comparison_table_container{ position: relative; } .comparison_close_x{ position: absolute; top: 20px; right: 20px; z-index: 1002; cursor: pointer; width: 40px; height: 40px; } .comparison_close_x svg{ width: 100%; height: 100%; } .meclabs_cd_close { position: absolute; top: 20px; right: 10%; color: #E9D600; cursor: pointer; } .meclabs_cd_close:hover { color: #fff; } .cddl_test_link_container{ padding: 20px 0px; font-size: 14px; } .cddl_test_link_container a{ color: #0098db; text-decoration: none; } .cddl_test_link_container a:hover{ color: #1ae; } @media(min-width:600px){ .oct_2016_col{ font-size: 16px; } .oct_2016_language_header, .oct_2016_language_subhead{ font-size: 30px; } .oct_2016_review_star_container{ margin: 10px 0px 30px; } .oct_2016_product_square_content{ padding: 0 0 24px; } .oct_2016_product_square_header{ padding: 24px; } .oct_2016_price_container_square{ margin: 20px 0px 10px; } .oct_2016_msrp_square{ margin-bottom: 18px; } .oct_2016_gifting_square{ margin: 20px auto 12px; } .oct_2016_guarantee_vertical{ padding-top: 140px; margin-top: 50px; } .oct_2016_guarantee_line1{ font-size: 18px; } .oct_2016_guarantee_line2{ font-size: 16px; } } @media(min-width:750px){ .mar_2017_product_image_mobile{ display: none; } .oct_2016_subscription_image, .oct_2016_cddl_image{ display: inline-block; } .oct_2016_gold_bg .oct_2016_cddl_image, .oct_2016_gold_bg .oct_2016_product_intro, .oct_2016_gold_bg .oct_2016_ul , .oct_2016_review_star_container { display: none; } .oct_2016_gold_bg .oct_2016_product_info_square { text-align: center; } } /*********************************************************** MOBILE PRODUCTS ************************************************************/ .mobile_products_container{ display: none; } @media(max-width: 560px){ /********************************* MOBILE PRODUCTS - SHOW vs HIDE **********************************/ .oct_2016_product_square, .oct_2016_container .oct_2016_guarantee_vertical, .cddl_row_1, .js_product_boxes_desktop{ display: none !important; } .mobile_products_container{ display: block; } /********************************* MOBILE PRODUCTS - MISC STYLES **********************************/ .oct_2016_gold_bg{ padding-bottom: 10px; } /********************************* MOBILE PRODUCTS **********************************/ .mobile_products_container{ padding: 0px 10px; } .mobile_product_label{ box-sizing: border-box; font-size: 16px; background-color: #fff; color: #382E0F; border-radius: 5px; padding: 20px; display: block; text-align: right; cursor: pointer; margin: 10px auto 0px; max-width: 370px; } .mobile_product_label:hover{ background-color: #fffdee; } .mobile_radio{ display: none; } .mobile_radio + span{ width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 2px solid #4696D1; background-color: #fff; vertical-align: middle; position: relative; } .mobile_radio:checked + span{ background-color: #4696D1; } .mobile_radio:checked + span:after{ content: \'\'; display: block; position: absolute; left: 5px; top: 6px; width: 10px; height: 5px; border: 2px solid #fff; border-top: none; border-right: none; -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile_product_name_container{ float: left; vertical-align: middle; position: relative; top: -2px; left: -4px; } .mobile_product_name{ vertical-align: middle; margin-left: 5px; font-family: gothambold, sans-serif; } .mobile_prices_container{ vertical-align: middle; } .mobile_msrp{ position: relative; color: #d00; margin-right: 5px; } .mobile_msrp:after{ content: \'\'; position: absolute; width: 110%; left: -5%; top: 50%; border-top: 1px solid #d00; } .mobile_price{ font-family: gothambold, sans-serif; } .mobile_msrp:before, .mobile_price:before{ content: \'$\'; } /********************************* MOBILE GIFTING **********************************/ .mobile_gifting, .mobile_gifting *{ vertical-align: middle; } .mobile_gifting{ font-size: 15px; margin-right: 3px; display: inline-block; /*background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\'); background-repeat: no-repeat; background-position: left 50%; background-size: 17px; padding-left: 21px; margin: 20px auto; } /********************************* MOBILE ADD TO CART **********************************/ .addtocart_mobile{ box-sizing: border-box; vertical-align: middle; background-color: #EFC344; color: #363636; border-radius: 5px; padding: 20px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-family: gothambold; display: block; margin: 0px auto; max-width: 370px; transition: all 0.3s; } .addtocart_mobile:hover{ background-color: #fff0cc; color: #363636; text-decoration: none; } .oct_2016_gold_bg .addtocart_mobile{ background-color: #4788BE; color: #fff; } .oct_2016_gold_bg .addtocart_mobile:hover{ background-color: #e2f3ff; color: #363636; } /********************************* MOBILE GUARANTEE **********************************/ .mobile_guarantee{ /*background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\'); background-repeat: no-repeat; background-position: center top; background-size: auto 100px; padding-top: 120px; margin: 30px auto; font-family: gothambook, sans-serif; font-size: 16px; color: #fafafa; } .oct_2016_gold_bg .mobile_guarantee{ color: #363636; } /********************************* MOBILE GUARANTEE PROOF **********************************/ .meclabs_guarantee_proof_mobile{ margin: 0px 20px; border: 1px solid #fff; } .meclabs_guarantee_proof{ margin: 0px 20px; border: none; margin-left: -10px; margin-right: -10px; padding: 40px 0px; overflow: hidden; position: relative; background-color: #3E77A6; display: block; } .meclabs_guarantee_proof:before{ content: \'\'; display: block; position: absolute; left: 0px; top: 0px; width: 100%; box-shadow: 0px 0px 5px 0px rgba(33,33,33,0.9); height: 1px; } .meclabs_trusted{ margin-bottom: 30px; } .meclabs_guarantee_proof img{ width: 24%; max-width: 100px; } .oct_2016_blue_bg{ padding-bottom: 0px; } /********************************* CLASSIC CLOSE **********************************/ .js_rs_classic_close{ width: 22px; height: 22px; border-radius: 50%; background-color: #4696D1; border: 2px solid #4696D1; vertical-align: middle; display: block; margin: auto; position: relative; top: 10px; cursor: pointer; } .js_rs_classic_close:after, .js_rs_classic_close:before{ content: \'\'; display: block; position: absolute; left: 18%; top: 45%; width: 65%; height: 0px; border-bottom: 2px solid #fff; border-top: none; border-right: none; } .js_rs_classic_close:before{ -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .js_rs_classic_close:after{ -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /********************************* CD DOWNLOAD TOGGLE - MOBILE **********************************/ .oct_2016_cd_download_container{ padding: 0px 10px; } .oct_2016_cd_download_buttons{ max-width: 370px; box-sizing: border-box; } .oct_2016_cd_download_container label{ text-align: left; position: relative; box-sizing: border-box; padding-left: 47px; } .oct_2016_cd_download_container label:before{ content: \'\'; position: absolute; left: 10px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 2px solid #392E07; vertical-align: middle; } .oct_2016_cd_download:checked + label:before{ background-color: #4696D1; border: 2px solid #4696D1; } .oct_2016_cd_download:checked + label:after{ content: \'\'; display: block; position: absolute; left: 17px; top: 20px; width: 10px; height: 5px; border: 2px solid #fff; border-top: none; border-right: none; -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } } </style> <!--********************************************* mobile products subscription start **********************************************--> <div class="mobile_products_container js_oct_2016_product"> <!-- 24-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="24" data-media="subscription" autocomplete="off" checked><span></span> <span class="mobile_product_name">24 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="24" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="24" data-media="subscription">XX</span> </span> </label> <!-- 12-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="12" data-media="subscription" autocomplete="off"><span></span> <span class="mobile_product_name">12 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="12" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="12" data-media="subscription">XX</span> </span> </label> <!-- 6-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="06" data-media="subscription" autocomplete="off"><span></span> <span class="mobile_product_name">6 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="06" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="06" data-media="subscription">XX</span> </span> </label> <!-- 3-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="03" data-media="subscription" autocomplete="off"><span></span> <span class="mobile_product_name">3 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="03" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="03" data-media="subscription">XX</span> </span> </label> <!-- gifting --> <label class="mobile_gifting"><input autocomplete="off" class="js_oct_2016_gifting" autocomplete="off" type="checkbox"> <span>Give as a gift!</span></label> <!-- cart --> <a href="#" class="addtocart_mobile js_oct_2016_addtocart js_addtocart_mobile" data-lvl="24" data-media="subscription" data-lang="esp" data-gifting="">Add to Cart</a> <!-- guarantee --> <div class="mobile_guarantee"> 30-Day Money-Back Guarantee </div> </div> <!--********************************************* mobile products subscription end **********************************************--> ';
$('.oct_2016_product_square:eq(0)').parent()
.addClass('js_product_boxes_desktop')
.before(mobile_products_subscription);
// put in mobile cd/download products
var mobile_products_cddl = '<!--********************************************* mobile products cd/download start **********************************************--> <div class="mobile_products_container js_oct_2016_product"> <!-- Levels 1-5 --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile js_cddl_media" type="radio" name="js_mobile_cddl_radios" data-lvl="S5" data-media="download" autocomplete="off" checked><span></span> <span class="mobile_product_name">Levels 1-5</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="S5" data-media="download">XX</span> <span class="mobile_price js_oct_2016_price js_cddl_media no_month" data-lvl="S5" data-media="download">XX</span> </span> </label> <!-- Levels 1-3 --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile js_cddl_media" type="radio" name="js_mobile_cddl_radios" data-lvl="S3" data-media="download" autocomplete="off"><span></span> <span class="mobile_product_name">Levels 1-3</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="S3" data-media="download">XX</span> <span class="mobile_price js_oct_2016_price js_cddl_media no_month" data-lvl="S3" data-media="download">XX</span> </span> </label> <!-- Level 1 --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile js_cddl_media" type="radio" name="js_mobile_cddl_radios" data-lvl="L1" data-media="download" autocomplete="off"><span></span> <span class="mobile_product_name">Level 1</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="L1" data-media="download">XX</span> <span class="mobile_price js_oct_2016_price js_cddl_media no_month" data-lvl="L1" data-media="download">XX</span> </span> </label> <!-- gifting --> <label class="mobile_gifting"><input autocomplete="off" class="js_oct_2016_gifting" autocomplete="off" type="checkbox"> <span>Give as a gift!</span></label> <!-- cart --> <a href="#" class="addtocart_mobile js_oct_2016_addtocart js_addtocart_mobile js_cddl_media" data-lvl="S5" data-media="download" data-lang="esp" data-gifting="">Add to Cart</a> <!-- guarantee --> <div class="mobile_guarantee"> 30-Day Money-Back Guarantee </div> </div> <!--********************************************* mobile products cd/download end **********************************************-->';
$(mobile_products_cddl).insertBefore('.comparison_chart_container');
// wrap cddl products in js_product_boxes_desktop div (for styling and script purposes)
$('.oct_2016_gold_bg .zerofont:eq(0)').append('<div class="js_product_boxes_desktop"></div>');
$('.oct_2016_gold_bg .js_product_boxes_desktop').append($('.oct_2016_gold_bg .oct_2016_product_square'));
})();
// close mobile cd/download products when x clicked
$('.rs_classic').append('<div class="js_rs_classic_close"></div>');
$('.js_rs_classic_close').on('click', function(){
$('.cddl_test_link_container').slideDown();
$('.rs_classic, .oct_2016_gold_bg').slideUp();
});
// add class to cd/download description for responsive hiding
$('.oct_2016_cddl_image').parent().addClass('cddl_row_1');
// *****************************************************
// MOBILE PRODUCT RADIOS
// *****************************************************
$('.js_radio_lvl_mobile').on('change', update_mobile_lvl);
function update_mobile_lvl(){
var media = $(this).attr('data-media');
var selected_subscription = $('.js_radio_lvl_mobile[data-media='+media+']:checked');
var lvl = selected_subscription.attr('data-lvl');
$('.js_addtocart_mobile[data-media='+media+']').attr('data-lvl',lvl);
$(document).trigger('cart_update');
}
// *******************************************
// TOGGLE GIFTING - note this is just temporarily refreshing the event for the mobile test; get rid of this when porting because it's already in the main code
// *******************************************
$('.js_oct_2016_gifting').on('change', function(){
// update data-gifting attribute on nearest cart button
$(this).closest('.js_oct_2016_product').find('.js_oct_2016_addtocart').attr('data-gifting', this.checked || '');
// tell cart buttons about the change
$(document).trigger('cart_update');
});
// update language
$(document).trigger('lang_change', {
'lang': window.lang || 'esp'
});
// *******************************************
// S3 LANGUAGES
// *******************************************
// if s3 lang (S5 unavailable)
if(!RSI({lvl:'S5'})[0]){
// make sure cart button has correct lang
$('.js_addtocart_mobile').attr('data-lang',lang);
// re-enable the mobile cart button for s3 products
$('.js_addtocart_mobile')
.removeClass('js_oct_2016_no_s5')
.addClass('js_oct_2016_addtocart');
// re-show mobile cddl products
$('.mobile_products_container').show();
// remove s5 radio
$('.js_radio_lvl_mobile[data-lvl=S5]').closest('.mobile_product_label').remove();
// select s3 radio
$('.js_radio_lvl_mobile[data-lvl=S3]').click();
// make sure mobile products disappear on desktop
// (note: 560px+ breakpoint done in css)
}
// update prices and cart buttons
$(document).trigger('price_update');
$(document).trigger('cart_update');
// ******************************************************
// NEW FEATURES TOGGLE - experience c only
// ******************************************************
// if experience is c (upper or lower case both fine)
if(/^c$/i.test(experience)){
// insert mobile new features toggle
(function(){
var html = '<style> .mobile_new_features_toggle_container{ display: none; background-color: #F4C12E; text-align: center; font-size: 16px; padding: 20px; position: relative; z-index: 1; } @media(max-width: 600px){ .new_features{ display: none; } .mobile_new_features_toggle_container{ display: block; } } .mobile_new_features_toggle_container:after { content: \'\'; border-top: 20px solid #F4C12E; border-left: 26px solid transparent; border-right: 26px solid transparent; position: absolute; bottom: -20px; left: calc(50% - 26px); -ms-transform: scaleY(0); -ms-transform-origin: top; -ms-transition: transform 0.3s; -o-transform: scaleY(0); -o-transform-origin: top; -o-transition: transform 0.3s; -moz-transform: scaleY(0); -moz-transform-origin: top; -moz-transition: transform 0.3s; -webkit-transform: scaleY(0); -webkit-transform-origin: top; -webkit-transition: transform 0.3s; transform: scaleY(0); transform-origin: top; transition: transform 0.3s; } .mobile_show_down_arrow:after{ -ms-transform: scaleY(1); -o-transform: scaleY(1); -moz-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } .mobile_new_features_title{ text-transform: uppercase; font-family: gothambold, sans-serif; } .mobile_new_features_subtitle{ text-transform: uppercase; } .js_mobile_features_open{ color: #0098db; margin-top: 16px; display: inline-block; } .mobile_features_toggle{ position: relative; } .js_mobile_features_close_container{ position: absolute; left: 0px; top: 3px; width: 100%; display: none; } .js_mobile_features_close{ width: 22px; height: 22px; border-radius: 50%; background-color: #4696D1; border: 2px solid #4696D1; vertical-align: middle; display: inline-block; margin: auto; position: relative; top: 10px; cursor: pointer; } .js_mobile_features_close:after, .js_mobile_features_close:before{ content: \'\'; display: block; position: absolute; left: 18%; top: 45%; width: 65%; height: 0px; border-bottom: 2px solid #fff; border-top: none; border-right: none; } .js_mobile_features_close:before{ -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .js_mobile_features_close:after{ -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } </style> <div class="mobile_new_features_toggle_container"> <div class="mobile_new_features_title"> New Features </div> <div class="mobile_new_features_subtitle"> For Rosetta Stone Online Subscriptions! </div> <div class="mobile_features_toggle"> <a href="#" class="js_mobile_features_open"> see what\'s new </a> <div class="js_mobile_features_close_container"> <div class="js_mobile_features_close"></div> </div> </div> </div> ';
$(html).insertBefore('.new_features');
})();
// open new features on mobile
$('.js_mobile_features_open').on('click', function(e){
e.preventDefault();
$('.js_mobile_features_close_container').fadeIn();
$('.js_mobile_features_open').animate({'opacity':'0'});
$('.new_features').slideDown();
$('.mobile_new_features_toggle_container').addClass('mobile_show_down_arrow');
});
// close new features on mobile
$('.js_mobile_features_close').on('click', function(){
$('.js_mobile_features_close_container').fadeOut();
$('.js_mobile_features_open').animate({'opacity':'1'});
$('.new_features').slideUp();
$('.mobile_new_features_toggle_container').removeClass('mobile_show_down_arrow');
});
}
});