/* ecommerce css 2016/2017 */ /*a ranger*/ /* pack pro summary ________________________________________________________________________________________________*/ .packpro-summary table, .packpro-summary table tr, .packpro-summary table tr:nth-child(even), .packpro-summary table tr td{ padding: 0; margin: 0; vertical-align: top; background: none; border:none;} .packpro-summary table tr td{ padding: 10px 0; width: auto; font: 12px/1.2em var(--font-text); font-weight: bold; color: var(--col-secondary-text); text-align: left; border-top: 1px solid #DDD;} .packpro-summary table tr td:nth-child(even){ padding-left: 10px; width: auto; font: 14px/1.2em var(--font-text); font-weight: bold; color: var(--col-primary-text); text-align: right;} .packpro-summary table.pp-s-c tr:first-child td{ border-top: none;} .packpro-summary .included{ margin: 0; padding: 2px 8px; display: inline-block; position: relative; font:14px/1.2em var(--font-text); font-weight: bold; color:#FFF; background: #23a83c; border-radius: var(--radius);} .packpro-summary .pp-s-c-t{ margin: 20px 0; padding: 10px 0 0;} .packpro-summary .pp-s-c-t tr td{ padding: 20px 0 0; width: 50%; font: 16px/1.2em var(--font-text); font-weight: bold; color: #242729; border-top: 2px solid #005c7e;} .packpro-summary .pp-s-c-t tr td.total-price{ font: 18px/1.2em var(--font-text); font-weight: bold; color: #f53f5b; border-top: 2px solid #005c7e;} .packpro-summary .pp-s-c-t tr td.total-price sub{ font: 14px/1.2em var(--font-text), sans-serif;} .packpro-summary .pp-s-c-e{ margin: 15px 0; padding: 10px; display: block; position: relative; font:14px/1.2em var(--font-text); font-weight: bold; color:#005c7e; text-align: center; background: #DDD; border-radius: var(--radius);} #flux-summary.packpro-summary .content{ margin: 10px 20px; width: auto;} /* ============================== INDEX 1 - 0 Reset 2 - 0 Template layout 2 - 1 Container style 2 - 2 header style 3 - 0 Text layout 3 - 1 Heading style 3 - 2 Text style 4 - 0 form layout 4 - 1 base form style 4 - 2 form input style 4 - 3 form cta style 10 - 0 effect 10 - 1 sequential delay fx ================================ */ /* 1 - 0 Reset */ #main{ position: relative; display: block; box-sizing: border-box; font-family: var(--font-text); color: var(--col-primary-text); background: #F2F4F3;} #main .main-content{ padding:0; margin: 0; width:100%; position: relative; display: block; border:0; box-shadow: none;} h2:after, h2:before, h3:after, h3:before{ display: none !important;} /* 2 - 0 Template layout */ /* 2 - 1 Container structure */ #flux-main-view article{ display: block; position: relative; background: #F2F4F3;} #flux-main-view section{ margin: 20px 0 40px; padding: 0; display: block; position: relative;} #flux-main-view.wrapper, #flux-main-view .wrapper{ margin: 0 auto; padding: 0 10px; max-width: 1200px; position: relative;} #flux-main-view hr{ margin: 25px 20%; padding: 0; width: auto; height: 1px; display: block; border: 0; border-top: 2px solid #f6f6f6;} #flux-main-view .frame{ margin:20px 5px; padding: 10px; display: block; position: relative; z-index: 0; /*overflow: auto; cause select bug on data page */ background: #FFF; box-shadow: var(--shadow); border-radius:var(--radius);} .sprite-svg-icon{ display: none;} /* 3 - 0 Text */ /* 3 - 1 Heading style */ article h2{ margin: 30px 0; padding: 0; display: block; position: relative; font: 23px/1.3em var(--font-text); font-weight: bold; color: var(--col-primary-text);} article h3{ margin: 30px 0 10px; padding: 0; display: block; position: relative; font: 18px/1.3em var(--font-text); font-weight: bold; color: var(--col-primary-text);} /* 3 - 2 Text style */ article p{ margin: 10px 0 20px; padding: 0; display: block; position: relative; font: 15px/1.6em var(--font-text), sans-serif; color: var(--col-primary-text);} article b, article strong{ font-family:var(--font-text), sans-serif; font-weight: bold; color: var(--col-primary-text);} [class^="cta-"], [class^="V_button"]{ margin: 0 10px; padding: 10px 20px; width: auto; display: inline-block; position: relative; box-sizing: border-box; font: 16px/1.2em var(--font-text), sans-serif; text-align: center; color:#FFF; background: #F63F5B; background: var(--primary-cta-color); border-radius: var(--radius); box-shadow: none; border:none; cursor: pointer; user-select: none; transition: all 0.1s;} .cta-red, a.cta-red, .V_button, input.cta-red[type="submit"]{ margin: 0 10px; padding: 8px 16px; width: auto; display: inline-block; position: relative; box-sizing: border-box; font:bold 16px/1.2em var(--font-text); text-align: center; border-radius: var(--radius) !important; background: var(--primary-cta-color); color: var(--col-inverted-text);} a.cta-red:hover, .V_button:hover, input.cta-red[type="submit"]:hover{ background: var(--primary-cta-color); opacity: .8;} .cta-grey{ background: #A0A6AC;} .cta-grey:hover{ background: #7E858C;} .cta-resend-mfa{ background: var(--col-text-link);} .cta-resend-mfa:hover{ background: var(--col-text-link); opacity: 0.75;} /* 2 - 2 header layout */ #flux-header{ padding: 0; margin: 0; width: 100%; height: inherit; display: block; position: relative; overflow: hidden; z-index: 10; background: var(--col-primary-text) no-repeat center; background-size: cover; box-shadow: inset 0 -10px 20px -10px rgba(18,28,36,0.15);} #flux-header:after{ content:""; padding: 0; margin: 0; width: 100%; height: 100%; top:0; left: 0; display: block; position: absolute; z-index: 1; background:var(--col-primary-text); opacity: 0.75;} #flux-header.no-fx:after{ display: none;} #flux-header .wrapper{ z-index: 10;} #flux-header .page-title{ margin: 35px 0 20px; padding: 0 1rem; display: block; position: relative; font:52px/1em var(--font-heading), sans-serif; font-weight: lighter; color: #FFF; text-align: center;} /* #flux-header h1.page-title{ margin: 15px 0 10px; padding:0 25px; font-family: var(--font-heading); font-size: 2.25rem; text-align: center;} */ #flux-header .subtitle { display: block; font-size: 1rem; text-align: center;} #flux-header nav{ width: calc(100% - 300px);} #flux-header ol, #flux-header ol li{ padding: 0; margin: 0; display: block; position: relative; font-size:0;} #flux-header ol li{ display: inline-block;} #flux-header ol li:after{ content:""; width: 16px; height: 16px; top: 10px; right: -8px; display: block; position:absolute; opacity: 0.5; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI4MzZCOTM5QkRGNjExRTY4NTRDRjlGRkRGQzA0NUI3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI4MzZCOTNBQkRGNjExRTY4NTRDRjlGRkRGQzA0NUI3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjgzNkI5MzdCREY2MTFFNjg1NENGOUZGREZDMDQ1QjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjgzNkI5MzhCREY2MTFFNjg1NENGOUZGREZDMDQ1QjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4GwQs2AAAAaUlEQVR42mL8//8/AwgwMUABQAAxYogABBBcBAaYGNAAQAARVkFYACCAMMwgqIP6CgACiLpu+E9IASM2RehWYChCV/AfqginGxgJuQEDAAQYwXCgOKQpMeA/pQYwEmMQXbzASKkXaBsLALqYHSHNxjwyAAAAAElFTkSuQmCC');} #flux-header ol li:last-child:after{ display: none;} #flux-header ol li a, #flux-header ol li .step, #flux-header .subtitle{ padding: 5px 0 20px; margin: 0 15px; display: block; position: relative; font-size:16px; color: #FFF; opacity: 0.75; cursor: default;} #flux-header .subtitle{ margin: 10px 5px; width:100%; display: inline-block; color: #FFF; text-align: center;} #flux-header ol li:first-child a, #flux-header ol li:first-child .step{ margin-left: 0;} #flux-header ol li .done{ color: #FFF; cursor: pointer;} #flux-header ol li .active{ color: var(--secondary-color); text-shadow: 0 0 6px rgba(0,0,0,0.35);} #flux-header ol li .active:after{ content:""; width: 100%; height: 4px; bottom: 0; left: 0; display: block; position:absolute; background: var(--secondary-color);} /* Flux main view */ #flux-main-view{ width:100%; display: table; position: relative;} /* Flux left content view */ #flux-content-view{ padding: 0 0 0 0; width:100%; display: table-cell; position: relative; vertical-align: top;} /* Flux right side panel */ #flux-side-panel{ padding: 0 0 0 20px; width: auto; display: table-cell; vertical-align: top;} /* Summary */ #mobile-summary-drawer{ display: none;} #flux-summary{ padding: 0; margin: 0; width: 320px; top:-50px; display: block; position: relative; z-index: 10; overflow: auto; background: transparent; border-radius: var(--radius); box-shadow: var(--diffuse-shadow);} #flux-summary .top{ padding: 0 15px; margin: 0; height: 50px; display: block; position: relative; border-radius: 0; background: var(--fallback-color, linear-gradient(32deg, #113759 0%, #01507C 90%));} #flux-summary .top p{ padding: 25px 60px 25px 0; margin: 0; display: block; position: relative; font-size:1.125rem; line-height: 0; font-weight: bold; color: #FFF; } #flux-summary #delete-shop-basket{ padding: 0; margin: 0; width: 32px; height: 32px; right: 10px; top:calc(50% - 16px); display: block; position: absolute; z-index: 15; border-radius: 99px; transform: scale(1); transition: all 0.15s} #flux-summary #delete-shop-basket svg{ margin: -12px 0 0 -12px; width: 1.5rem; height: 1.5rem; top:50%; left:50%; position: absolute; display: block; fill:#FFF;} #flux-summary #delete-shop-basket:hover{ background-color: var(--col-text-link); transform: scale(1.1);} #flux-summary .content{ margin:0; padding: 0; display: block; position: relative; overflow:hidden; background: #FFF;} #flux-summary .content hr{ padding: 0; margin: -1px 15px 0; width: auto; height: 2px; display: block; position: relative; z-index:0; background:var(--col-quaternary-text); border:none;} #flux-summary .content hr:last-child{ display: none;} #flux-summary .content .fs-c-row{ margin:0; padding: 14px 15px; width: auto; display: block; position: relative; table-layout: fixed; font-size:0; color: var(--col-primary-text); transition: padding 0.15s, background 0.15s, color 0.15s; transform: translate3d(0,0,0);} #flux-summary .content #fs-c-price-type{ margin:20px 15px 5px; padding: 0;} #flux-summary .content .fs-c-row .a, #flux-summary .content .fs-c-row .b, #flux-summary .content .fs-c-row .c{ margin:0; padding: 0; width: 25%; display: inline-block; vertical-align: top; font-size:1rem; line-height:1em; font-weight: bold; text-align: right; cursor: default;} #flux-summary .start-from{ margin:0; padding:0; display: block; position: relative; font-size:66%; line-height: 1em;} #flux-summary .content .fs-c-row .a{ width: 50%; font-size:0.75rem; line-height:1em; text-align: left;} #flux-summary .content .fs-c-row .a .quantite, #flux-summary .content .fs-c-row .a .name{ display: table-cell; font-size:0.75rem; line-height:1.2em; text-align: left;} #flux-summary .content .fs-c-row .a .quantite{ margin-right: 5px; padding-right: 8px; font-size:0.875rem; font-weight:bold;} #flux-summary .content .fs-c-row .a .quantite:after{ content:"x"; margin: 0 0 0 2px; font-size:0.75rem; font-weight:normal;} #flux-summary .content #fs-c-price-type .b, #flux-summary .content #fs-c-price-type .c{ font-size:0.5625rem; color: var(--col-primary-text); text-transform: uppercase;} #flux-summary .content a.fs-offer-modify{ margin: 0; padding: 0; width: 100%; height: 100%; top:0; left: 0; display: block; position: absolute; z-index: 20; overflow: visible; transition: opacity 0.15s;} #flux-summary .content a.fs-offer-modify span{ margin: -18px 0 0 0; padding:0; top:50%; right: -36px; width: 36px; height: 36px; display: block; position: absolute; z-index:10; background: var(--col-text-link); fill: #fff; border-radius:18px 0 0 18px; transition: transform 0.15s; transform: translate3d(0,0,0);} #flux-summary .content a.fs-offer-modify span svg.icon{ margin: -12px 0 0 -10px; padding:0; top:50%; left: 50%; width: 24px; height: 24px; display: block; position: absolute; z-index:20;} #flux-summary .content .fs-c-row.editable:hover a.fs-offer-modify span{ transform: translate3d(-36px,0,0);} /* discount */ #flux-summary .content .fs-c-row.discount{ margin: 0 10px 10px; padding: 10px; background: var(--special-call-color, #60A343); color: #FFF; border-radius: var(--radius);} #flux-summary .content .fs-c-row.discount:before{ content: ""; display: block; position: absolute; top:-6px; left: 10px; border-bottom:6px solid var(--special-call-color,#60A343); border-left:6px solid transparent; border-right:6px solid transparent;} #flux-summary .content .fs-c-row.discount .a, #flux-summary .content .fs-c-row.discount .b, #flux-summary .content .fs-c-row.discount .c{ padding: 0; margin: 0; font: 10px/1em var(--font-text), sans-serif; color: #ffF;} #flux-summary .bottom{ margin:0 15px 0; padding: 15px 0 0; width: auto; display: block; position: relative; box-sizing: border-box; font-size: 1rem; line-height: 1.2em; font-weight: bold; color:var(--col-primary-text);box-shadow:inset 0 2px 0 var(--col-quaternary-text);} #flux-summary .price-recap-row{ margin:20px 0; padding:0; top:0; display: flex; position: relative; } #flux-summary .bottom .fs-b-price, #flux-summary .bottom .fs-b-label{ padding: 0; width: 100%; display: block; position: relative; font-size: 0.875rem; font-weight: bold;} #flux-summary .bottom .fs-b-price{ width: auto;} #flux-summary .bottom .fs-b-price .price-bloc{ font-size: 1.375rem; color: var(--col-primary-text);} #flux-summary .bottom .fs-b-price .price-bloc .price-bloc__before{ font-size: 25%;} p#fs-money-tax{ margin:0; padding: 10px 0 20px; width: 100%; display: block; position: relative; font:0.75rem/1em var(--font-text); color: var(--col-tertiary-text); text-align: center;} p#fs-money-tax span{ margin:0; padding: 0 10px; width: 100%; display: block; position: relative; font:0.75rem/1.1em var(--font-text);} /*user_resource_info*/ #flux-summary .user_resource_info p{ padding: 0 6px; margin: 10px 20px 5px; display: inline-block; font-size: 12px; color: #FFF; background: var(--col-text-link); border-radius: var(--radius);} #flux-summary .content .fs-c-row.resource_info .a{ width:100%;} /* Info box */ .flux-info-box{ margin:20px 0 20px; padding: 32px 20px 20px; width: 320px; display: block; position: relative; z-index: 10; font:15px/1.4em var(--font-text); color: #FFF; text-align:center; background: var(--fallback-color, linear-gradient(32deg, #113759 0%, #01507C 90%)); border-radius: var(--radius); box-shadow: none;} .flux-info-box p{ padding: 10px 0; margin: 0; font-weight: bold; color: #FFF;} .flux-info-box p.big{ padding: 0; margin: 0; font-size: 1.5rem; font-weight: bold; color: #FFF;} .flux-info-box .text_link a, .flux-info-box .text_link a:hover{ margin: inherit; padding: inherit; display: inherit; font: inherit; color: inherit; background: inherit; box-shadow: none; text-decoration: underline; text-underline-offset: 5px;} .flux-info-box .text_link a:hover{ color: #163d6f;} .flux-info-box .icon{ margin: -16px 0 15px -16px; padding: 0; top:0; left:50%; width: 32px; height: 32px; display: block; position: relative; z-index: 15; cursor: default; color: var(--col-inverted-text); text-align: center; fill:#fff;} .flux-info-box a{ margin:15px auto 5px; padding: 0; display: inline-block; position: relative; font:16px/1em var(--font-text), sans-serif; text-align: center; color: var(--col-inverted-text); background: none; text-decoration: underline; text-underline-offset: 5px;} .flux-info-box a:hover{ color: var(--col-text-link);} /* Info box */ .flux-call-box{ margin:40px 0 20px; padding: 32px 20px 20px; width: 320px; display: block; position: relative; z-index: 10; font:bold 15px/1.4em var(--font-text), sans-serif; color: #FFF; background: #107d3d; background: var(--special-call-color); border-radius: var(--radius); box-shadow: none;} .flux-call-box p{ padding: 10px 0; margin: 0; font:bold 15px/1.4em var(--font-text), sans-serif; color: #FFF;} .flux-call-box p.big{ padding: 0; margin: 0; font:bold 24px/1.4em var(--font-text), sans-serif; color: #FFF;} .flux-call-box .icon{ margin: 0; padding: 0; top:-22px; left: calc(50% - 22px); width: 44px; height: 44px; display: block; position: absolute; z-index: 15; cursor: default; font:italic 600 32px/42px "Times New Roman", Times, serif; color: var(--col-text-link); text-align: center; background: #FFF; border-radius: 99px; box-shadow: 0 3px 6px rgba(0,0,0,0.15);} .flux-call-box .icon svg{ margin: -16px 0 0 -16px; width: 32px; height: 32px; top:50%; left: 50%; position: absolute; display: block; fill: var(--special-call-color);} .call-us{ margin: 20px 0; padding:10px; width: 320px; position: relative; font:bold 15px/1.4em var(--font-text), sans-serif; text-align: center; color: var(--col-inverted-text); background: var(--special-call-color); border-radius: var(--radius);} .call-us p, .call-us p.number{ padding: 0; margin: 10px 0; font:bold 15px/1.4em var(--font-text), sans-serif; color: inherit; text-align: center;} .call-us p.number{ font-size:30px; color: inherit; text-align: center;} /* 4 - 0 form layout */ /* 4 - 1 base form style */ form{ margin: 0 auto; display: block; position: relative; overflow:auto; font-size:0;} fieldset{ padding: 0; margin: 20px; display: block; font-size: 0;} legend{ margin: 0 0 15px; padding: 0; font:bold 22px/1.4em var(--font-text), sans-serif;color: var(--col-primary-text);} form div{ margin: 15px 0; padding:0; position: relative; font-size: 0;} /* 4 - 2 form input style */ textarea, input[type="text"], input[type="button"], input[type="submit"] input[type="tel"] { -webkit-appearance: none; /* -webkit-border-radius: 0; border-radius: 0;}*/ } form label, form .label{ margin: 10px 0; padding: 0 10px 0 0; width:35%; display: inline-block; position: relative; vertical-align: top; font:14px/1.4em var(--font-text), sans-serif; color: var(--col-primary-text);} form input[type="radio"], form input[type="checkbox"]{ margin: 0 10px 0 0; padding: 0; width: auto; top:1px; display: inline-block; position: relative; cursor: pointer;} form input[type="password"], form input[type="text"], form input[type="email"], form input[type="tel"], form textarea, form select, form .input-group{ margin:0 0 0 0; padding: 10px; width:65%; display: inline-block; vertical-align: top; font:14px/1.3em var(--font-text), sans-serif; color: var(--col-primary-text); border:1px solid #DDD; background: #FFF; border-radius: var(--radius); outline: none; -webkit-appearance : none; -moz-appearance : none; appearance: none; border:none; color: var(--col-secondary-text); box-shadow:inset 0 0 0 2px var(--col-quaternary-text); } form select, form select{ background-position: 99% center !important; background-repeat: no-repeat !important; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMTYiCiAgIGhlaWdodD0iMTYiCiAgIHZpZXdCb3g9IjAgMCA0LjIzIDQuMjMzMzMzNSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnODIxIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjMgKDI0MDU1NDYsIDIwMTgtMDMtMTEpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJkZXNzaW4uc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzODE1IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSI2My4zNTY3NjciCiAgICAgaW5rc2NhcGU6Y3g9IjcuNjQwNjA0NCIKICAgICBpbmtzY2FwZTpjeT0iNy4yODY2NzY5IgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJtbSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgc2hvd2dyaWQ9InRydWUiCiAgICAgdW5pdHM9InB4IgogICAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9InRydWUiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOnNuYXAtb2JqZWN0LW1pZHBvaW50cz0iZmFsc2UiCiAgICAgaW5rc2NhcGU6c25hcC1vdGhlcnM9InRydWUiCiAgICAgaW5rc2NhcGU6c25hcC1jZW50ZXI9ImZhbHNlIgogICAgIGlua3NjYXBlOnNuYXAtZ3JpZHM9InRydWUiCiAgICAgaW5rc2NhcGU6c25hcC1iYm94PSJ0cnVlIgogICAgIGlua3NjYXBlOmJib3gtcGF0aHM9ImZhbHNlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1lZGdlLW1pZHBvaW50cz0iZmFsc2UiCiAgICAgaW5rc2NhcGU6c25hcC1iYm94LW1pZHBvaW50cz0idHJ1ZSI+CiAgICA8aW5rc2NhcGU6Z3JpZAogICAgICAgdHlwZT0ieHlncmlkIgogICAgICAgaWQ9ImdyaWQxMzY2IiAvPgogIDwvc29kaXBvZGk6bmFtZWR2aWV3PgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTgxOCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iQ2FscXVlIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTI5Mi43NjY2NCkiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOm1lZGl1bTtsaW5lLWhlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjtmb250LXZhcmlhbnQtbGlnYXR1cmVzOm5vcm1hbDtmb250LXZhcmlhbnQtcG9zaXRpb246bm9ybWFsO2ZvbnQtdmFyaWFudC1jYXBzOm5vcm1hbDtmb250LXZhcmlhbnQtbnVtZXJpYzpub3JtYWw7Zm9udC12YXJpYW50LWFsdGVybmF0ZXM6bm9ybWFsO2ZvbnQtZmVhdHVyZS1zZXR0aW5nczpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO3RleHQtZGVjb3JhdGlvbi1jb2xvcjojMDAwMDAwO2xldHRlci1zcGFjaW5nOm5vcm1hbDt3b3JkLXNwYWNpbmc6bm9ybWFsO3RleHQtdHJhbnNmb3JtOm5vbmU7d3JpdGluZy1tb2RlOmxyLXRiO2RpcmVjdGlvbjpsdHI7dGV4dC1vcmllbnRhdGlvbjptaXhlZDtkb21pbmFudC1iYXNlbGluZTphdXRvO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO3RleHQtYW5jaG9yOnN0YXJ0O3doaXRlLXNwYWNlOm5vcm1hbDtzaGFwZS1wYWRkaW5nOjA7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTt2ZWN0b3ItZWZmZWN0Om5vbmU7ZmlsbDojOTk5OTk5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjk0NDg4MTg2O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnM7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIgogICAgICAgZD0iTSA0LjMzMzk4NDQgNiBMIDQuNjY0MDYyNSA2LjMzNzg5MDYgTCA3LjY2Nzk2ODggOS4zMzM5ODQ0IEEgMC40NzI0ODgxNyAwLjQ3MjQ4ODE3IDAgMCAwIDguMzMzOTg0NCA5LjMzMzk4NDQgTCAxMS4zMzc4OTEgNi4zMzc4OTA2IEwgMTEuNjY3OTY5IDYgTCAxMC4zMzIwMzEgNiBMIDggOC4zMzAwNzgxIEwgNS42Njk5MjE5IDYgTCA0LjMzMzk4NDQgNiB6ICIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjY0NTgzMzQsMCwwLDAuMjY0NTgzMzQsLTAuMDAxNjY2NzUsMjkyLjc2NjY0KSIKICAgICAgIGlkPSJwYXRoMTM2OCIgLz4KICA8L2c+Cjwvc3ZnPgo=') !important; } /* signup doc download */ input[type="file"].input-file{ width: 0.1px; height: 0.1px;/* top:-99px; left:-99px;*/ position: absolute; z-index: -1; overflow: hidden; opacity: 0;} input[type="file"].input-file + label{ margin:0; padding:10px 15px 10px 38px; width: auto; display: inline-block; font: 16px/1em var(--font-text), sans-serif; color: #FFF; background: var(--col-text-link); border-radius: var(--radius); cursor: pointer; transition: all 0.15s;} input[type="file"].input-file:focus + label, input[type="file"].input-file + label:hover { background-color: var(--col-text-link)} input[type="file"].input-file + label svg{ margin:10px; padding:0; width: 16px; height: 16px; top:0; left:0; display: block; position: absolute;} form .input-group{ margin:0; padding: 0; border:0 none; box-shadow:none; position: relative;} form select{ padding: 8px 10px;} form textarea{ min-height: 120px; overflow: auto; resize: none;} form input:disabled, form input:hover:disabled{ background:#CCC !important; color: #999 !important; box-shadow: none!important; cursor: default !important; opacity: 1 !important;} form .input-group label, form .input-group input, form .input-group input[type="text"], form .input-group select{ width: 100%; display: block;} form .input-group input[type="radio"], form .input-group input[type="checkbox"]{ width: auto; display: inline-block;} form .label-group{ padding: 10px 0 10px 28px;} form .label-group input{ position: absolute; top:10px; left: 0;} /* input css3 stylish */ .css-input input[type="radio"]:checked, .css-input input[type="radio"]:not(:checked), .css-input input[type="checkbox"]:checked, .css-input input[type="checkbox"]:not(:checked) { display:none;} .css-input .css-input-label{ padding-left: 24px; display: block; position: relative;} .css-input .css-input-label:after{ content: ""; margin: 0; padding: 4px; width: 16px; height: 16px; top:1px; left: -1px; display: block; position: absolute; z-index: 10; opacity: 0; border-radius: 32px; background: var(--col-text-link) url('data:image/svg+xml;utf8,') no-repeat center; transform: scale(0.5); transition: all 0.15s;} .css-input .css-input-label:before{ content: ""; margin: 2px 0; padding: 0; width: 14px; height: 14px; top:0; left: 0; display: block; position: absolute; z-index: 0; background: #FFF; border:1px solid #666; border-radius: var(--radius-xl);} .css-input input[type="checkbox"] + .css-input-label:after{ border-radius: var(--radius);} .css-input input[type="checkbox"] +.css-input-label:before{ border-radius: var(--radius);} .css-input input[type="radio"]:checked + .css-input-label:after, .css-input input[type="checkbox"]:checked + .css-input-label:after{ opacity: 1; transform: scale(1);} .css-input:hover .css-input-label:before{ background: #f6f6f6; border:1px solid var(--col-text-link);} .css-input input[type="radio"]:checked + .css-input-label, .css-input input[type="radio"]:checked + .css-input-label b, .css-input input[type="radio"]:checked + .css-input-label strong, .css-input input[type="checkbox"]:checked + .css-input-label, .css-input input[type="checkbox"]:checked + .css-input-label b, .css-input input[type="checkbox"]:checked + .css-input-label strong{ color: var(--col-text-link);} .css-input input[type="radio"]:disabled + .css-input-label:before, .css-input input[type="radio"]:disabled + .css-input-label:after, .css-input input[type="radio"]:disabled + .css-input-label, .css-input input[type="checkbox"]:disabled + .css-input-label:before, .css-input input[type="checkbox"]:disabled + .css-input-label:after, .css-input input[type="checkbox"]:disabled + .css-input-label{ opacity: 0.5;} .css-input input[type="radio"]:disabled + .css-input-label:after, .css-input input[type="checkbox"]:disabled + .css-input-label:after{ content: ""; padding: 0; margin: 0; width: 14px; height: 2px; top:8px; left: 0; transform: rotate(45deg) scale(1); background: #666; border-radius: 0;} /* =========================== new input v2023 ============================== Index : 1. Base 2. Form 2.1 Form structure 3. Table responsive x. sequential delay effect */ /** * 2. form template */ /* 2.1 Form structure */ .flux-form{ margin: 2rem auto; padding: 0; width:100%; max-width: 920px; display:block; box-sizing: border-box; overflow: unset; background: #FFF; border-radius:var(--radius-xl);/* box-shadow: 0 15px 15px -10px rgba(0,0,0,0.15), 0 1px 2px -1px rgba(0,0,0,0.15);*/ box-shadow: var(--diffuse-shadow);} .flux-form:before, .flux-form:after{ content:""; margin: 0; padding: 0; display: block; position: relative; width: 1px; height: 1px;} .flux-form-fielset, .flux-form__container{ margin: 1.5rem 3rem; padding: 0; width:auto; display:block; box-sizing: border-box; overflow: unset;} .flux-form-fielset__column, .flux-form-fielset__column--centered{ margin: 0 auto; padding:0 2rem; width: 50%; top:0; display: inline-block; vertical-align: top;} .flux-form-fielset__column--centered{ max-width: 320px; width:auto; display: block; } .flux-form__legend, .flux-form__legend--centered{ margin: 1rem 0rem 2rem; padding: 0 0 0 2rem; width:auto; display: block; box-sizing: border-box; font: bold 22px/1.2em var(--font-text); color: var(--col-primary-text);} .flux-form__legend--centered{ margin-left: 0; margin-right: 0; width:100%; text-align: center;} /* filed input text like */ .flux-form__input-container{ margin: 1.25rem 0 1rem; padding: 0; width: 100%; display: inline-block; position: relative; box-sizing: border-box; flex-grow: 0; color: var(--col-primary-text); background: #FFF; border: none; box-shadow: inset 0 0 0 1px var(--col-quaternary-text); border-radius: var(--radius-xl); translate: all 0.15s;} .flux-form__input-container label{ margin: 0 0.5rem; padding: 0 0.25rem; width: auto; top:-1rem; left:0; display: block; position: absolute; z-index: 5; font: bold 13px/0.9em var(--font-text); color: var(--col-primary-text); border: none; background: #FFF;} .flux-form__input-container input, .flux-form__input-container input[type="password"], .flux-form__input-container input[type="text"], .flux-form__input-container input[type="email"], .flux-form__input-container textarea, .flux-form__input-container select, .multi-select__container label{ margin: 0; padding: 0.625rem 0.75rem; width: 100%; display: block; position: relative; z-index: 0; font: bold 13px/1.3em var(--font-text); color: var(--col-secondary-text); background: transparent; border: none !important; box-shadow: none;} .flux-form__input-container input:disabled, .flux-form__input-container input:hover:disabled, .flux-form__input-container select:disabled, .flux-form__input-container select:hover:disabled{ background: #e4eaed !important; color: #393d4a87 !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important;} ::placeholder{ color:rgba(0,0,0,0.25) !important; font-style:italic; opacity: 1; font-weight: bold; font-family: var(--font-text); } /* filed input checkbox like */ .flux-form__checkbox-container{ margin: 1.25rem 0 1rem; padding: 0; width: 100%; display: inline-block; position: relative; box-sizing: border-box; font: 14px/1.3em var(--font-text); color: var(--col-primary-text); background: #FFF; border: none; border-radius: var(--radius); translate: all 0.15s} .flux-form__checkbox-container label{ margin: 0; padding: 0.75rem 0.75rem; padding-left:32px; width: auto; min-height: 32px; top:0; display: block; position: relative; z-index: 5; font: 13px/1.2em var(--font-text); font-weight: bold; color: var(--col-primary-text); border: none; user-select: none;} .flux-form__checkbox-container input[type="checkbox"]{ margin:0; padding:0; top:0; left:-9999px; display: block; position: absolute; display: none;} .flux-form__checkbox-container label:before, .flux-form__checkbox-container label:after{ content:""; top:-2px; left:0; display: block; position: absolute; z-index: 10;} .flux-form__checkbox-container label:before{ margin: 12px 0 0; padding: 0; width: 22px; height:22px; background:#FFF; border-radius:var(--radius); box-shadow: inset 0 0 0 2px var(--col-quaternary-text);} .flux-form__checkbox-container label:after{ margin: 12px 3px; width: 16px; height:16px; top:0; left:0; z-index: 15; transform: scale(1); opacity:0; background:var(--col-text-link); -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ');} .flux-form__checkbox-container input[type="checkbox"]:checked + label:after{ transform: scale(1.1); opacity:1; top:0; left:0; transition: all 0.1s cubic-bezier(.39,.58,.57,1);} /* filed input radio like */ .flux-form__radio-container{ margin: 1.25rem 0 1rem; padding: 0; width: 100%; display: inline-block; position: relative; box-sizing: border-box; font: 14px/1.3em var(--font-text); color: var(--col-primary-text); background: #FFF; border: none; border-radius: var(--radius); translate: all 0.15s} .flux-form__radio-container label{ margin: 0; padding: 0.25rem 0.25rem; padding-left:32px; width: auto; min-height: 42px; top:0; display: block; display: flex; align-items: center; position: relative; z-index: 5; font: 13px/1.2em var(--font-text); font-weight: bold; color: var(--col-primary-text); border: none; user-select: none;} .flux-form__radio-container input[type="radio"]{ margin:0; padding:0; top:0; left:-9999px; display: block; position: absolute; display: none;} .flux-form__radio-container label:before, .flux-form__radio-container label:after{ content:""; top:-2px; left:0; display: block; position: absolute; z-index: 10; transition: all 0.15s cubic-bezier(.39,.58,.57,1);} .flux-form__radio-container label:before{ margin: 12px 0 0; padding: 0; width: 22px; height:22px; background:var(--col-quaternary-text); border-radius:99px; box-shadow:inset 0 0 0 2px var(--col-quaternary-text), inset 0 0 0 5px #FFF;} .flux-form__radio-container label:after{ margin: 12px 3px; width: 16px; height:16px; top:0; left:0; z-index: 15; transform: scale(0.75) rotate(-45deg); opacity:0; background:#FFF; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ');} .flux-form__radio-container input[type="radio"]:checked + label:after{ transform: scale(1.1) rotate(0deg); opacity:1; top:0; left:0;} .flux-form__radio-container input[type="radio"]:checked + label:before{ background: var(--col-text-link); box-shadow: 0 0 0 0px var(--col-text-link); transform: scale(1.1);} .flux-form__radio-container input[type="radio"]:disabled + label{ color: var(--col-quaternary-text) !important; cursor:not-allowed;} .flux-form__radio-container input[type="radio"]:disabled + label:before{ content:"|"; margin: 12px 0 0; padding: 0; width: 22px; height:22px; background:var(--col-tertiary-text); border-radius:99px; box-shadow:inset 0 0 0 2px var(--col-tertiary-text), inset 0 0 0 5px #FFF; text-align: center; font-size:32px; color:#FFF; transform:rotate(-45deg);} /* big radio selector */ .flux-form__selector-container{ margin: 0.5rem; padding:0; width: 100%; display: block; display: flex; flex-grow: 0; flex-shrink: 1; flex-flow: row; position: relative; align-items: center; z-index: 1;} .flux-form__selector-container input{ display: none !important;} .flux-form__selector-container label{ margin: 0; padding: 1rem; width:100%; height: 100%; display: flex; position: relative; z-index: 10; align-content: center; align-items: center; font: 13px/1.2em var(--font-text); font-weight: bold; color: var(--col-primary-text); background:#FFF; border-radius:var(--radius); box-shadow:inset 0 0 0 2px var(--col-quaternary-text); cursor: pointer;} .flux-form__selector-container .selector__icon{ margin: 0 0.75rem 0 0; padding: 0; width:32px; height: 32px; display: block; position: relative;} .flux-form__selector-container label:before{ content:""; margin: -0.625rem; padding:0; width: 1.5rem; height:1.5rem; top:0; right:0; display: block; position: absolute; z-index: 10; background:var(--col-text-link); border-radius:99px; box-shadow: 0 0 0 2px #FFF; transform: scale(0.5); opacity:0; transition: all 0.15s;} .flux-form__selector-container label:after{ content:""; margin: -6px; width: 16px; height:16px; top:0; right:0; display: block; position: absolute; z-index: 10; transform: scale(0.5) rotate(-45deg); opacity:0; background:#FFF; transition: all 0.15s; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ');} .flux-form__selector-container label:hover{ box-shadow:inset 0 0 0 2px var(--col-secondary-text);} .flux-form__selector-container input[type="radio"]:checked + label{ background: #FFF; box-shadow:inset 0 0 0 2px var(--col-text-link); color:var(--col-text-link);} .flux-form__selector-container input[type="radio"]:checked + label:after, .flux-form__selector-container input[type="radio"]:checked + label:before{ transform: scale(1) rotate(0deg); opacity:1;} .flux-form__selector-container input[type="radio"]:disabled + label{ color: var(--col-quaternary-text) !important; cursor:not-allowed; box-shadow:inset 0 0 0 2px var(--col-quaternary-text);} .flux-form__selector-container input[type="radio"]:disabled + label:after, .flux-form__selector-container input[type="radio"]:disabled + label:before{ content:"|"; margin: 12px 0 0; padding: 0; width: 22px; height:22px; background:var(--col-tertiary-text); border-radius:99px; box-shadow:inset 0 0 0 2px var(--col-tertiary-text), inset 0 0 0 5px #FFF; text-align: center; font-size:32px; color:#FFF; transform:rotate(-45deg);} @media screen and (max-width: 768px){ .flux-form__selector-container{ margin:0.5rem 0;} } /* auto-complete + select option */ .flux-form .autocomplete-suggestions{ padding:0; margin:0; margin-top:-0.25rem; top:calc(100% - 0.25rem); margin-top:0; border:none; box-shadow: 0 0 0 2px var(--col-tertiary-text), 0 5px 10px -2px rgba(0,0,0,0.25); border-radius: var(--radius);} .flux-form .autocomplete-suggestions .autocomplete-suggestion, .flux-form option{ margin:0; padding: 0.5rem; font: normal 0.75rem/1em var(--font-text); color: var(--col-secondary-text); background: #FFF;} .flux-form .autocomplete-suggestions .autocomplete-suggestion:hover, .flux-form option:hover{ color: var(--col-inverted-text); background:var(--col-tertiary-text);} /* filed input multiselect */ /*.multi-select{ box-shadow: none !important;} .multi-select__container{ margin:0; padding:0; width: 100%; min-height: 2.5rem; display: flex; position: relative; overflow: hidden;} .multi-select__container label{ margin:0 0.25rem 0 0; margin-left: 1%; padding:0.15rem 0.5rem 0.15rem 0.25rem; padding-left:3rem; top:inherit; width: 100%; display: flex; position: relative; flex-grow: 0; flex-shrink: 1; align-items: center; border-radius: var(--radius); cursor: pointer; user-select: none; transition: all 0.15s cubic-bezier(.17,.84,.44,1);} .multi-select__container label:last-child{ margin-right: 0;} .multi-select__container label svg{ margin:-0.75rem 0 0 0.75rem; padding:0.25rem; top:50%; left:0; width: 1.5rem; height:1.5rem; display: block; position: absolute; stroke: #C7D4DF; border-radius: 99px; background: #C7D4DF50; border:5px solid #FFF; box-shadow: 0 0 0 3px #C7D4DF; transform: scale(0.75) rotate(-35deg); transition: all 0.15s cubic-bezier(.17,.84,.44,1);} .multi-select__container input[type="radio"]:checked + label svg{ stroke: #FFF; background: var(--primary-color); border:0px solid #FFF; box-shadow: 0 0 0 0px #C7D4DF; transform: scale(1) rotate(0deg);} .multi-select__container input[type="radio"]:checked + label{ color:var(--primary-color); background: none; box-shadow: inset 0 0 0 2px#C7D4DF;} .multi-select__container input[type="radio"]{ margin: 0 0 0 -100rem; padding:0; width: 1.5rem; height:1.5rem; display: block; position: absolute; opacity: 0;}*/ /* input element hover */ .flux-form__input-container:has(input:focus), .flux-form__input-container:has(textarea:focus), .flux-form__input-container:has(checkbox:focus){ box-shadow: inset 0 0 0 2px var(--col-tertiary-text);} .flux-form__input-container:hover, .flux-form__checkbox-container:hover label:before, .flux-form__radio-container:hover label:before, .multi-select__container label:hover{ box-shadow: inset 0 0 0 1px var(--col-tertiary-text), inset 0 0 0 8px #FFF;} /* form element note */ .flux-form__input-container .note{ margin: 1rem 0 2rem; padding: 0; display: block; position: relative; font:bold 12px/1.1em var(--font-text), sans-serif; text-align: left; color: var(--col-secondary-text); opacity: 0.75;} .flux-form__input-note, .flux-form__input-note--align-right{ margin: 0; padding: 0; width: 100%; top:-1rem; display: block; position: relative; z-index: 0; font:bold 12px/1.2em var(--font-text), sans-serif; text-align: left; color: var(--col-secondary-text); background: transparent; border: none;} .flux-form__input-note--align-right{ text-align: right;} /* input group */ .flux-form__group-container, .flux-form__group-container--inline, .flux-form__group-container--inline-mobile{ margin:0; padding:0; display: block; position:relative;} .flux-form__group-container--inline, .flux-form__group-container--inline-mobile{ display: flex; flex-flow: row;} /* filed spacer*/ .flux-form__spacer{ margin:0; padding:0; width:100%; height:1.5rem; display: block; position:relative;} .flux-form__margin{ margin:0 10px 0 0; width:0px;} /* 4 - 3 form cta style */ .flux-form__cta .g-recaptcha{ position:absolute;} .flux-form__cta{ margin: 0 20px; padding: 0; bottom: 0; display: block; position: relative; z-index: 10; overflow: auto; text-align: center; background: linear-gradient(0deg, rgba(255, 255, 255, 0.85) 50%, rgba(255,255,255,0) 100%);} .flux-form__cta--sticky{ position: sticky;} .flux-cta{ margin:10px 10px; padding: 12px 15px; min-width: 168px; width: auto; display: inline-block; position: relative; box-sizing: border-box; font: 14px/1em var(--font-text); border:none; cursor: pointer; border-radius: var(--radius); text-decoration: none; transition: all 0.1s;} .flux-cta--button, input[type="submit"].flux-cta--button, button[type="submit"].flux-cta--button{ margin:10px; padding: 12px 18px; font: bold 16px/1em var(--font-text); border-radius: var(--radius);} .flux-cta--button:hover{ padding: 12px 18px;} .flux-cta--simple{ margin:5px 10px; font: bold 13px/1.2em var(--font-text); color:var(--col-primary-text); opacity: 0.5;} .flux-cta--simple:hover{ opacity: 1; color: var(--col-primary-text);} .flux-cta--border{ margin:5px 10px; padding: 12px 18px; font: bold 13px/1.2em var(--font-text); color:var(--col-primary-text); background: #ffffff; box-shadow:inset 0 0 0 2px var(--col-primary-text);} .flux-cta--border:hover{ background: var(--col-primary-text); color:#ffffff;} .flux-cta--underline{ margin:10px; padding: 12px 18px; font: normal 1rem/1.2em var(--font-text); text-decoration: underline; text-underline-offset: 0.3125rem; color:var(--col-text-link); box-shadow: none; background: none !important;} .flux-cta--underline:hover{ color: var(--col-primary-text);} .flux-cta--mini, .flux-cta--mini:hover{ margin:5px auto; padding: 8px 5px; min-width: 0; width: auto; display: inline-block; font: bold 14px/1em var(--font-text);} @media screen and (max-width: 728px){ .flux-form{margin: 1rem 0;} .flux-form-fielset, .flux-form__container{margin: 15px;} .flux-form-fielset__column, .flux-form-fielset__column--centered{ padding:0 15px;} .flux-form-fielset legend{ margin: 0.25rem 0rem 2rem; padding:0; width:100%; display: inline-block; text-align: left;} .flux-form__input-container{ margin: 15px 0; max-width: inherit !important;} } @media screen and (max-width: 480px){ .flux-form-fielset__column, .flux-form-fielset__column--centered{ max-width: inherit; width: 100%; display: block;} .flux-form__group-container--inline{ flex-flow: column;} .multi-select__container{ flex-direction: column;} .multi-select__container label{ margin:0 0 0.25rem; padding-top:0.75rem; padding-bottom:0.75rem; } .multi-select__container label:last-child{ margin-left: 0;} .flux-form__radio-container{ margin:0 0 1rem;} } /* flux basic box element */ .flux-box__container{ margin:0.5rem 0; padding: 0.5rem; display: block; position: relative; background: #ffffff; border-radius: var(--radius-xl); box-shadow: var(--diffuse-shadow);} .flux-box--bordered{ box-shadow: inset 0 0 0 1px var(--col-quaternary-text);} /* flux card element */ .flux-card__container{ margin:0.5rem auto; padding:0 0.5rem; max-width: 53rem; display: flex; position: relative; position: relative;} .flux-card__element{ margin: 0.25rem 0.5rem; padding:0.25rem; width: 100%; min-height: 12rem; flex-grow: 1; flex-shrink: 1; display: flex; flex-flow: column; position: relative; text-align: center; background:#FFF; box-shadow:inset 0 0 0 2px var(--col-quaternary-text); border-radius: var(--radius); transition: box-shadow 0.15s cubic-bezier(.22,.61,.36,1); opacity: 0;} .flux-card__img{ margin:0.25rem; padding:0; height:100%; max-height: 10rem; max-width: 100%; display: block; position: relative; object-fit: contain; object-position: center; transform: scale(0.9); transition: transform 0.15s cubic-bezier(.22,.61,.36,1);} .flux-card__title{ margin:0.5rem 0.25rem; padding:0; min-height: 3rem; display: flex; align-items: center; justify-content: center; position: relative; font-size: 0.875rem; line-height: 1.3em; font-weight: bold; color: var(--col-primary-text);} .flux-card__element:hover .flux-card__img, .flux-card__element.active .flux-card__img{ transform: scale(1);} .flux-card__element:hover{ box-shadow:inset 0 0 0 2px var(--col-secondary-text);} .flux-card__element.active{ box-shadow:inset 0 0 0 2px var(--col-text-link), var(--diffuse-shadow, --shadow) !important;} .flux-card__element:hover .flux-card__title, .flux-card__element.active .flux-card__title{ color:var(--col-text-link);} @media screen and (max-width: 728px){ .flux-card__container{ flex-wrap: wrap;} .flux-card__element{ width: 32%; min-height: 8rem; height:5rem;} .flux-card__img{ height:4rem;} .flux-card__title{ min-height: 2rem; line-height: 1.1em;} } @media screen and (max-width: 480px){ .flux-card__container{ flex-wrap: wrap;} .flux-card__element{ width: 100%; min-height: 4.5rem; height:4.5rem; flex-flow: row;} .flux-card__img{ margin: 0 1rem; width: 4rem; height: 4rem;} .flux-card__title{ text-align: left;} } /* flux product card */ .flux-product-card__container{ margin:0.5rem auto; padding:0; max-width: 53rem; display: flex; position: relative; flex-direction: column; overflow: hidden; background:#FFF; box-shadow:var(--diffuse-shadow) ; border-radius: var(--radius);} .flux-product-card__row{ margin: 0rem; padding:0.5rem; width: 100%; display: flex; flex-flow: row; position: relative; align-items: center; text-align: left; box-shadow:inset 0 -1px 0 0 var(--col-quaternary-text);} .flux-product-card__row:last-child{ box-shadow:none;} .flux-product-card__spacer{ width: 100%; flex-grow: 1;} .flux-product-card__row-item{ margin:0.5rem; width: 100%; flex-grow: 1;} .flux-product-card__group-column{ display:flex; flex-flow:column; align-items: flex-start;} .flux-product-card__img{ margin:0.5rem; padding:0; min-width: 2rem; max-width: 5rem; width:100%; height:auto; max-height: 5rem; flex-grow: 1; display: block; position: relative; object-fit: contain; object-position: center; } .flux-product-card__info{ margin: 0rem ; padding:0; width: auto; flex-grow: 1; flex-shrink: 0; display: flex; flex-flow: column; position: relative; text-align: left; background:#FFF;} .flux-product-card__title{ margin:0.5rem 0; padding:0; position: relative; font-size: 0.875rem; line-height: 1.3em; font-weight: bold; color: var(--col-primary-text); text-align: left;} .flux-product-card__container details{ margin:5px 0; padding:0 1rem 0 0; max-height: 2.5rem; display: block; position: relative; overflow: auto; font-size: 0.75rem; line-height: 1.2em; font-family:var(--font-text); color:var(--col-primary-text); transition: all 0.35s ease-in-out;} .flux-product-card__container details[open]{ max-height: 20rem;} .flux-product-card__container summary{ margin:5px 0; padding:5px 0; top:0; display: inline-block; position: sticky; cursor: pointer; font-size: 0.75rem; font-family:var(--font-text); font-weight: bold; border-radius:99px; color:var(--col-text-link); text-decoration: underline; text-underline-offset: 4px;} .flux-product-card__container details li{ margin:0; width:100%; display: block;} .flux-product-card__container details b, .flux-product-card__container details span{ padding:0.25rem; width:50%; display: inline-block; box-sizing: border-box; font-size: 0.75rem; line-height: 1em; vertical-align: top;} @media screen and (max-width: 728px){ .flux-product-card__img{ max-width: 2.5rem;} .flux-product-card-price{ margin: 1rem 0.5rem; padding:0; width: auto !important; top:0; right:0; display: block; position: absolute;} .flux-product-card-price .price-bloc{ font-size: 2rem !important;} .flux-product-card-price-button, .flux-product-card-price-button:hover{ margin: 2.5rem 0 0 0; padding: 0.5rem 0.875rem; min-width: auto; font-size: 0.875rem;} } /** * 3. Table responsive */ .flux-form-table__container{ padding:0; display: block; position: relative; width: 0; overflow: auto; box-sizing: border-box; background-color: #FFF; border-radius: var(--radius-xl); box-shadow: inset -12px 0 5px -10px var(--col-tertiary-text);} .flux-form-table{ padding:1rem 0; width: 100%; position: relative; text-align: center; background: linear-gradient(90deg, #fff 15%, #FFF0 15%, #FFF0 90%, #FFF 100%); border-spacing: 0.5rem 0; border-collapse: separate; } .flux-form-table tbody tr{ background: transparent !important; } .flux-form-table td{ padding:10px; min-width: 100px; position: relative; z-index: 1; background: transparent; border:none; box-sizing: border-box; box-shadow: -2px 0 2px -1px rgb(0 0 0/10%), 2px 0 2px -1px rgb(0 0 0/10%), inset 1px 1px 0 0 var(--col-quaternary-text), inset -1px 0 0 0 var(--col-quaternary-text);} .flux-form-table .top-cap, .flux-form-table.auto-cap tbody tr:first-child td:not(.flux-form-table--fixed){ border-radius:var(--radius-xl) var(--radius-xl) 0 0; z-index: 0; box-shadow: 0 0px 2px 1px rgb(0 0 0/10%), inset 0 1px 0 1px var(--col-quaternary-text);} .flux-form-table .bottom-cap, .flux-form-table.auto-cap tbody tr:last-child td:not(.flux-form-table--fixed){ border-radius:0 0 var(--radius-xl) var(--radius-xl); z-index: 0; box-shadow: 0 0px 2px 1px rgb(0 0 0/10%), inset 0 -1px 0 1px var(--col-quaternary-text);} /* for repsonsive purpose : stick the left info column to the left */ th.flux-form-table--fixed, td.flux-form-table--fixed{ padding:0 5px 5px 0; top:0; left:0; position: sticky; z-index: 10; text-align: left; background-color: #FFF; box-shadow: inset -1rem 0 0 -2px #FFF, inset 0 2px 0 -1px var(--col-quaternary-text), 0 2px 0 0 #FFF, 0 -2px 0 0 #FFF;} .flux-form-table .empty{ background-color: #FFF !important; box-shadow: none !important;} /* styling */ .flux-form-table th{ font-size:0.875rem; line-height: 1.3em; font-family:(--font-text); font-weight: bold; color:var(--col-primary-text); vertical-align: bottom;} .flux-form-table td{ font-size:0.75rem; line-height: 1.2em; font-family:(--font-text); font-weight: normal; color:var(--col-primary-text);} .flux-form-table b, .flux-form-table__title{ display: block; font-size:0.875rem; line-height: 1.3em; font-family:(--font-text); font-weight: bold; color:var(--col-primary-text);} .flux-form-table img{ margin:0; padding:0.5rem; height: auto; width: 100%; display: block; position: relative; overflow: hidden; object-fit: contain; object-position: center; border-radius: var(--radius-xl);} .flux-form-table .bg-dark{ color:var(--col-inverted-text) !important; background: var(--fallback-color, linear-gradient(45deg, rgb(0, 93, 125) 0%,rgba(0,93,125,0.75) 100%)); box-shadow: none !important;} .flux-form-table .bg-color{ color:var(--col-inverted-text) !important; background: var(--col-text-link); box-shadow: none !important;} .flux-form-table .bg-dark b, .flux-form-table .bg-color b, .flux-form-table .bg-dark p, .flux-form-table .bg-color p, .flux-form-table .bg-dark span, .flux-form-table .bg-color span{ color:var(--col-inverted-text) !important;} /** * Price bloc -- SUPLICATED FROM KEYYO COM PARTCIAL -- NEED TO MOVE ON MAIN CSS */ .price-bloc{ margin:10px 0; width: auto; display:grid; position: relative; grid-template-areas:"before before" "main decimal" "main duration-pricing" "additionnal additionnal"; font-size:4rem; line-height: 1em; font-weight:var(--text-regular); color: var(--col-primary-text); text-align: center;} .price-bloc .price-bloc__main{ margin:0 6px 0 0; display:block; position: relative; grid-area: main; justify-self: end; align-self: center; font-size:100%; line-height: 1em;font-weight:var(--text-bold);} .price-bloc .price-bloc__before{ margin:0; display:block; position: relative; grid-area: before; font-size:0.875rem; line-height: 1em; color:var(--col-primary-text);} .price-bloc .price-bloc__decimal{ margin:0; display:block; position: relative; grid-area: decimal; justify-self: start; align-self:end; font-size:40%; line-height: 1em;font-weight:var(--text-bold);} .price-bloc .price-bloc__duration-pricing{ margin:0; display:block; position: relative; grid-area: duration-pricing; justify-self: start; align-self: center; font-size:32%; line-height: 1em;font-weight:var(--text-regular);} .price-bloc .price-bloc__additionnal-info{ margin:10px 0; display:block; position: relative; grid-area: additionnal; font-size:0.875rem; line-height: 1em; color:var(--secondary-color);} .price-bloc del{ position:relative; text-decoration-line: none;} .price-bloc del:after{ content: ""; top:50%; left:-5%; width:110%; height:10%; display: block; position: absolute; z-index: 10; background: var(--third-fancy-color); transform: rotate(-4deg);} /* Tags Element */ .flux-tag{ margin:4px; padding:4px 8px; display: inline-block; position: relative; font-size:0.875rem; line-height: 1em; font-weight: normal; color:var(--col-primary-text); background-color: #e4e6e8; border-radius:99px;} .flux-tag--error{ color:var(--col-primary-text); background-color: #f6e4e4;} .flux-tag--success{ color:var(--col-primary-text); background-color: #e4eae7;} .flux-tag--warning{ color:var(--col-primary-text); background-color: #fff2e5;} /* end of new 2024 style =====================*/ /* ===================== ===================== ===================== ===================== ===================== ===================== ===================== */ form button{ margin: 10px 0; padding: 5px 10px; display: inline-block; position: relative; font:14px/1.3em var(--font-text), sans-serif; color:var(--col-primary-text); background: #FFF; border:0; border-radius: var(--radius); cursor: pointer; box-shadow: inset 0 0 0 2px var(--col-primary-text);} form button:hover{ color:#ffffff; background: var(--col-primary-text);} form button .icon{ margin: 0 4px 0 0; width: 16px; height: 16px; display: inline-block; position: relative;} /********/ form img.captcha{ width: 100px; margin: 10px; border-right: 1px solid #DDD; height: 20px; display: block; position: absolute; z-index: 10;} form input.captcha{ padding-left: 120px;} form .mandatory:after{ content: "*"; padding: 0 5px; display: inline-block; position: absolute; z-index: 20; color: var(--secondary-color); font:14px/1.2em var(--font-text), sans-serif;} form input:required, form input[data-required], form textarea:required, form select[data-required], form select:required{ border-left: 2px solid #EA4059;} button[type="submit"], input[type="submit"]{ margin: 10px 10px 20px 0; cursor: pointer;} form .note{ margin: 5px 0 10px; padding: 0;} form .col, form .colb{ margin:0; padding: 0 20px 0 0; width: 50%; display: inline-block; vertical-align: top;} form .colb{ padding: 0 0 0 20px;} form .form-cta{ padding: 0; margin: 20px 20px; display: block; position: relative; text-align: center;} form .form-cta a{ padding: 20px 30px; display: inline-block; position: relative; font: 13px/1.3em var(--font-text), sans-serif; color: var(--col-primary-text); text-decoration: underline; text-underline-offset: 5px;} form .form-cta a:hover{ color: var(--col-text-link);} /* button radio */ .buttons-radio, .input-group.buttons-radio{ margin: 0.5rem 0; padding:0; width: 100%; display: block; display: flex; flex-grow: 0; flex-shrink: 1; flex-flow: row; position: relative; align-items: center; z-index: 1;} .buttons-radio label, .input-group.buttons-radio label{ margin: 0.5rem; padding: 1rem; width:100%; height: 100%; display: flex; position: relative; z-index: 10; align-content: center; align-items: center; font: 13px/1.2em var(--font-text); font-weight: bold; color: var(--col-primary-text); background:#FFF; border-radius:var(--radius); box-shadow:inset 0 0 0 2px var(--col-quaternary-text); cursor: pointer;} .buttons-radio label span{ padding: 0; margin: 0; top:0; display: inline-block; position: relative; vertical-align: middle; font: bold 13px/1.2em var(--font-text); text-align: left;} .buttons-radio input, .input-group.buttons-radio input{ display: none !important; transform: scale(0,0); display: block; position: absolute;} .buttons-radio label svg{ margin: -0.625rem; padding:0.25rem; width: 1.5rem; height:1.5rem; top:0; right:0; display: block; position: absolute; z-index: 10; background:var(--col-text-link); border-radius:99px; box-shadow: 0 0 0 2px #FFF; transform: scale(0.5); opacity:0; stroke:#FFFFFF; transition: all 0.15s;} .buttons-radio input[type=radio]:checked + label, .input-group.buttons-radio input[type=radio]:checked + label{ box-shadow:inset 0 0 0 2px var(--col-text-link);} .buttons-radio input[type=radio]:checked + label svg, .input-group.buttons-radio input[type=radio]:checked + label svg{ transform: scale(1); opacity:1; stroke:#FFFFFF;} .buttons-radio input[type=radio]:checked + label svg, .input-group.buttons-radio input[type=radio]:checked + label svg{ stroke:#FFFFFF; stroke-dasharray: 20px 20px; stroke-dashoffset: 0; transform: rotate(0deg);} /* tab menu selector _____________________________*/ .tab-menu-selector{ margin: 0; padding: 0; display: table; position: relative; font-size: 0; text-align: left;} .tab-menu-selector label{ margin: 0 20px; padding: 15px 2px; display: table-cell; position: relative; font: bold 13px/1.3em var(--font-text), sans-serif; text-transform: uppercase; color: var(--col-primary-text); cursor: pointer;} .tab-menu-selector label:after{ content: ""; width: 100%; height: 3px; bottom:0px; left: 0; display: block; position: absolute; transition: background 0.15s;} .tab-menu-selector input[type="radio"]{ margin: 0; padding: 0; left: -20px; display: inline-block; position: absolute; transform:scale(0,0);} .tab-menu-selector label:hover:after{ background: #C8CDD2;} .tab-menu-selector label.active, .tab-menu-selector input:checked + label{ color: #3D4651;} .tab-menu-selector label.active:after, .tab-menu-selector input:checked + label:after{ background: var(--col-text-link);} /*flux message __________________________________*/ .signup_privacy_info{ margin:15px; padding:0; display:block; position: relative; text-align:center;} .signup_privacy_info p{ margin:0; padding:5px 10px; display:inline-block; position: relative; font:italic 13px/1.4em var(--font-text), sans-serif; color:var(--col-secondary-text); border:1px solid #f6f6f6; border-radius:var(--radius);} .signup_privacy_info i{ font-size:16px;} .signup-rgpd-consent{ margin:25px 15px; padding:0; position: relative; text-align: center;} #flux-msg, .flux-msg{ padding: 0; margin: 0 1rem; display: block; position: relative; text-align: center;} #flux-msg i, .flux-msg i{ margin: 10px; top:0; left: 0; display: none; position: absolute;} #flux-msg i:before, .flux-msg i:before{ margin:0; background: #FFF;} #flux-msg ul, .flux-msg ul{ display: block; position: relative;} #flux-msg ul li, .flux-msg ul li{ margin:0; padding: 0 0 0 0.75rem; display: block; font: bold 13px/1.1em var(--font-text), sans-serif;} #flux-msg ul li:before, .flux-msg ul li:before{ content: "-"; margin:0; top:0; left:0; display: block; position: absolute; font:16px/0.75em var(--font-text), sans-serif;} /* info message */ .info-msg, .error-msg{ padding: 1rem; margin: 1rem auto; min-width: 320px; display: inline-block; position: relative; font: bold 13px/1.3em var(--font-text), sans-serif; color: #FFF; background: var(--col-text-link); border-radius:var(--radius); text-align: left;} /* error message */ .error-msg{ background: #D42D02;} .error-msg a{ color: #FFF; text-decoration:underline; text-underline-offset: 5px ;} .error-msg a:hover{ color: #D42D02;;} .error-input { border: 1px solid #D42D02 !important;} span.error-input-text, .error-input-text{ color:#D42D02;} .error-input-message, span.error-input-message{ margin: 0 0.25rem 0.25rem; padding: 0.15rem 0.25rem; height: auto; width: auto; display: block; position: relative; z-index: 10; overflow: hidden; font-size: 0.75rem; line-height: 1.3em; text-align: center; line-height: 1.3em; background-color:#D42D02; color: #FFF; border-radius: var(--radius); border: none; animation: errorAnimation 0.75s backwards cubic-bezier(.65,.05,.36,1);} @keyframes errorAnimation{ 0%{transform: scale(1, 0); opacity: 0;} 100%{transform: scale(1); opacity: 1;} } /* success message */ .success-msg{ padding: 10px 10px 10px 36px; margin: 20px auto; min-width: 320px; display: inline-block; position: relative; font: bold 13px/1.3em var(--font-text), sans-serif; color: #FFF; background: #007b52; border-radius:var(--radius); text-align: left;} /* select-slot ____________________________________*/ .select-slot-contener{ margin: 0; padding: 0; width: 100%; display: block; display: flex; flex-flow:row; position: relative; z-index: 0;} .select-slot{ margin: 0rem 1rem 0 0; padding:1rem; width: 100%; min-height:64px; display: block; display: flex; flex-grow: 0; flex-shrink: 1; flex-flow: row; position: relative; align-items: center; z-index: 1; text-align: left; background:#FFF; border-radius:var(--radius); box-shadow:inset 0 0 0 2px var(--col-quaternary-text); cursor: pointer;} .select-slot:last-child{ margin: 0;} .select-slot:before{ content:""; margin: -0.625rem; padding:0; width: 1.5rem; height:1.5rem; top:0; right:0; display: block; position: absolute; z-index: 10; background:var(--col-text-link); border-radius:99px; box-shadow: 0 0 0 2px #FFF; transform: scale(0.5); opacity:0; transition: all 0.15s;} .select-slot:after{ content:""; margin: -6px; width: 16px; height:16px; top:0; right:0; display: block; position: absolute; z-index: 10; transform: scale(0.5) rotate(-45deg); opacity:0; background:#FFF; transition: all 0.15s; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDE2IDE2Jz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDhsNCA0IDctNyI+PC9wYXRoPjwvc3ZnPgoJCQkJ');} .select-slot-icon{ display:none;} .select-slot input{ display: none !important;} .select-slot-label-text{ margin: 0; padding: 0; display: block; position: relative; z-index: 10; font: 14px/1.2em var(--font-text), sans-serif; color: var(--col-primary-text);} .select-slot-label-text b{ font: bold 14px/1.2em var(--font-text);} .select-slot-selection-icon{ margin: 0 10px 0 0; width: 42px; height: 42px; top:0; left: 0; display: block; position: relative; flex-shrink: 0; z-index: 10; stroke:var(--col-primary-text); stroke-width:2px;} /*active state*/ .select-slot:hover{ box-shadow:inset 0 0 0 2px var(--col-secondary-text);} .select-slot.active{ background: #FFF; box-shadow:inset 0 0 0 2px var(--col-text-link);} .select-slot.active:after, .select-slot.active:before{ transform: scale(1) rotate(0deg); opacity:1;} .select-slot.active .select-slot-label-text, .select-slot.active .select-slot-label-text b{ color: var(--col-text-link);} .select-slot.active .select-slot-selection-icon{ stroke: var(--col-text-link);} @media screen and (max-width: 768px){ .select-slot-contener{ flex-flow: column;} .select-slot, .select-slot:last-child{ margin:0.5rem 0; padding:0.5rem 1rem;} .select-slot-selection-icon{ margin: 0 2px 0 0; transform: scale(0.75); } } /* CGV ____________________________________*/ #offer_cgv{ margin: 10px 0; display: block; position: relative;} #offer_cgv hr{ margin:20px 0 15px; width: 100px; height: 1px; display: block; position: relative; background: #f6f6f6;} #cgv_button{ margin: 0; padding: 6px 8px; display: inline-block; position: relative; font:13px/1em var(--font-text), sans-serif; color: var(--fallback-color, #005d7d); background: #e4eaed; border-radius: 99px; cursor: pointer; transition: all 0.1s;} #cgv_button:hover{ background: var(--fallback-color, #005d7d); color: var(--col-inverted-text);} #cgv_button.open{ background: var(--fallback-color, #005d7d); color: var(--col-inverted-text);} #offer_cgv_content{ margin: 10px 0; padding: 0; max-height: 0px; display: block; position: relative; overflow: hidden; background: #fff; border-radius: var(--radius); -webkit-transition: all 0.5s cubic-bezier(.57,.53,.14,1); transition: all 0.5s cubic-bezier(.57,.53,.14,1);} #offer_cgv_content.open{ max-height: 350px; overflow: auto;} #offer_cgv_content::-webkit-scrollbar { width: 10px; background: #EEE;} #offer_cgv_content::-webkit-scrollbar-thumb { width: 8px; border: 3px solid #EEE; border-radius: 10px; background: #B9BFC5;} #offer_cgv_content h1{ padding: 10px 10px 5px; margin: 0; display: block; position: relative; font:16px/1em var(--font-text), sans-serif; color:var(--col-primary-text); text-align: left;} #offer_cgv_content p{ padding: 10px; margin: 0; display: block; position: relative; font:11px/1.4em var(--font-text), sans-serif; color:var(--col-primary-text); text-align: justify;} #offer_cgv_content a{ font-size: inherit;} /* new CGV ____________________________________*/ #offer_cgv{ padding:10px 2px;} #offer-cgv__button{ margin: 20px 0; padding: 8px 12px; display: inline-block; position: relative; font-family: var(--font-text), Arial, sans-serif; font-weight: var(--text-bold); font-size:0.812rem; line-height:1em; color: var(--fallback-color, #005d7d); background: #e4eaed; border-radius: 99px; cursor: pointer; transition: all 0.1s;} #offer-cgv__button:hover{ background: var(--fallback-color, #005d7d); color: var(--col-inverted-text);} #offer-cgv__content{ margin: 0 ; padding: 0 20px; width: 100%; max-height: 0; display: block; position: relative; overflow: hidden; background: #fff; border-left: 4px solid var(--fallback-color, #005d7d); box-shadow: 0 1px 3px rgba(0,0,0,0.3); border-radius: var(--radius); font-size: 12px; color: var(--fallback-color, #005d7d); transition: all 0.5s cubic-bezier(.57,.53,.14,1);} #offer-cgv__content.open{ margin: 0 0 20px; max-height: 450px; overflow: auto;} .offer-cgv__content-right-note:scrollbar { width: 10px; background: #EEE;} .offer-cgv__content-right-note:scrollbar-thumb { width: 8px; border: 3px solid #EEE; border-radius: 99px; background: #B9BFC5;} .offer-cgv__content-note, .offer-cgv__content-right-note{ margin: 20px 0; padding: 0; display: block; position: relative; font-family: var(--font-text), Arial, sans-serif; font-weight: var(--text-regular); font-size:0.812rem; line-height:1.3em; color:var(--col-secondary-text); text-align: justify;} .offer-cgv__content-right-note a{ font-size: inherit;} #offer_cgv .note-mandatory{ color:#d33f46;} /* SHARED MODULES ____________________________________*/ /* * * Modules - choose_number */ /* country price */ #country_list_block{ display: flex; align-items: center;} #international_number_price{ margin: 0 0 0 1rem; padding: 0.5rem; top: 0; right: 0; width: auto; display: block; position: relative; flex-grow: 0; flex-shrink: 0; z-index: 10; font: bold 16px/1em var(--font-text), sans-serif; background: var(--col-quaternary-text); color: var(--col-primary-text); border-radius: 99px;} .type_number_label{ display: block; color: inherit;} .type_number_label b{ display: block; color: inherit;} /* special zipcode france */ #bloc_special_for_france .zipcode-a{ margin: 5px; padding: 0; width: 32px; height: 32px; top:0; right: 0; display: block; position: absolute; z-index: 10; font: bold 12px/1em var(--font-text), sans-serif; background: var(--col-text-link); color: #FFF; border:none; border-radius: var(--radius); cursor: pointer;} #bloc_special_for_france .zipcode-a:hover{ opacity:0.75;} #bloc_special_for_france .zipcode-b{ padding-right:36px;} /* FLUX POPIN _________________________*/ @keyframes fluxpopinintro{ 0% {opacity: 0; transform: scale(0.9) translate3d(-50%,-50%,0);} 100% {opacity: 1; transform: scale(1) translate3d(-50%,-50%,0);}} @keyframes fluxpopinbgintro{ 0% {opacity: 0;} 100% {opacity: 1;}} html.html_pflux_on{overflow:hidden; margin-right:15px;} #popin_flux{ margin: 0; padding: 0; width: 100%; height: 100%; top:0; left:0; display: none; position: fixed; z-index: 10000;} #popin{ margin: 0; padding: 0; width: 600px; max-width:90vw; min-height: 100px; max-height: 90vh; top:50%; left: 50%; display: block; position: fixed; z-index: 10; background: #FFF; box-shadow: 0 3px 10px rgba(0,0,0,0.35); border-radius: var(--radius-xl); overflow: auto; transform: translate3d(-50%,-50%,0);} #popin_flux.open #popin{ -webkit-animation:fluxpopinintro 0.2s forwards; animation:fluxpopinintro 0.2s forwards;} #popin_flux.open #bg{ -webkit-animation:fluxpopinbgintro 0.2s forwards; animation:fluxpopinbgintro 0.2s forwards;} #bg{ content:""; margin: 0; padding: 0; width: 100%; height: 100%; display: block; position: absolute; z-index: 8; background: rgba(0,0,0,0.15); cursor: pointer;} #popin_close{ margin: 0; padding: 0; width: 20px; height: 20px; top:15px; right: 15px; display: block; position: absolute; z-index: 20; border:0 none; background: none; cursor: pointer;} #popin_close:hover #popin_cross{ opacity: 1;} #popin_cross{ width: 12px; height: 12px; opacity: 0.75;} #popin h1{ margin: 0; padding: 15px 50px 15px 15px; display: block; position: relative; z-index: 10; font: bold 20px/1em var(--font-heading), sans-serif; color: var(--col-primary-text); text-align: left;} #popin hr{ margin: 0; padding: 0; width: 100%; height: 1px; display: block; position: relative; border:0; background: #f6f6f6;} /*content*/ #popin .content{ margin: 0; padding: 0; /*max-height: 400px;*/ position: relative; overflow: auto;} #popin .content::-webkit-scrollbar { width: 10px; background: #EEE;} #popin .content::-webkit-scrollbar-thumb { width: 8px; border: 1px solid #EEE; border-radius: 99px; background: var(--primary-color);} #popin .pop_wrapper{ margin: 0; padding: 0 20px;} /*pop-in content*/ #popin .content p{ margin: 0; padding: 10px 0; position: relative; font: 14px/1.3em var(--font-text), sans-serif; color: var(--col-primary-text);} /*pop-in btn*/ #popin input[type="submit"].popin_flux_btn{ margin: 20px auto; padding: 10px 15px; width: auto; display: inline-block; position: relative; text-align: center; font: 18px/1em var(--font-text), sans-serif; color: #FFF; background: var(--primary-color); border:0 none; box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3); border-radius: var(--radius);} #popin input[type="submit"].popin_flux_btn:hover{ margin: 20px auto; padding: 10px 15px; width: auto; display: inline-block; position: relative; font: 18px/1em var(--font-text), sans-serif; color: #FFF; background: var(--primary-color); border:0 none; box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3); border-radius: var(--radius);} /* popin offer descriptif | in mobile flux by exemple */ #offer_descriptif h2{ padding: 0; margin: 20px 0 10px; font: bold 20px/1em var(--font-text), sans-serif; color: var(--col-primary-text);} #offer_descriptif h3{ padding: 0; margin: 20px 0 0px; font: bold 16px/1em var(--font-text), sans-serif; color: var(--col-primary-text);} #offer_descriptif a{ padding: 2px 6px 3px; margin: 0; display: inline-block; font: bold 15px/1em var(--font-text), sans-serif; color: var(--col-text-link); border-radius: var(--radius); text-decoration: underline; text-underline-offset: 5px;} #offer_descriptif a:hover{ color:var(--primary-color); } #offer_descriptif .img_offer{ margin: 0 0 10px; padding: 0; width: 100%; height: 100px; display: block; position: relative; overflow: hidden; z-index: 1; background: var(--shadow);} #offer_descriptif .img_offer img{ margin: 0; padding: 0; width: 100%; position: absolute; display: inline-block; top:0; left: 0; z-index: 1; vertical-align: middle; opacity: 0.2;} #offer_descriptif .img_offer p.price{ margin: 0; padding: 10px 20px; display: block; position: relative; z-index: 2; font: bold 70px/1em var(--font-text), sans-serif; color: #FFF; text-align: center;} #offer_descriptif .img_offer p.price sup{ padding: 0 2px; font: bold 32px/2em var(--font-text), sans-serif; color: #FFF;} #offer_descriptif .img_offer .frequency{ padding: 0 20px; font: 26px/1em var(--font-text), sans-serif; color: #FFF; text-align: right;} #popin #offer_descriptif ul{ padding: 20px 30px; margin: 0; display: block; position: relative;} #popin #offer_descriptif ul li{ padding: 5px 0; margin: 0; display: block; position: relative;} #popin #offer_descriptif ul li:before{ content:""; padding: 0; margin: 0; width: 5px; height:5px; top:12px; left: -15px; display: block; position: absolute; background: var(--col-secondary-text); border-radius: var(--radius-xl);} #popin #offer_descriptif ul li p{ padding: 0; margin: 0; display: block; position: relative; font: 14px/1.2em var(--font-text), sans-serif; color: var(--primary-color);} #popin #offer_descriptif table{ padding: 0; margin: 20px 0; width: 100%; position: relative;} #popin #offer_descriptif table th{ padding: 10px; margin:0; position: relative; table-layout: auto; font: bold 14px/1.2em var(--font-text), sans-serif; color: var(--primary-color);} #popin #offer_descriptif table td{ padding: 10px; margin:0; position: relative; vertical-align: top; border:1px solid #e4eaed; font: 13px/1.2em var(--font-text), sans-serif; color: var(--col-primary-text);} /* ---------------------- */ /* @ ICONS */ /* ---------------------- */ .table-icon{ margin:0; width:16px; height: 16px; display: inline-block; position: relative;} .table-icon:before{ margin: 0; width: 16px; height: 16px; top: 0;left: 0; display: block; position: relative; background: var(--col-text-link); transform: scale(1);} /* ---------------------- */ /* @ RESPONSIVE */ /* ---------------------- */ @media screen and (max-width: 768px){ /* template */ section{ margin: 15px;} .wrapper{ margin: 0; padding: 0;} hr{ margin: 15px 0;} .frame{ margin:15px 5px; padding: 0; box-shadow: var(--diffuse-shadow); border-radius:var(--radius);} .frame:before{ /* trick for 1st element displayed in block with a margin that cause a weird margin overlap */ content: ""; display: inline-block;} #flux-main-view { width: 100%; display: block;} #flux-content-view { width: 100%; display: block; /*overflow: auto;*/}/* this whas removed 19/04/2023 for working sticky red button on mobile */ #flux-side-panel { padding: 0; width: 100%; height: 100%; top:48px; left:0; display: block; position: fixed; z-index: 90; overflow: auto; background: #FFF;} .hfm{ display: none;} /* text formating*/ article h2{ margin: 20px 0; font-size: 22px;} /* summary */ #mobile-summary-drawer{ margin: 0; padding: 12px; width: 52px; height: 48px; top:48px; right: 0; display: block; position: fixed; z-index: 500; font-size:20px;background: #FFF; text-align: center; cursor: pointer; border-radius: 99px 0 0 99px; box-shadow: var(--diffuse-shadow); transition:all 0.3s;} #mobile-summary-drawer.open{ padding-left:24px; padding-top:14px;right: calc(100% - 62px); width:62px; height: 50px; background: transparent; color: #FFF; box-shadow: 0 5px 10px -5px rgba(0,0,0,0); border-radius: 0 99px 99px 0;} #mobile-summary-drawer.open:after{ content:""; margin:22px 0 0 8px; display: block; position: absolute; top:0; left:0; width:8px; height:8px; border-left:2px solid #FFF; border-top:2px solid #FFF; transform: rotate(-45deg);} #mobile-summary-drawer i.kcom-ico-store{ width: 24px; height: 24px; user-select: none;} #mobile-summary-drawer svg.ico-store{ width: 1.5rem; height: 1.5rem; fill:var(--tertiary-color)} #mobile-summary-drawer.open svg.ico-store{ fill: #FFF; } #mobile-summary-drawer i.kcom-ico-store:before{ content:""; top: 50%; left: 50%; background: var(--primary-color); transform: scale(1.5);} #mobile-summary-drawer.open i.kcom-ico-store:before{ background: #FFF; } #flux-summary{ margin: 0; width: 100%; top:0; box-shadow: none; border-radius: 0;} #flux-summary .top{ border-radius: 0; padding: 0 0 0 44px;} #flux-side-panel{ left: 100%; transition: left 0.3s;} #flux-side-panel.open{ margin: 0; left:0; box-shadow: none;} #flux-side-panel.open #flux-summary .top p { margin-left:24px;} .flux-info-box, .flux-call-box, .call-us{ margin: 30px 20px; width: initial;} /* form */ form div { margin: 20px 0; padding: 0; position: relative;} form fieldset { margin: 15px; padding: 0;} form label, form .label { margin: 10px 0; padding: 0; width: 100%; display: block; font-size: 0.75rem;} form input[type="password"], form input[type="text"], form input[type="email"], form textarea, form select, form .input-group { margin: 10px 0; width: 100%; display: block; position: relative; font: 15px/1em var(--font-text), sans-serif;} form .col, form .colb { padding: 0; width: 100%; display: inline-block; vertical-align: top;} form .input-group label, form .input-group .label{ margin: 10px 0; padding: 5px 0;} /* css3 input */ .css-input .css-input-label { padding-left: 28px;} .css-input .css-input-label:after{ width: 24px; height: 24px; top: -4px; left: -4px; background-size: 16px;} .css-input .css-input-label:before{ margin: -2px 0 0 -2px; width: 20px; height: 20px; border-radius: 99px;} .css-input input[type="radio"]:disabled + .css-input-label::after, .css-input input[type="checkbox"]:disabled + .css-input-label::after { width: 22px; top: 6px; left: -3px;} .cta-red, a.cta-red, input.cta-red[type="submit"], a.cta-red:hover, input.cta-red[type="submit"]:hover{ width: 100%;} form .form-cta a, form .form-cta button, form .form-cta input{ margin:5px auto !important;} /* info-msg */ .flux-msg, .info-msg, .error-msg{ min-width: inherit; width: 100%;} /* choose-number */ #international_number_price{ margin: 0; display: inline-block; position: relative;} /* cgv */ #offer_cgv{ margin: 15px; display: block; position: relative;} #offer_cgv hr{ margin:15px 0; width: 100px; height: 1px; display: block; position: relative; background: #dbdbdb;} /* popin */ #popin{ display: block; max-height: 90vh; width:100%;} #popin h1 { font: 1.25rem; font-weight: bold;} } @media screen and (max-width: 480px){ /* info-msg */ .info-msg { min-width: inherit; width: 100%;} /* Modules - choose_number */ #list_prefixes, #syn_number_end{ margin:0; width: 100%; display: block;} } /** * 10 - 1 sequential delay fx */ @keyframes sequentialIntro{ from{transform: scale(0.92) translate(0, 1rem); opacity: 0;} to{transform: scale(1) translate(0, 0); opacity: 1;}} .intro-seq-delayed{ animation: sequentialIntro 0.5s backwards cubic-bezier(.22,.61,.36,1); opacity: 1;} /* ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////// */ /* * * ECOMMERCE v2 - FLUX PARCOURS PRO * */ /* * INDEX tips ! => mobile first in mind 1 - VARS 1 - x responsive 480 > 960 > 1024 1 - 1 root global variables 2 - LAYOUT - TEMPLATE 2 - 1 GLOBAL LAYOUT 2 - 1 - 1 text layout 2 - 1 - 2 ecommerce base view template 2 - 1 - 2 - 1 special BTE boutique style popin 2 - 1 - 3 ecommerce header 2 - 1 - 4 footer 2 - 1 - 4 - 1 footer key points 2 - 1 - 5 Global form styling 2 - 1 - 5 - 1 form field styling 2 - 1 - 5 - 2 error msg 2 - 1 - 6 bravo type page module 2 - 2 SHARED MODULES 2 - 2 - 1 step breadcrumb 2 - 2 - 2 ecommerce cart 2 - 2 - 3 ecommerce price format 2 - 2 - 4 expandable content => js module 2 - 2 - 5 ecommerce-highlight-key-features 2 - 2 - 6 digital flux tooltip 2 - 2 - 8 digital flux quantity selector 2 - 2 - 8 - 1 digital flux quantity selector -- MODULE 2 - 2 - 9 footer mention 3 - ANIMATION 3 - 1 */ /* * 1 - VARS */ /* * 1 - 1 root global variables */ :root{ --col-secondary-text: #4F4F4F; --ecommerce-margin: 15px; --speed-slow:1.25s; --speed-medium:0.35s; --speed-fast:0.15s; --smooth-curve: cubic-bezier(.56,.09,.18,.93); --dynamic-curve: cubic-bezier(.18,.43,.12,1.01); } /* * 2 - LAYOUT - TEMPLATE */ /* * 2 - 1 GLOBAL LAYOUT */ /* 2 - 1 - 1 text layout */ .ecommerce-container{ h1, h2, h3, p, a, input, button, label{ font-family:var(--font-text); color:var(--col-primary-text); } .talk-widget.active{ display: none !important; } /* cta for digital flux*/ & [class^="cta"]{ margin: 0 10px; padding: 10px 22px; width: auto; display: inline-block; position: relative; box-sizing: border-box; font:600 16px/1.2em var(--font-text); text-align: center; text-decoration: none; color:var(--col-primary-text); background: #fff; box-shadow:inset 0 0 0 2px var(--col-primary-text); border:none; cursor: pointer; user-select: none; transition: all var(--speed-fast) var(--dynamic-curve); &:hover{ color:var(--col-inverted-text); background: var(--col-primary-text); box-shadow:inset 0 0 0 2px var(--col-primary-text);} /*disabled*/ &:disabled, &.disabled{ background: #dddddd; color: #656565; box-shadow:none; cursor: not-allowed; &:disabled:hover, &.disabled:hover{ background: #dddddd; color: #656565; box-shadow:none; cursor: not-allowed; opacity:1;} } } /*red*/ .cta--red{ background: var(--primary-cta-color); color: var(--col-inverted-text); box-shadow:none; &:hover{ background: var(--primary-cta-color); color: var(--col-inverted-text); box-shadow:none; opacity: .8;} } /*underline light-blue and primary text color*/ .cta--underline, .cta--dark-underline{ margin:0; padding:0; display: inline-block; font-size: 14px; line-height: 1.6em; font-weight: 500; color:var(--highlight-color); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; background: none; box-shadow:none; &:hover{ color: #0c758a; background: none; box-shadow:none; & i{ background-color: #0c758a;} } & i{ background-color: var(--highlight-color);} &:focus{ box-shadow:none !important;} } .cta--dark-underline{ color:var(--col-primary-text); &:hover{ color: var(--col-primary-text); opacity: 0.8; & i{ background-color: var(--col-primary-text);} } & i{ background-color: var(--col-primary-text);} } } [class^="df-msg"]{ margin:10px 0; padding:10px 15px; display:block; position: relative; font-size: 13px; line-height: 1.4em; font-weight: 500; color:#FFF; border-radius: var(--radius-xl); &:has(> i){ padding-left:40px; & i{ margin:-8px 0 0 10px; padding:0; width: 16px; height: 16px; top:50%; left:0; display: block; position: absolute; background-color: #FFF;} } & ul, & li{ font-size: 13px; line-height: 1.4em; } } .df-msg--error{ background-color: #D42D02;} .df-msg--error--light{ margin:0; color: #D42D02; & i{ background-color: #D42D02 !important;} } .df-msg--info{ background-color: var(--secondary-color);} .df-msg--info--light{ margin:0; color: var(--secondary-color); & i{ background-color: var(--secondary-color) !important;} } /* 2 - 1 - 2 ecommerce base view template */ /* use grid for main layout in desktop only ____________ | step | a | |______| s | | con- | i | | tent | d | | | e | ----------- */ main{ width:100%; min-height:100vh; display:flex; position: relative; flex-flow: column; background:#FFF;} /* mobile */ @media screen and (width <= 768px){ .ecommerce-container{ padding-top:48px; min-height: calc(100vh - 48px); display: block; position: relative;} .step-breadcrumb{ width:100%; display: block; position: relative; z-index: 1;} .ecommerce-content{ margin:0; padding:0; width:100%; display: block; position: relative; z-index: 1;} .ecommerce-aside{ padding:0 15px; top:48px; left:100%; width:100%; height: calc(100% - 48px); display: block; position: fixed; z-index: 20; overflow-y: auto; background: transparent; transition: left var(--speed-medium) var(--smooth-curve); &.active{ left:0;} } html:has(.ecommerce-aside.active){ overflow: hidden; } main:after{ content:""; width: 0; height: 0; top:0; left:0; display: block; position: fixed; z-index: 8; background: rgba(255, 255, 255, 0); transition: background var(--speed-medium) var(--smooth-curve), width 0s linear var(--speed-medium), height 0s linear var(--speed-medium);} main:has(.ecommerce-aside.active):after{ width: 100%; height: 100%; background: rgba(255, 255, 255, 1); transition: background var(--speed-medium) var(--smooth-curve);} } /* desktop */ @media screen and (width >= 768px){ .ecommerce-wrapper{ margin:0 auto; padding:0 15px; width:100%; max-width: 1320px; display: block; position: relative;} .ecommerce-container{ min-height: calc(100vh - 100px); display: grid; grid-template-rows: auto minmax(auto, 100%); grid-template-columns: minmax(340px, 100%) auto; grid-gap: 0; flex-grow: 1; align-content: flex-start; } .ecommerce-container:has(aside){ grid-gap: 0 30px;} .ecommerce-aside{ width:100%; min-width: 240px; max-width: 350px; grid-column: 2; grid-row-start: 2; } .ecommerce-content{ padding:0; grid-column: 1; /* experimental => for mention stick to bottom */ display: flex; flex-flow: column; justify-content: space-between;} .step-breadcrumb{ grid-column: 1 / 3; grid-row: 1;} } /* 2 - 1 - 2 - 1 special BTE boutique style popin */ #popin_tc_privacy_text ul.tc_bt_listitemsglobal{ font-size: 12px; line-height: 1.4em; } #popin_tc_privacy_text li.tc_bt_listitems, #popin_tc_privacy_text li.tc_bt_listitems2{ line-height: 1.4em; } /* 2 - 1 - 3 ecommerce header */ .ecommerce-header{ margin:0; padding:0 var(--ecommerce-margin); width:100%; display:block; position: relative; overflow:hidden; background-color: var(--primary-color); & .ecommerce-wrapper{ height: 100%; display:flex; align-items: center;} & .ecommerce-header__logo{ margin:0; padding:0; width:53px; left:0; height:auto; display:inline-block; position: relative;} & .ecommerce-header__title{ margin:10px 0; padding:0; width: 100%; display:inline-block; font-family:var(--font-text); font-size:20px; font-weight: 500; line-height: 1em; color:#FFF; text-align: left; & > b, & > strong{ font-weight: 600; color:inherit;} } &.digital-header-on-com .ecommerce-header__title{ margin:20px 0; text-align: center;} & .ecommerce-header__help-cta{ margin:0 0 0 auto; padding:12px 16px 12px 50px; display: inline-block; position: relative; font-size: 16px; line-height: 1em; font-weight: 600; color:#FFF; background-color: var(--secondary-color); text-decoration: none; border-radius:99px; cursor: pointer; &:hover{ opacity: 0.75; } & i{ margin:-12px 0 0 16px; padding:0; top:50%; left:0; display: block; position: absolute; width: 24px; height: 24px; background-color:#FFF; } } /* hotline number */ & .ecommerce-header-number-container{ margin:0; padding:8px 12px; display: inline-block; position: relative; flex-shrink: 0; font-size: 16px; line-height: 1em; font-weight: 600; color:#FFF; background-color: var(--special-call-color); text-decoration: none; border-radius:var(--radius);} /* Special BTE logo header */ & .maj .ecommerce-header__logo-container{ text-decoration: none; display:none; & .ecommerce-header__logo{ width: 230px;} & span{ width: 226px; display: block; font-size: 0.75rem; color: #FFF; line-height: 1.2em; margin: 0.25rem;} } & .ecommerce-header__subtitle{ margin:10px 0 20px; font-size:18px; font-weight:300; text-align: center; color:#FFF;} &.mode-landpage{ height:auto; & .ecommerce-wrapper{ flex-flow: column;} & .ecommerce-header__title{ margin: 25px 0 0; text-align: center; color: var(--secondary-color); font-weight: 600;} } @media screen and (width <= 768px) { /* nb : add ".digital-header-on-com" class on keyyo-com digital header (only) because they are not truly top sticky header */ &:not(.digital-header-on-com){ top:0; left:0; height:48px; display: block; position: fixed; z-index: 10; box-shadow: var(--diffuse-shadow); background-size: auto 100px; background-position: center 100px; & .ecommerce-cart-drawer-cta{ margin:0; padding: 0; width:32px; height:32px; display: block; position: relative; flex-shrink: 0; visibility: visible; background-color: transparent; & i{ background-color: #FFF; } &.cart-sticker:after{ content:""; margin:0; padding: 0; top:-2px; right:-2px; width:12px; height:12px; display: block; position: absolute; z-index: 10; background-color: var(--secondary-color); border-radius: 99px; box-shadow: 0 0 0 3px var(--primary-color);} &.cart-sticker:before{ content:""; margin:0; padding: 0; top:-2px; right:-2px;width:12px; height:12px; display: block; position: absolute; z-index: 15; background-color: var(--secondary-color); border-radius: 99px; animation:sticker 0.75s 1s 5 var(--smooth-curve) backwards;} } & .ecommerce-header__logo{ display: none;} & .ecommerce-header__subtitle{ margin:0 0 15px; font-size:15px; } & .ecommerce-header__help-cta{ margin-right:10px; padding: 5px 10px 5px 36px; font-size: 14px; } & .ecommerce-header__help-cta i { margin: -8px 0 0 12px; width: 18px; height: 18px; } } &.mode-landpage{ position: relative;} & .maj .ecommerce-header__title{ padding-right:0; } } @media screen and (width >= 768px) { &{ padding:0; height:100px; background-size: 115% auto; background-position: center 100px; & .ecommerce-head-actions{ color:#FFF; display: none; } & .ecommerce-header__title{ padding-right:50px; font-size:32px; text-align: center;} } & .maj .ecommerce-header__logo-container { display:block; } } } /* fixed help cta */ .ecommerce-header__help-cta-fixed{ margin:20px 15px 20px 0; padding:0 15px; min-height:48px; min-width:48px; position: fixed; bottom:0; right:0; z-index: 10; display: flex; justify-content: center; justify-items: center; align-content: center; align-items: center; font-size: 16px; line-height: 1em; font-weight: 600; color:#FFF; background-color: var(--secondary-color); text-decoration: none; border-radius:99px; cursor: pointer; &:hover{ background-color: var(--secondary-color); color:#FFF; filter: brightness(90%); } & i{ margin:0; padding:0; display: inline-block; position: relative; width: 24px; height: 24px; background-color:#FFF; } & span{ margin:0 0 0 8px; padding:0; display: block; position: relative; line-height:1.3em; } } body:has(.g-recaptcha){ & .ecommerce-header__help-cta-fixed{ margin-bottom:80px; } } @media screen and (width <= 768px) { .ecommerce-header__help-cta-fixed{ padding:0; & span{ display:none; } } body:has(.flux-form__cta--sticky){ & .ecommerce-header__help-cta-fixed{ margin-bottom:80px; } } body:has(.ecommerce-aside.active){ & .ecommerce-header__help-cta-fixed{ margin-bottom:-1000px; } } } @keyframes sticker{ from {transform:scale(0.5); opacity:1;} 50% {transform:scale(2.5); opacity:0; background-color: #FFF;} to {transform:scale(0.5); opacity:0;} } /* 2 - 1 - 4 footer */ .ecommerce-footer{ margin:0; padding:0; display: block; position: relative; background: #f6f6f6; } /* 2 - 1 - 4 - 1 footer key points */ .footer-key-points{ display: flex; position: relative;justify-content: space-evenly; flex-wrap: wrap; align-content: center; font-size:15px; font-weight: 300; line-height: 1.3em; text-align: center; color:var(--col-primary-text); opacity: 0.85; & li{ margin: 25px 0; width: 40%; display: inline-block; box-sizing: border-box; line-height: inherit; & i{ margin:0 auto 10px; width: 48px; height: 48px; display: block; position: relative; } } @media screen and (width >= 768px) { &{ justify-content: space-around; flex-wrap: nowrap; & li{ margin: 40px 0; width: 100%; } } } } /* 2 - 1 - 5 Global form styling */ .digital-flow-container{ margin:0; padding:0; display: block; position: relative; overflow: visible; } .digital-flow-container h2{ @media screen and (width <= 768px) { margin-left:10px; } } .digital-flow-container .flux-form__cta{ margin: 0; padding: 20px 0; bottom: 0; display: flex; position: relative; justify-content: space-between; z-index: 100; overflow: auto; background: rgba(255,255,255,0.9); &.flux-form__cta--sticky{ position: sticky; box-shadow: 10px 0 0 #FFF, -10px 0 0 #FFF; } & [class^="cta"]{ margin:0; } & [class^="cta--red"]{ margin:0 0 0 auto; } @media screen and (width <= 768px) { padding: 10px 0; flex-flow: column; & [class^="cta"]{ margin:10px var(--ecommerce-margin); } & .cta--red{ order:-1; } } } /* 2 - 1 - 5 - 1 form field styling */ /* fiedset */ [class^="digital-flow-fielset"]{ margin: 15px 10px; padding:0 15px; display: block; position: relative; box-sizing: border-box; font-size:13px; color: var(--col-primary-text); box-shadow: inset 0 0 0 1px var(--col-quaternary-text), var(--diffuse-shadow); border-radius: var(--radius-xl); & legend{ margin:15px 0 20px; padding: 0; width: 100%; display: block; position: relative; float: left; font-size:16px; font-weight: 600; line-height: 1.3em; } @media screen and (width >= 768px) { &{ margin: 10px 0 20px; padding:0 20px; & legend{ font-size:17px; } } } /* input text two row */ &.two-row{ @media screen and (width >= 768px) { display:flex; flex-flow:row; flex-wrap:wrap; justify-content:space-between; & .digital-flow__input-wrap, & > .digital-flow__wrap-group{ margin: 0 0 15px; width:49%; } } & .digital-flow__input-wrap{ margin: 0 0 10px;} & .digital-flow__wrap-group{ margin: 0; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:space-between; & > .digital-flow__input-wrap{ margin: 0 0 10px; width:48%;} & .side-33{ width:120px;} & .side-66{ width:calc(100% - 135px);} } } } .digital-flow-fielset--noborder{ box-shadow: none; } /* input wrapper */ .ecommerce-container .digital-flow__input-wrap{ margin: 25px 0 15px; padding: 0; display: block; position: relative; box-sizing: border-box; clear: both; font-size: 100%; font-weight: 500; line-height: 1.2em; & label{ margin:5px 0; padding: 0; width:100%; display: block; position: relative; font-size:13px; font-weight: 600; line-height: 1.2em;} &:has(label > :required), & label:has(+ :required), &:has(label > [data-required]), & label:has(+ [data-required]), .required{ /* auto add a mandaroty "*" for input tagged with required / data-required attribute. BUT ! some time market whant to place "*" at custom location so you can with "mandatory" class on html element INSIDE a required / data-required field (it will remove the auto generate one) */ padding-right:15px; &:after, &.required{ content:"*"; margin:0 0 0 5px; padding:0; top:0; height:10px; display: inline-block; position:absolute; font-size:18px; font-weight:500; line-height: 14px; color:var(--secondary-color); } &.required:after{ display:none;} &:has(.required):after{ display:none;} &:has(.required) .required{ margin:0 0 0 2px; position:relative;} } > input, > select, > textarea{ margin: 5px 0; padding: 5px 10px; min-height:36px; height: inherit; width:100%; display: block; position: relative; box-sizing: border-box; font-family: var(--font-text); font-size:14px; line-height: 1.2em; color:var(--col-primary-text); box-shadow:inset 0 0 0 1px var(--col-quaternary-text); background-color: #FFF; border-radius: var(--radius-xl); border: none; &:disabled, &.disabled{ background-color: rgba(0,0,0,0.15) !important; opacity: 1; color: var(--col-secondary-text) !important; box-shadow: none; border: none;} } > input::-webkit-inner-spin-button { -webkit-appearance: none;} ::placeholder{ color:var(--col-quaternary-text); } :focus{ box-shadow:inset 0 0 0 1px var(--col-primary-text); } & :disabled{ background-color: var(--col-quaternary-text) !important; color: var(--col-secondary-text) !important; } /* .bordered need to be added in a "wrapper" label*/ & .bordered{ padding: 10px; width: auto; display: inline-block; position:relative; box-shadow:inset 0 0 0 1px var(--col-quaternary-text); border-radius:var(--radius-xl); background: #FFF; transition: box-shadow var(--speed-fast);} & .bordered:has(input:checked){ box-shadow:inset 0 0 0 2px var(--secondary-color);} } /* input checkbox & radio specific */ .digital-flow__input-wrap input[type="checkbox"], .digital-flow__input-wrap input[type="radio"]{ width:0; height:0; opacity:0; left:-10000px; position: absolute; display:block;} .digital-flow__input-wrap:has(input[type="checkbox"]), .digital-flow__input-wrap:has(input[type="radio"]){ label:has(> input){ margin:0; padding:5px 5px 5px 32px; width:auto; min-height:24px; display:inline-block; line-height:1.2em;} label:has(> input):before{ content:""; margin:3px 2px; padding:0; width:20px; height:20px; top:0; left:0; display:block; position: absolute; z-index: 1; box-shadow:inset 0 0 0 1px var(--col-quaternary-text), inset 0 0 0 12px #FFF; border-radius:var(--radius); background-color: var(--secondary-color); transition:all var(--speed-fast) var(--dynamic-curve);} label:has(> input[type="radio"]):before{ border-radius:99px;} label:has(> input:focus):before{ box-shadow:inset 0 0 0 1px var(--col-primary-text), inset 0 0 0 12px #FFF; } label:has(> input):after{ content:""; margin:0; padding:0; width:0; height:8px; top:9px; left:6px; display:block; position: absolute; z-index: 3; background:transparent; border-left:2px solid #FFF; border-bottom:2px solid #FFF; opacity: 0.5; transform: rotate(-45deg) scale(0.75); transform-origin: center; will-change: transform; transition:all var(--speed-medium) var(--dynamic-curve);} label:has(> input:checked):before{ box-shadow:inset 0 0 0 0px #CCC, inset 0 0 0 0px #FFF;} label:has(> input:checked):after{ width:12px; height:6px; top:8px; opacity:1; transform: rotate(-45deg) scale(1);} @media screen and (width >= 768px) { label:has(> input){ padding:5px 10px 5px 32px;} } .digital-flow__input-underlabel{ margin: 0 0 15px 0; padding-left: 32px; display: block; position: relative; float: left; font-size: 14px; line-height: 1.3em; font-weight: 300;} } /* 2 - 1 - 5 - 2 error msg */ .digital-flow-container { & .error-input{ border: none !important; box-shadow: none inset 0 0 0 1px #D42D02 !important; box-shadow: inset 0 0 0 1px #D42D02 !important;} span.error-input-text, & .error-input-text{ color:#D42D02;} & .error-input-message, span.error-input-message{ margin: 0 0.25rem 0.25rem; padding: 0 0.25rem; height: auto; width: auto; display: block; position: relative; z-index: 10; overflow: hidden; order:10; font-size: 0.75rem; line-height: 1.3em; text-align: left; line-height: 1.3em; color:#D42D02; background: none; border-radius: var(--radius); border: none; animation: errorAnimation 0.5s backwards cubic-bezier(.47,.08,.19,.97); transform-origin: top left;} } /* 2 - 1 - 6 bravo type page module */ .bravo{ margin:0 20px; text-align:center; & h1{ margin:20px 0; padding:30px 0 20px; font-size:24px; } & p{ margin:20px 0; font-size:18px; line-height:1.4em; } } .block-list-img-inline{ margin:70px auto; width:100%; max-width:920px; display:flex; position:relative; justify-content: space-between; align-items:center; flex-wrap: nowrap;} .block-list-img-inline.invert-img{margin:70px 0 30px 0;} .block-list-img-inline img{position:absolute; right:0; top:0; bottom:0; width:auto; height:100%; border-radius:var(--radius-xxl); z-index:2;} .block-list-img-inline.invert-img img{position:absolute; left:0;} .block-list-img-inline .list-part{ margin:20px 0; padding:30px 30px 30px 30px; display:block; width:100%; position:relative; background:#ffffff; border-radius:var(--radius-xxl); z-index:1; box-shadow:0 10px 30px rgba(0,0,0,.1);} .block-list-img-inline.invert-img .list-part{padding:40px 30px 30px 50%;} .block-list-img-inline .list-part h1{ padding:0 20px 0 0; display:block; position:relative; font-size: 1.5rem; color:var(--highlight-color); font-weight:var(--text-bold); text-align:left;} .block-list-img-inline .list-part p{ margin:0; padding:10px 0; max-width: 50%;display:block; position:relative; color: var(--col-primary-text); font-weight: 300; line-height:1.4em; font-size:16px; text-align:left; font-style: italic; } #step-list{margin: 0; display:flex; position:relative; justify-content: space-between; flex-wrap:nowrap;} #step-list p{color: var(--col-primary-text);} @media screen and (width <= 768px) { .block-list-img-inline{ margin:30px auto; flex-flow: column;} .block-list-img-inline .list-part{ margin:0; padding:0 20px 20px; border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;} .block-list-img-inline .list-part h1{ padding:0; text-align:center;} .block-list-img-inline .list-part p{ text-align:center;max-width: inherit;} .block-list-img-inline img{ position:relative; width:100%; height:auto; border-radius: 0 0 var(--radius-xxl) var(--radius-xxl);} } /* * 2 - 2 SHARED MODULES */ /* 2 - 2 - 1 step breadcrumb */ .step-breadcrumb{ margin:0; padding:0; display:block; position:relative; user-select: none;} .step-breadcrumb li{ margin:0 10px 0 0; padding:10px 0 0 0; height: 42px; display:inline-block; position: relative; vertical-align: top; font-size:13px; line-height:1em; color:var(--primary-color);} .step-breadcrumb__step-bar{ margin:0; padding:0; width:100%; height:4px; top:0; left:0; display:block; position:absolute; overflow:hidden; background:var(--primary-color); border-radius:99px;} .step-breadcrumb--done .step-breadcrumb__step-bar{ background:var(--secondary-color);} .step-breadcrumb--active h2{ margin:0; padding:0; font-size:13px; line-height:1em; font-weight:600; color:var(--primary-color);} .step-breadcrumb--active .step-breadcrumb__step-bar{ background-image:linear-gradient(90deg, var(--secondary-color) 50%, var(--primary-color)50%); background-size: 200%; background-position: -200% 0; animation: step-breadcrumb-active 1s 1s backwards cubic-bezier(.41,.03,0,.84);} .step-breadcrumb__check-icon{ margin:0; width:16px; height:16px; top:10px; left:0; display:none; position:absolute;} li.step-breadcrumb--done{ padding-left:20px; color:var(--secondary-color);} .step-breadcrumb--done.last-done{ animation: an-check-last-done 1s backwards 0s var(--dynamic-curve); } li.step-breadcrumb--done .step-breadcrumb__check-icon{ display:inline-block;} .step-breadcrumb__check-round{ stroke-dasharray: 70 70; stroke:var(--secondary-color)} .step-breadcrumb__check-val{ stroke-dasharray: 16 16; stroke-dashoffset: 1; stroke:var(--secondary-color);} .last-done .step-breadcrumb__check-round{ animation: an-check-a 1s backwards 0.5s var(--dynamic-curve);} .last-done .step-breadcrumb__check-val{ animation: an-check-a 2s backwards 1.5s var(--dynamic-curve);} @media screen and (width <= 768px) { .step-breadcrumb li{ display: none;} .step-breadcrumb li.step-breadcrumb--active{ margin:10px 0 0; padding:10px 10px 10px 70px; display: block; position: relative; height: inherit; & h2{ font-size: 16px; line-height:1.4em;} & .link-breadcrumbs{ color:var(--secondary-color);} } .step-breadcrumb__step-bar{ margin:-22px 0; padding:0; width: 44px; height:44px; top:50%; left:16px; display: block; position: absolute; background: none !important; box-shadow: none;} .step-breadcrumb--active:after, .step-breadcrumb--active:before{ margin:10px 24px; padding:0; top:0; left:0; display: block; position: absolute; font-size: 20px; line-height: 1em;} .step-breadcrumb--active:after{ content: attr(step); color:var(--secondary-color); top:-2px; left:0; font-weight: 600; font-size: 22px;} .step-breadcrumb--active:before { content: attr(totalstep); color:var(--col-primary-text); top:2px; left:14px; font-weight: 300; font-size: 17px;} } @media screen and (width >= 768px) { .step-breadcrumb{ margin:15px 0;} .step-breadcrumb li{ margin:0 15px 0 0; min-width:150px; font-size:14px;} .step-breadcrumb li.step-breadcrumb--active .link-breadcrumbs, .step-breadcrumb li.step-breadcrumb--done .link-breadcrumbs, .step-breadcrumb li.step-breadcrumb--active .link-breadcrumbs strong{ color:var(--secondary-color); } } /* 2 - 2 - 2 ecommerce cart */ .ecommerce-cart{ margin:10px 0 15px; padding:15px; display: block; position: relative; box-sizing: border-box; background: #FFF; border-radius:calc(var(--radius-xl) * 2); font-size: 16px; box-shadow:0 4px 34px rgba(34, 34, 34, 0.1);} .ecommerce-cart__header{ margin:0; padding:0; display: flex; position: relative; flex-flow: column; min-height: 50px; justify-content: center;} .ecommerce-cart__header h1{ margin:0; padding: 0; display: block; position: relative; font-family: var(--font-text); font-size: 20px; font-weight: 600; line-height: 1.2em; text-align: center;} .ecommerce-cart__header img{ margin:10px auto; padding: 0; max-width: 90%; max-height: 100px; display: block; position: relative; object-fit: cover;} #flux-main-view .ecommerce-cart hr.separator{ margin:10px 0 8px; padding:0; width: 100%; height: 1px; display: block; position: relative; box-sizing: border-box; background: var(--col-quaternary-text); border:none;} .ecommerce-cart .ecommerce-cart__key-elements-expand-cta{ margin:0; padding:4px 24px 4px 0; width: 100%; min-height: 36px; display: block; position: relative; font-family: var(--font-text); font-size: 14px; font-weight: 600; line-height: 1.2em; text-align: left; color:var(--secondary-color); cursor:pointer; & .icomask-arrow-down{ margin:-6px 0 0 0; padding:0; width:12px; height:12px; top:50%; right:0; display: block; position: absolute; transition: all var(--speed-medium) var(--smooth-curve);} &:hover .icomask-arrow-down{ background: var(--secondary-color);} &.expandable-content--active .icomask-arrow-down{ transform: scale(1, -1); background: var(--secondary-color);} /* &:has(.icomask-check){ padding-left:28px;} */ & .icomask-check{ margin:-8px 0 0 2px; padding:0; width:16px; height:16px; top:50%; left:0; display: none; position: absolute; background: var(--secondary-color);} } .ecommerce-cart__list-elements{ padding: 0 0 0 20px; display: block; position: relative; font-size: 12px;} .ecommerce-cart__list-elements li{ margin:14px 0; display: block; clear: both; font-size: 12px; font-weight: 300; line-height: 1.3em; color:var(--col-primary-text);} /* .ecommerce-cart__list-elements li::before{ content:"•"; margin:0; padding:0; top:6px; left:-14px; display: block; position: absolute; font-size:32px; line-height:0em; color:var(--col-primary-text);}*/ .ecommerce-cart__list-elements li::before{ content:""; margin:0; padding:0; top:0; left:-20px; display: block; position: absolute; width: 14px; height: 14px; vertical-align: top; font-size: 0; line-height: 0; -webkit-mask-size: contain; mask-size: contain; mask-position:center; background: var(--secondary-color); mask-repeat: no-repeat; -webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-check'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-check');} .ecommerce-cart__list-elements li b{ display: inline; font-weight: 600; color:var(--col-primary-text);} .no-list-marker{ padding-left: 0;} .no-list-marker > li::before{ display: none;} .ecommerce-cart__list-elements-price{ margin:0; display: inline-block; float: right; font-size: 1rem; color:var(--col-primary-text);} .ecommerce-cart__additionnal-details{ color:var(--col-primary-text); li{ margin: 10px 0; color:inherit;} li::before{ content:"•"; margin:0; padding:0; top:8px; left:-14px; display: block; position: absolute; font-size: 22px; line-height:0em; color:inherit; background: none; mask-image:none;} .ecommerce-cart__list-elements-price{ font-size: 12px; color:inherit;}} .ecommerce-cart__footer{ margin:15px 0 0; padding: 0 15px; min-height: 48px; display: block; position: relative; box-sizing: border-box; overflow: hidden; font-size: 12px; color:#FFF; background: var(--primary-color); border-radius:var(--radius-xl);} .ecommerce-cart__footer li{ margin:15px 0; width:100%; display: block; position: relative; clear: both; box-sizing: border-box; font-size: 12px; color:#FFF; line-height: 1em;} .ecommerce-cart__footer-price{ margin: -3px 0 15px; min-width: 33%; float: right; font-size: 1.875rem; text-align: right; color:#FFF; line-height: 1em; } @media screen and (width <= 768px) { .ecommerce-cart{ margin:10px 0 0; box-shadow:none;} } /* 2 - 2 - 3 ecommerce price format */ .price-bloc{ margin:0; width: auto; display:inline-grid; position: relative; grid-template-areas:"before before" "main decimal" "main duration-pricing" "additionnal additionnal"; font-size:inherit; line-height: 1em; font-weight:var(--text-regular); color: inherit; text-align: center;} .price-bloc .price-bloc__main{ margin:0 6px 0 0; display:block; position: relative; grid-area: main; justify-self: end; align-self: center; font-size:100%; line-height: 1em;font-weight:var(--text-bold);} .price-bloc .price-bloc__before{ margin:0; display:block; position: relative; grid-area: before; font-size:0.875rem; line-height: 1em; color:var(--col-primary-text);} .price-bloc .price-bloc__decimal{ margin:0; min-width: 2em; display:block; position: relative; grid-area: decimal; justify-self: start; align-self:end; font-size:40%; line-height: 1em; text-align: left; font-weight:var(--text-bold);} .price-bloc .price-bloc__duration-pricing{ margin:0; display:block; position: relative; grid-area: duration-pricing; justify-self: start; align-self: center; font-size:32%; line-height: 1em;font-weight:var(--text-regular);} .price-bloc .price-bloc__additionnal-info{ margin:10px 0; display:block; position: relative; grid-area: additionnal; font-size:0.875rem; line-height: 1em; color:var(--secondary-color);} .price-bloc del{ position:relative; text-decoration-line: none;} .price-bloc del:after{ content: ""; top:50%; left:-5%; width:110%; height:10%; display: block; position: absolute; z-index: 10; background: var(--third-fancy-color); transform: rotate(-4deg);} /* 2 - 2 - 4 expandable content => js module */ [expand-trigger]{ transition: all 1s;} [expand-content]{ margin-top:0; padding-top:0; margin-bottom:0; padding-bottom:0; height: auto; max-height: 0; display:block; position: relative; overflow: hidden; opacity: 0; transform: translateZ(0); will-change: transform; transition: max-height var(--speed-medium) var(--smooth-curve), opacity var(--speed-medium) var(--smooth-curve), transform var(--speed-medium) var(--smooth-curve);} .expandable-content--active[expand-content]{ overflow: hidden; opacity: 1;} .showUp{ transition: all 1s;} .showUp{ margin-top:0; padding-top:0; margin-bottom:0; padding-bottom:0; height: auto; max-height: 0; display:block; position: relative; overflow: hidden; opacity: 0; transform: translateZ(0); will-change: transform; transition: max-height var(--speed-medium) var(--smooth-curve), opacity var(--speed-medium) var(--smooth-curve), transform var(--speed-medium) var(--smooth-curve);} .showUp--active{ overflow: hidden; opacity: 1;} /* 2 - 2 - 5 ecommerce-highlight-key-features */ .ecommerce-highlight-key-features{ margin:10px 0 15px; padding:15px; width: 100%; display: block; position: relative; box-sizing: border-box; font-size: 13px; line-height: 1.3em; font-weight: 300; color:#FFF; background: var(--primary-color); border-radius:var(--radius-xl); box-shadow:0 4px 34px rgba(34, 34, 34, 0.1); & h2{ margin: 10px 0 20px; padding:0; color:var(--secondary-color); text-align: center; } & ul{ display: block; position: relative; font-size: inherit; color:inherit; line-height: inherit; font-weight: inherit; & li{ margin:20px 10px; padding:0 0 0 52px; min-height: 32px; display: flex; position: relative; align-items:center; font-size: inherit; color:inherit; line-height: inherit; font-weight: inherit; & i{ margin:0; padding:0; top:0; left:0; display: block; position: absolute; width: 36px; height: 36px; background-color:#FFF; } } } } .df-popin-container{ margin:0; padding:20px; width:0; max-height: 0; top:50%; left:50%; display: none; z-index: 1001; background: #FFF; box-shadow: var(--diffuse-shadow); border-radius:var(--radius-xl); transform: translate(-50%, -50%); overflow-y: auto; &.active{ margin:0; width:90vw; max-width:420px; max-height:90vh; display: block; position: fixed; animation:df-popin var(--speed-medium) backwards var(--dynamic-curve);} & h1{ margin:0 0 15px; padding:0; display: block; position: relative; font-size: 16px; line-height: 1.2em; font-weight: 600; color:var(--primary-color); } & p{ margin:10px 0 0; padding:0; display: block; position: relative; font-size: 14px; line-height: 1.3em; font-weight: 500; color:var(--primary-color); } & .df-popin-footer-actions{ margin:0; padding:15px 0 0; width: 100%; left: 0; bottom: 0; display: block; position: relative; position:sticky; font-size:14px; text-align: right; background-color: #FFF; } } .df-popin-bg{ margin:0; padding:0; top:0; left:0; width: 100%; height: 100%; display: block; position: fixed; z-index: 1000; background: rgba(0,0,0,0.15); animation:df-popin-bg var(--speed-medium) backwards var(--dynamic-curve); } /* 2 - 2 - 6 digital flux tooltip */ .df-tooltip{ margin:0; padding:0; width: 16px; height:16px; top:0px; display: inline-block; position: relative; background: #FFF; border-radius:99px; z-index: 10; & i{ margin:2px; padding:0; width: 13px; height:13px; z-index: 5; background: var(--secondary-color);} &:hover, &:focus{ z-index: 180;} & .df-content{ content: attr(data-tooltip); margin:0 0 0 0; padding:0; width: 0; max-height:0; top:50%; left:50%; display: block; position: fixed;z-index: 10; user-select:none; font-size:0; font-weight: 500; line-height: 1.32em; text-align: left; background:#FFF; opacity: 0; box-shadow: var(--diffuse-shadow), 0 0 0 10000px rgba(0,0,0,0.5); border-radius:var(--radius-xl); transform: scale(0.75); transform-origin: 0; overflow: hidden; transition: all var(--speed-medium) var(--dynamic-curve);} &:hover .df-content, &:focus .df-content{ margin:0 0 0 -128px; padding:10px; width: 256px; max-height:210px; top:50%; display: block; overflow: auto; font-size:13px; opacity: 1; transform: scale(1); opacity: 1;} &:before { content:""; margin:-16px; padding:0; width: 48px; height:48px; top:0; left:0; display: block; position: absolute; z-index: 10; background: #FFF; opacity: 1; z-index: 1; border-radius:99px; transform: scale(0.35);} &:hover:before, &:focus:before{ transform: scale(1); opacity: 0; background: var(--secondary-color); transition: all var(--speed-medium) var(--smooth-curve);} @media screen and (width >= 768px) { & .df-content { top:100%; left:50%; position: absolute; box-shadow: var(--diffuse-shadow);} &:hover .df-content, &:focus .df-content{ margin:0 0 0 -5px; top:125%;} } /* special for better position on summary */ &.summary-tooltip .df-content{ box-shadow: var(--diffuse-shadow); left: 5%; margin:0; position: fixed; top: 32px; width: 90%;} } /* special for triggered tooltip from parent */ @media screen and (width >= 768px) { .df-tooltip-trigger:has(input:checked) span.df-tooltip:after{ margin:0 0 0 -5px; top:125%; padding:10px; width: 256px; max-height:128px; display: block; font-size:13px; opacity: 1; transform: scale(1); opacity: 1;} } /* 2 - 2 - 8 digital flux quantity selector */ .df-quantity-selector{ margin:20px auto; padding:0; width:100%; height: 38px; display:flex; position:relative; flex-shrink:2; justify-content: center; align-items: center; box-shadow: 0 1px 4px 1px var(--col-quaternary-text); border-radius: var(--radius); & button{ margin:0; padding:0; height:100%; min-width:32px; width: 100%; display:inline-block; font:500 24px/16px var(--font-text); box-shadow:none; color:var(--col-tertiary-text);} &.rounded--button{ box-shadow: none;} &.rounded--button button{ margin:0; padding:0; height:100%; width:32px; height:32px; display:inline-block; font:500 24px/15px var(--font-text); box-shadow:none; color:var(--col-primary-text); background:var(--tertiary-cta-color); border-radius:100%; z-index: 10; user-select: none; transition:all var(--speed-fast) var(--dynamic-curve);} &.rounded--button button:hover{ color:var(--col-inverted-text); background-color:var(--col-primary-text); transform: scale(1.1); } &.rounded--button button:active{ transform: scale(0.8);} & input[type="text"]{ margin:0; padding:0; height:100%; width:42px; display:inline-block; font:700 18px/18px var(--font-text); text-align:center; color:var(--col-primary-text); box-shadow:none; user-select: none;} @media screen and (width >= 768px) { .df-quantity-selector{ width:96px; & input{ user-select: auto;} } } } /* 2 - 2 - 8 - 1 digital flux quantity selector -- MODULE a text + df-quantity-selector element */ .df-quantity-selector-MODULE{ margin: 20px 10px; padding:15px 20px; display: flex; position: relative; align-items: center; box-shadow: 0 1px 4px 1px var(--col-quaternary-text); border-radius: var(--radius-xl); & .df-quantity-selector-MODULE__left-zone{ margin:0; padding:0; height:100%; min-width:32px; width: 100%; display:inline-block; font:500 16px/1.4em var(--font-text); box-shadow:none; color:var(--col-primary-text); & p{ margin:0; padding:0; display: flex; align-items: center;} & .title, & h2, & h3{ font:800 18px/1.4em var(--font-text); box-shadow:none; color:var(--secondary-color); } } & .df-quantity-selector{ margin:0; width: 130px; } @media screen and (width >= 768px) { margin: 20px 0; } } /* 2 - 2 - 9 footer mention */ #offer_cgv{ padding:0;} #offer-cgv__button{ margin: 15px 0; padding: 8px 12px; display: inline-block; position: relative; font-family: var(--font-text), Arial, sans-serif; font-weight: var(--text-bold); font-size:0.812rem; line-height:1em; color: var(--col-primary-text); background: #DDD; border-radius: 99px; cursor: pointer; transition: all 0.1s;} #offer-cgv__button:hover{ background: var(--col-primary-text); color: var(--col-inverted-text);} #offer-cgv__content{ margin: 0 ; padding: 0 20px; width: 100%; max-height: 0; display: block; position: relative; overflow: hidden; background: #fff; border-left: 4px solid var(--col-primary-text); box-shadow: 0 1px 3px rgba(0,0,0,0.3); border-radius: var(--radius); font-size: 12px; color: var(--col-primary-text); transition: all 0.5s cubic-bezier(.57,.53,.14,1);} #offer-cgv__content.open{ margin: 0 0 20px; max-height: 450px; overflow: auto;} .offer-cgv__content-right-note:scrollbar { width: 10px; background: #EEE;} .offer-cgv__content-right-note:scrollbar-thumb { width: 8px; border: 3px solid #EEE; border-radius: 10px; background: #B9BFC5;} .offer-cgv__content-note, .offer-cgv__content-right-note{ margin: 20px 0; padding: 0; display: block; position: relative; font-family: var(--font-text), Arial, sans-serif; font-weight: var(--text-regular); font-size:0.812rem; line-height:1.3em; color:var(--col-secondary-text); text-align: justify;} .offer-cgv__content-right-note a{ font-size: inherit;} #offer_cgv .note-mandatory{ color:var(--secondary-color);} sup.expo{ margin:0; padding:0; top:0; display: inline; position: relative; color:var(--secondary-color); font-weight: 600; line-height: 0; font-size: 82%; &:before{ content:"("; margin:0 1px; display: inline; position: relative; color:var(--secondary-color); font-weight: 500;} &:after{ content:")"; margin:0 1px; display: inline; position: relative; color:var(--secondary-color); font-weight: 500;} } /* * 3 - ANIMATION */ /* step-breadcrumb top bar animation */ @keyframes step-breadcrumb-active{ from{background-position: -100% 0;} to{background-position: -200% 0;}} @keyframes step-breadcrumb-active-mobile{ from{background-position: 0 -100%;} to{background-position: 0 -200%;}} @keyframes an-check-a{ from{stroke-dasharray: 0 70;} to{stroke-dasharray: 70 70;}} @keyframes an-check-b{ from{stroke-dasharray: 0 16;} to{stroke-dasharray: 16 16;}} @keyframes an-check-last-done{ from{padding-left:0;} to{padding-left:20px;}} @keyframes df-popin{ from{transform: scale(1, 1) translate(-50%, -40%); opacity: 0;} to{transform: scale(1) translate(-50%, -50%); opacity: 1;}} @keyframes df-popin-bg{ from{opacity: 0;} to{opacity: 1;}} /* * 4 - ICONS */ /* 4 - 1 icon template */ [class*="icomask-"]{ margin:0; padding:0; display: inline-block; position: relative; width: 24px; height: 24px; vertical-align: top; font-size: 0; line-height: 0; -webkit-mask-size: contain; mask-size: contain; mask-position:center; background: var(--col-primary-text); mask-repeat: no-repeat; -webkit-mask-image: url(./assets/ecommerce-pictos.svg#svg-ico-placeholder); mask-image: url(./assets/ecommerce-pictos.svg#svg-ico-placeholder);} /* 4 - 2 icon template */ .icomask-placeholder{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-placeholder'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-placeholder');} .icomask-handset{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-handset'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-handset');} .icomask-arrow-down{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-arrow-down'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-arrow-down');} .icomask-info{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-info'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-info');} .icomask-edit{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-edit'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-edit');} .icomask-moisoffert{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-moisoffert'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-moisoffert');} .icomask-resiliable{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-resiliable'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-resiliable');} .icomask-operateurs{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-operateurs'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-operateurs');} .icomask-cadenas{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cadenas'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cadenas');} .icomask-check{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-check'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-check');} .icomask-big-check{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-big-check'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-big-check');} .icomask-france{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-france'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-france');} .icomask-messages{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-messages'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-messages');} .icomask-accueilperso{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-accueilperso'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-accueilperso');} .icomask-imgpro{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-imgpro'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-imgpro');} .icomask-actif{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-actif'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-actif');} .icomask-refresh{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-refresh'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-refresh');} .icomask-cart{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cart'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cart');} .icomask-help{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-help'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-help');} .icomask-horaire-std{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-horaire-std'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-horaire-std');} .icomask-renvoi-appel{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-renvoi-appel'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-renvoi-appel');} .icomask-serv-inter{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-serv-inter'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-serv-inter');} .icomask-svi{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-svi'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-svi');} .icomask-file-attente{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-file-attente'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-file-attente');} .icomask-message-accueil{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-message-accueil'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-message-accueil');} .icomask-delivery{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-delivery'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-delivery');} .icomask-express{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-express'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-express');} .icomask-standart{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-standart'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-standart');} .icomask-securite{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-securite'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-securite');} .icomask-proximite{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-proximite'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-proximite');} .icomask-vpn{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-vpn'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-vpn');} .icomask-mobile{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-mobile'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-mobile');} .icomask-fixe{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-fixe'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-fixe');} .icomask-fibre{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-fibre'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-fibre');} .icomask-reseau{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-reseau'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-reseau');} .icomask-backup{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-backup'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-backup');} .icomask-private{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-private'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-private');} .icomask-anticipate{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-anticipate'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-anticipate');} .icomask-easy{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-easy'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-easy');} .icomask-paiement{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-paiement'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-paiement');} .icomask-cni{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cni'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cni');} .icomask-passeport{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-passeport'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-passeport');} .icomask-rib{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-rib'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-rib');} .icomask-eye{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-eye'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-eye');} .icomask-eye-revert{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-eye-revert'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-eye-revert');} .icomask-sim{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-sim'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-sim');} .icomask-upload{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-upload'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-upload');} /*for doc upload todo => move it in right file*/ .icomask-Carte{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cni'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cni');} .icomask-Carte.verso{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cni-back'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-cni-back');} .icomask-Passeport{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-passeport'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-passeport');} [class*="icomask-Relevé"]{-webkit-mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-rib'); mask-image: url('./assets/ecommerce-pictos.svg#svg-ico-rib');}