Created
January 28, 2017 09:29
-
-
Save hoanglamhuynh/ac9844bf8665cf20654c37c73239aa12 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: "SofiaPro"; | |
src: url("../fonts/sofia-pro.eot") format("eot"), url("../fonts/sofia-pro.woff") format("woff"), url("../fonts/sofia-pro.ttf") format("ttf") | |
} | |
@font-face { | |
font-family: "SofiaProLight"; | |
src: url("../fonts/sofia-pro-light.eot") format("eot"), url("../fonts/sofia-pro-light.woff") format("woff"), url("../fonts/sofia-pro-light.ttf") format("ttf") | |
} | |
@font-face { | |
font-family: "SofiaProSemiBold"; | |
src: url("../fonts/sofia-pro-semi-bold.eot") format("eot"), url("../fonts/sofia-pro-semi-bold.woff") format("woff"), url("../fonts/sofia-pro-semi-bold.ttf") format("ttf") | |
} | |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline | |
} | |
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
display: block | |
} | |
body { | |
line-height: 1 | |
} | |
ol, ul { | |
list-style: none | |
} | |
blockquote, q { | |
quotes: none | |
} | |
blockquote:before, blockquote:after, q:before, q:after { | |
content: ''; | |
content: none | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0 | |
} | |
.text--white { | |
color: #fff | |
} | |
.text--gray { | |
color: #8B898D | |
} | |
.text--dark { | |
color: #535353 | |
} | |
.text--black { | |
color: #000 | |
} | |
.text--blue { | |
color: #00ACC6 | |
} | |
.text--green { | |
color: #2ECE6A | |
} | |
.text--red { | |
color: #ff5a5f | |
} | |
.text--orange { | |
color: #ffa400 | |
} | |
.text--bold { | |
font-weight: bold | |
} | |
.text--bolder { | |
font-family: SofiaProSemiBold | |
} | |
.text--right { | |
text-align: right | |
} | |
.text--center { | |
text-align: center | |
} | |
.text--left { | |
text-align: left | |
} | |
.lh--125 { | |
line-height: 125% | |
} | |
.lh--150 { | |
line-height: 150% | |
} | |
.fs--small { | |
font-size: 8px | |
} | |
.fs--small-medium { | |
font-size: 14px | |
} | |
.fs--medium { | |
font-size: 16px | |
} | |
.fs--medium-large { | |
font-size: 24px | |
} | |
.fs--large { | |
font-size: 32px | |
} | |
.fs--largest { | |
font-size: 64px | |
} | |
.display--inline-block { | |
display: inline-block | |
} | |
.display--flex { | |
display: -ms-flexbox; | |
display: flex | |
} | |
.display--inline-flex { | |
display: -ms-inline-flexbox; | |
display: inline-flex | |
} | |
.display--table { | |
display: table | |
} | |
.display--table-cell { | |
display: table-cell | |
} | |
.position--relative { | |
position: relative | |
} | |
.flex-1 { | |
-ms-flex: 1 0 auto; | |
flex: 1 0 auto | |
} | |
.flex-shrink-1 { | |
-ms-flex-negative: 1; | |
flex-shrink: 1 | |
} | |
.flex-none { | |
-ms-flex: none; | |
flex: none | |
} | |
.flex-align-items-center { | |
-ms-flex-align: center; | |
align-items: center | |
} | |
.flex-wrap { | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap | |
} | |
.float-right { | |
float: right | |
} | |
.float-left { | |
float: left | |
} | |
.hide { | |
display: none | |
} | |
.show { | |
display: block | |
} | |
.width--150 { | |
width: 150% | |
} | |
.width--100 { | |
width: 100% | |
} | |
.width--75 { | |
width: 75% | |
} | |
.width--50 { | |
width: 50% | |
} | |
.width--33 { | |
width: 33% | |
} | |
.width--25 { | |
width: 25% | |
} | |
.width--100px { | |
width: 100px | |
} | |
.white-space--pre { | |
white-space: pre | |
} | |
.border-box { | |
box-sizing: border-box | |
} | |
.cursor-pointer { | |
cursor: pointer | |
} | |
.link-no-underline { | |
text-decoration: none | |
} | |
.iconmoon-icon { | |
width: 1em; | |
height: 1em; | |
stroke: currentColor; | |
fill: currentColor; | |
display: inline-block; | |
stroke-width: 0 | |
} | |
.clearfix::after { | |
clear: both | |
} | |
.clearfix::before { | |
display: table; | |
content: '' | |
} | |
.dmk-link { | |
font-weight: bold; | |
text-decoration: none; | |
color: #00ACC6 | |
} | |
@media (min-width: 300px) and (max-width: 650px) { | |
.hide--if-small { | |
display: none | |
} | |
.show--if-small { | |
display: block | |
} | |
.m0--if-small { | |
margin: 0px 0px 0px 0px !important | |
} | |
.p0--if-small { | |
padding: 0px 0px 0px 0px !important | |
} | |
} | |
@media (min-width: 651px) { | |
.hide--if-large { | |
display: none | |
} | |
.show--if-large { | |
display: block | |
} | |
} | |
* { | |
box-sizing: border-box | |
} | |
body { | |
overflow-x: hidden | |
} | |
body, h1, h2, h3, p, input { | |
font-family: SofiaProLight | |
} | |
button { | |
outline: none; | |
cursor: pointer; | |
font-family: SofiaPro | |
} | |
button>span { | |
font-family: SofiaPro | |
} | |
h1 { | |
font-size: 32px | |
} | |
h2 { | |
font-size: 16px | |
} | |
.IIV::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button { | |
opacity: 0; | |
pointer-events: none; | |
width: 5px | |
} | |
label { | |
line-height: 150%; | |
font-size: 14px | |
} | |
strong { | |
font-family: SofiaProSemiBold | |
} | |
hr { | |
border: none; | |
border-bottom: 1px solid #cdcdcd | |
} | |
@-ms-viewport { | |
width: device-width | |
} | |
.container:after, .container:before, .row:after, .row:before { | |
content: " "; | |
display: table | |
} | |
.container:after, .row:after { | |
clear: both | |
} | |
.container { | |
margin-right: auto; | |
margin-left: auto; | |
padding-left: 15px; | |
padding-right: 15px | |
} | |
@media (min-width: 768px) { | |
.container { | |
width: 750px | |
} | |
} | |
@media (min-width: 992px) { | |
.container { | |
width: 970px | |
} | |
} | |
@media (min-width: 1200px) { | |
.container { | |
width: 1170px | |
} | |
} | |
.row { | |
margin-left: -15px; | |
margin-right: -15px | |
} | |
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { | |
position: relative; | |
min-height: 1px; | |
padding-left: 15px; | |
padding-right: 15px | |
} | |
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { | |
float: left | |
} | |
.col-xs-12 { | |
width: 100% | |
} | |
.col-xs-11 { | |
width: 91.66666667% | |
} | |
.col-xs-10 { | |
width: 83.33333333% | |
} | |
.col-xs-9 { | |
width: 75% | |
} | |
.col-xs-8 { | |
width: 66.66666667% | |
} | |
.col-xs-7 { | |
width: 58.33333333% | |
} | |
.col-xs-6 { | |
width: 50% | |
} | |
.col-xs-5 { | |
width: 41.66666667% | |
} | |
.col-xs-4 { | |
width: 33.33333333% | |
} | |
.col-xs-3 { | |
width: 25% | |
} | |
.col-xs-2 { | |
width: 16.66666667% | |
} | |
.col-xs-1 { | |
width: 8.33333333% | |
} | |
@media (min-width: 768px) { | |
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { | |
float: left | |
} | |
.col-sm-12 { | |
width: 100% | |
} | |
.col-sm-11 { | |
width: 91.66666667% | |
} | |
.col-sm-10 { | |
width: 83.33333333% | |
} | |
.col-sm-9 { | |
width: 75% | |
} | |
.col-sm-8 { | |
width: 66.66666667% | |
} | |
.col-sm-7 { | |
width: 58.33333333% | |
} | |
.col-sm-6 { | |
width: 50% | |
} | |
.col-sm-5 { | |
width: 41.66666667% | |
} | |
.col-sm-4 { | |
width: 33.33333333% | |
} | |
.col-sm-3 { | |
width: 25% | |
} | |
.col-sm-2 { | |
width: 16.66666667% | |
} | |
.col-sm-1 { | |
width: 8.33333333% | |
} | |
} | |
@media (min-width: 992px) { | |
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { | |
float: left | |
} | |
.col-md-12 { | |
width: 100% | |
} | |
.col-md-11 { | |
width: 91.66666667% | |
} | |
.col-md-10 { | |
width: 83.33333333% | |
} | |
.col-md-9 { | |
width: 75% | |
} | |
.col-md-8 { | |
width: 66.66666667% | |
} | |
.col-md-7 { | |
width: 58.33333333% | |
} | |
.col-md-6 { | |
width: 50% | |
} | |
.col-md-5 { | |
width: 41.66666667% | |
} | |
.col-md-4 { | |
width: 33.33333333% | |
} | |
.col-md-3 { | |
width: 25% | |
} | |
.col-md-2 { | |
width: 16.66666667% | |
} | |
.col-md-1 { | |
width: 8.33333333% | |
} | |
} | |
@media (min-width: 1200px) { | |
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { | |
float: left | |
} | |
.col-lg-12 { | |
width: 100% | |
} | |
.col-lg-11 { | |
width: 91.66666667% | |
} | |
.col-lg-10 { | |
width: 83.33333333% | |
} | |
.col-lg-9 { | |
width: 75% | |
} | |
.col-lg-8 { | |
width: 66.66666667% | |
} | |
.col-lg-7 { | |
width: 58.33333333% | |
} | |
.col-lg-6 { | |
width: 50% | |
} | |
.col-lg-5 { | |
width: 41.66666667% | |
} | |
.col-lg-4 { | |
width: 33.33333333% | |
} | |
.col-lg-3 { | |
width: 25% | |
} | |
.col-lg-2 { | |
width: 16.66666667% | |
} | |
.col-lg-1 { | |
width: 8.33333333% | |
} | |
} | |
.pa { | |
padding: auto | |
} | |
.pxl { | |
padding: 64px | |
} | |
.pl { | |
padding: 32px | |
} | |
.pm { | |
padding: 16px | |
} | |
.ps { | |
padding: 8px | |
} | |
.pxs { | |
padding: 4px | |
} | |
.p0 { | |
padding: 0px | |
} | |
.ptxl { | |
padding-top: 64px | |
} | |
.ptl { | |
padding-top: 32px | |
} | |
.ptm { | |
padding-top: 16px | |
} | |
.pts { | |
padding-top: 8px | |
} | |
.ptxs { | |
padding-top: 4px | |
} | |
.pt0 { | |
padding-top: 0px | |
} | |
.pbxl { | |
padding-bottom: 64px | |
} | |
.pbl { | |
padding-bottom: 32px | |
} | |
.pbm { | |
padding-bottom: 16px | |
} | |
.pbs { | |
padding-bottom: 8px | |
} | |
.pbxs { | |
padding-bottom: 4px | |
} | |
.pb0 { | |
padding-bottom: 0px | |
} | |
.plxl { | |
padding-left: 64px | |
} | |
.pll { | |
padding-left: 32px | |
} | |
.plm { | |
padding-left: 16px | |
} | |
.pls { | |
padding-left: 8px | |
} | |
.plxs { | |
padding-left: 4px | |
} | |
.pl0 { | |
padding-left: 0px | |
} | |
.prxl { | |
padding-right: 64px | |
} | |
.prl { | |
padding-right: 32px | |
} | |
.prm { | |
padding-right: 16px | |
} | |
.prs { | |
padding-right: 8px | |
} | |
.prxs { | |
padding-right: 4px | |
} | |
.pr0 { | |
padding-right: 0px | |
} | |
.ma { | |
margin: auto | |
} | |
.m0a { | |
margin: 0 auto | |
} | |
.mxl { | |
margin: 64px | |
} | |
.ml { | |
margin: 32px | |
} | |
.mm { | |
margin: 16px | |
} | |
.ms { | |
margin: 8px | |
} | |
.mxs { | |
margin: 4px | |
} | |
.m0 { | |
margin: 0px | |
} | |
.mtxl { | |
margin-top: 64px | |
} | |
.mtl { | |
margin-top: 32px | |
} | |
.mtm { | |
margin-top: 16px | |
} | |
.mts { | |
margin-top: 8px | |
} | |
.mtxs { | |
margin-top: 4px | |
} | |
.mt0 { | |
margin-top: 0px | |
} | |
.mbxl { | |
margin-bottom: 64px | |
} | |
.mbl { | |
margin-bottom: 32px | |
} | |
.mbm { | |
margin-bottom: 16px | |
} | |
.mbs { | |
margin-bottom: 8px | |
} | |
.mbxs { | |
margin-bottom: 4px | |
} | |
.mb0 { | |
margin-bottom: 0px | |
} | |
.mlxl { | |
margin-left: 64px | |
} | |
.mll { | |
margin-left: 32px | |
} | |
.mlm { | |
margin-left: 16px | |
} | |
.mls { | |
margin-left: 8px | |
} | |
.mlxs { | |
margin-left: 4px | |
} | |
.ml0 { | |
margin-left: 0px | |
} | |
.mrxl { | |
margin-right: 64px | |
} | |
.mrl { | |
margin-right: 32px | |
} | |
.mrm { | |
margin-right: 16px | |
} | |
.mrs { | |
margin-right: 8px | |
} | |
.mrxs { | |
margin-right: 4px | |
} | |
.mr0 { | |
margin-right: 0px | |
} | |
@keyframes busy { | |
0% { | |
background-position: 0 0 | |
} | |
100% { | |
background-position: 400px 400px | |
} | |
} | |
.button { | |
border: none; | |
min-height: 36px; | |
font-size: 16px; | |
cursor: pointer; | |
padding-left: 10px; | |
padding-right: 10px; | |
padding-top: 4px; | |
line-height: 150%; | |
color: #fff; | |
background-color: #cdcdcd; | |
font-size: 14px | |
} | |
.button--busy { | |
pointer-events: none; | |
background-color: #d0d0d0 !important; | |
overflow: hidden; | |
position: relative | |
} | |
.button--busy::after { | |
content: ''; | |
display: block; | |
position: absolute; | |
left: -10px; | |
bottom: 0px; | |
width: calc(100% + 10px); | |
box-sizing: border-box; | |
background-size: 400px 400px; | |
background-image: -webkit-linear-gradient(-45deg, #00ACC6 25%, transparent 25%, transparent 50%, #00ACC6 50%, #00ACC6 75%, transparent 75%, transparent); | |
height: 2px; | |
animation: busy 2s linear infinite | |
} | |
.button:hover { | |
background-color: #dadada | |
} | |
.button--medium { | |
font-size: 12.8px; | |
height: 32px | |
} | |
.button--small { | |
font-size: 12px; | |
height: 28px | |
} | |
.button--danger { | |
background-color: #ff5a5f | |
} | |
.button--danger:hover { | |
background-color: #ff7478 | |
} | |
.button--success { | |
background-color: #2ECE6A | |
} | |
.button--success:hover { | |
background-color: #41d578 | |
} | |
.button--dark { | |
background-color: #535353 | |
} | |
.button--dark:hover { | |
background-color: #797979 | |
} | |
.button--outline { | |
background-color: transparent; | |
color: #000; | |
border: 1px solid #cdcdcd | |
} | |
.button--outline:hover { | |
background-color: #f3f3f3 | |
} | |
.button--facebook { | |
background-color: #2d4386 | |
} | |
.footer { | |
background-color: #1a1a1a; | |
color: #fff; | |
padding: 30px 20px 15px 20px; | |
display: -ms-flexbox; | |
display: flex | |
} | |
.footer__left { | |
-ms-flex: 1; | |
flex: 1 | |
} | |
.footer__dahmakan { | |
width: 200px; | |
fill: #fff | |
} | |
.footer__leaf { | |
width: 10px | |
} | |
.footer__social { | |
width: 45px; | |
height: 45px | |
} | |
.header { | |
width: 100%; | |
height: 50px; | |
position: fixed; | |
top: 0px; | |
left: 0px; | |
z-index: 1; | |
background-color: #fff; | |
transform-origin: top | |
} | |
.header--show { | |
transform: scaleY(1); | |
transition: transform 0.2s ease | |
} | |
.header--hide { | |
transform: scaleY(0); | |
transition: transform 0.15s ease | |
} | |
.header__logo { | |
margin-top: 10px; | |
height: 40px | |
} | |
.header__dahmakan { | |
fill: #000; | |
width: 150px | |
} | |
.input { | |
border: 1px solid #cdcdcd; | |
padding: 9px; | |
box-sizing: border-box; | |
color: #333; | |
padding-left: 20px; | |
padding-right: 20px; | |
font-size: 14px | |
} | |
.input.input--center-ph::-webkit-input-placeholder { | |
text-align: center | |
} | |
.input.input--center-ph:-moz-placeholder { | |
text-align: center | |
} | |
.input.input--center-ph::-moz-placeholder { | |
text-align: center | |
} | |
.input.input--center-ph:-ms-input-placeholder { | |
text-align: center | |
} | |
.input--error { | |
border: 1px solid #ff5a5f | |
} | |
.logo { | |
position: relative | |
} | |
.logo__text { | |
margin-right: 3px; | |
margin-bottom: -1px; | |
fill: #fff | |
} | |
.logo__text--default-black { | |
width: 150px; | |
fill: #000 | |
} | |
.logo--green path { | |
fill: #2ECE6A | |
} | |
.logo--blue path { | |
fill: #00ACC6 | |
} | |
.logo--red path { | |
fill: #ff5a5f | |
} | |
.logo--orange path { | |
fill: #ffa400 | |
} | |
.logo--purple path { | |
fill: #8B199B | |
} | |
.modal { | |
margin: 0 auto; | |
position: relative; | |
z-index: 0; | |
opacity: 0; | |
pointer-events: none; | |
transition: opacity 0.3s ease | |
} | |
.modal--open { | |
z-index: 100; | |
pointer-events: all; | |
opacity: 1 | |
} | |
.modal__content { | |
z-index: 1; | |
background-color: #fff; | |
color: #000; | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%) | |
} | |
.modal__backdrop { | |
position: fixed; | |
background-color: rgba(0, 0, 0, 0.3); | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
z-index: 0 | |
} | |
.modal__close { | |
right: 20px; | |
top: 20px; | |
position: absolute | |
} | |
.modal__close-icon { | |
width: 20px; | |
height: 20px; | |
cursor: pointer | |
} | |
.well { | |
background-color: #fff; | |
padding: 20px; | |
margin-bottom: 20px | |
} | |
.prime-header { | |
padding-top: 15px; | |
padding-bottom: 10px; | |
position: relative; | |
background-color: white; | |
z-index: 1 | |
} | |
.prime-header--transparent { | |
background-color: trasparent | |
} | |
.prime-header__prime-logo { | |
width: 100px | |
} | |
.prime-header__back, .prime-header__next { | |
position: absolute; | |
color: #000; | |
top: calc(50% - 10px) | |
} | |
.prime-header__back-icon { | |
position: relative; | |
margin-right: 5px; | |
top: 4px | |
} | |
.prime-header__next-icon { | |
position: relative; | |
margin-left: 5px; | |
top: 4px | |
} | |
.prime-header__next { | |
right: 0px | |
} | |
.payment-provider { | |
width: 40px; | |
height: 25px; | |
display: inline-block; | |
background-size: 100% | |
} | |
.payment-provider--paypal { | |
background-image: url("/images/static/paypal.png") | |
} | |
.payment-provider--visacard { | |
background-image: url("/images/static/visacard.png") | |
} | |
.payment-provider--mastercard { | |
background-image: url("/images/static/mastercard.png") | |
} | |
.payment-provider--molpay { | |
background-image: url("/images/static/molpay.png") | |
} | |
.collapsible { | |
background-color: #fff | |
} | |
.collapsible__toggle { | |
border: none; | |
background: none | |
} | |
.collapsible__collapse { | |
width: 1.5em; | |
height: 1.5em | |
} | |
.collapsible__content { | |
overflow: hidden | |
} | |
.collapsible__content--collapsed { | |
max-height: 0px | |
} | |
@keyframes busy { | |
0% { | |
background-position: 0 0 | |
} | |
100% { | |
background-position: 400px 400px | |
} | |
} | |
.loading--candy-strip::after { | |
content: ''; | |
display: block; | |
width: 100%; | |
box-sizing: border-box; | |
background-size: 400px 400px; | |
background-image: -webkit-linear-gradient(-45deg, #00ACC6 25%, transparent 25%, transparent 50%, #00ACC6 50%, #00ACC6 75%, transparent 75%, transparent); | |
height: 2px; | |
animation: busy 2s linear infinite | |
} | |
.banner { | |
width: 100%; | |
margin-bottom: 15px; | |
position: relative; | |
display: none; | |
overflow: hidden | |
} | |
.banner--show { | |
display: -ms-flexbox; | |
display: flex | |
} | |
.banner__content { | |
-ms-flex: 1; | |
flex: 1; | |
width: 100%; | |
text-align: center; | |
margin: auto; | |
padding: 7px 30px; | |
font-size: 13px | |
} | |
.banner--error { | |
color: #fff; | |
background-color: #ff5a5f | |
} | |
.banner--error .banner__close-button { | |
background-color: #ff8d90 | |
} | |
.banner--success { | |
color: #fff; | |
background-color: #2ECE6A | |
} | |
.banner--success .banner__close-button { | |
background-color: #56d987 | |
} | |
.banner--info { | |
color: #fff; | |
background-color: #00ACC6 | |
} | |
.banner--info .banner__close-button { | |
background-color: #00d8f9 | |
} | |
.banner--warning { | |
color: #fff; | |
background-color: #ffa400 | |
} | |
.banner--warning .banner__close-button { | |
background-color: #ffb633 | |
} | |
.banner__close-button { | |
right: 0; | |
border: none; | |
padding: 4px; | |
-ms-flex: none; | |
flex: none | |
} | |
.banner__cross-icon { | |
width: 2.5em; | |
height: 2.5em; | |
fill: #fff | |
} | |
.landing { | |
font-size: 18px | |
} | |
.landing__title { | |
font-size: 36px; | |
padding-top: 45px | |
} | |
.landing__hero { | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
z-index: 0; | |
filter: brightness(70%); | |
width: 100% | |
} | |
.landing__overlay { | |
position: relative; | |
width: 100%; | |
height: 100% | |
} | |
.landing__section-title { | |
font-size: 32px; | |
font-family: SofiaPro; | |
line-height: 40px | |
} | |
.landing__paragraph { | |
max-width: 80%; | |
line-height: 120%; | |
margin-left: auto; | |
margin-right: auto | |
} | |
.prime__section { | |
padding-top: 40px; | |
padding-bottom: 40px | |
} | |
.prime__section-title { | |
font-family: SofiaPro; | |
font-weight: bold; | |
margin-bottom: 30px | |
} | |
.prime__section-hero { | |
background-size: cover; | |
padding-top: 45px | |
} | |
.prime__section-hero-title { | |
font-size: 32px; | |
margin-bottom: 12px | |
} | |
.prime__section-hero-subtitle { | |
font-size: 20px; | |
margin-bottom: 24px | |
} | |
.prime__section-savings { | |
padding-bottom: 0px | |
} | |
.prime__section-savings-icon-1, .prime__section-savings-icon-2, .prime__section-savings-icon-3 { | |
display: inline-block; | |
background: url("/images/static/prime-savings.png") no-repeat; | |
overflow: hidden; | |
text-indent: -9999px; | |
text-align: left; | |
transform: scale(0.65) | |
} | |
.prime__section-savings-icon-1 { | |
background-position: -0px -158px; | |
width: 156px; | |
height: 156px | |
} | |
.prime__section-savings-icon-2 { | |
background-position: -0px -314px; | |
width: 156px; | |
height: 156px | |
} | |
.prime__section-savings-icon-3 { | |
background-position: -0px -0px; | |
width: 158px; | |
height: 158px | |
} | |
.prime__section-faq { | |
background-color: #efefef | |
} | |
.prime__savings-item { | |
padding-left: 50px; | |
padding-right: 50px | |
} | |
.prime__savings-item-title { | |
color: #00ACC6; | |
font-size: 18px; | |
font-weight: bold | |
} | |
.prime__benefit-wrapper { | |
padding: 20px; | |
padding-top: 0px; | |
margin: 0 auto | |
} | |
.prime__benefit-wrapper-item--prominent { | |
-ms-flex: 1; | |
flex: 1 | |
} | |
.prime__benefit-wrapper-item--non-prominent { | |
-ms-flex: 1; | |
flex: 1; | |
margin-top: 30px | |
} | |
.prime__faq-wrapper { | |
background-color: #fff | |
} | |
.prime__faq-item-wrapper { | |
box-sizing: border-box; | |
padding: 10px; | |
padding-bottom: 0px; | |
vertical-align: top; | |
border: 10px solid #efefef | |
} | |
.login { | |
background-color: #efefef | |
} | |
.login .prime-header { | |
background-color: transparent | |
} | |
.checkout { | |
background-color: #efefef | |
} | |
.checkout .prime-header { | |
background-color: transparent | |
} | |
.download-app { | |
max-width: 200px | |
} | |
.download-app--small { | |
max-width: 180px | |
} | |
.food-type__image { | |
width: 20vw; | |
height: 20vw; | |
max-width: 180px; | |
max-height: 180px | |
} | |
.food-type__caption { | |
font-size: 17px; | |
font-weight: bold | |
} | |
.food-type__logo-container { | |
margin-top: 16px; | |
margin-bottom: 16px | |
} | |
@keyframes scroll-indicator-anim { | |
0%, 100% { | |
transform: translateY(0px) | |
} | |
50% { | |
transform: translateY(-20px) | |
} | |
} | |
.section-hero { | |
height: 620px; | |
background-image: url("/images/static/hero.jpg"); | |
width: 100%; | |
background-size: cover; | |
background-position: center center; | |
transform-origin: bottom | |
} | |
.section-hero--with-video { | |
background-image: none; | |
overflow: hidden; | |
height: 100vh; | |
width: 100vw | |
} | |
.section-hero__video { | |
position: absolute; | |
z-index: -1; | |
left: 0; | |
top: 0; | |
width: 100vw | |
} | |
.section-hero__logo { | |
padding-top: 35px | |
} | |
.section-hero__logo-text { | |
width: 190px | |
} | |
.section-hero__intro { | |
margin-top: 160px | |
} | |
.section-hero__intro-text { | |
font-size: 56px; | |
font-family: SofiaProSemiBold | |
} | |
.section-hero__btn { | |
width: 216px; | |
font-size: 16px; | |
height: 40px | |
} | |
.section-hero__download { | |
width: 100%; | |
position: absolute; | |
bottom: 40px | |
} | |
.section-hero__download-ios { | |
margin-right: 32px | |
} | |
.section-hero__hero-overlay { | |
background: rgba(0, 0, 0, 0.3) | |
} | |
.section-hero__hero-overlay--with-video { | |
background: rgba(0, 0, 0, 0.2) | |
} | |
.section-hero__subtitle, .section-hero__mobile-subtitle { | |
font-size: 20px | |
} | |
.section-hero__subtitle { | |
line-height: 130% | |
} | |
.section-hero__scroll-indicator-wrap { | |
position: absolute; | |
right: 30px; | |
bottom: -30px; | |
z-index: 1 | |
} | |
.section-hero__scroll-indicator { | |
width: 60px; | |
animation: scroll-indicator-anim 2000ms infinite | |
} | |
.section-hero--onboarding { | |
background-position: center 80% | |
} | |
.section-hero--delicious-lunch-colleagues-v11 { | |
background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.1.jpg") | |
} | |
.section-hero--delicious-lunch-colleagues-v12 { | |
background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.2.jpg"); | |
background-position-y: -1750px; | |
background-size: 1910px | |
} | |
.section-hero--delicious-lunch-colleagues-v13 { | |
background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.3.jpg"); | |
background-position-y: 60% | |
} | |
.section-hero--delicious-lunch-colleagues-v14 { | |
background-image: url("/images/static/hero-delicious-lunch-colleagues-v1.4.jpg") | |
} | |
.section-hero--delicious-dinner-friends-v11 { | |
background-image: url("/images/static/hero-delicious-dinner-friends-v1.1.jpg") | |
} | |
.section-hero--delicious-dinner-friends-v12 { | |
background-image: url("/images/static/hero-delicious-dinner-friends-v1.2.jpg") | |
} | |
.section-hero--delicious-dinner-friends-v12 .landing__hero__intro { | |
margin-top: 90px | |
} | |
.section-hero--delicious-dinner-at-home-v11 { | |
background-image: url("/images/static/hero-delicious-dinner-at-home-v1.1.jpg"); | |
background-position: center 20% | |
} | |
.section-hero--delicious-dinner-at-home-v12 { | |
background-image: url("/images/static/hero-delicious-dinner-at-home-v1.2.jpg") | |
} | |
.section-hero--delicious-packages-v11 { | |
background-image: url("/images/static/hero-delicious-packages-v1.1.jpg") | |
} | |
.section-hero--delicious-packages-v12 { | |
background-image: url("/images/static/hero-delicious-packages-v1.2.jpg") | |
} | |
.section-dishes { | |
padding-top: 100px; | |
padding-bottom: 55px | |
} | |
.section-dishes__paragraph { | |
font-size: 120%; | |
line-height: 120%; | |
padding-left: 50px; | |
padding-right: 50px | |
} | |
.section-dishes__title { | |
width: 515px; | |
margin: 0 auto | |
} | |
.section-app { | |
background-color: #edebec; | |
display: -ms-flexbox; | |
display: flex | |
} | |
.section-app__content { | |
-ms-flex: 1; | |
flex: 1; | |
padding-left: 30px; | |
max-width: 50% | |
} | |
.section-app__background-wrapper { | |
-ms-flex: 1; | |
flex: 1 | |
} | |
.section-app__background { | |
max-width: 620px; | |
min-width: 300px; | |
width: 100%; | |
float: right | |
} | |
.section-app__padder { | |
max-height: 155px; | |
height: 10vw | |
} | |
.section-app__small-padder { | |
max-height: 64px; | |
height: 5vw | |
} | |
.section-delivered { | |
height: 619px; | |
background-image: url("/images/static/blue-section.jpg"); | |
display: -ms-flexbox; | |
display: flex; | |
background-size: cover; | |
background-position: center center | |
} | |
.section-delivered__background { | |
width: 100%; | |
position: absolute; | |
z-index: 0; | |
margin: auto | |
} | |
.section-delivered__btn { | |
width: 180px | |
} | |
.section-corporate { | |
height: 500px; | |
padding-top: 135px; | |
background-image: url("/images/static/lunchbox.jpg"); | |
display: -ms-flexbox; | |
display: flex; | |
background-size: cover; | |
background-position: center center | |
} | |
.section-corporate__title { | |
width: 70% | |
} | |
.section-corporate__background { | |
width: 100%; | |
position: absolute; | |
z-index: 0; | |
margin: auto | |
} | |
.section-corporate__btn { | |
width: 180px; | |
font-family: SofiaPro | |
} | |
.section-footer { | |
padding-top: 115px | |
} | |
.section-footer__background { | |
background-image: url("/images/static/kl-skyline.png"); | |
background-size: cover; | |
background-position: center bottom; | |
height: 430px; | |
margin-bottom: -10px | |
} | |
.section-footer__btn { | |
width: 180px; | |
font-family: SofiaPro | |
} | |
.section__testimonials { | |
padding-top: 90px; | |
padding-bottom: 60px; | |
text-align: center | |
} | |
.section__testimonials__nav-btn { | |
border: none; | |
background: none; | |
cursor: pointer; | |
outline: none | |
} | |
.section__testimonials__nav-btn--prev { | |
width: 25px; | |
margin-left: -60px | |
} | |
.section__testimonials__nav-btn--next { | |
width: 25px; | |
margin-right: -60px | |
} | |
.section__testimonials__content { | |
-ms-flex: 1; | |
flex: 1; | |
overflow: hidden | |
} | |
.section__testimonials__title { | |
font-weight: bold; | |
margin-bottom: 50px | |
} | |
.section__testimonials__page { | |
background-color: #fff; | |
display: -ms-flexbox; | |
display: flex | |
} | |
.section__testimonials__page .slider { | |
margin: 0 auto | |
} | |
.section__testimonials .slider { | |
margin: 0 auto | |
} | |
.section__testimonials .slider-frame { | |
min-height: 290px | |
} | |
.section__testimonials-item { | |
-ms-flex: 1; | |
flex: 1; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
padding: 20px | |
} | |
.section__testimonials-item__leaf { | |
margin-bottom: 10px; | |
width: 35px | |
} | |
.section__testimonials-item__text { | |
padding-bottom: 10px; | |
border-bottom: 1px solid #ababab; | |
-ms-flex: 1; | |
flex: 1 | |
} | |
.section__testimonials-item__info { | |
padding: 8px | |
} | |
.section__testimonials-item__footer { | |
display: -ms-flexbox; | |
display: flex; | |
padding-top: 30px; | |
margin: 0 auto | |
} | |
.section__testimonials-item__name { | |
font-weight: bold; | |
font-family: SofiaPro | |
} | |
.section__testimonials-item__date { | |
font-size: 80%; | |
color: #ababab | |
} | |
.section__testimonials-item__avatar--alberto-ayala, .section__testimonials-item__avatar--alvin-george, .section__testimonials-item__avatar--ariel-silt, .section__testimonials-item__avatar--catherine, .section__testimonials-item__avatar--claire-horn, .section__testimonials-item__avatar--danielle { | |
display: inline-block; | |
background: url("/images/static/testimonials.png") no-repeat; | |
overflow: hidden; | |
text-indent: -9999px; | |
text-align: left | |
} | |
.section__testimonials-item__avatar--alberto-ayala { | |
background-position: -0px -0px; | |
width: 43px; | |
height: 43px | |
} | |
.section__testimonials-item__avatar--alvin-george { | |
background-position: -43px -0px; | |
width: 43px; | |
height: 43px | |
} | |
.section__testimonials-item__avatar--ariel-silt { | |
background-position: -0px -43px; | |
width: 43px; | |
height: 43px | |
} | |
.section__testimonials-item__avatar--catherine { | |
background-position: -43px -43px; | |
width: 43px; | |
height: 43px | |
} | |
.section__testimonials-item__avatar--claire-horn { | |
background-position: -0px -86px; | |
width: 43px; | |
height: 43px | |
} | |
.section__testimonials-item__avatar--danielle { | |
background-position: -43px -86px; | |
width: 43px; | |
height: 43px | |
} | |
.section__badges { | |
padding: 70px 100px | |
} | |
.section__badges__title { | |
font-size: 32px; | |
font-family: SofiaPro; | |
margin-bottom: 30px | |
} | |
.section__badges__content { | |
display: -ms-flexbox; | |
display: flex; | |
margin: 0 auto | |
} | |
.section__badges__icon { | |
display: inline-block; | |
background: url("/images/static/badges.png") no-repeat; | |
overflow: hidden; | |
text-indent: -9999px; | |
text-align: left | |
} | |
.section__badges__icon--daily { | |
background-position: -0px -0px; | |
width: 150px; | |
height: 150px | |
} | |
.section__badges__icon--delivered { | |
background-position: -0px -150px; | |
width: 150px; | |
height: 150px | |
} | |
.section__badges__icon--delivery { | |
background-position: -0px -300px; | |
width: 150px; | |
height: 150px | |
} | |
.section__badges__text { | |
margin-top: 16px | |
} | |
.prime-benefit { | |
padding: 20px; | |
background-color: #fff; | |
color: #8B898D; | |
border-top: 6px solid #00ACC6; | |
font-size: 15px; | |
max-width: 300px | |
} | |
.prime-benefit:hover { | |
box-shadow: 5px 5px 5px rgba(45, 45, 45, 0.3) | |
} | |
.prime-benefit--prominent { | |
padding-top: 50px; | |
padding-bottom: 50px | |
} | |
.prime-benefit__title { | |
font-size: 60px; | |
font-family: SofiaProSemiBold | |
} | |
.prime-benefit__price { | |
font-family: SofiaProSemiBold; | |
font-size: 24px | |
} | |
.prime-benefit__saving { | |
color: #00ACC6 | |
} | |
.prime-benefit__descriptions { | |
min-height: 110px | |
} | |
.prime-benefit__button { | |
border: 1px solid #8B898D; | |
padding: 15px; | |
padding-top: 12px; | |
padding-bottom: 12px; | |
background-color: #fff; | |
border-radius: 3px; | |
font-size: 16px; | |
width: 170px | |
} | |
.prime-benefit__button--prominent { | |
background-color: #00ACC6; | |
color: #fff; | |
border: 1px solid transparent | |
} | |
.help-popup { | |
position: relative; | |
display: -ms-inline-flexbox; | |
display: inline-flex; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
text-align: center | |
} | |
.help-popup--as-modal .help-popup__content { | |
bottom: auto; | |
position: fixed; | |
left: 50%; | |
transform: translate(-50%, -50%) | |
} | |
.help-popup--as-modal .help-popup__backdrop { | |
opacity: 0.2; | |
background-color: #000 | |
} | |
.help-popup__content { | |
position: absolute; | |
bottom: 20px; | |
transform: translateX(-46%); | |
margin: auto; | |
transition: opacity 0.25s; | |
z-index: 3 | |
} | |
.help-popup__content--hide { | |
opacity: 0; | |
pointer-events: none | |
} | |
.help-popup__content--show { | |
opacity: 1; | |
pointer-events: all | |
} | |
.help-popup__trigger { | |
cursor: pointer | |
} | |
.help-popup__backdrop { | |
position: fixed; | |
z-index: 2; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0 | |
} | |
.faq-item { | |
background-color: #fff; | |
padding: 30px | |
} | |
.faq-item__question { | |
font-family: SofiaProSemiBold; | |
margin-bottom: 10px | |
} | |
.prime-footer { | |
background-color: #000; | |
padding: 20px; | |
color: #fff; | |
position: relative | |
} | |
.prime-footer__apps { | |
float: left | |
} | |
.prime-footer__app-button { | |
width: 120px | |
} | |
.prime-footer__logo-wrapper { | |
text-align: center; | |
position: absolute; | |
left: 50%; | |
transform: translateX(-50%); | |
top: 15px | |
} | |
.prime-footer__logo { | |
width: 100px | |
} | |
.prime-footer__socials { | |
float: right | |
} | |
.prime-footer__social-icon { | |
width: 1.5em; | |
height: 1.5em; | |
color: #fff | |
} | |
.auth-panel { | |
padding: 20px; | |
padding-top: 0px; | |
font-size: 20px; | |
width: 530px; | |
margin: 0 auto; | |
margin-top: 20px; | |
background-color: #fff; | |
border-top: 6px solid #00ACC6 | |
} | |
.auth-panel__tab-header { | |
background: none; | |
padding: 10px; | |
border: none; | |
font-size: 15px; | |
border-bottom: 1px solid #d6d6d6; | |
width: 50%; | |
color: #8B898D; | |
outline: none | |
} | |
.auth-panel__tab-header--active { | |
border-bottom: none; | |
border-left: 1px solid #d6d6d6; | |
border-right: 1px solid #d6d6d6; | |
border-top: 1px solid #d6d6d6; | |
color: #000; | |
font-family: SofiaProSemiBold | |
} | |
.auth-panel__login, .auth-panel__register { | |
width: 80%; | |
margin: 0 auto | |
} | |
.auth-panel__title { | |
font-family: SofiaProSemiBold | |
} | |
.auth-panel__errors { | |
background-color: #ffeaeb; | |
margin-top: 20px; | |
font-size: small; | |
padding: 10px | |
} | |
.auth-panel__error-icon { | |
margin-right: 10px; | |
position: relative; | |
top: 1px | |
} | |
.auth-panel__notice-board { | |
padding: 30px; | |
font-size: small | |
} | |
.auth-panel__separator { | |
display: block; | |
font-weight: bold | |
} | |
.auth-panel__separator-text { | |
position: relative; | |
background-color: #fff; | |
display: inline; | |
z-index: 1 | |
} | |
.auth-panel__separator::after { | |
content: ''; | |
display: block; | |
margin: auto; | |
margin-top: -12px; | |
position: relative; | |
width: 90%; | |
border-bottom: 1px solid #cdcdcd | |
} | |
.discount-code-form__cancel-button { | |
width: 150px; | |
margin-top: 4px | |
} | |
.payment-method-item { | |
padding-top: 5px; | |
padding-bottom: 5px | |
} | |
.payment-method-item__button { | |
width: 20px; | |
height: 20px | |
} | |
.payment-method-picker { | |
margin-bottom: 10px | |
} | |
.payment-method-picker>li:last-child { | |
border-bottom: 1px solid #d8d7d8 | |
} | |
.payment-method-picker__card { | |
-ms-flex-align: center; | |
align-items: center; | |
border-top: 1px solid #d8d7d8 | |
} | |
.payment-method-picker__button { | |
border: none; | |
background: none | |
} | |
.payment-method-picker__button-icon { | |
width: 2em; | |
height: 2em | |
} | |
.add-payment-method__button { | |
height: auto; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-align: center; | |
align-items: center; | |
width: 300px | |
} | |
.add-payment-method__icon { | |
transform: scale(0.9) | |
} | |
.add-payment-method__button-text { | |
color: #8B898D | |
} | |
.prime-payment-confirm { | |
width: 50%; | |
min-width: 500px; | |
margin: auto; | |
text-align: center; | |
font-size: 14px; | |
background-color: #fff; | |
color: #8B898D | |
} | |
.prime-payment-confirm__header { | |
background: #00ACC6; | |
color: #fff; | |
padding: 30px | |
} | |
.prime-payment-confirm__item-description { | |
width: 100% | |
} | |
.prime-payment-confirm__item-description thead tr { | |
border-bottom: 1px solid #cdcdcd | |
} | |
.prime-payment-confirm__item-description tr { | |
line-height: 190% | |
} | |
.prime-payment-confirm__order-summary { | |
width: 50%; | |
float: right; | |
color: #535353 | |
} | |
.prime-payment-confirm__order-summary tr { | |
line-height: 175% | |
} | |
.prime-payment-confirm__order-summary td { | |
text-align: right | |
} | |
.prime-payment-confirm__smart-reload { | |
background-color: #efefef; | |
padding: 13px; | |
margin-top: 5px; | |
margin-bottom: 20px | |
} | |
.prime-payment-confirm__apps { | |
background-color: #efefef | |
} | |
.prime-payment-confirm__app-button { | |
width: 150px | |
} | |
.cart__gray { | |
background-color: #efefef | |
} | |
.cart__image { | |
max-width: 200px | |
} | |
.cart--empty { | |
background-color: #fff; | |
text-align: center; | |
padding: 50px; | |
width: 50%; | |
margin: auto; | |
margin-top: 50px | |
} | |
.cart__help { | |
width: 0.75em; | |
height: 0.75em; | |
margin-right: 10px | |
} | |
.cart__smart-reload-tooltip { | |
width: 300px; | |
background-color: #535353; | |
color: #fff; | |
padding: 15px; | |
border-radius: 4px; | |
font-size: 14px; | |
line-height: 120% | |
} | |
.cart .order-summary { | |
padding: 0px | |
} | |
.hosted-field { | |
height: 35px; | |
box-sizing: border-box; | |
width: 100%; | |
padding: 10px; | |
display: inline-block; | |
font-size: 14px; | |
border: 1px solid #cdcdcd; | |
line-height: 20px | |
} | |
.braintree-hosted-fields-invalid { | |
border-color: #ff5a5f | |
} | |
.braintree-hosted-fields-valid { | |
border-color: #2ECE6A | |
} | |
.add-credit-card__form--busy { | |
display: none | |
} | |
.order-summary { | |
background-color: transparent | |
} | |
.show-payment-method__change { | |
width: 100%; | |
max-width: 140px; | |
margin-top: 10px | |
} | |
.list-payment-methods__cancel { | |
width: 100px | |
} | |
.list-payment-methods__add { | |
width: 230px | |
} | |
@media (min-width: 1368px) { | |
.section-hero__logo { | |
padding-top: 65px | |
} | |
.section-hero--onboarding .section-hero__intro { | |
margin-top: 25vh | |
} | |
.section-hero__download { | |
bottom: 80px | |
} | |
} | |
@media (min-width: 651px) and (max-width: 900px) and (max-width: 769px) { | |
.checkout__container { | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-direction: column; | |
flex-direction: column | |
} | |
.checkout__user-info { | |
-ms-flex-order: 2; | |
order: 2 | |
} | |
} | |
@media (min-width: 651px) and (max-width: 900px) { | |
.section-hero { | |
background-position: center bottom | |
} | |
.section-hero--delicious-lunch-colleagues-v12 { | |
background-size: 1550px | |
} | |
.section-hero--delicious-lunch-colleagues-v13 { | |
background-size: 1120px | |
} | |
.section__testimonials__content { | |
height: auto | |
} | |
.section__testimonials__page { | |
display: block; | |
padding-left: 20px; | |
padding-right: 20px | |
} | |
.section__testimonials__title { | |
margin-bottom: 20px | |
} | |
.section__testimonials .slider-list { | |
min-height: 550px !important | |
} | |
.section__testimonials-item__footer { | |
padding-top: 10px | |
} | |
.prime-payment-confirm { | |
width: 75% | |
} | |
.prime-benefit { | |
padding-left: 20px; | |
padding-right: 20px | |
} | |
.prime-benefit__descriptions { | |
min-height: 150px | |
} | |
} | |
@media (min-width: 651px) and (max-width: 900px) and (orientation: landscape) { | |
.section-hero { | |
height: auto | |
} | |
.section-hero__logo-text { | |
width: 120px | |
} | |
.section-hero__logo { | |
padding-top: 20px | |
} | |
.section-hero__intro { | |
margin-top: 40px | |
} | |
.section-hero__intro-text { | |
font-size: 40px | |
} | |
.section-hero__subtitle, .section-hero__mobile-subtitle { | |
font-size: 18px | |
} | |
.section-hero__download { | |
margin-top: 30px; | |
margin-bottom: 30px; | |
position: static | |
} | |
} | |
@media (min-width: 300px) and (max-width: 650px) { | |
.button { | |
min-height: 32px; | |
font-size: 13px | |
} | |
.button--bigger-on-mobile { | |
padding-top: 16px; | |
padding-bottom: 16px; | |
height: auto; | |
font-weight: bold | |
} | |
.footer { | |
padding: 10px; | |
padding-bottom: 5px; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-align: center; | |
align-items: center | |
} | |
.footer__left { | |
-ms-flex: 1; | |
flex: 1 | |
} | |
.footer__dahmakan { | |
width: 100px | |
} | |
.footer__leaf { | |
width: 5px | |
} | |
.footer__social { | |
width: 30px; | |
height: 30px | |
} | |
.header { | |
height: 40px | |
} | |
.header__logo { | |
margin-top: 10px | |
} | |
.header__dahmakan { | |
width: 120px | |
} | |
.prime-header { | |
background-color: #fff; | |
border-bottom: 2px solid #e7e7e7; | |
box-shadow: 0px 0px 3px #8B898D; | |
padding-bottom: 10px | |
} | |
.prime-header__prime-logo { | |
width: 80px | |
} | |
.prime-header__back-icon, .prime-header__next-icon { | |
top: -2px; | |
width: 1.5em; | |
height: 1.5em | |
} | |
.prime-header__back-text, .prime-header__next-text { | |
display: none | |
} | |
.prime-header__next { | |
right: 15px | |
} | |
.banner { | |
margin-bottom: 0px | |
} | |
.modal__content { | |
transform: translate(-50%, -50%) | |
} | |
.landing { | |
overflow-x: hidden | |
} | |
.landing__title { | |
font-size: 20px; | |
padding-top: 42px; | |
font-family: SofiaProLight | |
} | |
.landing__text-primary { | |
font-size: 28px; | |
line-height: 34px; | |
width: 220px; | |
margin: 0 auto | |
} | |
.landing__section-title { | |
font-size: 21px; | |
line-height: 26px | |
} | |
.landing__paragraph { | |
font-size: 15px | |
} | |
.checkout__container { | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-direction: column; | |
flex-direction: column | |
} | |
.checkout__user-info { | |
-ms-flex-order: 2; | |
order: 2 | |
} | |
.checkout .prime-header { | |
background-color: #fff | |
} | |
.prime__section { | |
width: 100%; | |
padding-top: 30px; | |
padding-bottom: 30px | |
} | |
.prime__section-hero { | |
background-position: 75% | |
} | |
.prime__section-title { | |
font-size: 1.5em; | |
line-height: 120%; | |
padding-left: 16px; | |
padding-right: 16px | |
} | |
.prime__section-faq { | |
padding-top: 32px; | |
padding-bottom: 16px | |
} | |
.prime__benefit-wrapper { | |
-ms-flex-direction: column; | |
flex-direction: column; | |
margin: 10px auto; | |
padding: 0px; | |
display: block; | |
width: 100%; | |
padding: 0px 24px | |
} | |
.prime__section-savings { | |
background-color: #fff | |
} | |
.prime__section-savings-wrapper { | |
margin-top: 0px; | |
margin-bottom: 0px | |
} | |
.prime__faq-item-wrapper { | |
width: 100%; | |
display: block | |
} | |
.login .prime-header { | |
background-color: #fff | |
} | |
.download-app { | |
max-width: 140px; | |
border: 1px solid #fff; | |
border-radius: 8px | |
} | |
.download-app--small { | |
max-width: 140px | |
} | |
.download-app--black { | |
border: none | |
} | |
.food-type { | |
width: 150px; | |
margin-bottom: 30px | |
} | |
.food-type__image { | |
width: 120px; | |
height: 120px | |
} | |
.food-type__caption { | |
font-size: 13px; | |
font-weight: bold | |
} | |
.food-type__logo-container { | |
margin-top: 0px; | |
margin-bottom: 0px | |
} | |
.food-type__dahmakan-logo { | |
transform: scale(0.7) | |
} | |
.section-hero { | |
height: 652px; | |
background-position: 46.5% center | |
} | |
.section-hero--with-video { | |
height: 100vh; | |
width: 100vw | |
} | |
.section-hero__video { | |
margin-left: -90%; | |
height: 100%; | |
width: auto | |
} | |
.section-hero__intro { | |
margin-top: 95px; | |
line-height: 260% | |
} | |
.section-hero__intro-text { | |
font-size: 36px; | |
text-align: center | |
} | |
.section-hero__btn { | |
width: 250px; | |
height: 35px; | |
font-size: 18px | |
} | |
.section-hero__hero-overlay { | |
background: rgba(0, 0, 0, 0.25) | |
} | |
.section-hero__download { | |
bottom: 80px | |
} | |
.section-hero__download-ios { | |
margin-right: 8px | |
} | |
.section-hero__logo-text { | |
width: 120px | |
} | |
.section-hero__mobile-subtitle { | |
line-height: 130%; | |
font-size: 18px | |
} | |
.section-hero__scroll-indicator-wrap { | |
display: none | |
} | |
.section-hero--delicious-lunch-colleagues-v12 { | |
background-position: center bottom; | |
background-size: 1700px | |
} | |
.section-hero--delicious-dinner-friends-v12 { | |
background-position-x: 70% | |
} | |
.section-hero--delicious-dinner-friends-v12 .landing__hero__intro { | |
margin-top: 145px | |
} | |
.section-hero--delicious-dinner-at-home-v11 .landing__hero__intro-text { | |
font-size: 8vw; | |
line-height: 115% | |
} | |
.section-hero--delicious-dinner-at-home-v12 { | |
background-position-x: 30% | |
} | |
.section-hero--delicious-packages-v11 { | |
background-position-x: 50% | |
} | |
.section-dishes { | |
padding-top: 50px; | |
padding-bottom: 30px | |
} | |
.section-dishes__title { | |
width: 360px | |
} | |
.section-dishes__food-list { | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
padding-top: 45px | |
} | |
.section-app { | |
display: block | |
} | |
.section-app__title { | |
margin-bottom: 8px | |
} | |
.section-app__content { | |
padding-top: 75px; | |
padding-left: 0px; | |
padding-bottom: 50px; | |
max-width: 100% | |
} | |
.section-app__phone { | |
height: 330px; | |
margin-bottom: 10px | |
} | |
.section-delivered { | |
height: 650px; | |
background-image: url("/images/static/blue-mobile.jpg"); | |
display: -ms-flexbox; | |
display: flex; | |
background-position: center bottom; | |
position: relative | |
} | |
.section-delivered__btn { | |
width: 160px | |
} | |
.section-delivered__paragraph { | |
max-width: 100% | |
} | |
.section-delivered__wrapper { | |
margin-bottom: 75vw; | |
transform: translateY(20px) | |
} | |
.section-corporate { | |
background-size: 1080px; | |
background-position: center bottom; | |
padding: 35px 0px 95px 0px; | |
height: 385px | |
} | |
.section-corporate__content { | |
margin-top: 5% | |
} | |
.section-corporate__title { | |
width: 70% | |
} | |
.section-corporate__paragraph { | |
font-size: 15px; | |
line-height: 120%; | |
max-width: 380px | |
} | |
.section-corporate__btn { | |
width: 160px; | |
margin-top: 0px | |
} | |
.section-footer { | |
padding-top: 95px | |
} | |
.section-footer__title { | |
width: 290px | |
} | |
.section-footer__paragraph { | |
font-size: 15px; | |
width: 240px | |
} | |
.section-footer__background { | |
height: 260px | |
} | |
.section__testimonials { | |
padding-top: 50px; | |
padding-bottom: 50px | |
} | |
.section__testimonials__title { | |
font-family: SofiaPro; | |
font-size: 35px; | |
width: 70%; | |
margin: 0 auto | |
} | |
.section__testimonials__content { | |
height: auto | |
} | |
.section__testimonials__page { | |
display: block; | |
padding-left: 20px; | |
padding-right: 20px | |
} | |
.section__testimonials__nav-btn--next { | |
margin-right: -10px | |
} | |
.section__testimonials__nav-btn--prev { | |
margin-left: -10px | |
} | |
.section__testimonials .slider-list { | |
min-height: 95vh !important | |
} | |
.section__testimonials-item__footer { | |
padding-top: 10px | |
} | |
.section__badges { | |
padding: 70px 70px | |
} | |
.section__badges__title { | |
font-size: 32px; | |
font-family: SofiaPro; | |
margin-bottom: 30px | |
} | |
.section__badges__content { | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
margin: 0 auto | |
} | |
.section__badges__text { | |
margin-top: 10px; | |
margin-bottom: 30px | |
} | |
.prime-payment-confirm { | |
width: 100%; | |
min-width: auto; | |
background-color: transparent; | |
margin-top: -20px | |
} | |
.prime-payment-confirm__details { | |
padding: 16px; | |
padding-top: 32px | |
} | |
.prime-payment-confirm__order-number { | |
font-size: 120%; | |
margin-top: 10px | |
} | |
.prime-payment-confirm__item-description td { | |
padding-top: 5px; | |
padding-bottom: 5px | |
} | |
.prime-payment-confirm__smart-reload { | |
margin: 0px; | |
margin-bottom: 20px; | |
background-color: #e2e2e2 | |
} | |
.prime-payment-confirm__payment-method { | |
margin-top: 14px | |
} | |
.prime-payment-confirm__start-ordering { | |
padding-top: 16px; | |
padding-bottom: 16px; | |
height: auto; | |
font-weight: bold | |
} | |
.prime-payment-confirm__apps { | |
display: -ms-flexbox; | |
display: flex | |
} | |
.prime-payment-confirm__app-button { | |
width: 100% | |
} | |
.discount-code-form { | |
margin-bottom: 14px; | |
padding-bottom: 14px | |
} | |
.discount-code-form__label { | |
font-weight: bold; | |
margin-bottom: 8px | |
} | |
.cart { | |
margin-bottom: 14px; | |
margin-top: 14px | |
} | |
.cart__smart-reload-desc { | |
margin-bottom: 0px | |
} | |
.cart--empty { | |
padding: 0px; | |
background-color: transparent; | |
width: 100% | |
} | |
.user-info { | |
margin-bottom: 14px | |
} | |
.payment { | |
margin-bottom: 0px | |
} | |
.order-summary { | |
margin-bottom: 14px; | |
padding-top: 15px; | |
padding-bottom: 5px | |
} | |
.show-payment-method__change { | |
margin-top: 10px; | |
width: 140px | |
} | |
.place-order-button { | |
width: calc(100% - 32px); | |
padding-top: 16px; | |
padding-bottom: 16px; | |
height: auto; | |
font-weight: bold | |
} | |
.payment-method-picker__card { | |
height: 70px | |
} | |
.add-payment-method__list { | |
margin-top: 20px | |
} | |
.add-payment-method__button { | |
width: 100%; | |
height: 40px | |
} | |
.add-payment-method__button-text { | |
width: 100%; | |
color: #8B898D; | |
font-size: 115% | |
} | |
.add-credit-card__form { | |
margin-top: 10px | |
} | |
.molpay-warning { | |
padding: 20px; | |
width: 90vw | |
} | |
.molpay-warning__content { | |
line-height: 120% | |
} | |
.auth-panel { | |
margin: 0px; | |
padding: 0px; | |
width: 100%; | |
margin-top: 0px; | |
border: none | |
} | |
.auth-panel__notice-board { | |
background-color: #efefef; | |
font-size: 0.75em; | |
color: #8B898D | |
} | |
.auth-panel__tab-strip { | |
padding-top: 24px | |
} | |
.auth-panel__tab-header { | |
height: 50px | |
} | |
.auth-panel__errors { | |
padding-top: 20px; | |
font-size: 0.75em; | |
padding-bottom: 20px | |
} | |
.auth-panel__login, .auth-panel__register { | |
padding: 16px; | |
margin: 0px; | |
width: 100%; | |
padding-bottom: 16px | |
} | |
.auth-panel__login .input, .auth-panel__register .input { | |
height: 40px; | |
margin-bottom: 8px | |
} | |
.prime-benefit { | |
max-width: 100%; | |
width: 100%; | |
margin-bottom: 24px; | |
padding: 20px | |
} | |
.prime-benefit__descriptions { | |
margin-bottom: 24px; | |
min-height: auto | |
} | |
.prime-benefit__button { | |
width: 100% | |
} | |
.prime-footer__container { | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-direction: column; | |
flex-direction: column | |
} | |
.prime-footer__apps { | |
display: inline-block; | |
width: 100%; | |
float: none; | |
text-align: center; | |
-ms-flex-order: 2; | |
order: 2; | |
margin-top: 10px; | |
margin-bottom: 10px | |
} | |
.prime-footer__logo-wrapper { | |
position: static; | |
left: 0px; | |
transform: none; | |
-ms-flex-order: 1; | |
order: 1 | |
} | |
.prime-footer__socials { | |
float: none; | |
display: inline-block; | |
width: 100%; | |
text-align: center; | |
-ms-flex-order: 3; | |
order: 3 | |
} | |
} | |
@media (min-width: 300px) and (max-width: 650px) and (orientation: landscape) { | |
.section-hero { | |
height: auto | |
} | |
.section-hero__logo-text { | |
width: 120px | |
} | |
.section-hero__logo { | |
padding-top: 20px | |
} | |
.section-hero__intro { | |
margin-top: 40px | |
} | |
.section-hero__intro-text { | |
font-size: 40px | |
} | |
.section-hero__subtitle, .section-hero__mobile-subtitle { | |
font-size: 18px | |
} | |
.section-hero__download { | |
margin-top: 30px; | |
margin-bottom: 30px; | |
position: static | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment